基于前后端分離技術的在線商城的設計與實現

鄒瑞 段華瓊

摘要：隨著移動終端的多樣化，各種各樣的終端涌現出了新的需求。為了滿足這些需求，Web應用選擇了一種分離式開發——前后端分離技術，提升了項目的擴展性和維護性。該文研究了一個在線商城的設計，并通過前后端分離架構來實現，包括前后端的分離、nginx服務器的配置、mongoDB數據庫。

關鍵詞：前后端分離;在線商城;Vue.js技術;Node.js技術

中圖分類號：TP311? ? ? ? 文獻標識碼：A

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

1系統概述

當今是移動互聯的時代，各種終端的使用，Web應用要適用在多終端上，用戶對Web應用有了更高的要求。開發人員在編寫程序的過程之中，如果采用傳統的前后端耦合在一起的方式進行開發，會使得代碼冗雜，可讀性和可重用性下降。前后端分離的開發模式可以減少這些問題的產生。前后端分離后，代碼的可讀性、可重用性增強。而且因為是分別部署，系統的性能也會有所提升。在前后端分離的開發模式中，開發者只需各司其職，后端程序員只負責業務邏輯，向前端程序員提供API接口。前端人員負責將API接口上獲得的數據渲染到HTML頁面上[1]。前后端分離實現了項目的可擴展性、維護性以及分工的明確性。

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

2 系統設計

2.1 系統功能設計

2.1.1前端功能設計

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

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

2）添加購物車：用戶挑選好商品后，通過加入購物車的操作，實現欲購買的商品的統一收集，在購物車頁面進行最后的結算。

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

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

2.1.2后端功能設計

以管理員身份登錄系統后，可以實現商品的管理功能。如：商品上架、刪除商品、更改商品價格、發送優惠券福利、商品分類等。

2.2數據庫設計

本系統采用高性能的mongoDB的數據庫，mongoDB將數據存儲成為一個文檔，類似于.json文件。本系統設計了以下數據表：

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

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

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

4）管理員表：存放管理員的賬號信息，包括管理員賬號ID、管理員密碼，是不可省略并且默認值為null的類型，是由商城系統初始構建時設定。

3 相關技術

3.1前端技術

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

3.2 nginx服務器

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

3.3后端技術

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

4系統部分功能實現

4.1商城主頁

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

4.2登錄/注銷頁面

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

4.3購物車頁面

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

4.4用戶管理頁面

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

5總結

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

參考文獻：

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

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

[3] 王文選.巧用Nginx反向代理解決監管機構與被監管單位間多點接入問題[J].金融科技時代，2019（4）：33-36.

【通聯編輯：朱寶貴】