vue2.0中模拟数据的配置
在开发过程中,有时候接口跟不上我们的进度,我们要测试,就需要自测。
现在vue已经升级到2.0版本了,早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面。希望对大家有帮助。
1、先编写模拟数据
在本目录配置一个data.json的文件,具体的自己配置,也不难。
2、编写接口模块
进入webpack.dev.conf.js文件,在Number(process.env.PORT)后面写入以下代码:
const express = require('express')
const app = express()
var appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
var apiRouter = express.Router()
app.use('/api',apiRouter)
再找到同文件下devServer模块,在模块内写入
![](https://images2018.cnblogs.com/blog/1259861/201803/1259861-20180309104002809-1493567184.png)
具体代码如下:
before(app) {
app.get('/api/seller', function(req, res) {
res.json({
errno: 0,
data: seller
})
});
app.get('/api/goods', function(req, res) {
res.json({
errno: 0,
data: goods
})
});
app.get('/api/ratings', function(req, res) {
res.json({
errno: 0,
data: ratings
})
});
}
模拟接口配置就已经完成,然后打开cmd,进入项目目录,输入:npm run dev,启动项目
输入:localhost:8080/api/goods