在项目中前端和后端通常是并行开发,为了减少等待后端接口开发的时间,我们经常需要在本地模拟后端接口用来测试前端效果。这种做法称之为构建前端Mock。
前端Mock方法大致可以分为以下两种:
- 本地启动一个静态服务,将所需要的接口写成json文件,根据接口名字将文件放在项目目录下。
- 再启动一个Server作为Mock Server,使用第三方Proxy将Mock Server的接口代理到静态服务器上。
第一种方法相对简单,可是带来的弊端也很多。如果项目的接口较少维护起来还比较容易,但是一旦涉及到很多接口的调用,我们就需要在项目里新建许多个json文件,十分麻烦。
第二种方法则避免了修改接口的麻烦,在本地的Mock Server中模拟一个和线上一样的接口,这样的Mock也更接近于线上的环境。比如已经集成好的工具Json-Server。
Json-Server是基于REST API的前端mock工具,配合使用Proxy,效率极高。
在vue-cli搭建的vue前端项目中,配置webpack使用json-server步骤如下:
1.首先:全局安装Json-Server:npm install -g json-server
2.在项目根目录中,新建一个test.json文件(getMachineOrderStatistics为url路径,不支持api/url的/格式),该文件可以写入多个url请求的接口 格式如下:
{
"getMachineOrderStatistics": {
"resultCode": 1200,
"msg": "操作成功",
"data": [
{
"id": 1,
"machineId": "42342423"
}
],
"total": 1
}
}
复制代码
3.启动 json-server --watch test.json --port 9090
即可通过http://localhost:9090//getMachineOrderStatistics来访问接口。
4.通常在本地开发环境下,我们已经启动了一个静态服务,因此需要用代理服务进行跨域(两个服务分别在两个端口上)。 通过代理来访问该接口 在webpack的config文件中,
proxyTable: {
'/mockServer': {
target: 'http://localhost:9090',
changeOrigin: true,
pathRewrite: {
'^/mockServer': ''
}
},
}
复制代码
5.在package.json中新添加一个scripts:
"scripts": {
"mock": "node_modules/.bin/json-server --watch test.json --port 9090",
"mockdev": "npm run mock & npm run dev"
},
由于json-server是命令行工具,若没有全局安装需要用相对路径去调用它:
node_modules/.bin/json-server 。
路径不能少,否则会提示找不到命令。
复制代码
6.运行 npm run mockdev来启动项目,同时也启动了json-server
\{^_^}/ hi!
Loading test.json
Done
Resources
http://localhost:9090/getMachineOrderStatistics
复制代码
7.在项目中,我们通过/mockServer/getMachineOrderStatistics即可请求该mock数据
现在可以直接按照RESTFUL的规范调用这个接口,并且所做的POST和DELETE等请求,会直接修改test.json文件的值。 比如,使用post方法,对/getMachineOrderStatistics传递参数,则该值可以直接写入到test.json文件中。