自從AJAX大行其道，前后端分離開(kāi)發(fā)模式已是大勢(shì)所趨果港，這里筆者針對(duì)對(duì)前后端分離開(kāi)發(fā)模式談?wù)勛约旱目捶ā?/p>
對(duì)于大部分應(yīng)用沦泌，已經(jīng)不需要從后端讀取HTML頁(yè)面或者模板，前端完全可以根據(jù)數(shù)據(jù)自行渲染頁(yè)面/模板辛掠，這樣赦肃，前后臺(tái)交互就可以簡(jiǎn)化為數(shù)據(jù)的增刪改查。利用AJAX技術(shù)公浪，實(shí)現(xiàn)頁(yè)面局部刷新他宛，促使了前后臺(tái)分離的可能性。
那么欠气，如何利用前后端分離開(kāi)發(fā)模式厅各，開(kāi)始一個(gè)項(xiàng)目呢?
1. 產(chǎn)品文檔
產(chǎn)品經(jīng)理會(huì)先設(shè)計(jì)好整個(gè)產(chǎn)品的業(yè)務(wù)模塊和流程，并給出產(chǎn)品文檔预柒，包括UI交互队塘，流程圖袁梗，模塊劃分等等。
這個(gè)時(shí)候憔古，產(chǎn)品遮怜，前端，后端鸿市，測(cè)試需要一起評(píng)審文檔锯梁，可能需要多次評(píng)審才能確定設(shè)計(jì)方案。
2. 前端提供接口定義
第二個(gè)階段是前后臺(tái)同時(shí)開(kāi)發(fā)時(shí)期焰情。后端同學(xué)在設(shè)計(jì)數(shù)據(jù)庫(kù)和表結(jié)構(gòu)的時(shí)候陌凳，前端同學(xué)應(yīng)該熟悉交互文檔和整個(gè)業(yè)務(wù)在表現(xiàn)層上的流程，并且根據(jù)頁(yè)面的展現(xiàn)方式内舟，給出合理或者期望的數(shù)據(jù)模型（一般是JSON數(shù)據(jù)結(jié)構(gòu)） 合敦。
比如，需要哪些接口验游？接口A(yíng)PI是只讀的還是可修改的充岛？接口入?yún)⑹鞘裁矗拷涌诔鰠⑹鞘裁矗?.....這些問(wèn)題耕蝉，以往都是由后端同學(xué)考慮并定義的崔梗。但是，實(shí)際上赔硫，前端同學(xué)是最熟悉交互操作的，前端同學(xué)期望的API也是最符合頁(yè)面需求的盐肃，當(dāng)然爪膊，如果某個(gè)接口涉及到其他業(yè)務(wù)模塊時(shí)，它的復(fù)雜性可能就無(wú)法在頁(yè)面上體現(xiàn)出來(lái)砸王。然而推盛，無(wú)論如何，前端同學(xué)是應(yīng)該谦铃，也能夠在接口定義上提供合理耘成，富有建設(shè)性意見(jiàn)的方案。
因此驹闰，第二階段瘪菌，前端需要給后端同學(xué)提供一份接口定義清單。
3.后端給出接口文檔嘹朗，并通過(guò)review
階段二前端同學(xué)提供的接口設(shè)計(jì)清單师妙，畢竟只是建議，真正的接口還需要后端定義和實(shí)現(xiàn)屹培。所以默穴，第三階段怔檩，后端需要提供正式的API文檔，并且蓄诽，前端同學(xué)參加review薛训，確保所有的API（入?yún)ⅲ鰠⒙胤眨虷TTP請(qǐng)求方法）都被雙方認(rèn)可乙埃。
4. 前后端同步開(kāi)發(fā)
API文檔確定后，前后臺(tái)就能夠同時(shí)開(kāi)發(fā)了调衰。這時(shí)膊爪，又可能分為兩種情況。
(1) 后端已經(jīng)定義好接口并且發(fā)布嚎莉，但是米酬，返回值都為假數(shù)據(jù)，不支持修改操作趋箩。前端同學(xué)利用已發(fā)布的API進(jìn)行測(cè)試赃额。
(2) 后端沒(méi)有發(fā)布任何接口，前端同學(xué)自行mock數(shù)據(jù)（利用本地json文件叫确，或者在線(xiàn)的一些mock工具跳芳，比如easy mock等模擬數(shù)據(jù)），然后邊寫(xiě)頁(yè)面邊測(cè)試竹勉。
5. 聯(lián)調(diào)階段
當(dāng)后端業(yè)務(wù)代碼已經(jīng)完成飞盆，前端頁(yè)面和數(shù)據(jù)交互部分完成，前后端就可以進(jìn)行聯(lián)調(diào)了次乓。這個(gè)階段吓歇，是磨合期，肯定會(huì)出現(xiàn)很多問(wèn)題票腰，也需要雙方協(xié)商去解決城看。
當(dāng)后臺(tái)接口變更時(shí)，必須同步更新API文檔杏慰，并第一時(shí)間通知前端同學(xué)测柠，保證前臺(tái)接口調(diào)用也同步更新。
同時(shí)缘滥，測(cè)試人員可以介入轰胁，針對(duì)接口進(jìn)行單元測(cè)試。注意朝扼，這時(shí)只是針對(duì)接口的黑盒測(cè)試软吐，不要涉及任何UI操作。
6. 冒煙測(cè)試和其他安全性測(cè)試
當(dāng)聯(lián)調(diào)階段完成后吟税，也就是開(kāi)發(fā)人員（前端和后端）認(rèn)為已經(jīng)沒(méi)有bug的情況下凹耙，項(xiàng)目再交由測(cè)試人員進(jìn)行冒煙測(cè)試姿现。同時(shí)，有需要的話(huà)肖抱，同時(shí)安排安全性測(cè)試备典。
幾輪測(cè)試，幾輪bug fixing之后意述，項(xiàng)目就可以上線(xiàn)了提佣。
小結(jié)
可以看到，前后端分離開(kāi)發(fā)模式可以讓分工更明確荤崇，提高生產(chǎn)效率拌屏，加速項(xiàng)目開(kāi)發(fā)和迭代，也能夠讓API文檔化术荤，便于后期維護(hù)倚喂。
