在協(xié)作流程的博文中，我們了解了一個Web系統(tǒng)的體系架構(gòu)，以及前端與后端交互的整個流程，接下來簡單回顧，并進行相應(yīng)的規(guī)則約定
當客戶端向服務(wù)器端發(fā)送一個請求時，服務(wù)器端的Web系統(tǒng)收到該請求，通過分析來進行一系列的操作，包括搜集所有的數(shù)據(jù)模型，通常這個過程會伴隨有數(shù)據(jù)庫操作；數(shù)據(jù)搜集完成后，Web系統(tǒng)根據(jù)請求信息，選擇合適的模板來響應(yīng)Web客戶端
這時，問題來了，用戶請求的地址需要通過什么樣的約定規(guī)則映射到視圖模板上呢？
Web系統(tǒng)選擇了合適的模板之后，將搜集的數(shù)據(jù)模型按照一定的約定規(guī)則，交給模板引擎進行頁面結(jié)構(gòu)的組裝
這時，問題又來了，不同的模板需要通過什么樣的約定規(guī)則與數(shù)據(jù)模型進行匹配呢？
有了視圖模板和數(shù)據(jù)模型后，Web系統(tǒng)就可以組裝出客戶端所需要的頁面結(jié)構(gòu)，然后再將這個頁面結(jié)構(gòu)返回給客戶端?？蛻舳四玫椒祷氐臄?shù)據(jù)模型后，根據(jù)一定的規(guī)則繪制頁面，同時展示給用戶
實際上，頁面只包含了一部分數(shù)據(jù)，還有一部分數(shù)據(jù)需要通過另外的接口來載入。接下來，客戶端根據(jù)一系列的約定規(guī)則發(fā)起數(shù)據(jù)請求
問題來了，一個頁面需要包含哪些數(shù)據(jù)載入的請求呢？換句話說，一個頁面中，哪些數(shù)據(jù)需要通過異步請求載入進來的呢？
Web系統(tǒng)收到數(shù)據(jù)請求之后，根據(jù)一系列的數(shù)據(jù)操作，篩選出約定的數(shù)據(jù)模型
最后的問題，一個數(shù)據(jù)請求需要什么樣的約定規(guī)則來與數(shù)據(jù)模型進行匹配呢？
Web系統(tǒng)搜集到數(shù)據(jù)之后，按照約定規(guī)則組裝出數(shù)據(jù)模型，返回給客戶端。客戶端將數(shù)據(jù)模型按照一定的結(jié)構(gòu)展示給用戶
在以上的交互流程中，我們可以提取出4個關(guān)鍵的元素：URL、TEMPLATE、API、MODEL
URL：頁面訪問地址或者稱為頁面標識
Template：一個頁面對應(yīng)的分離了數(shù)據(jù)模型之后的頁面結(jié)構(gòu)，后續(xù)可以根據(jù)不同的數(shù)據(jù)模型展現(xiàn)不同的信息
API：頁面用于載入數(shù)據(jù)的異步請求的接口
Model：數(shù)據(jù)模型(包含組裝頁面模板的模型和異步請求返回的數(shù)據(jù)模型)
如果要對前后端進行分離，需要進行以下一些規(guī)則約定
1、URL與模板的約定，約定了頁面需要映射到哪些視圖模板上去
2、URL與異步接口的約定，約定了頁面有哪些數(shù)據(jù)是通過異步接口載入進來的
3、模板和數(shù)據(jù)模型的約定，約定了視圖模板與什么樣的數(shù)據(jù)模型相對應(yīng)，以及數(shù)據(jù)模型的格式和類型等信息
4、異步接口和數(shù)據(jù)模型的約定，約定了異步接口的輸入輸出信息
頁面入口規(guī)范用來處理URL與模板，及URL與接口之間的約定
同步數(shù)據(jù)規(guī)范用來處理模板和數(shù)據(jù)模型的約定
異步接口規(guī)范用來處理異步接口和數(shù)據(jù)模型的約定
通過前面的內(nèi)容，我們大致地了解了頁面入口規(guī)范、同步數(shù)據(jù)規(guī)范和異步接口規(guī)范這三個基礎(chǔ)規(guī)范，其中每個規(guī)范也會定義出若干規(guī)則約定來指導(dǎo)前后端工程師的具體實施
接下來，詳細介紹每個規(guī)范包含哪些約定規(guī)則，以及這些約定規(guī)則是如何制定的，以網(wǎng)易云音樂的下面這個頁面為例進行說明
【頁面入口規(guī)范】
頁面入口規(guī)范首先要對頁面進行說明，包含一些用來描述頁面基本信息、URL攜帶參數(shù)說明、頁面可能會用到的視圖模板的對應(yīng)關(guān)系、頁面可能會發(fā)出的異步請求的異步載入數(shù)據(jù)的接口的詳細信息。簡而言之，可以總結(jié)為以下四點
1、基本信息2、輸入?yún)?shù)3、模板列表4、接口列表
下圖是頁面入口規(guī)范中，某個頁面所定義的規(guī)則約定的范例
首先，前、后端工程師需要根據(jù)交互原型對系統(tǒng)進行頁面拆分。頁面拆分的原則主要根據(jù)前后端功能實現(xiàn)的方式(比如單頁或多頁)來權(quán)衡
基本信息包括訪問地址和頁面描述，訪問地址可以不攜帶參數(shù)，頁面描述說明了頁面的用途或功能
輸入?yún)?shù)主要用來說明訪問地址在請求時可以攜帶的參數(shù)，包括參數(shù)名稱、參數(shù)類型和參數(shù)描述
異常跳轉(zhuǎn)用于系統(tǒng)全局異常處理，該部分并不是必須的
模板列表需要列舉出當前頁面涉及到的相關(guān)視圖模板，其中必須包含一個默認的視圖模板。如果正常顯示和異常顯示的頁面差異較大值時，還需要包含異常模板，或其他模板
接口列表需要定義出頁面用到的所有異步接口列表，要根據(jù)交互原型及后端數(shù)據(jù)的操作開銷來進行權(quán)衡。一般來說，對于SEO的要求較低，或頁面的相關(guān)性不高，或者已經(jīng)存在數(shù)據(jù)載入接口，或者數(shù)據(jù)收集時需要長時間的開銷，可以考慮用異步的方式來載入數(shù)據(jù)。圖片的接口列表包括歌曲列表、相關(guān)節(jié)目、收藏節(jié)目和評論列表
【同步數(shù)據(jù)規(guī)范】
同步數(shù)據(jù)規(guī)范包含用于對模板的詳細說明的基本信息、對數(shù)據(jù)模型的說明(名稱、類型等信息)，如果視圖模板需要后端注入接口，也需要包含注入接口的信息。簡而言之，可以總結(jié)為以下三點
1、基本信息2、預(yù)填數(shù)據(jù)3、注入接口
下圖是同步數(shù)據(jù)規(guī)范中，某個模板所定義的規(guī)則約定的范例
首先，是模板基本信息部分，描述了模板文件的物理位置，及模板文件的功能等
預(yù)填數(shù)據(jù)的信息就是注入到模板中的數(shù)據(jù)模型，包括模板所用到的所有數(shù)據(jù)的詳細信息，不僅包含全局數(shù)據(jù)，也包含當前頁面的數(shù)據(jù)模型。其中，對數(shù)據(jù)的說明要包含數(shù)據(jù)名稱、數(shù)據(jù)類型和數(shù)據(jù)描述等信息。對于復(fù)雜的數(shù)據(jù)類型，還需展開介紹其內(nèi)部的數(shù)據(jù)模型的結(jié)構(gòu)
注入接口主要定義接口的輸入輸出信息，但注入接口并不是每個模板都必須的，大部分模板不需要注入接口
【異步接口規(guī)范】
異步接口規(guī)范包含以下三點
1、基本信息2、輸入數(shù)據(jù)3、輸出結(jié)果
下圖是異步接口規(guī)范中，某個接口所定義的規(guī)則約定的范例
首先，異步接口基本信息部分，包括接口的請求方式、接口地址、接口描述等，圖中的接口地址不需要攜帶查詢參數(shù)
輸入數(shù)據(jù)(REST和查詢參數(shù))需要包含數(shù)據(jù)名稱、數(shù)據(jù)類型和數(shù)據(jù)描述等信息
輸出結(jié)果(通用部分和結(jié)果集)主要定義的是返回給客戶端的數(shù)據(jù)模型的結(jié)構(gòu)，需要說明每個字段的名稱、類型和描述等信息。對于復(fù)雜的數(shù)據(jù)類型，還需展開介紹其內(nèi)部的數(shù)據(jù)模型的結(jié)構(gòu)
在系統(tǒng)設(shè)計階段，定制了三個規(guī)則約定規(guī)范。在進入開發(fā)階段，前、后端工程師如何應(yīng)用這些規(guī)范來完成系統(tǒng)中的設(shè)計、開發(fā)、測試等工作呢？
1、根據(jù)頁面入口規(guī)范來構(gòu)建項目結(jié)構(gòu)
頁面入口規(guī)范定義了每個頁面對應(yīng)的模板文件，可以導(dǎo)出配置信息，然后構(gòu)建項目的目錄結(jié)構(gòu)(包含前端的目錄結(jié)構(gòu)和后端的模板結(jié)構(gòu))
根據(jù)配置文件生成目錄的過程可以使用自動化工具來完成
2、根據(jù)同步數(shù)據(jù)規(guī)范模擬同步數(shù)據(jù)
同步數(shù)據(jù)規(guī)范定義了每個模板定義的同步數(shù)據(jù)信息，可以導(dǎo)出模擬數(shù)據(jù)的配置文件，然后生成同步的模擬數(shù)據(jù)的文件
根據(jù)配置文件生成模擬數(shù)據(jù)的過程可以使用自動化工具來完成
3、根據(jù)異步接口規(guī)范模擬異步數(shù)據(jù)
異步接口規(guī)范定義了每個接口的輸入輸出，可以導(dǎo)出接口與返回結(jié)果的模擬數(shù)據(jù)的匹配的配置信息，然后生成接口對應(yīng)的模擬數(shù)據(jù)的文件
根據(jù)配置文件生成模擬數(shù)據(jù)的過程可以使用自動化工具來完成
在本地開發(fā)時，通過模擬數(shù)據(jù)的形式將前端相關(guān)的內(nèi)容與后端獨立出來，接下來前端工程師就可以獨立開發(fā)
進入開發(fā)階段，一般要怎樣來搭建前端開發(fā)環(huán)境呢？前端開發(fā)環(huán)境主要包含兩部分：一部分是本地模擬服務(wù)器、另一部分是本地代理
客戶端發(fā)出的請求首先會被本地模擬服務(wù)器攔截，本地模擬服務(wù)器根據(jù)一定的配置規(guī)則，直接將請求返回給Web客戶端。如果頁面存在某些數(shù)據(jù)需要異步載入，這個請求會被本地代理攔截，本地代理根據(jù)模擬數(shù)據(jù)的映射規(guī)則，直接將生成的模擬數(shù)據(jù)返回給Web客戶端
前端本地開發(fā)環(huán)境搭建完成之后，所有的客戶端與服務(wù)器端的交互都會被本地模擬服務(wù)器或本地代理攔截，這樣就將前后端開發(fā)做了徹底的分離
【本地模擬服務(wù)器】
本地環(huán)境中的本地模擬服務(wù)器在接收到Web客戶端發(fā)來的請求時，首先會根據(jù)處理規(guī)則進行匹配，如果匹配，則請求被攔截
根據(jù)規(guī)范導(dǎo)出的配置信息同樣會被本地模擬服務(wù)器所使用。通過配置信息，本地模擬服務(wù)器可以識別出這些請求所對應(yīng)的模板文件和模擬數(shù)據(jù)所在的位置，從而整合模板文件和模擬數(shù)據(jù)，生成一個HTML頁面結(jié)構(gòu)代碼，返回給Web客戶端
【本地代理】
本地環(huán)境中的本地代理在接收到Web客戶端發(fā)來的異步請求時，會攔截該請求。根據(jù)規(guī)范導(dǎo)出的配置信息同樣會被本地代理所使用，通過配置信息，本地代理找出請求對應(yīng)的模擬數(shù)據(jù)，把數(shù)據(jù)轉(zhuǎn)換成JSON數(shù)據(jù)格式或其他定義好的數(shù)據(jù)格式，返回給Web客戶端
如果請求未匹配，則該異步請求可能會訪問遠程服務(wù)器
【聯(lián)調(diào)】
通過本地環(huán)境的搭建獨立了前后端開發(fā)的過程。前后端開發(fā)工作完成之后，需要進行聯(lián)調(diào)
前后端聯(lián)調(diào)需要去除本地環(huán)境，這時Web客戶端發(fā)出的請求就可以順利到達服務(wù)器端
在實際開發(fā)中只需要對配置文件進行調(diào)整既可，以控制哪些請求需要被本地服務(wù)器或代理攔截，哪些需要使用遠程服務(wù)器
創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。
重慶分公司
重慶分公司
