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