前后端各自獨立開發(fā)的情況下，前端如何獨立后端服務(wù)做測試？如何搭建并使用API模擬服務(wù)？
新建測試項目
我們先創(chuàng)建一個VUE項目來展示這個問題。項目的功能就是調(diào)用/hello這個API返回一個JSON對象。
vue create try-mockapi
創(chuàng)建過程中建議單獨生成各個工具的配置文件。
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
修改src/App.vue文件，去掉無關(guān)的代碼，添加API調(diào)用。
<template>
<div id="app">
<button @click="api">調(diào)用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>
執(zhí)行命令npm run serve，運行代碼。根據(jù)運行結(jié)果的提示，在瀏覽器中輸入地址。打開頁面后點擊【調(diào)用api】按鈕，系統(tǒng)提示錯誤。
Request failed with status code 404
訪問的地址是http://localhost:8080和運行前端代碼的server是同一個地址。
這就是前端開發(fā)通常碰到的問題，如果后端的代碼沒寫好，沒部署自己的代碼就跑起來，怎么辦？
問題分析
解決這個問題需要從兩個方面考慮：第一，搭建一個能夠提供API模擬服務(wù)，能夠根據(jù)url返回測試數(shù)據(jù)；第二，讓前端代碼發(fā)出的請求指到這個服務(wù)。
現(xiàn)在的API基本上都是返回JSON，所以模擬API服務(wù)就是要實現(xiàn)url到j(luò)son數(shù)據(jù)的映射。json-server這個項目很好地滿足了這個需求，項目簡介如下：
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
后面我們再具體說明json-server的使用，先來分析第二個問題。
第二個問題就是把前端發(fā)出的請求轉(zhuǎn)發(fā)到API模擬服務(wù)上，無非兩種思路：1，在代碼中進(jìn)行指定，開發(fā)版本和生產(chǎn)版本指向不同的位置；2、將發(fā)出的請求通過代理改變指向。第1種思路會帶來CORS問題，雖然有解決的辦法，但是給我們的測試問題帶來了不必要的復(fù)雜性，因此，還是將解決方向定在思路2，進(jìn)行請求代理。
API模擬服務(wù)
postman模擬API
其實，在尋找API模擬服務(wù)方案時，首先研究的是postman。這個工具非常強大也非常成熟，其中提供了Mock Server這個功能模塊，解決模擬API問題。但是，免費賬號每個月只能進(jìn)行1000次調(diào)用，有這個限制就不好了，但是如果調(diào)用的次數(shù)不多，選用postman是個很好的選擇，所以這里也簡單把怎么用postman模擬API也介紹一下。
創(chuàng)建【Mock Server】。
創(chuàng)建要響應(yīng)的url（hello）
設(shè)置Mock Server的collection名（try-mockapi.my-postman）
點擊【Create Mock Server】后會獲得一個類似下面這個樣子的地址
：https://xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.mock.pstmn.io，在瀏覽器中輸入自己的地址試試。
json-server模擬API
安裝
cnpm i json-server -D
在項目下創(chuàng)建放測試數(shù)據(jù)的目錄json-server，在目錄下創(chuàng)建文件db.json文件。
{
"hello": {
"id": 1,
"msg": "你好，我是json-server"
}
}
啟動模擬API服務(wù)，通過參數(shù)指定測試數(shù)據(jù)的位置和服務(wù)的端口。
npx json-server json-server/db.json --port 4001
在瀏覽器中按提示輸入地址：http://localhost:4001/hello，可以看到已經(jīng)模擬出我們需要的API。
其實json-server是基于express，所以支持通過中間件（middleware）進(jìn)行擴展。
參考：https://www.npmjs.com/package/json-server
參考：https://dzone.com/articles/zero-code-rest-with-json-server
代理前端請求
現(xiàn)在模擬API服務(wù)已經(jīng)準(zhǔn)備好了，怎樣才能將API請求進(jìn)行轉(zhuǎn)發(fā)？
先看兩段VUE官網(wǎng)的文檔。
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴(yán)格遵照 JSON 的格式來寫。
如果你的前端應(yīng)用和后端 API 服務(wù)器沒有運行在同一個主機上，你需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務(wù)器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
我們利用這個vue的機制進(jìn)行API的轉(zhuǎn)發(fā)，創(chuàng)建或修改vue.config.js文件。
module.exports = {
devServer: {
proxy: "http://localhost:4001"
}
}
執(zhí)行命令啟動應(yīng)用。
npm run serve
在瀏覽器中打開提供的地址，點擊【調(diào)用api】，返回結(jié)果。
{"id":1,"msg":"你好，我是json-server"}
更進(jìn)一步
通過前面的操作已經(jīng)能夠輕松實現(xiàn)模擬API服務(wù)，前端不再依賴后端就可以進(jìn)行獨立的測試。但是，這里還有很大的探索空間。
更好地進(jìn)行測試數(shù)據(jù)模擬，可以研究一下faker，mockjs這些模塊。
如果API返回的數(shù)據(jù)和POST的內(nèi)容有關(guān)，需要如何解決？json-server都是基于url匹配數(shù)據(jù)，所以，可能需要通過中間件的方式進(jìn)行擴展。
這種方式高度依賴于nodejs，如果沒有nodejs的環(huán)境怎樣模擬API？
本系列其他文章：
Vue項目總結(jié)（1）-基本概念+Nodejs+VUE+VSCode
