◆張?jiān)S

前后端分離框架之API接口開(kāi)發(fā)與分析—紅色書(shū)籍抽獎(jiǎng)系統(tǒng)

◆張?jiān)S

（宿遷澤達(dá)職業(yè)技術(shù)學(xué)院 江蘇 223800）

近年來(lái)，傳統(tǒng)開(kāi)發(fā)模式很難滿(mǎn)足多端化（pc端、手機(jī)端、APP、車(chē)載系統(tǒng)等）服務(wù)需求。前后端分離已成為互聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式。通過(guò)“紅色書(shū)籍抽獎(jiǎng)系統(tǒng)”案例，從應(yīng)用場(chǎng)景、業(yè)務(wù)需求、開(kāi)發(fā)模式、前后端服務(wù)器之間數(shù)據(jù)的交互等分析講解，后端服務(wù)器提供接口多個(gè)前端調(diào)用展示，彰顯前后端分離開(kāi)發(fā)特點(diǎn)及優(yōu)勢(shì)。

開(kāi)發(fā)模式；前后端分離；API接口；JSON

早期網(wǎng)站建設(shè)主要滿(mǎn)足PC端瀏覽器使用，而隨著多端服務(wù)化：如PC端、手機(jī)端、平板端的瀏覽器、App、小程序、車(chē)載系統(tǒng)等多終端顯示不同版面的需要、傳統(tǒng)服務(wù)器端單一開(kāi)發(fā)模式架構(gòu)很難滿(mǎn)足多終端需求。從傳統(tǒng)開(kāi)發(fā)模式分離出的前后端分離開(kāi)發(fā)模式已成為互聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式。

1 項(xiàng)目介紹

2021年是中國(guó)共產(chǎn)黨成立100周年，各大黨政機(jī)關(guān)、書(shū)店、學(xué)校等單位推出“學(xué)黨史，悟思想，知黨恩，跟黨走”系列活動(dòng)。因網(wǎng)絡(luò)便捷性，除在線學(xué)習(xí)，甚至通過(guò)抽獎(jiǎng)活動(dòng)引導(dǎo)在線答題、調(diào)查問(wèn)卷。某單位推出答題正確率達(dá)到一定比例抽獎(jiǎng)獲取贈(zèng)送紅色書(shū)籍，為社會(huì)傳遞更多紅色文化、紅色思想、正能量起到良好的社會(huì)效應(yīng)。

項(xiàng)目業(yè)務(wù)需求：

（1）抽獎(jiǎng)?wù)故鞠到y(tǒng)要多終端展示（PC端、手機(jī)端等）；

（2）抽獎(jiǎng)內(nèi)容為書(shū)籍books；

（3）參與活動(dòng)達(dá)到標(biāo)準(zhǔn)跳轉(zhuǎn)到書(shū)籍抽獎(jiǎng)系統(tǒng)。

2 開(kāi)發(fā)模式選擇

2.1 傳統(tǒng)開(kāi)發(fā)模式

早期互聯(lián)網(wǎng)項(xiàng)目通過(guò)PC端瀏覽器向web服務(wù)器發(fā)送請(qǐng)求，服務(wù)器端負(fù)責(zé)業(yè)務(wù)邏輯處理及處理結(jié)果嵌入視圖（如jsp）返回給客戶(hù)端瀏覽器。

圖1 傳統(tǒng)開(kāi)發(fā)模式瀏覽器與服務(wù)器交互流程

通過(guò)圖1可見(jiàn)，傳統(tǒng)Web服務(wù)器端是重開(kāi)發(fā)模式，扮演開(kāi)發(fā)多重角色：接收請(qǐng)求、調(diào)度業(yè)務(wù)邏輯處理、計(jì)算結(jié)果嵌入視圖返回給瀏覽器。這種高度糅合，除各種角色融入在一起不利于編碼解耦，更為重要很難滿(mǎn)足本項(xiàng)目不同設(shè)備請(qǐng)求返回不同版面。

2.2 前后端分離模式

前后端分離開(kāi)發(fā)模式是由傳統(tǒng)開(kāi)發(fā)模式演變而來(lái)的。把傳統(tǒng)web服務(wù)器要完成多重角色分工給后端服務(wù)器和前端服務(wù)器。后端服務(wù)器主要負(fù)責(zé)接收前端請(qǐng)求，業(yè)務(wù)邏輯處理結(jié)果數(shù)據(jù)返回給前端；前端服務(wù)器主要負(fù)責(zé)請(qǐng)求和從后端服務(wù)器傳遞過(guò)來(lái)數(shù)據(jù)渲染到頁(yè)面。

圖2 前后端服務(wù)器流程圖

通過(guò)圖2可見(jiàn)一個(gè)后端API服務(wù)器提供的接口，為前端服務(wù)器群中多個(gè)前端服務(wù)器（如PC前端服務(wù)器、手機(jī)端服務(wù)器）以及APP安裝包，小程序等終端提供數(shù)據(jù)支持服務(wù)。

通過(guò)開(kāi)發(fā)模式比較，紅色書(shū)籍抽獎(jiǎng)系統(tǒng)因采用多端化服務(wù)需求決定選擇前后端分離開(kāi)發(fā)模式。

3 軟件設(shè)計(jì)分析

紅色抽獎(jiǎng)系統(tǒng)架構(gòu)是一個(gè)后端數(shù)據(jù)支持多前端展示界面。如何表示要交互數(shù)據(jù)，數(shù)據(jù)信息流傳遞過(guò)程，及多前端架構(gòu)如何展示數(shù)據(jù)是設(shè)計(jì)中面對(duì)重點(diǎn)問(wèn)題。

3.1 前后端交互的數(shù)據(jù)

根據(jù)面向?qū)ο笏枷?，世界萬(wàn)物皆對(duì)象。抽取到獎(jiǎng)品某本書(shū)為book即對(duì)象，對(duì)象=屬性+方法。多個(gè)對(duì)象放在一起的集合為books。

圖3 對(duì)象、對(duì)象的屬性及屬性值的示意圖

圖3轉(zhuǎn)換成JSON代碼表示如下：

var book={

"bookName"："《烈火中永生》"，

"bookPic"："imaes/001.jpg"，

"bookIntro"："書(shū)的簡(jiǎn)介"

}

多本書(shū)是相同數(shù)據(jù)類(lèi)型放在一起稱(chēng)之為集合，用books表示。以上是JSON存儲(chǔ)和交換文本基本語(yǔ)法。

3.2 前后端數(shù)據(jù)傳遞過(guò)程

圖4 前后端通過(guò)ajax操作JSON格式數(shù)據(jù)交互

上圖可見(jiàn)前端服務(wù)器放置運(yùn)行文件html，html編碼中通過(guò)嵌入javaScript操作Ajax發(fā)出http請(qǐng)求/響應(yīng)。http是簡(jiǎn)單的請(qǐng)求-響應(yīng)協(xié)議，同時(shí)可攜帶JSON格式的數(shù)據(jù)。后端服務(wù)器根據(jù)請(qǐng)求路徑并把攜帶的JSON數(shù)據(jù)作為參數(shù)傳遞給控制器中指定自定義的函數(shù)。

采用sping boot技術(shù)在控制器中定義的函數(shù)上面添加一行注解@RequestMapping（）配置url路徑來(lái)匹配接收前端請(qǐng)求url。后端服務(wù)器根據(jù)業(yè)務(wù)邏輯處理的直接返回靜態(tài)數(shù)據(jù)或操作數(shù)據(jù)庫(kù)得到結(jié)果數(shù)據(jù)，但在返回前要轉(zhuǎn)換成JSON格式。通過(guò)@ResponseBody（）把處理結(jié)果轉(zhuǎn)換成JSON格式，再通過(guò)http響應(yīng)形式傳遞給前端。

如上所述前后端數(shù)據(jù)傳遞是通過(guò)http攜帶JSON格式數(shù)據(jù)請(qǐng)求或響應(yīng)。請(qǐng)求url在控制器方法前通過(guò)@RequestMapping（）注解配置，訪問(wèn)url的路徑則會(huì)調(diào)用控制器類(lèi)中被注解的函數(shù)。http響應(yīng)值通過(guò)@ResponseBody（）轉(zhuǎn)換成JSON格式數(shù)據(jù)。

3.3 多前端架構(gòu)

當(dāng)今PC端瀏覽器、手機(jī)端瀏覽器、平板設(shè)備及小程序、APP多個(gè)界面展示和操作數(shù)據(jù)相同，傳統(tǒng)單一服務(wù)器開(kāi)發(fā)模式很難滿(mǎn)足當(dāng)前多場(chǎng)景應(yīng)用需要。隨著業(yè)務(wù)發(fā)展需要，前后端服務(wù)器如何配置架構(gòu)呢？

以紅色書(shū)籍抽獎(jiǎng)系統(tǒng)為例，前后端人員在開(kāi)發(fā)之前首先形成開(kāi)發(fā)webAPI接口文檔。說(shuō)明并規(guī)范提供數(shù)據(jù)展示不同接口路徑URL、請(qǐng)求方式、傳遞參數(shù)、返回JSON數(shù)據(jù)（如books）。前后端人員根據(jù)webAPI接口文檔要求可同時(shí)開(kāi)發(fā)進(jìn)行，前端人員可創(chuàng)建模擬數(shù)據(jù)，根據(jù)后端完成進(jìn)度調(diào)整訪問(wèn)接口路徑即可獲取后端真實(shí)數(shù)據(jù)。

圖5 前后端分離多前端架構(gòu)

由圖5可見(jiàn)多前端架構(gòu)模式，服務(wù)器端webApi接口統(tǒng)一提供JSON數(shù)據(jù)，右側(cè)多種設(shè)備和終端界面在html文件中嵌入AjAx操作http請(qǐng)求-響應(yīng)JSON數(shù)據(jù)。在開(kāi)發(fā)過(guò)程中，可以根據(jù)應(yīng)用場(chǎng)景需求，有選擇決定開(kāi)發(fā)哪些前端。

紅色書(shū)籍抽獎(jiǎng)系統(tǒng)是采用前后端分離架構(gòu)技術(shù)開(kāi)發(fā)而成，因使用場(chǎng)景要滿(mǎn)足PC端網(wǎng)站、手機(jī)端網(wǎng)站、APP中嵌入，凡活動(dòng)滿(mǎn)足一定參與抽獎(jiǎng)條件會(huì)跳入紅色書(shū)籍抽獎(jiǎng)系統(tǒng)。為此設(shè)計(jì)三個(gè)前端調(diào)用界面如圖6。

圖6 紅色書(shū)籍抽獎(jiǎng)系統(tǒng)三端顯示版面

前后端分離技術(shù)不只為多端化提供架構(gòu)方案，前后端分離會(huì)為以后的大型分布式架構(gòu)、彈性計(jì)算架構(gòu)、微服務(wù)架構(gòu)等打下堅(jiān)實(shí)的基礎(chǔ)。

4 總結(jié)

通過(guò)紅色書(shū)籍抽獎(jiǎng)系統(tǒng)綜合案例分析、講解、開(kāi)發(fā)。全面了解前后端分離不同模式的特點(diǎn)，能夠根據(jù)是否需要多前端正確選擇開(kāi)發(fā)模式。同時(shí)通過(guò)對(duì)項(xiàng)目背景、項(xiàng)目分析、項(xiàng)目實(shí)踐多個(gè)角度分析解講，從知識(shí)背景、所用知識(shí)點(diǎn)等使讀者能夠深入理解前后端分離框架相關(guān)知識(shí)及API接口開(kāi)發(fā)與調(diào)用。

[1]廖祥.基于前后端分離架構(gòu)的用戶(hù)權(quán)限控制系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].軟件工程，2020，23（12）：24-26.

[2]付敏峰，于林海.多終端Restful API框架設(shè)計(jì)研究及圖書(shū)漂流系統(tǒng)應(yīng)用[J].電腦知識(shí)與技術(shù)，2020，16（15）：4-7.

[3][杜石雷，劉繼偉，趙磊，等.基于開(kāi)放式通信協(xié)議的優(yōu)化系統(tǒng)接口程序設(shè)計(jì)與開(kāi)發(fā)[J].軟件，2021，42（01）：71-73.

[4]黃晟祺，許林瑞，汪玉笳，等.基于前后端交互的就醫(yī)無(wú)憂(yōu)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].2021，24（06）：53-56+49.

[5]方阿麗.Web開(kāi)發(fā)主流框架技術(shù)研究[J].無(wú)線互聯(lián)科技，2021，18（08）：64-65+96.

2021年江蘇省大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目“基于API接口網(wǎng)站開(kāi)發(fā)技術(shù)的研究”（項(xiàng)目編號(hào)：202114293015Y）