在我们实际开发中，前端大部分时候都是需要等待后端的数据接口，所以会自己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