0 条评论

在我们实际开发中，前端大部分时候都是需要等待后端的数据接口，所以会自己mock 数据也是非常必要的。

所谓的mock数据，就是在本地建立一个自己数据库，然后访问这些模拟数据，使得开发过程中可以看到与调用真是的数据一样的效果。使用mock，就可以提高整个项目的开发效率（不需要停下项目的开发等待后端的数据接口）。当开发完成后我们也只需要将模拟的地址localhost:8888，改成真实的地址就可以了。

mock数据需要的json-server

使用mock数据需要开启一个服务来作为数据服务器，我们这儿使用的是json-server。

$ npm i -g json-server --D
//测试是否安装成功
$ json-server -v

 新建mock数据

在项目的根目录新建一个mock目录，用来存放我们需要使用的数据。我的项目中主要使用了三个数据：goods.js、rating.js、seller.js，还需要一个mock.js作为数据的出口文件（这个文件自定义，名字可以随便）。

在数据文件goods.js、rating.js、seller.js里面添加数据：

module.exports = {
    "name": "粥品香坊（回龙观）",
    "description": "蜂鸟专送",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90
    }

 出口文件mock.js的代码：

//引入数据模块调用
var goods = require('./goods.js');
var ratings = require('./ratings.js');
var seller = require('./seller.js');
//暴露一个返回值
module.exports = function(){
  return {
    "goods": goods,
    "ratings": ratings,
    "seller": seller
  }
}

 

 webpack.config.js的配置：(这儿只是mock数据的配置，完整项目还是需要配完整的，要看完整的可以看前面写文章)

module.exports = {
    devServer:{
       proxy:{
         '/rest/*':{
        target: 'http://localhost:8888',
        secure:false,
        pathRewrite: {
          '^/rest': ''
        }
      }  
    }

 rest:自定义的，只是用来访问数据的参数，由于mvvm框架是遵循RESTFUL模式的，所以这儿用的rest。

访问地址时url: /rest/list    就相当于 localhost:8888/list

axios.get('/res/list')  = axios.get('locahost:8888/list')

 开启mock数据服务

开发服务后，就可以在浏览器里面访问数据了

//进入项目根目录
$ cd myApp
//开启服务
$ json-server mock/mock.js --watch --port 8888