方 生，秦曉安，王 睿

（安徽商貿(mào)職業(yè)技術(shù)學(xué)院，安徽 蕪湖 241002）

0 引言

隨著Web技術(shù)的快速發(fā)展，Web應(yīng)用正朝著兼容多終端、高性能的方向飛速發(fā)展［1］。傳統(tǒng)的Web開發(fā)逐漸不能適應(yīng)大規(guī)模互聯(lián)網(wǎng)應(yīng)用對異構(gòu)技術(shù)棧多樣性和多團(tuán)隊協(xié)同開發(fā)模式的要求［2］。因此，許多研究試圖改進(jìn)MVC體系結(jié)構(gòu)。然而，由于MVC架構(gòu)的局限性，很難將前端和后端服務(wù)完全分離。各種本應(yīng)明確劃分的服務(wù)混雜在一起，給開發(fā)帶來諸多不便［3］。筆者針對軟件系統(tǒng)開發(fā)過程中存在的前后端嚴(yán)重耦合的問題，基于當(dāng)前的前后端技術(shù)體系，提出了一種前后端分離的軟件架構(gòu)模式。

1 相關(guān)技術(shù)

1.1 前端框架Vue.js及bootstrapvue技術(shù)

1.1.1Vue.js

為了提高開發(fā)效率，基于Vue.js（以下簡寫為Vue）框架開發(fā)了Web前端。Vue是一種用于搭建軟件界面的漸進(jìn)式前端框架。它采用自下而上的增量開發(fā)設(shè)計方法，是一種更靈活、更開放的解決方案，具有更簡單的體系結(jié)構(gòu)，便于開發(fā)人員快速掌握，還便于與第三方庫或現(xiàn)有項目集成，可以為復(fù)雜的應(yīng)用程序提供驅(qū)動程序［4］。

Vue采用MVVM（model-view-model）開發(fā)模式。此模式將前端從原始DOM操作中解放出來，使人們不再需要花費大量的時間來維護(hù)視圖和數(shù)據(jù)的統(tǒng)一，而只需要關(guān)注數(shù)據(jù)的變化。Vue的核心是一個快速響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。綁定建立后，DOM將與Vue對象中的數(shù)據(jù)同步。這樣，就不需要手動獲取DOM值。將其同步到JS中，可使代碼變得更加簡潔易懂。MVVM開發(fā)模式架構(gòu)如圖1所示。

圖1 MVVM開發(fā)模式架構(gòu)圖Fig.1MVVM development pattern architecture

1.1.2BootstrapVue

BootstrapVue是 基 于Bootstrap v4+Vue.js的 前端UI框架。它基于全球最流行的Bootstrap V4框架，在Vue.js前端?；A(chǔ)上，構(gòu)建了移動優(yōu)先的響應(yīng)式門戶。Bootstrap-Vue是一個ui組件庫。它遵循Vue的組件化開發(fā)方式，使用Bootstrap樣式控制組件外觀，摒棄了對jquery的依賴［5］，還允許Vue開發(fā)人員能夠輕松地在他們的項目中使用Bootstrap。

1.2 MySQL數(shù)據(jù)庫

在Web應(yīng)用方面，MySQL是非常好的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)應(yīng)用軟件［6］。它支持多種操作系統(tǒng)，提供多個API接口，支持多種開發(fā)語言，尤其對簡單的PHP語言有非常好的支持［7］。MySQL擁有體積小、速度快、性能高、使用簡單等優(yōu)點。同時，MySQL開放源代碼，使其具有使用門檻低的特點。結(jié)合項目的實際情況，本系統(tǒng)采用了MySQL數(shù)據(jù)庫。

1.3 RESTFul API服務(wù)

RESTful API是符合REST約束的網(wǎng)絡(luò)應(yīng)用接口。REST是Roy Thomas Fielding于2000年提出的一種軟件架構(gòu)規(guī)則［8］。它是設(shè)計風(fēng)格而不是標(biāo)準(zhǔn)，是基于HTTP、URI以及HTML這些萬維網(wǎng)的協(xié)議和標(biāo)準(zhǔn)。RESTFul架構(gòu)就是一種分布式的符合REST原則的架構(gòu)規(guī)范，其主要有以下幾個特點。

（1）資源有URI標(biāo)識。資源是指互聯(lián)網(wǎng)中的一個客觀實體，也可以是互聯(lián)網(wǎng)中某個具體網(wǎng)絡(luò)信息［9］。REST規(guī)范約定一個URI對應(yīng)一種信息資源。所以可以用一個特定的URL來對應(yīng)每一種信息資源。

（2）統(tǒng)一的接口。REST約定，狀態(tài)轉(zhuǎn)移是經(jīng)過HTTP的動作對網(wǎng)絡(luò)資源進(jìn)行操作，對資源的操作與HTTP協(xié)議中的POST（創(chuàng)建）、DELETE（刪除）、PUT（更新）以及GET（查詢）［10］相對應(yīng)，即統(tǒng)一了數(shù)據(jù)操作的接口。

（3）無狀態(tài)。REST基于HTTP無狀態(tài)協(xié)議，每次HTTP請求都是獨立的，任何兩個請求之間沒有必然聯(lián)系。

在無狀態(tài)的應(yīng)用系統(tǒng)中，資源有URI標(biāo)識，統(tǒng)一的接口，使得RESTFul API接口規(guī)范成為與開發(fā)語言無關(guān)、兼容多種異構(gòu)系統(tǒng)的標(biāo)準(zhǔn)架構(gòu)風(fēng)格［11］。

1.4 開發(fā)語言及相關(guān)環(huán)境

經(jīng)過多年的Web技術(shù)發(fā)展，目前WAMP和LAMP已經(jīng)成為業(yè)內(nèi)廣泛使用的網(wǎng)站構(gòu)架方案，即是Window（或Linux）、Apache、MySQL和PHP搭配組成的良好開發(fā)環(huán)境［12］。根據(jù)用戶的需求和實際的考察與分析，確定商城的開發(fā)環(huán)境，具體如下。

（1）服務(wù)器。從穩(wěn)定性、廣泛性及安全性方面綜合考慮，采用市場主流的Web服務(wù)器軟件—Apache服務(wù)器。

（2）數(shù)據(jù)庫。采用一種流行的、開源的數(shù)據(jù)庫管理系統(tǒng)，被譽為PHP“最佳搭檔”的MySQL數(shù)據(jù)庫服務(wù)器。

（3）語言。PHP即“超文本預(yù)處理器”，一種開源的服務(wù)器端腳本語言，是當(dāng)前非常流行的Web后端開發(fā)語言［13］。

2 系統(tǒng)的設(shè)計與實現(xiàn)

本文以在線購物平臺系統(tǒng)為例，探討基于Web前后端分離技術(shù)的實現(xiàn)。

2.1 系統(tǒng)業(yè)務(wù)模塊分析

在線購物平臺系統(tǒng)具有通用電子商城的購物功能流程，網(wǎng)站功能的具體劃分如下［14］。

（1）主頁。該頁面是用戶訪問網(wǎng)站的入口頁面，展示重點推薦的商品和促銷商品等信息，具有分類導(dǎo)航功能，方便用戶繼續(xù)搜索商品。

（2）商品詳情頁面。全面詳細(xì)地展示某一種商品的具體信息；購買商品后的評價；相似商品的推薦等內(nèi)容。

（3）購物車頁面。對某種商品產(chǎn)生消費意愿后，可以將商品添加到購物車頁面。購物車頁面詳細(xì)記錄了已添加商品的價格和數(shù)量等內(nèi)容。

（4）付款頁面。該頁面包含用戶常用收貨地址、付款方式的選擇和物流的挑選等內(nèi)容。

（5）登錄注冊頁面。該頁面含有用戶登錄或注冊時，表單信息提交的驗證等內(nèi)容。

2.2 系統(tǒng)的架構(gòu)設(shè)計

為了能更好的降低項目開發(fā)成本、提高軟件的開發(fā)效率，使產(chǎn)品能夠快速迭代，提升開發(fā)者體驗，本軟件系統(tǒng)采用當(dāng)前流行的前端和后端分離的開發(fā)方式。軟件架構(gòu)采用基于MVVM模式和RESTFul API接口的前后端分離的模式，具體如圖2所示。

圖2 軟件架構(gòu)模式Fig.2Software architecture pattern

2.3 系統(tǒng)的功能結(jié)構(gòu)設(shè)計

按功能劃分，在線購物平臺由主頁、商品、購物車、付款、登錄和注冊等模塊組成，功能結(jié)構(gòu)如圖3所示。

圖3 功能結(jié)構(gòu)圖Fig.3Functional structure

2.4 數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫的成功設(shè)計對系統(tǒng)功能的實現(xiàn)起著非常重要的作用。數(shù)據(jù)庫的設(shè)計主要體現(xiàn)在概念和邏輯設(shè)計。

2.4.1 數(shù)據(jù)庫E-R圖

根據(jù)之前的需求分析及系統(tǒng)分析，在線購物平臺的數(shù)據(jù)庫E-R圖如圖4所示。

圖4 E-R圖Fig.4E-R chart

2.4.2 數(shù)據(jù)庫表

系統(tǒng)主要包括用戶表信息、商品表信息、商品分類表信息、購物車表信息等。根據(jù)系統(tǒng)功能的需求，其功能主要體現(xiàn)在對數(shù)據(jù)庫的增加、刪除、修改以及查詢操作上。創(chuàng)建1個名為ShopDB的數(shù)據(jù)庫，該數(shù)據(jù)庫中包含以上信息對應(yīng)的數(shù)據(jù)表，外加管理員表、用戶收貨表信息、訂單表信息和訂單商品表信息等［15］，具體如表1～表5所示。

表1 管理員表Tab.1 Table of administrator

表2 用戶信息表Tab.2 Table of user information

表3 商品分類表Tab.3 Table of commodity classification

表4 商品表Tab.4 Table of commodity

表5 購物車表Tab.5 Table of shopping cart

2.5 RESTFul API接口設(shè)計

API接口是前端和后端數(shù)據(jù)傳遞的橋梁?；赗ESTFul API規(guī)范，把每個功能需求封裝成一個對應(yīng)的API。API指定了請求謂詞與請求URI。在這個階段，不需要對實際業(yè)務(wù)邏輯加以實現(xiàn)，只需要把輸入與輸出設(shè)計好。對于RESTFul API接口規(guī)范，客戶端向服務(wù)器端發(fā)出的請求就是輸入，服務(wù)器端對客戶端請求的響應(yīng)就是輸出。請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)都以JSON格式數(shù)據(jù)呈現(xiàn)。以商品功能為例，API接口設(shè)計如表6所示。

表6 商品功能RESTful APITab.6 Product function RESTful API

2.6 系統(tǒng)軟件設(shè)計

根據(jù)系統(tǒng)的模塊劃分，對軟件系統(tǒng)進(jìn)行了詳細(xì)的設(shè)計，包含Web前端、RESTFul API Services、業(yè)務(wù)邏輯以及對MySQL數(shù)據(jù)庫系統(tǒng)調(diào)用。在項目開發(fā)過程中，利用GitHub共享平臺共同開發(fā)，充分利用網(wǎng)絡(luò)資源，分別構(gòu)建前端和后端項目開發(fā)團(tuán)隊［16］。項目前端開發(fā)使用流行的Vue.js前端框架，對路由管理采用Vue-router插件，Vuex提供狀態(tài)管理功能，通過Axios實現(xiàn)前后端數(shù)據(jù)交互。前端項目基于node.js+npm對各種開源依賴包和工具進(jìn)行管理，通過WebPack工具實現(xiàn)前端資源的加載和打包。在后端項目開發(fā)時，僅對前端項目提供數(shù)據(jù)接口。

2.7 系統(tǒng)軟件分析

前后端分離后，前后端開發(fā)模式由串行變?yōu)椴⑿?，開發(fā)效率顯著提高。模塊之間沒有耦合，軟件系統(tǒng)可擴(kuò)展性增強。前后端分開部署服務(wù)器，使得軟件系統(tǒng)的數(shù)據(jù)處理能力和顯示能力更強，響應(yīng)速度更快。該系統(tǒng)具有良好的兼容性，能夠部署在windows或linux服務(wù)器上。實際運行結(jié)果表明，該系統(tǒng)具有良好的性能。

3 結(jié)語

本文提出了一種基于MVVM模式和RESTFul API接口的軟件體系結(jié)構(gòu)模式。在這種軟件架構(gòu)模式下，前端和后端開發(fā)人員有明確的權(quán)利和責(zé)任，這大大減少了前端和后端開發(fā)人員的溝通需求。開發(fā)人員只需要關(guān)注個人邏輯，而不考慮其他代碼的適應(yīng)性。前端和后端的分離實現(xiàn)了并行開發(fā)，有效地提高了開發(fā)效率。實踐證明，該模式在Web應(yīng)用開發(fā)過程中是有效的。