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，在代码中进行指定，开发版本和生产版本指向不一样的位置；二、将发出的请求经过代理改变指向。第1种思路会带来CORS问题，虽然有解决的办法，可是给咱们的测试问题带来了没必要要的复杂性，所以，仍是将解决方向定在思路2，进行请求代理。

API模拟服务

postman模拟API

其实，在寻找API模拟服务方案时，首先研究的是postman。这个工具很是强大也很是成熟，其中提供了Mock Server这个功能模块，解决模拟API问题。可是，免费帐号每月只能进行1000次调用，有这个限制就很差了，可是若是调用的次数很少，选用postman是个很好的选择，因此这里也简单把怎么用postman模拟API也介绍一下。

建立【Mock Server】。

建立要响应的url（hello）

设置Mock Server的collection名（try-mockapi.my-postman）

点击【Create Mock Server】后会得到一个相似下面这个样子的地址 ：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）进行扩展。

参考：www.npmjs.com/package/jso…

参考：dzone.com/articles/ze…

代理前端请求

如今模拟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？

本系列其余文章：

Vue项目总结（1）-基本概念+Nodejs+VUE+VSCode

Vue项目总结（3）-跨域问题分析