基于前后端分離技術(shù)的在線購物平臺研究與實現(xiàn)

方 生，秦曉安，王 睿

（安徽商貿(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前端棧基礎(chǔ)上，構(gòu)建了移動優(yōu)先的響應(yīng)式門戶。……