2.1 前后臺分離開發介紹
在之前的課程中,我們介紹過,前端開發有2種方式:前后臺混合開發和前后臺分離開發。
前后臺混合開發,顧名思義就是前臺后臺代碼混在一起開發,如下圖所示:
這種開發模式有如下缺點:
-
溝通成本高:后臺人員發現前端有問題,需要找前端人員修改,前端修改成功,再交給后臺人員使用
-
分工不明確:后臺開發人員需要開發后臺代碼,也需要開發部分前端代碼。很難培養專業人才
-
不便管理:所有的代碼都在一個工程中
-
不便維護和擴展:前端代碼更新,和后臺無關,但是需要整個工程包括后臺一起重新打包部署。
所以我們目前基本都是采用的前后臺分離開發方式,如下圖所示:
我們將原先的工程分為前端工程和后端工程這2個工程,然后前端工程交給專業的前端人員開發,后端工程交給專業的后端人員開發。前端頁面需要數據,可以通過發送異步請求,從后臺工程獲取。但是,我們前后臺是分開來開發的,那么前端人員怎么知道后臺返回數據的格式呢?后端人員開發,怎么知道前端人員需要的數據格式呢?所以針對這個問題,我們前后臺統一指定一套規范!我們前后臺開發人員都需要遵循這套規范開發,這就是我們的接口文檔。接口文檔有離線版和在線版本,接口文檔示可以查詢今天提供資料/接口文檔示例里面的資料。那么接口文檔的內容怎么來的呢?是我們后臺開發者根據產品經理提供的產品原型和需求文檔所撰寫出來的,產品原型示例可以參考今天提供資料/頁面原型里面的資料。
那么基于前后臺分離開發的模式下,我們后臺開發者開發一個功能的具體流程如何呢?如下圖所示:
-
需求分析:首先我們需要閱讀需求文檔,分析需求,理解需求。
-
接口定義:查詢接口文檔中關于需求的接口的定義,包括地址,參數,響應數據類型等等
-
前后臺并行開發:各自按照接口文檔進行開發,實現需求
-
測試:前后臺開發完了,各自按照接口文檔進行測試
-
前后段聯調測試:前段工程請求后端工程,測試功能
2.2 YAPI
2.2.1 YAPI介紹
前后臺分離開發中,我們前后臺開發人員都需要遵循接口文檔,所以接下來我們介紹一款撰寫接口文檔的平臺。
YApi 是高效、易用、功能強大的 api 管理平臺,旨在為開發、產品、測試人員提供更優雅的接口管理服務。
其官網地址:http://yapi.smart-xwork.cn/
YApi主要提供了2個功能:
-
API接口管理:根據需求撰寫接口,包括接口的地址,參數,響應等等信息。
-
Mock服務:模擬真實接口,生成接口的模擬測試數據,用于前端的測試。
2.2.2 接口文檔管理
接下來我們演示一下YApi是如何管理接口文檔的。
首先我們登錄YAPI的官網,然后使用github或者百度賬號登錄,沒有的話去注冊一個,如下圖所示:
登錄進去后,在個人空間中,選擇項目列表->添加測試項目,效果如圖所示:
然后點擊創建的項目,進入到項目中,緊接著先添加接口的分類,如下圖所示
然后我們選擇當前創建的分類,創建接口信息,如下圖所示:
緊接著,我們來到接口的編輯界面,對接口做生層次的定制,例如:接口的參數,接口的返回值等等,效果圖下圖所示:
添加接口的請求參數,如下圖所示:
添加接口的返回值,如下圖所示:
然后保存上述設置,緊接著我們可以來到接口的預覽界面,查詢接口的信息,其效果如下圖所示:篇幅有限,只截取部分
最后,我們還可以設置接口的mock信息,
來到接口的Mock設置窗口,如下圖所示:
緊接著我們來到接口的預覽界面,直接點擊Mock地址,如下圖所示:
我們發現瀏覽器直接打開,并返回如下數據:
如上步驟就是YAPI接口平臺中對于接口的配置步驟。