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）-跨域問題分析