Vue项目总结(2)-前端独立测试

1,433 阅读5分钟

前后端各自独立开发的情况下,前端如何独立后端服务做测试?如何搭建并使用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】后会获得一个类似下面这个样子的地址 :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服务,前端不再依赖后端就可以进行独立的测试。但是,这里还有很大的探索空间。

更好地进行测试数据模拟,可以研究一下fakermockjs这些模块。

如果API返回的数据和POST的内容有关,需要如何解决?json-server都是基于url匹配数据,所以,可能需要通过中间件的方式进行扩展。

这种方式高度依赖于nodejs,如果没有nodejs的环境怎样模拟API?

本系列其他文章:

Vue项目总结(1)-基本概念+Nodejs+VUE+VSCode

Vue项目总结(3)-跨域问题分析

Vue项目总结(4)-API+token处理流程