接口設(shè)計(jì)

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_design_overview.png" alt="" />

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_elements.png" alt="" />

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

約定

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_rule.png" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_rule_detail.png" alt="" />

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

接口規(guī)范

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

頁(yè)面入口規(guī)范

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_page_entry.png" alt="" />

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

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/T/template_normal_error.jpg" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_data_sync.png" alt="" />

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

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

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_async.png" alt="" />

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

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

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

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/A/api-rule-apply.jpg" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/A/api-rule-apply-1.jpg" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/A/api-apply-2.jpg" alt="" />

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

本地開發(fā)

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-development.jpg" alt="" />

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

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

Local Server

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-server-working.jpg" alt="" />

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

Local Proxy

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-proxy-working.jpg" alt="" />

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-and-remote.png" alt="" />

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