內(nèi)容來源：2018 年 1 月5 日，網(wǎng)易NEI產(chǎn)品負(fù)責(zé)人包勇明在“2018移動(dòng)技術(shù)創(chuàng)新大會(huì)”進(jìn)行《網(wǎng)易高效多端應(yīng)用協(xié)作開發(fā)實(shí)踐》演講分享。IT 大咖說（微信id：itdakashuo）作為獨(dú)家視頻合作方，經(jīng)主辦方和講者審閱授權(quán)發(fā)布。

閱讀字?jǐn)?shù)：1958 | 5分鐘閱讀

嘉賓演講視頻及PPT回顧：suo.im/5bH62T

摘要

在實(shí)際項(xiàng)目開發(fā)過程中，前后端分離開發(fā)是比較受關(guān)注的問題，本次分享會(huì)講述開發(fā)所面臨的問題背景以及 NEI 如何提供的完整解決方案。

產(chǎn)品開發(fā)步驟

現(xiàn)在的產(chǎn)品開發(fā)一般是按照交互稿、視覺稿、開發(fā)、測(cè)試、發(fā)布這樣的流程進(jìn)行。本次我們重點(diǎn)探討開發(fā)領(lǐng)域，涉及到客戶端以及服務(wù)端。

在沒有交互稿的時(shí)候，開發(fā)也可以做一些前期準(zhǔn)備，比如前后端的技術(shù)選型、環(huán)境搭建，另外后端還有建模的過程。

前后端并行開發(fā)

開發(fā)過程中的理想狀態(tài)應(yīng)該是前后端并行開發(fā)，這在業(yè)界也是比較熱門的概念，但是對(duì)一些沒有技術(shù)積累的傳統(tǒng)企業(yè)來說實(shí)現(xiàn)起來還是有一定難度。

整個(gè)過程中前端使用Mock Server后端進(jìn)行接口測(cè)試，中間約定API契約，然后進(jìn)行前后端并行開發(fā)，最后進(jìn)行聯(lián)調(diào)。理論上聯(lián)調(diào)成本會(huì)很小，因?yàn)镸ock Server是依照API契約進(jìn)行開發(fā)的，而后端也同樣是按照約定定義接口。

接口管理平臺(tái)

交互稿設(shè)計(jì)完成后就輪到接口的設(shè)計(jì)，傳統(tǒng)的接口文檔有IM、txt、word、wiki、Swagger這幾類。它們普遍存在表述不清晰或者格式混亂的問題，使用接口管理平臺(tái)能有效解決這類問題。

徹底實(shí)現(xiàn)前后端分離的過程中有著一個(gè)阻礙，即如何處理模板。模板是在后端環(huán)境中運(yùn)行的，有ftl、php、ejs等各種類型。前端開發(fā)中如果還要涉及到后端環(huán)境，那么這就不是徹底的前后端分離。為此我們實(shí)現(xiàn)了能夠解析模板的Mock Server，它可以獲取模板中的真實(shí)數(shù)據(jù)，比如登錄的用戶數(shù)據(jù)，而只使用Mock模擬數(shù)據(jù)有些業(yè)務(wù)邏輯是無法實(shí)現(xiàn)的。

前后端分離中需要有模板化，所以除了接口規(guī)范外還要有頁面規(guī)范。另外手動(dòng)實(shí)現(xiàn)Mock Server是有一定成本的，我們?yōu)榇颂峁┝伺涮椎臉?gòu)建工具，用來解析模板、Mock接口。

實(shí)踐方案

NEI協(xié)作體系

從交互階段開始就可以根據(jù)交互稿設(shè)計(jì)接口，接著通過構(gòu)建工具生成初始化代碼，前后端開發(fā)完成后進(jìn)行自測(cè)。自測(cè)的過程中，由于前端的Mock數(shù)據(jù)都是生成在本地或者是平臺(tái)提供的接口，所以可以通過修改數(shù)據(jù)進(jìn)行更充分的自測(cè)。后端則主要是對(duì)接口是否符合定義的測(cè)試，我們也提供了這方面的工具。最終這樣就能有效降低聯(lián)調(diào)的成本。

接口

接口的設(shè)計(jì)人員首先要對(duì)系統(tǒng)功能非常了解，其次對(duì)前后端開發(fā)都有所涉獵，了解前端的功能實(shí)現(xiàn)以及后端的接口實(shí)現(xiàn)。因此我個(gè)人是傾向于前端架構(gòu)師這一角色，但是很多公司其實(shí)是沒有這一職位定義的。

接口的設(shè)計(jì)必須遵循業(yè)界規(guī)范，比如Restful接口規(guī)范。然后要描述清晰，不能遺漏重要信息。

數(shù)據(jù)模型

實(shí)際開發(fā)過程，后端在創(chuàng)建接口的時(shí)候會(huì)事先建立數(shù)據(jù)模型，并進(jìn)行一些增刪改查。前端也有一套對(duì)應(yīng)的數(shù)據(jù)模型抽象，這樣做的優(yōu)點(diǎn)在于能夠?qū)崿F(xiàn)復(fù)用、規(guī)范以及自動(dòng)化。

NEI支持的數(shù)據(jù)模型

NEI構(gòu)建工具原理

通過接口定義NEI平臺(tái)上的數(shù)據(jù)規(guī)范，再使用NEI Toolkit導(dǎo)出規(guī)范，最后使用Express啟動(dòng)服務(wù)。

NEI中的接口規(guī)范定義請(qǐng)求與數(shù)據(jù)的關(guān)系；頁面規(guī)范定義頁面與模板、接口的關(guān)系；模板規(guī)范定義模板與數(shù)據(jù)的關(guān)系。

NEI的模擬容器

圖中是NEI的模擬容器，接口、頁面都被直觀的展現(xiàn)出來。它的主要功能有頁面Mock、接口Mock、監(jiān)聽靜態(tài)文件以及其他前端頻繁用到的功能。

前端自測(cè)

上圖是構(gòu)建工具生成的Mock數(shù)據(jù)文件，其中data.json就是Mock值，data.js主要是做一些攔截。前端的自測(cè)可以修改data.json數(shù)據(jù)以及data.js過濾器。

后端自測(cè)

NEI集成了接口測(cè)試功能，比如驗(yàn)證字段類型是否匹配、字段值是否符合定義、字段是否缺失或多余以及自動(dòng)生成測(cè)試報(bào)告和批量運(yùn)行用例等功能。

前后端聯(lián)調(diào)

前后端聯(lián)調(diào)理論上只是服務(wù)器環(huán)境的地址不一樣，本地開發(fā)使用Localhost服務(wù)器，要使用其他環(huán)境只需將Localhost替換成相應(yīng)地址。一般定義時(shí)不用設(shè)置Localhost這塊的地址，只關(guān)注后面的地址。

地址變更只需要修改配置文件Server.Config.js。

其他方面的探索和實(shí)踐

我們還做了其他方面的探索和實(shí)踐，包括遷移老項(xiàng)目、團(tuán)隊(duì)協(xié)作、支持業(yè)界標(biāo)準(zhǔn)、對(duì)測(cè)試工程師的支持、支持典型產(chǎn)品。

總結(jié)

以上是生活随笔為你收集整理的网易NEI在面临前后端分离问题，所提供的完整解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。