接口設(shè)計

用戶使用 Web 客戶端訪問 Web 系統(tǒng)，系統(tǒng)在收到請求后執(zhí)行操作 （收集數(shù)據(jù)模型，選擇數(shù)據(jù)經(jīng)行組裝），將結(jié)果返回給客戶。

其中包括的元素和關(guān)系如下圖所示：

• Template，分離數(shù)據(jù)模型的頁面結(jié)構(gòu)，根據(jù)不同的數(shù)據(jù)模型展現(xiàn)不同的信息
• URL，頁面訪問地址、頁面標(biāo)示
• API，用于載入異步請求的接口
• Model，數(shù)據(jù)模型，頁面模板組裝模型和異步請求返回的數(shù)據(jù)模型

約定

1. URL 與頁面模板間的映射，和異步載入內(nèi)容對應(yīng)的接口
2. 視圖模板和數(shù)據(jù)模型的對應(yīng)（數(shù)據(jù)模型的格式和類型）
3. 異步接口輸入輸出信息的約定

1. 頁面入口規(guī)范，定義系統(tǒng)對外可訪問入口和配置信息（URL、模板、接口）
2. 同步數(shù)據(jù)規(guī)范，定義系統(tǒng)對模板文件的預(yù)填信息（模板、數(shù)據(jù)模型）
3. 異步接口規(guī)范，定義前后端接口信息（接口、數(shù)據(jù)模型）

接口規(guī)范

每個規(guī)范也會對應(yīng)若干規(guī)定若干規(guī)則約定來指導(dǎo)前后端工程師的具體實(shí)施。

頁面入口規(guī)范

• 基本信息
• 輸入?yún)?shù)
• 模板列表
• 接口列表（異步載入數(shù)據(jù)接口）

頁面入口規(guī)范（范例）

• 頁面基本信息，描述頁面的主要功能
• 輸入?yún)?shù)為訪問地址時支持的參數(shù)說明
• 異常跳轉(zhuǎn)，為系統(tǒng)全局異常處理
• 模板列表，列舉當(dāng)前頁面的相關(guān)模板，包括異常（如下圖）
• 頁面需要的所有異步接口列表

同步數(shù)據(jù)規(guī)范

• 基本信息
• 預(yù)填數(shù)據(jù)
• 注入接口

同步數(shù)據(jù)規(guī)范（范例）

• 模板的基本信息
• 預(yù)填數(shù)據(jù)包括全局和頁面數(shù)據(jù)及其類型
• 注入的接口說明（輸入輸出信息），沒有可以不填寫

異步接口數(shù)據(jù)規(guī)范

• 基本信息
• 輸入信息
• 輸出信息

異步接口規(guī)范（范例）

• 接口基本信息，地址不帶查詢參數(shù)
• 輸入數(shù)據(jù)，REST，查詢數(shù)據(jù)（必須包含名稱類型及描述）
• 輸出結(jié)果，通用部分及結(jié)果集（復(fù)雜的信息需展開說明）

規(guī)范的應(yīng)用

通過模擬數(shù)據(jù)的形成，將前端本地開發(fā)與后端獨(dú)立出來， 這樣前端工程師就可以獨(dú)立的進(jìn)行本地的開發(fā)工作。

使用頁面入口規(guī)范制定項目結(jié)構(gòu)（配置信息，目錄結(jié)構(gòu)和模板結(jié)構(gòu)）， 此過程可以使用自動化工具自動完成。

根據(jù)同步數(shù)據(jù)規(guī)范可生成模擬數(shù)據(jù)的配置文件。（此部分通用可以使用自動化工具來完成）

根據(jù)異步接口規(guī)范生成模擬異步數(shù)據(jù)。

本地開發(fā)

前端開發(fā)環(huán)境包含兩個部分，本地模擬服務(wù)器和本地代理。

1. 客戶端發(fā)送的請求，會被本地模擬服務(wù)器攔截并返回相應(yīng)的模擬數(shù)據(jù)
2. 客戶端發(fā)送的異步請求，會被本地代理攔截并返回對應(yīng)的模擬數(shù)據(jù)

Local Server

根據(jù)請求規(guī)則進(jìn)行匹配，然后生成（整合模板和模擬數(shù)據(jù)）所請求的頁面

Local Proxy

攔截異步請求后，根據(jù)請求的匹配規(guī)則返回所請求的數(shù)據(jù)（例如 JSON 或 XML）。

聯(lián)調(diào)

前后端聯(lián)調(diào)需要去除本地環(huán)境，在實(shí)際開發(fā)中只需要對配置文件進(jìn)行調(diào)整既可 （控制哪些請求需要被本地服務(wù)器或代理攔截，哪些需要使用遠(yuǎn)程服務(wù)器）。