在使用vue-cli创建的项目进行开发时,很多时候需要后端返回数据进行配合测试,但是作为前端开发过程总不能每个请求都写一个后端返回数据,这里提供一种使用vue项目中自带的express搭建一个mock数据返回的测试服务器,用来返回测试数据。

vue-cli搭建项目时创建mock服务器返回测试数据

安装vue-cli

使用命令行工具全局安装vue-cli

1
$ npm i vue-cli -g

然后

1
$ vue init myProject

进入 myProject文件夹

1
$ cd myProject

再然后,命令行键入

1
$ npm i

运行

1
$ npm run dev

这样就可以看到vue-cli脚手架搭建的vue的项目。

搭建mock数据服务器

打开项目文件夹下的build文件夹下的dev-server.js,在app.use(staticPath, express.static('./static'))行下加入以下代码:

/*****创建mock数据测试代理服务器-- 开始*****/
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", "utf-8", function(err, chunk){
    if(err) {throw err}
    var data = JSON.parse(chunk)
    if(data[req.params.apiName]){
      res.json(data[req.params.apiName])
    }else{
      res.end("no such api name!")
    }
  })
})
apiServer.use("/api", apiRouter)
apiServer.listen(port + 1 ,function(err){
  if(err){
    console.log(err)
    return false
}
console.log("apiServer is running ...")
})
/*****创建mock数据测试代理服务器-- 结束*****/

解释以下以上代码,首先实例化一个express对象apiServer,引入body-parser模块(单独引入npm i body-parser),apiServer注册使用body-parser,引入express的router实例化对象,引入fs模块,添加路由模块路径(/:apiName),all表示任何请求,读取根目录下的db.json文件,判断路径中的apiName是否有对应数据,有则返回数据,没有返回”no such api name!”,在所有请求/api路径下的请求都使用实例化的router中间件,监听当前dev端口+1,打印mock数据服务器启动。
接下来,很重要的一步,在根目录下添加db.josn文件,使用json对象格式,不同的键对应不同的mock数据请求的api接口。
最后一步,打开项目根目录下的config下的index.js,找到

proxyTable: {},

这一行,然后再对象里添加代理路径,和代理服务器。

proxyTable: {
    "/api": "http://localhost:8081"
},

这样就大功告成了,访问8080端口的服务器访问/api/*,都会代理到8081端口下的路由路径去查询是否有当前api接口mock数据。