基于前后端分離技術(shù)的在線商城的設(shè)計(jì)與實(shí)現(xiàn)

鄒瑞 段華瓊

摘要：隨著移動終端的多樣化，各種各樣的終端涌現(xiàn)出了新的需求。為了滿足這些需求，Web應(yīng)用選擇了一種分離式開發(fā)——前后端分離技術(shù)，提升了項(xiàng)目的擴(kuò)展性和維護(hù)性。該文研究了一個(gè)在線商城的設(shè)計(jì)，并通過前后端分離架構(gòu)來實(shí)現(xiàn)，包括前后端的分離、nginx服務(wù)器的配置、mongoDB數(shù)據(jù)庫。

關(guān)鍵詞：前后端分離;在線商城;Vue.js技術(shù);Node.js技術(shù)

中圖分類號：TP311? ? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）26-0231-02

1系統(tǒng)概述

當(dāng)今是移動互聯(lián)的時(shí)代，各種終端的使用，Web應(yīng)用要適用在多終端上，用戶對Web應(yīng)用有了更高的要求。開發(fā)人員在編寫程序的過程之中，如果采用傳統(tǒng)的前后端耦合在一起的方式進(jìn)行開發(fā)，會使得代碼冗雜，可讀性和可重用性下降。前后端分離的開發(fā)模式可以減少這些問題的產(chǎn)生。前后端分離后，代碼的可讀性、可重用性增強(qiáng)。而且因?yàn)槭欠謩e部署，系統(tǒng)的性能也會有所提升。在前后端分離的開發(fā)模式中，開發(fā)者只需各司其職，后端程序員只負(fù)責(zé)業(yè)務(wù)邏輯，向前端程序員提供API接口。前端人員負(fù)責(zé)將API接口上獲得的數(shù)據(jù)渲染到HTML頁面上[1]。前后端分離實(shí)現(xiàn)了項(xiàng)目的可擴(kuò)展性、維護(hù)性以及分工的明確性。

本在線商城系統(tǒng)采用前后端分離的開發(fā)模式，包括三個(gè)方面：首先通過ajax實(shí)現(xiàn)代碼分離;然后部署分離，即前后端分別部署在不同的服務(wù)器上，通過不同的IP和端口對外提供服務(wù);最后是開發(fā)分離，即開發(fā)人員分離為前端開發(fā)和后端開發(fā)。前端采用Vue.js、ElementUI、axios、BooStrap框架實(shí)現(xiàn)Web網(wǎng)頁顯示內(nèi)容，后端采用Node.js、express技術(shù)和mongoDB作為后臺數(shù)據(jù)庫實(shí)現(xiàn)數(shù)據(jù)庫的讀寫、調(diào)用等，并使用Nginx服務(wù)器的反向代理技術(shù)完成在線商城的設(shè)計(jì)與開發(fā)。

2 系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)功能設(shè)計(jì)

2.1.1前端功能設(shè)計(jì)

在線商城的用戶包括訪客、用戶（會員用戶+非會員用戶）。其中，訪客只能夠?yàn)g覽、搜索站內(nèi)的商品，不能將產(chǎn)品加入購物車并購買。登錄用戶可以瀏覽商品、查看商品、查看購物車、購買商品以及對已購買的商品做出評價(jià)。會員用戶可以享受未包郵的商品提供包郵的權(quán)利，而且對于部分商品的購買有折扣力度。用戶通過登錄前端的頁面管理和操縱前端的模塊。

1）商品搜索：用戶可以根據(jù)分類欄的“商品類別”來查找對應(yīng)的商品，并跳轉(zhuǎn)到只有該類商品的頁面，商品種類的區(qū)分是為了幫助用戶在挑選商品的針對性、高效性。

2）添加購物車：用戶挑選好商品后，通過加入購物車的操作，實(shí)現(xiàn)欲購買的商品的統(tǒng)一收集，在購物車頁面進(jìn)行最后的結(jié)算。

3）用戶登錄注冊：用戶通過注冊后登錄該在線商城，登陸成功后跳轉(zhuǎn)到商城的首頁。

4）修改用戶信息：用戶登錄后，在“我的”頁面進(jìn)行賬號信息的修改，如：密碼、手機(jī)號、賬號名稱、地址管理等。

2.1.2后端功能設(shè)計(jì)

以管理員身份登錄系統(tǒng)后，可以實(shí)現(xiàn)商品的管理功能。如：商品上架、刪除商品、更改商品價(jià)格、發(fā)送優(yōu)惠券福利、商品分類等。

2.2數(shù)據(jù)庫設(shè)計(jì)

本系統(tǒng)采用高性能的mongoDB的數(shù)據(jù)庫，mongoDB將數(shù)據(jù)存儲成為一個(gè)文檔，類似于.json文件。本系統(tǒng)設(shè)計(jì)了以下數(shù)據(jù)表：

1）用戶表：存放用戶信息，包括用戶ID、用戶昵稱、用戶手機(jī)號、用戶密碼，是不可省略并且默認(rèn)值為null的類型;

2）商品表：存放商品信息，包括商品ID、商品名稱、商品價(jià)格、商品類別和商品數(shù)量，是不可省略并且默認(rèn)值為null的類型;

3）購物車表：存放購物車信息，包括商品ID、商品數(shù)量、商品價(jià)格以及商品的移入/移出購物車的操作，是不可省略并且默認(rèn)值為null的類型;

4）管理員表：存放管理員的賬號信息，包括管理員賬號ID、管理員密碼，是不可省略并且默認(rèn)值為null的類型，是由商城系統(tǒng)初始構(gòu)建時(shí)設(shè)定。

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

3.1前端技術(shù)

前端采用Vue.js框架，它是前端開發(fā)的主流框架之一，主要用來制作頁面效果。前端將視圖層劃分成了MVVM（Model-View-View Model），它是MVC（Model-View-Controller）改進(jìn)的模式。不同的是MVVM是前端視圖層的思想，而MVC是后端分層開發(fā)的概念，可以將視圖層更好的分離。Vue.js與其他重量級框架不同的是，它是一套構(gòu)建用戶界面的漸進(jìn)式框架，采用自底向上增量開發(fā)的設(shè)計(jì)方式，是更加靈活、開放的解決方案，架構(gòu)也更加簡單，還便于與第三方庫或既有項(xiàng)目整合[2]。通過ajax實(shí)現(xiàn)代碼分離，Vue.js本身不支持發(fā)送ajax請求，需要通過安裝axios插件來實(shí)現(xiàn)代碼的分離。

3.2 nginx服務(wù)器

Nginx軟件是一個(gè)開源、高性能、可靠的HTTP中間件和反向代理服務(wù)器， 也是一個(gè)IMAP/POP3/SMTP代理服務(wù)器。相較于Apache和lighttpd，其具有占用內(nèi)存少、穩(wěn)定性高等優(yōu)勢，并且以并發(fā)能力強(qiáng)、豐富的模塊庫以及友好靈活的配置而聞名[3]。nginx服務(wù)器的配置是通過nginx.conf配置文件來實(shí)現(xiàn)的，其中有全局設(shè)置、主機(jī)設(shè)置、上游服務(wù)器設(shè)置、URL匹配特定位置后的設(shè)置。server虛擬主機(jī)中的監(jiān)聽端口需要設(shè)置和前后端相對應(yīng)的端口號，location中的proxy_pass http：//ip：port是轉(zhuǎn)向ip地址為port定義的一個(gè)服務(wù)器的列表即反向代理。運(yùn)行nginx即完成了nginx服務(wù)器的配置。

3.3后端技術(shù)

后端采用Node.js框架和express。Node.js 基于 Chrome V8 引擎的 JavaScript 運(yùn)行，使用高效、輕量級的事件驅(qū)動、非阻塞 I/O 模型，它的包生態(tài)系統(tǒng) npm 是目前世界上最大的開源庫生態(tài)系統(tǒng)[4]。npm（node package manager）是Node的包管理器，允許開發(fā)人員在Node.js應(yīng)用程序中創(chuàng)建、共享并重用模塊。可以通過npm命令在Node.js上安裝、卸載、升級、查詢第三方的軟件包來完成。通過npm init來初始化項(xiàng)目目錄，安裝express和其他相關(guān)模塊并引用，express是基于Node.js中http模塊和Connect組件的Web框架，提供了一個(gè)類似于MVC的架構(gòu)，為Web應(yīng)用提供了一個(gè)良好的結(jié)構(gòu)（視圖、路由、模型）。創(chuàng)建后端接口與mongoDB的數(shù)據(jù)庫進(jìn)行連接，代碼如下。

4系統(tǒng)部分功能實(shí)現(xiàn)

4.1商城主頁

商城的主頁是商品頁面，有導(dǎo)航欄、分類欄、商品欄三大模塊。導(dǎo)航欄通過elementUI組件結(jié)合“v-if”的條件渲染、全局路由的配置、“v-on事件綁定”配合函數(shù)來實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)，路由通過API實(shí)現(xiàn)動態(tài)改變頁面的url，減少http請求。分類欄是通過elementUI組件和“v-on事件綁定”配合函數(shù)選擇一特定的商品種類從而來實(shí)現(xiàn)區(qū)分不同商品種類，提高選購效率。商品欄是通過elementUI組件和“v-for”封裝成為商品的組件從而在商城首頁之中顯示。

4.2登錄/注銷頁面

用戶輸入注冊賬號信息進(jìn)行登錄。登錄時(shí)，用戶名或密碼錯(cuò)誤都無法登陸成功。登錄失敗只顯示首頁商品，不能對商品進(jìn)行其他操作，包括加入購物車、結(jié)算商品、加入心愿單等。登錄后可對商品進(jìn)行加入購物車、修改賬戶信息等操作。登錄、注冊、注銷需進(jìn)行一個(gè)“v-if”是否登錄的判斷，若登錄，則不顯示登錄頁面路由;若未登錄，則顯示登錄頁面路由。此外，注銷的“@click”監(jiān)聽與函數(shù)共同實(shí)現(xiàn)注銷功能，退出登錄、提示注銷并跳轉(zhuǎn)到商城主頁頁面，顯示注冊和登錄頁面路由。

4.3購物車頁面

購物車界面可以增加/減少商品的數(shù)量、對商品進(jìn)行刪除操作，通過查詢商品的名稱來指定顯示購物車中商品的名稱、價(jià)格、數(shù)量等。如：搜索“炸雞”，會搜索出加入購物車之中的炸雞信息，而不會出現(xiàn)購物車中所有的商品。查詢商品通過“v-model”實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，實(shí)現(xiàn)關(guān)鍵字的搜索。商品數(shù)量的增減通過選擇“商品數(shù)量”單元格設(shè)置點(diǎn)擊綁定事件，并將修改后的數(shù)據(jù)發(fā)送到數(shù)據(jù)庫中，此外還添加了jQuery的鍵盤事件“keyup（）”方法，便于用戶修改完成后，通過“回車鍵”即可修改商品數(shù)量的操作。刪除商品通過“@click.prevent”結(jié)合函數(shù)來選擇ID刪除指定商品，并將修改后的數(shù)據(jù)發(fā)送到數(shù)據(jù)庫中。

4.4用戶管理頁面

管理員通過“用戶管理頁面”進(jìn)行管理用戶信息的操作。管理員進(jìn)入管理頁面可查看所有已注冊的用戶信息。通過用戶賬號昵稱/ID條件進(jìn)行搜索用戶信息;對用戶賬號進(jìn)行刪除和修改操作。查詢商品通過“v-model”實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，實(shí)現(xiàn)用戶昵稱/ID的搜索;刪除操作通過@click結(jié)合函數(shù)來刪除指定用戶;修改操作通過選擇欲修改的單元格設(shè)置綁定事件，還添加了jQuery的鍵盤事件“keyup（）”，便于管理員修改完成后，通過“回車鍵”修改用戶信息的操作。

5總結(jié)

前后端分離式開發(fā)有效地提高了開發(fā)的效率，同時(shí)模塊化的開發(fā)方式也讓分工更明確，同時(shí)也讓項(xiàng)目有了更高的復(fù)用性和可擴(kuò)展性，使得編程的質(zhì)量得到了很大的提升，減少了不必要的開發(fā)時(shí)間。本文從系統(tǒng)概述、系統(tǒng)設(shè)計(jì)、相關(guān)技術(shù)、系統(tǒng)部分功能實(shí)現(xiàn)這四個(gè)方面闡述了本在線商城的設(shè)計(jì)與開發(fā)工作。前端的Vue.js框架，后端的Node.js框架，mongoDB數(shù)據(jù)庫三者有效結(jié)合實(shí)現(xiàn)了該在線商城的系統(tǒng)的開發(fā)。主體功能實(shí)現(xiàn)較為完整，參與在線商城的開發(fā)人員經(jīng)驗(yàn)不豐富，本平臺的界面美觀、交互體驗(yàn)有待提升。

參考文獻(xiàn)：

[1] 遲殿委.前后端分離的Web架構(gòu)解決方案[J].智慧工廠，2019（6）：37-38.

[2] 朱二華.基于Vue.js的Web前端應(yīng)用研究[J].科技與創(chuàng)新，2017（20）：119-121.

[3] 王文選.巧用Nginx反向代理解決監(jiān)管機(jī)構(gòu)與被監(jiān)管單位間多點(diǎn)接入問題[J].金融科技時(shí)代，2019（4）：33-36.

【通聯(lián)編輯：朱寶貴】