Vue项目总结（2）-前端独立测试
前后端各自独立开发的情况下，前端如何独立后端服务做测试？如何搭建并使用API模拟服务？
新建测试项目
我们先创建一个VUE项目来展示这个问题。项目的功能就是调用/hello这个API返回一个JSON对象。
vue create try-mockapi
创建过程中建议单独生成各个工具的配置文件。
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
修改src/App.vue文件，去掉无关的代码，添加API调用。
<template>
<div id="app">
<button @click="api">调用api</button>
</div>
</template>
<script>
import axios from "axios"
export default {
name: "app",
methods: {
api() {
axios
.get("/hello")
.then(rsp => {
alert(JSON.stringify(rsp.data))
})
.catch(err => {
alert(err.message)
})
}
}
}
</script>
执行命令npm run serve，运行代码。根据运行结果的提示，在浏览器中输入地址。打开页面后点击【调用api】按钮，系统提示错误。
Request failed with status code 404
访问的地址是http://localhost:8080和运行前端代码的server是同一个地址。
这就是前端开发通常碰到的问题，如果后端的代码没写好，没部署自己的代码就跑起来，怎么办？
问题分析
解决这个问题需要从两个方面考虑：第一，搭建一个能够提供API模拟服务，能够根据url返回测试数据；第二，让前端代码发出的请求指到这个服务。
现在的API基本上都是返回JSON，所以模拟API服务就是要实现url到json数据的映射。json-server这个项目很好地满足了这个需求，项目简介如下：
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
后面我们再具体说明json-server的使用，先来分析第二个问题。
第二个问题就是把前端发出的请求转发到API模拟服务上，无非两种思路：1，在代码中进行指定，开发版本和生产版本指向不同的位置；2、将发出的请求通过代理改变指向。第1种思路会带来CORS问题，虽然有解决的办法，但是给我们的测试问题带来了不必要的复杂性，因此，还是将解决方向定在思路2，进行请求代理。
API模拟服务
postman模拟API
其实，在寻找API模拟服务方案时，首先研究的是postman。这个工具非常强大也非常成熟，其中提供了Mock Server这个功能模块，解决模拟API问题。但是，免费账号每个月只能进行1000次调用，有这个限制就不好了，但是如果调用的次数不多，选用postman是个很好的选择，所以这里也简单把怎么用postman模拟API也介绍一下。
创建【Mock Server】。
image.png
创建要响应的url（hello）
image.png
设置Mock Server的collection名（try-mockapi.my-postman）
image.png
点击【Create Mock Server】后会获得一个类似下面这个样子的地址
：https://xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.mock.pstmn.io，在浏览器中输入自己的地址试试。
json-server模拟API
安装
cnpm i json-server -D
在项目下创建放测试数据的目录json-server，在目录下创建文件db.json文件。
{
"hello": {
"id": 1,
"msg": "你好，我是json-server"
}
}
启动模拟API服务，通过参数指定测试数据的位置和服务的端口。
npx json-server json-server/db.json --port 4001
在浏览器中按提示输入地址：http://localhost:4001/hello，可以看到已经模拟出我们需要的API。
其实json-server是基于express，所以支持通过中间件（middleware）进行扩展。
参考：https://www.npmjs.com/package/json-server
参考：https://dzone.com/articles/zero-code-rest-with-json-server
代理前端请求
现在模拟API服务已经准备好了，怎样才能将API请求进行转发？
先看两段VUE官网的文档。
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
我们利用这个vue的机制进行API的转发，创建或修改vue.config.js文件。
module.exports = {
devServer: {
proxy: "http://localhost:4001"
}
}
执行命令启动应用。
npm run serve
在浏览器中打开提供的地址，点击【调用api】，返回结果。
{"id":1,"msg":"你好，我是json-server"}
更进一步
通过前面的操作已经能够轻松实现模拟API服务，前端不再依赖后端就可以进行独立的测试。但是，这里还有很大的探索空间。
更好地进行测试数据模拟，可以研究一下faker，mockjs这些模块。
如果API返回的数据和POST的内容有关，需要如何解决？json-server都是基于url匹配数据，所以，可能需要通过中间件的方式进行扩展。
这种方式高度依赖于nodejs，如果没有nodejs的环境怎样模拟API？
