如何利用前後端分離開發模式，開始一個專案？

自從AJAX大行其道，前後端分離開發模式已是大勢所趨，這裡筆者針對對前後端分離開發模式談談自己的看法。

對於大部分應用，已經不需要從後端讀取HTML頁面或者模板，前端完全可以根據資料自行渲染頁面/模板，這樣，前後臺互動就可以簡化為資料的增刪改查。利用AJAX技術，實現頁面區域性重新整理，促使了前後臺分離的可能性。

那麼，如何利用前後端分離開發模式，開始一個專案呢?

1. 產品文件

產品經理會先設計好整個產品的業務模組和流程，並給出產品文件，包括UI互動，流程圖，模組劃分等等。
這個時候，產品，前端，後端，測試需要一起評審文件，可能需要多次評審才能確定設計方案。

2. 前端提供介面定義

第二個階段是前後臺同時開發時期。後端同學在設計資料庫和表結構的時候，前端同學應該熟悉互動文件和整個業務在表現層上的流程，並且根據頁面的展現方式，給出合理或者期望的資料模型（一般是JSON資料結構） 。

比如，需要哪些介面？介面API是隻讀的還是可修改的？介面入參是什麼？介面出參是什麼？......這些問題，以往都是由後端同學考慮並定義的。但是，實際上，前端同學是最熟悉互動操作的，前端同學期望的API也是最符合頁面需求的，當然，如果某個介面涉及到其他業務模組時，它的複雜性可能就無法在頁面上體現出來。然而，無論如何，前端同學是應該，也能夠在介面定義上提供合理，富有建設性意見的方案。

因此，第二階段，前端需要給後端同學提供一份介面定義清單。

3.後端給出介面文件，並通過review

階段二前端同學提供的介面設計清單，畢竟只是建議，真正的介面還需要後端定義和實現。所以，第三階段，後端需要提供正式的API文件，並且，前端同學參加review，確保所有的API（入參，出參，和HTTP請求方法）都被雙方認可。

4. 前後端同步開發

API文件確定後，前後臺就能夠同時開發了。這時，又可能分為兩種情況。

(1) 後端已經定義好介面並且釋出，但是，返回值都為假資料，不支援修改操作。前端同學利用已釋出的API進行測試。
(2) 後端沒有釋出任何介面，前端同學自行mock資料（利用本地json檔案，或者線上的一些mock工具，比如easy mock等模擬資料），然後邊寫頁面邊測試。

5. 聯調階段

當後端業務程式碼已經完成，前端頁面和資料互動部分完成，前後端就可以進行聯調了。這個階段，是磨合期，肯定會出現很多問題，也需要雙方協商去解決。

當後臺介面變更時，必須同步更新API文件，並第一時間通知前端同學，保證前臺介面呼叫也同步更新。

同時，測試人員可以介入，針對介面進行單元測試。注意，這時只是針對介面的黑盒測試，不要涉及任何UI操作。

6. 冒煙測試和其他安全性測試

當聯調階段完成後，也就是開發人員（前端和後端）認為已經沒有bug的情況下，專案再交由測試人員進行冒煙測試。同時，有需要的話，同時安排安全性測試。

幾輪測試，幾輪bug fixing之後，專案就可以上線了。

小結

可以看到，前後端分離開發模式可以讓分工更明確，提高生產效率，加速專案開發和迭代，也能夠讓API文件化，便於後期維護。

微信公眾號：