一、你有沒有遇到過：
前端代碼剛寫完，后端的接口又變了。
接口文檔永遠都是不對的。
測試工作永遠只能臨近上線才能開始。
二、為什么前后端分離了，你比從前更痛苦？
前后端分離早已經不是新聞，當真正分離之后確遇到了更多問題。要想解決現在的痛，就要知道痛的原因：
2.1、為什么接口會頻繁變動？
設計之初沒有想好。?這需要提高需求的理解能力和接口設計能力。
變動的成本較低。
德國有句諺語：“朝湯里吐口水。” 只有這樣，才能讓人們放棄那碗湯，停止不合理的行為。前后端同學坐在一起工作的時候效率會有提升，當后端同學接口變化時，只需要口頭上通知一下即可，我們沒有文檔，我們很敏捷啊。沒錯，我們需要承認這樣配合開發的效率會很高，但是頻繁的變動會導致不斷返工，造成了另一種浪費，這種浪費是可以被減少，甚至是被消除的。
2.2、為什么接口文檔永遠都是不對的？
接口文檔在定接口時起到一定作用，寫完接口就沒有用了。后面接口的頻繁變化，文檔必定會永遠落后于實際接口，維護文檔的帶來了一定的成本卻沒能帶來價值。除非對外提供的接口，否則文檔誰來看呢？沒人看，用處又在哪？
有些公司干脆丟掉接口文檔，說我們要擁抱敏捷。
所以接口文檔落后的原因在于沒有給我們帶來價值。
2.3、為什么測試工作永遠只能臨近上線才能開始？
一個需求，后端開發 4 天，前端開發 4 天，聯調 4 天，留給測試同學只有2天時間甚至更少，測不完只能帶 bug 上線。
在開發階段測試同學無法介入，接口在變，前端也在變，?“提測”?之前只能喝茶，“提測” 之后又忙的要命。
自動化？想都別想，空有一身好本領，在 “擁抱變化” 之后只能手工測試。偶爾還要拉上前臺美眉客串一下測試小妹。手工測試枯燥乏味，乏味的工作就容易出錯，而且還不能快速重復，無法對測試過的功能快速回歸。
三、怎么破？
解決以上問題要讓接口文檔發揮價值，提高變動接口的成本，測試盡早介入。
接口文檔發揮出價值，就要賦予契約的意義，就如同簽字畫押誰也不許變，來約束我們只認契約不認人。
契約應該由前端同學來驅動，前后端共同協商。由于前端同學與 UX 接觸比較緊密，更了解頁面所需的數據以及整體的 User Journey，前端同學驅動會更加合理。
契約敲定之后要幫助我們生成 Mock Server（后面我們會介紹一個工具），前后端同學就要依照契約各自開發。Mock Server 可暫時替代后臺服務，幫組前端開發，同時，測試同學也可以依照契約文檔來編寫測試腳本，使用 Mock Server 進行腳本驗證。
當后端接口發生變化除了口頭通知以外必須修改契約，前端同學和測試同學才能各自修改。如此一來修改契約的成本變高，人們在定契約時則會更加慎重，也會促使我們提高接口的設計能力。
看到圖中沒有?“聯調”?的環節，并不是畫錯了，而是 “聯調“ 不再是一項工作，在部署后只需要更改代理的配置即可。甚至使用現代前端框架（如，Vue 或者 React）只要在開發時配置一下，之后都不需要調整任何代碼。
“提測”?呢？測試一直都在進行，也就不再有一個 ”提測“ 的環節，無論前后端任意一方完成開發，測試同學都可以進行測試。
理論終于扯完了，說起來容易做起來難啊，需要工具來幫助我們。接口描述的工具有很多，比較知名的?Swagger?和?Raml，我個人更傾向于 Raml 。
描述工具生成文檔還不夠，還要生成 Mock Server，如果描述工具和 Mock Server 是分離又帶來了額外的工作，好在有她——raml-mocker。
四、raml-mocker
raml-mocker 是一個基于 Raml 使用 Nodejs 開發的 Mock Server 工具，使用 Raml 描述接口中設置 response 的?example?指令即可，raml-mocker 會解析 Raml 文件，并啟動一個 Mock Server，將?example?的內容返回給瀏覽器。
4.1、開始
初始化項目
安裝
啟動 mock server
測試
生成 API 可視化文檔
此功能使用了raml2html。
4.2、配置 .raml-config.json
controller: controller 目錄路徑，在高級篇中會有更詳細說明
raml: raml 文件目錄
main: raml 目錄下的入口文件
port: mock server 服務端口號
plugins: 插件
4.3、入門篇：Mock Server
raml-mocker 只需要在response 添加?example:
books_200.json
通過 curl 請求：
就會得到?example?的數據，唯一不足是無法根據參數動態返回不同數據。別急，請往下看。
4.4、高級篇：動態 Server
如果靜態的 Mock 數據不能滿足你的需求，Raml-mocker 還提供了動態的功能。
在 raml 文檔中添加?(controller)?指令，即可添加動態的 Server，如：
在文檔中?(controller)?表示 controller 目錄下 user.js 中 getBook 函數。
controller/user.js
Raml-mocker 是在?expressjs?基礎上進行開發，req、res 可以參考 express 文檔。
webApi 會返回文檔中的配置：
如此，raml-mocker 提供了更多可擴展空間，我們甚至可以在 controller 中實現一定的邏輯。
4.5、插件
Raml-mocker?提供了插件機制，允許我們在不使用?controller?指令的時候對 response 的內容進行處理，例如使用?Mockjs。
.raml-config.json
/plugins/mock.js
五、總結
前后端分離可以讓我們的職責更清晰，打破前端發揮的局限，工作解耦之后能更好的提高開發效率。然而因為沒有規劃好開發流程，導致了我們沒有發揮出其應有的價值，造成了更多的浪費。
raml-mocker?能夠幫助我們在工具上解決一定的問題，更重要的是持續改進的思想，只有團隊的思想是統一的才有可能達到快速交付。
希望能對你有所幫助，謝謝！
擴展閱讀
某小公司 RESTful、共用接口、前后端分離、接口約定的實踐
來源：https://my.oschina.net/xbl/blog/2246297
