vue-cli项目如何mock数据

[jiangshanmeta]

前后端分离开发对于前端来说一个要解决的问题是如何mock数据，我想结合一下使用vue-cli开发的经验，评价一下尝试过的方案

前端实现后端接口

这里的实现分为低配版和高配版两种情况。高配版的意思是前端把后端的业务直接实现，这种情况一般是技术上前后端分离，人员配置上前后端不分离，这对人员的要求比较高。低配版的做法是只实现输出结果的逻辑，这样对人要求低了不少，也能达到mock的结果。这个方案编写业务逻辑时所采用的请求相对路径可以轻松实现与生产环境下一致，至于多开一个web服务本身也不能算什么大的缺点。

利用json-server

github的json-server项目提供了一个前端模拟数据的方案。这个方案我见不少人用过，然而我并不喜欢这个方案。当我开启json-server服务之后，它依赖于一个json文件，而不是一个目录，如果接口较多就会面临json文件过大的问题，虽然可以用拆成多个json文件的方法解决，但是每更换一个需要使用的json文件就要重启服务，开发体验并不好。

使用express搭建静态服务

vue-cli使用了express搭建web服务，我们可以继续使用它来提供mock数据。首先我们在项目目录下建立一个mock目录，我们所有的mock数据json文件都放在这个目录之下。

然后我们需要更改build目录下的dev-server文件，我们需要添加下面几行代码

var mockRouter = express.Router()
mockRouter.all("/:controller/:method",function(req,res){
    let controller = req.params.controller;
    let method = req.params.method.replace(/\.json$/,'');
    let path = '../mock/'+ controller + '/' + method + '.json';
    delete require.cache[require.resolve(path)]
    let data = require(path);
    res.json(data)
})
app.use('/mock',mockRouter)

有后端MVC框架使用经验的同学应该很熟悉这种url设计。当我们请求 http://localhost:8080/mock/index/index时，我们可以拿到mock目录下的index目录下的index.json文件，对于业务逻辑层来说只需要写相对路径/index/index即可。虽然有人对这种一个json文件对应一个接口的思路并不喜欢(他们竟然想写在一个文件中)，但是就我目前的使用经验来说对于多人合作项目这个方案最简单有效。