1. 前言

隨著互聯(lián)網(wǎng)的高速發(fā)展烁竭，前端頁面的展示菲茬、交互體驗(yàn)越來越靈活、炫麗派撕，響應(yīng)體驗(yàn)也要求越來越高生均，后端服務(wù)的高并發(fā)、高可用腥刹、高性能马胧、高擴(kuò)展等特性的要求也愈加苛刻，從而導(dǎo)致前后端研發(fā)各自專注于自己擅長的領(lǐng)域深耕細(xì)作衔峰。

然而帶來的另一個(gè)問題：前后端的對接界面雙方卻關(guān)注甚少佩脊，沒有任何接口約定規(guī)范情況下各自干各自的，導(dǎo)致我們在產(chǎn)品項(xiàng)目開發(fā)過程中垫卤，前后端的接口聯(lián)調(diào)對接工作量占比在30%-50%左右威彰，甚至?xí)摺Ｍ昂蠖私涌诼?lián)調(diào)對接及系統(tǒng)間的聯(lián)調(diào)對接都是整個(gè)產(chǎn)品項(xiàng)目研發(fā)的軟肋穴肘。

本文的主要初衷就是規(guī)范約定先行歇盼，盡量避免溝通聯(lián)調(diào)產(chǎn)生的不必要的問題，讓大家身心愉快地專注于各自擅長的領(lǐng)域评抚。

2. 為何要分離

參考兩篇文章：

http://blog.jobbole.com/65509/ http://blog.jobbole.com/56161/

目前現(xiàn)有前后端開發(fā)模式：“后端為主的MVC時(shí)代”豹缀，如下圖所示：

[圖片上傳失敗...(image-244c8a-1619398835957)]

后端為主的MVC時(shí)代

代碼可維護(hù)性得到明顯好轉(zhuǎn)，MVC 是個(gè)非常好的協(xié)作模式慨代，從架構(gòu)層面讓開發(fā)者懂得什么代碼應(yīng)該寫在什么地方邢笙。為了讓 View 層更簡單干脆，還可以選擇 Velocity侍匙、Freemaker 等模板氮惯，使得模板里寫不了 Java 代碼。

看起來是功能變?nèi)趿耍沁@種限制使得前后端分工更清晰妇汗。然而依舊并不是那么清晰帘不，這個(gè)階段的典型問題是：

前端開發(fā)重度依賴開發(fā)環(huán)境，開發(fā)效率低杨箭。

這種架構(gòu)下厌均，前后端協(xié)作有兩種模式：一種是前端寫demo，寫好后晶密，讓后端去套模板 。淘寶早期包括現(xiàn)在依舊有大量業(yè)務(wù)線是這種模式稻艰。好處很明顯，demo 可以本地開發(fā)尊勿，很高效僧凤。不足是還需要后端套模板，有可能套錯(cuò)元扔，套完后還需要前端確定躯保，來回溝通調(diào)整的成本比較大。

另一種協(xié)作模式是前端負(fù)責(zé)瀏覽器端的所有開發(fā)和服務(wù)器端的 View 層模板開發(fā)澎语，支付寶是這種模式途事。好處是 UI 相關(guān)的代碼都是前端去寫就好，后端不用太關(guān)注擅羞，不足就是前端開發(fā)重度綁定后端環(huán)境尸变，環(huán)境成為影響前端開發(fā)效率的重要因素。

前后端職責(zé)依舊糾纏不清减俏。

Velocity 模板還是蠻強(qiáng)大的召烂，變量、邏輯娃承、宏等特性奏夫，依舊可以通過拿到的上下文變量來實(shí)現(xiàn)各種業(yè)務(wù)邏輯。這樣历筝，只要前端弱勢一點(diǎn)桶蛔，往往就會(huì)被后端要求在模板層寫出不少業(yè)務(wù)代碼。還有一個(gè)很大的灰色地帶是 Controller漫谷，頁面路由等功能本應(yīng)該是前端最關(guān)注的仔雷，但卻是由后端來實(shí)現(xiàn)。Controller 本身與 Model 往往也會(huì)糾纏不清，看了讓人咬牙的業(yè)務(wù)代碼經(jīng)常會(huì)出現(xiàn)在 Controller 層碟婆。這些問題不能全歸結(jié)于程序員的素養(yǎng)电抚，否則 JSP 就夠了。

對前端發(fā)揮的局限竖共。

性能優(yōu)化如果只在前端做空間非常有限蝙叛，于是我們經(jīng)常需要后端合作才能碰撞出火花，但由于后端框架限制公给，我們很難使用Comet借帘、Bigpipe等技術(shù)方案來優(yōu)化性能。

總上所述淌铐，就跟為什麼要代碼重構(gòu)一樣：

• 關(guān)注點(diǎn)分離
• 職責(zé)分離
• 對的人做對的事
• 更好的共建模式
• 快速的反應(yīng)變化

3. 什么是分離

我們現(xiàn)在要做的前后分離第一階段：“基于 Ajax 帶來的 SPA 時(shí)代”肺然，如圖：

[圖片上傳失敗...(image-124288-1619398835957)]

基于 Ajax 帶來的 SPA 時(shí)代

這種模式下，前后端的分工非常清晰腿准，前后端的關(guān)鍵協(xié)作點(diǎn)是 Ajax 接口际起〗滞看起來是如此美妙灾前，但回過頭來看看的話豫柬，這與 JSP 時(shí)代區(qū)別不大烧给。復(fù)雜度從服務(wù)端的 JSP 里移到了瀏覽器的 JavaScript喝噪，瀏覽器端變得很復(fù)雜。類似 Spring MVC榴鼎，這個(gè)時(shí)代開始出現(xiàn)瀏覽器端的分層架構(gòu)：

[圖片上傳失敗...(image-6a9fc4-1619398835957)]

瀏覽器端的分層架構(gòu)

對于這一SPA階段巫财，前后端分離有幾個(gè)重要挑戰(zhàn)：

前后端接口的約定平项。

如果后端的接口一塌糊涂，如果后端的業(yè)務(wù)模型不夠穩(wěn)定接癌，那么前端開發(fā)會(huì)很痛苦缺猛。這一塊在業(yè)界有 API Blueprint 等方案來約定和沉淀接口椭符，==在阿里销钝，不少團(tuán)隊(duì)也有類似嘗試曙搬，通過接口規(guī)則纵装、接口平臺(tái)等方式來做橡娄。有了和后端一起沉淀的接口規(guī)則挽唉，還可以用來模擬數(shù)據(jù)，使得前后端可以在約定接口后實(shí)現(xiàn)高效并行開發(fā)瓶籽。== 相信這一塊會(huì)越做越好塑顺。

前端開發(fā)的復(fù)雜度控制俏险。

SPA 應(yīng)用大多以功能交互型為主竖独，JavaScript 代碼過十萬行很正常莹痢。大量 JS 代碼的組織，與 View 層的綁定等竣蹦，都不是容易的事情沧奴。典型的解決方案是業(yè)界的 Backbone滔吠，但 Backbone 做的事還很有限，依舊存在大量空白區(qū)域需要挑戰(zhàn)翰舌。

4. 如何做分離

4.1 職責(zé)分離

[圖片上傳失敗...(image-450c9c-1619398835957)]

職責(zé)分離

• 前后端僅僅通過異步接口(AJAX/JSONP)來編程
• 前后端都各自有自己的開發(fā)流程椅贱，構(gòu)建工具庇麦，測試集合
• 關(guān)注點(diǎn)分離喜德，前后端變得相對獨(dú)立并松耦合

[圖片上傳失敗...(image-482705-1619398835957)]

4.2 開發(fā)流程

• 后端編寫和維護(hù)接口文檔舍悯，在 API 變化時(shí)更新接口文檔
• 后端根據(jù)接口文檔進(jìn)行接口開發(fā)
• 前端根據(jù)接口文檔進(jìn)行開發(fā) + Mock平臺(tái)
• 開發(fā)完成后聯(lián)調(diào)和提交測試

Mock 服務(wù)器根據(jù)接口文檔自動(dòng)生成 Mock 數(shù)據(jù)萌衬，實(shí)現(xiàn)了接口文檔即API：

[圖片上傳失敗...(image-532e98-1619398835957)]

開發(fā)流程

4.3 具體實(shí)施

現(xiàn)在已基本完成了秕豫，接口方面的實(shí)施：

• 接口文檔服務(wù)器：可實(shí)現(xiàn)接口變更實(shí)時(shí)同步給前端展示；
• Mock接口數(shù)據(jù)平臺(tái)：可實(shí)現(xiàn)接口變更實(shí)時(shí)Mock數(shù)據(jù)給前端使用呵晚；
• 接口規(guī)范定義：很重要，接口定義的好壞直接影響到前端的工作量和實(shí)現(xiàn)邏輯金矛；具體定義規(guī)范見下節(jié)；

[圖片上傳失敗...(image-e53af3-1619398835957)]

接口文檔+Mock平臺(tái)服務(wù)器

5. 接口規(guī)范V1.0.0

5.1 規(guī)范原則

• 接口返回?cái)?shù)據(jù)即顯示：前端僅做渲染邏輯處理娶耍；
• 渲染邏輯禁止跨多個(gè)接口調(diào)用榕酒；
• 前端關(guān)注交互想鹰、渲染邏輯辑舷，盡量避免業(yè)務(wù)邏輯處理的出現(xiàn)何缓；
• 請求響應(yīng)傳輸數(shù)據(jù)格式：JSON碌廓，JSON數(shù)據(jù)盡量簡單輕量氓皱，避免多級(jí)JSON的出現(xiàn)勃刨；

5.2 基本格式

5.2.1 請求基本格式

GET請求身隐、POST請求==必須包含key為body的入?yún)⒓致粒姓埱髷?shù)據(jù)包裝為JSON格式垢揩，并存放到入?yún)ody中==叁巨，示例如下：

GET請求：

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 0.5em 0px; padding: 1em; color: rgb(204, 204, 204); background: rgb(80, 85, 107); border-radius: 3px; overflow: auto; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}</pre>

POST請求：

[圖片上傳失敗...(image-f5c141-1619398835957)]

5.2.2 響應(yīng)基本格式

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 0.5em 0px; padding: 1em; color: rgb(204, 204, 204); background: rgb(80, 85, 107); border-radius: 3px; overflow: auto; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">{
code: 200,
data: {
message: "success"
}
}</pre>

code : 請求處理狀態(tài)

• 200: 請求處理成功
• 500: 請求處理失敗
• 401: 請求未認(rèn)證蚀瘸，跳轉(zhuǎn)登錄頁
• 406: 請求未授權(quán)，跳轉(zhuǎn)未授權(quán)提示頁

data.message: 請求處理消息

• code=200 且 data.message="success": 請求處理成功
• code=200 且 data.message!="success": 請求處理成功, 普通消息提示：message內(nèi)容
• code=500: 請求處理失敗苏章，警告消息提示：message內(nèi)容

5.3 響應(yīng)實(shí)體格式

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 0.5em 0px; padding: 1em; color: rgb(204, 204, 204); background: rgb(80, 85, 107); border-radius: 3px; overflow: auto; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">{
code: 200,
data: {
message: "success",
entity: {
id: 1,
name: "XXX",
code: "XXX"
}
}
}</pre>

data.entity: 響應(yīng)返回的實(shí)體數(shù)據(jù)

5.4 響應(yīng)列表格式

data.list: 響應(yīng)返回的列表數(shù)據(jù)

5.5 響應(yīng)分頁格式

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 0.5em 0px; padding: 1em; color: rgb(204, 204, 204); background: rgb(80, 85, 107); border-radius: 3px; overflow: auto; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">{
code: 200,
data: {
recordCount: 2,
message: "success",
totalCount: 2,
pageNo: 1,
pageSize: 10,
list: [
{
id: 1,
name: "XXX",
code: "H001"
},
{
id: 2,
name: "XXX",
code: "H001"
} ],
totalPage: 1
}
}</pre>

• data.recordCount: 當(dāng)前頁記錄數(shù)
• data.totalCount: 總記錄數(shù)
• data.pageNo: 當(dāng)前頁碼
• data.pageSize: 每頁大小
• data.totalPage: 總頁數(shù)

5.6 特殊內(nèi)容規(guī)范

5.6.1 下拉框撑瞧、復(fù)選框订咸、單選框

由后端接口統(tǒng)一邏輯判定是否選中酬诀，通過isSelect標(biāo)示是否選中，示例如下：

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 0.5em 0px; padding: 1em; color: rgb(204, 204, 204); background: rgb(80, 85, 107); border-radius: 3px; overflow: auto; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">{
code: 200,
data: {
message: "success",
list: [{
id: 1,
name: "XXX",
code: "XXX",
isSelect: 1
}, {
id: 1,
name: "XXX",
code: "XXX",
isSelect: 0
}]
}
}</pre>

禁止下拉框、復(fù)選框趾唱、單選框判定選中邏輯由前端來處理蜻懦，統(tǒng)一由后端邏輯判定選中返回給前端展示甜癞；

5.6.2 Boolean類型

關(guān)于Boolean類型，JSON數(shù)據(jù)傳輸中一律使用1/0來標(biāo)示宛乃，1為是/True悠咱，0為否/False；

5.6.3 日期類型

關(guān)于日期類型征炼，JSON數(shù)據(jù)傳輸中一律使用字符串析既，具體日期格式因業(yè)務(wù)而定；

6. 未來的大前端

目前我們現(xiàn)在用的前后端分離模式屬于第一階段谆奥，由于使用到的一些技術(shù)jquery等眼坏，對于一些頁面展示、數(shù)據(jù)渲染還是比較復(fù)雜雄右，不能夠很好的達(dá)到復(fù)用纺讲。對于前端還是有很大的工作量肋坚。

下一階段可以在前端工程化方面，對技術(shù)框架的選擇敷扫、前端模塊化重用方面卒密，可多做考量睛约。也就是要迎來“==前端為主的 MV* 時(shí)代==”律罢。大多數(shù)的公司也基本都處于這個(gè)分離階段。

最后階段就是==Node 帶來的全棧時(shí)代==，完全有前端來控制頁面阱高，URL未舟，Controller，路由等欲诺，后端的應(yīng)用就逐步弱化為真正的數(shù)據(jù)服務(wù)+業(yè)務(wù)服務(wù)，做且僅能做的是提供數(shù)據(jù)挣惰、處理業(yè)務(wù)邏輯竖幔，關(guān)注高可用馋评、高并發(fā)等。