这是我在做慕课网的一个Vue项目时候遇到的，项目视频里由于录的时间较早，当时还是在dev-server.js里配置后台数据模拟。后来Vue更新之后，改用webpack-dev-conf.js配置后台数据模拟。详细如下：
1.首先创建一个json格式数据文件，例如我的是goods.json：
{
"status":"0",
"msg":"",
"result":[
{
"productId":"100001",
"productName":"蓝牙音箱",
"productPrice":"99",
"productImg":"1.jpg"
},
{
"productId":"100002",
"productName":"蓝牙耳机",
"productPrice":"69",
"productImg":"2.jpg"
},
{
"productId":"100003",
"productName":"红色头戴式耳机",
"productPrice":"299",
"productImg":"3.jpg"
},
{
"productId":"100004",
"productName":"黑色头戴式耳机",
"productPrice":"199",
"productImg":"4.jpg"
}
]
}
2.在webpack-dev-conf.js中配置如下：
const axios = require('axios');
const express = require('express');
const app =express();
var apiRoutes =express.Router();
var goodsData = require('./../mock/goods.json'); //这是你自己创建的json格式数据文件
app.use('/goods',apiRoutes);
3.然后找到devServer,在里面添加如下：
before(app) {
app.get('/goods',(req,res) =>{
res.json(goodsData)
})
}
4.然后回到项目中，创建一个方法读取数据
methods:{
getGoodsList(){
axios.get("/goods").then((result)=>{
var res = result.data;
this.goodsList =res.result;
})
}
}
网友评论