在vue2.0中mock数据

第一步：定义一个json文件，如图写一段简单的json格式数据

{ "goods":{ "status":"0", "msg":"", "result":[ { "producId":"10001", "productName":"小米6", "producePrice":2499, "productImg":"1.jpg" }, { "producId":"10002", "productName":"苹果", "producePrice":3499, "productImg":"3.jpg" }, { "producId":"10003", "productName":"pad", "producePrice":4499, "productImg":"3.jpg" } ]},

"foods":{ "status":"0", "msg":"", "result":[ { "foodname":"皮蛋瘦肉粥", "id":"1", "price":"8", "oldprice":"5", "description":"咸味" } ] }

}

第二步：

build文件下》webpack.dev.conf.js文件中找到const portfinder = require('portfinder')在其之后添加如下代码

// 自定义的mock数据
var appData = require('../mock/data.json')//加载本地数据文件
var goods = appData.goods//获取对应的本地数据
var foods = appData.foods
//自定义的mock结束复制代码

第三步：(get/post请求)

找到devServer属性，在其中添加before函数，定义json文件中的请求方式，请求地址，以及返回数据....

before(app) {
app.get('/api/goods', (req, res) => {res.json({ errno: 0,data: goods})
//接口返回json数据，上面配置的数据goodr就赋值给data请求后调用})

app.post('/api/foods', function (req, res) { // 注意这里改为post就可以了
res.json({ errno: 0, data: foods }); })

}    
复制代码

第四步：

这个地方因为更改的是配置文件，所以一定要npm run dev重新打包启动

这样就可以访问本地接口：http://localhost:端口号/api/goods 了

第五步：在请求模块使用axios请求数据

转载于:https://juejin.im/post/5b640da66fb9a04fc67c16b4