JS-Web项目常见问题（2）-前端独立测试+VUE

前后端各自独立开发的情况下，前端如何独立后端服务做测试？如何搭建并使用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调用。

执行命令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？

本系列其他文章：

JS-Web项目常见问题（1）-基本概念+Nodejs+VUE+VSCode

JS-Web项目常见问题（3）-前后端分离导致的跨域问题分析