隨著 Web 技術的發展，前後端分離構架變的越來越流行。前後端分離使後端專注於數據處理和定義前端所需要的接口，前端負責數據的展現和交互，大大細化了開發者的職責，提高了開發效率，但與此同時也帶來了一些問題：
- 對於前端工程師，後端提供的接口文檔，大多是不規範的，有使用 wiki 的，有 word 文檔的，甚至還有用即時聊天軟件溝通的，後端接口對於前端就像一個黑盒子，經常遇到問題是接口因未知原因增加參數了，參數名變了，參數被刪除了。對於後端工程師，接口對接時總是需要寫冗雜繁瑣的文檔，需要大量時間去維護接口文檔。
- 前端開發的功能在後端功能還沒完成前，因為前端的功能依賴於後端的數據，導致工作無法順利展開。為了解決這個問題，有些前端工程師在代碼注入 json，還有後端工程師臨時搭建一套測試數據服務器，這種情況下勢必會影響工作效率和代碼質量，也不能及時進行字段的更新。
- 接口數據正確性無法得到保證。前端調用後端的接口數據渲染到 視圖，數據一旦出錯，將會導致視圖和交互也出現問題，保證後端接口數據正確性變的愈來愈重要。接口自動化測試就是用來解決這個問題，但傳統的接口測試框架使用成本很高，很多團隊採用肉眼比對方式，效率很低。
YApi 解決方案
1. 共同維護一份接口定義，連接前後端
大家看下圖，在後端開發接口過程中，接口開發和測試接口這是必不可少的環節，但文檔因為沒有跟接口開發和測試聯繫到一起，被孤立。後端要維護對於他們冗雜繁瑣的文檔，是件收益很低的事情。沒有人喜歡做收益低的事情，所以最終的解決辦法就是要提高收益。下面詳細說明解決方案。
在接口開發過程中，後端通常都會使用 postman 等類似的工具測試接口，而測試接口是在開發過程中一個必要的過程。假如參數有改動，大家肯定會在 postman 等工具上更新字段和測試接口。由此可以聯想到，
如果能有一款工具既可用來做測試接口，又能作為接口文檔工具，將接口文檔和接口測試連接到一起，不就解決了此問題。YApi 解決方案是將接口文檔和測試通過單一數據源連接到一起，如果有改動，因為改的是單一的數據源，就不會出現更新滯後和不及時問題。
2. 前端 Mock Server 方案
數據 Mock 服務在開發前期是非常頭疼的一個問題。大多數情況下，接口請求參數和返回數據都是後端規定的，在後端接口沒有完成之前，接口對於前端就是一個黑洞，可能最初對接口的定義跟實際後端做出的接口會有非常大的不同。這個時候就需要有一個工具，不僅能模擬真實接口的情況，還能關聯接口文檔，在後端開發過程中，可以隨時調整接口定義，並通知給前端開發者改動信息。
在 YApi 平臺，前後端只要維護接口定義的響應數據，就可以生成需要的模擬數據，下面這段代碼定義了生成數據模板：
{
"errcode": 0,
"errmsg": "@string",
"data": {
"type":"@pick(1,2,3)",
"list|1-10": [{
"uid": "@id",
"username": "@name"
}]
}
}
可生成如下的模擬數據：
{
"errcode": 0,
"errmsg": "^*!SF)R",
"data": {
"type": 2,
"list": [
{
"uid": "370000200707276255",
"username": "Ruth Clark"
},
{
"uid": "650000200211185728",
"username": "Anthony Martin"
},
{
"uid": "370000199201143855",
"username": "Laura Rodriguez"
},
{
"uid": "610000198704072775",
"username": "Anthony Perez"
}
]
}
}
以往的數據 mock 方案難免會影響項目源碼，yapi 使用了服務器代理的方案，只需要在你的開發機做下服務器反向代理配置，不用修改項目一行源代碼，即可獲取到所有的 mock 數據。
基礎的 Mock 工具已經能滿足大部分的需求了，但有些複雜場景是無法實現的。例如：當我做一個數據列表頁面，需要測試某個字段在各種長度下的 ui 表現，還有當數據為空時的 ui 表現。YApi 提供了期望和自定義腳本的功能。
本文主要介紹自定義腳本功能，期望功能可參考 yapi 平臺文檔。
自定義腳本可根據請求的參數，cookie 信息，使用 js 腳本自定義返回的數據。我們假設有個場景，我希望通過 cookie “_type” 控制列表頁面數據顯示，假設 _type 是 error，那麼列表顯示異常錯誤信息；假設 _type 是 empty ，列表顯示為空。可使用下面代碼實現：
if(cookie._type == 'error'){
mockJson.errcode = 400;
}
if(cookie._type == 'empty'){
mockJson.data.list = [];
}
3.自動化測試
接口開發完成後，後續的迭代是非常多的，每次對源碼的修改，都需要大量的測試才能確保接口是否正確。人工判斷肯定是不好的，最好的辦法是做成自動化，但自動化測試又是一件成本非常高的事情，需要後端人員和QA人員學習相關的框架，和寫大量的代碼。YApi 簡化了這一個過程，基於一個可視化界面，就算不懂程序開發，只需配置相關的參數和斷言語句，就能實現自動化測試，非常的易用。
除了基本的功能外，YApi 還提供了強大的 pre-script 和可視化表達式功能，pre-script 包括請求參數處理腳本和響應數據處理腳本兩部分。通過自定義 js 腳本方式改變請求的參數和返回的 response 數據。他的使用場景如下：
- 接口請求參數需要加密及返回 response 解密
- 接口請求參數需要添加計算 token
可視化表達主要是為了方便用戶生成自動化測試所用到的參數，通過一個樹形選擇性，快速引用所依賴的參數值。
在所有的需要測試的接口配置完成後，點擊開始測試，就會按照指定的順序依次測試所有接口，測試完成後，可查看測試報告。
4.插件機制
YApi 最強大的一點莫過於他的插件機制，我們去哪兒各個業務線有不同的需求，通過 YApi 預留的鉤子，開發不同的插件解決，比如我們現有的 qsso 登錄，swagger 數據導入就是通過插件機制實現的，我們團隊最近還在跟業務部門討論使用插件實現壓力測試功能等。總得來說，YApi基於插件機制，既滿足了產品需求的多樣性，又保證了內核足夠易用和簡潔。
5. 開源和易部署
為了幫助更多開發者和提升大家的工作效率，YApi 不僅開源到 github，還提供了一個 cli 工具方便廣大開發者部署。使用 yapi-cli 提供的可視化部署方案，即便你不懂任何 nodejs、mongodb 的知識，也能輕鬆一鍵部署。
6. 功能截圖
閱讀更多 雲上猿人 的文章
