vue项目中的mock data

应用背景

因为前后端的分离并不是完全的，以及ajax技术的普遍应用，前端在开发过程中经常会需要测试用的数据，部分情况下是直接写在视图中，毕竟前端们在开发的过程中又不能总是依赖着后台提供接口，比如进度不一致，那我们应该怎么办呢

方案

今天接触到一种方法，就是express提供的数据服务，毕竟现在很多项目中都会用到node，用到npm，那使用express也是比较方便的，比如我通过vue init webpack 创建的vuejs项目，就可以在build目录下的dev-server.js中加入如下代码

这里是用db.json这个文件模拟后台所含的数据，处于根目录下
这里请求路径：http://localhost:[默认端口加一]/api/apiname[参数]

//express数据服务
var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/:apiName')
.all(function (req, res) {
fs.readFile('./db.json', 'utf8', function (err, data) {
if (err) throw err
var data = JSON.parse(data)
if (data[req.params.apiName]) {
res.json(data[req.params.apiName])
}
else {
res.send('no such api name')
}
})
})
apiServer.use('/api', apiRouter);
apiServer.listen(port + 1, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:' + (port + 1) + '\n')
})


附加

在实际操作中，我们通常是使用ajax，那我们总不能就真的直接请求别的端口吧，那这个路径该怎么写，所以这里我看到一个代理的方法,在config目录下的index.js,将
proxyTable: {}
比如改为
proxyTable: {
'/api/': 'http://localhost:8081/'
}
那么当我们请求http://localhost:8080/api/apiname而实际上请求的是http://localhost:8081/api/apiname