鄒瑞 段華瓊
摘要:隨著移動終端的多樣化,各種各樣的終端涌現(xiàn)出了新的需求。為了滿足這些需求,Web應(yīng)用選擇了一種分離式開發(fā)——前后端分離技術(shù),提升了項目的擴(kuò)展性和維護(hù)性。該文研究了一個在線商城的設(shè)計,并通過前后端分離架構(gòu)來實現(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)的時代,各種終端的使用,Web應(yīng)用要適用在多終端上,用戶對Web應(yīng)用有了更高的要求。開發(fā)人員在編寫程序的過程之中,如果采用傳統(tǒng)的前后端耦合在一起的方式進(jìn)行開發(fā),會使得代碼冗雜,可讀性和可重用性下降。前后端分離的開發(fā)模式可以減少這些問題的產(chǎn)生。前后端分離后,代碼的可讀性、可重用性增強(qiáng)。而且因為是分別部署,系統(tǒng)的性能也會有所提升。在前后端分離的開發(fā)模式中,開發(fā)者只需各司其職,后端程序員只負(fù)責(zé)業(yè)務(wù)邏輯,向前端程序員提供API接口。前端人員負(fù)責(zé)將API接口上獲得的數(shù)據(jù)渲染到HTML頁面上[1]。前后端分離實現(xiàn)了項目的可擴(kuò)展性、維護(hù)性以及分工的明確性。
本在線商城系統(tǒng)采用前后端分離的開發(fā)模式,包括三個方面:首先通過ajax實現(xiàn)代碼分離;然后部署分離,即前后端分別部署在不同的服務(wù)器上,通過不同的IP和端口對外提供服務(wù);最后是開發(fā)分離,即開發(fā)人員分離為前端開發(fā)和后端開發(fā)。前端采用Vue.js、ElementUI、axios、BooStrap框架實現(xiàn)Web網(wǎng)頁顯示內(nèi)容,后端采用Node.js、express技術(shù)和mongoDB作為后臺數(shù)據(jù)庫實現(xiàn)數(shù)據(jù)庫的讀寫、調(diào)用等,并使用Nginx服務(wù)器的反向代理技術(shù)完成在線商城的設(shè)計與開發(fā)。
2 系統(tǒng)設(shè)計
2.1 系統(tǒng)功能設(shè)計
2.1.1前端功能設(shè)計
在線商城的用戶包括訪客、用戶(會員用戶+非會員用戶)。其中,訪客只能夠瀏覽、搜索站內(nèi)的商品,不能將產(chǎn)品加入購物車并購買。登錄用戶可以瀏覽商品、查看商品、查看購物車、購買商品以及對已購買的商品做出評價。會員用戶可以享受未包郵的商品提供包郵的權(quán)利,而且對于部分商品的購買有折扣力度。用戶通過登錄前端的頁面管理和操縱前端的模塊。
1)商品搜索:用戶可以根據(jù)分類欄的“商品類別”來查找對應(yīng)的商品,并跳轉(zhuǎn)到只有該類商品的頁面,商品種類的區(qū)分是為了幫助用戶在挑選商品的針對性、高效性。
2)添加購物車:用戶挑選好商品后,通過加入購物車的操作,實現(xiàn)欲購買的商品的統(tǒng)一收集,在購物車頁面進(jìn)行最后的結(jié)算。
3)用戶登錄注冊:用戶通過注冊后登錄該在線商城,登陸成功后跳轉(zhuǎn)到商城的首頁。
4)修改用戶信息:用戶登錄后,在“我的”頁面進(jìn)行賬號信息的修改,如:密碼、手機(jī)號、賬號名稱、地址管理等。
2.1.2后端功能設(shè)計
以管理員身份登錄系統(tǒng)后,可以實現(xiàn)商品的管理功能。如:商品上架、刪除商品、更改商品價格、發(fā)送優(yōu)惠券福利、商品分類等。
2.2數(shù)據(jù)庫設(shè)計
本系統(tǒng)采用高性能的mongoDB的數(shù)據(jù)庫,mongoDB將數(shù)據(jù)存儲成為一個文檔,類似于.json文件。本系統(tǒng)設(shè)計了以下數(shù)據(jù)表:
1)用戶表:存放用戶信息,包括用戶ID、用戶昵稱、用戶手機(jī)號、用戶密碼,是不可省略并且默認(rèn)值為null的類型;
2)商品表:存放商品信息,包括商品ID、商品名稱、商品價格、商品類別和商品數(shù)量,是不可省略并且默認(rèn)值為null的類型;
3)購物車表:存放購物車信息,包括商品ID、商品數(shù)量、商品價格以及商品的移入/移出購物車的操作,是不可省略并且默認(rèn)值為null的類型;
4)管理員表:存放管理員的賬號信息,包括管理員賬號ID、管理員密碼,是不可省略并且默認(rèn)值為null的類型,是由商城系統(tǒng)初始構(gòu)建時設(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è)計方式,是更加靈活、開放的解決方案,架構(gòu)也更加簡單,還便于與第三方庫或既有項目整合[2]。通過ajax實現(xiàn)代碼分離,Vue.js本身不支持發(fā)送ajax請求,需要通過安裝axios插件來實現(xiàn)代碼的分離。
3.2 nginx服務(wù)器
Nginx軟件是一個開源、高性能、可靠的HTTP中間件和反向代理服務(wù)器, 也是一個IMAP/POP3/SMTP代理服務(wù)器。相較于Apache和lighttpd,其具有占用內(nèi)存少、穩(wěn)定性高等優(yōu)勢,并且以并發(fā)能力強(qiáng)、豐富的模塊庫以及友好靈活的配置而聞名[3]。nginx服務(wù)器的配置是通過nginx.conf配置文件來實現(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定義的一個服務(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來初始化項目目錄,安裝express和其他相關(guān)模塊并引用,express是基于Node.js中http模塊和Connect組件的Web框架,提供了一個類似于MVC的架構(gòu),為Web應(yīng)用提供了一個良好的結(jié)構(gòu)(視圖、路由、模型)。創(chuàng)建后端接口與mongoDB的數(shù)據(jù)庫進(jìn)行連接,代碼如下。
4系統(tǒng)部分功能實現(xiàn)
4.1商城主頁
商城的主頁是商品頁面,有導(dǎo)航欄、分類欄、商品欄三大模塊。導(dǎo)航欄通過elementUI組件結(jié)合“v-if”的條件渲染、全局路由的配置、“v-on事件綁定”配合函數(shù)來實現(xiàn)頁面之間的跳轉(zhuǎn),路由通過API實現(xiàn)動態(tài)改變頁面的url,減少http請求。分類欄是通過elementUI組件和“v-on事件綁定”配合函數(shù)選擇一特定的商品種類從而來實現(xiàn)區(qū)分不同商品種類,提高選購效率。商品欄是通過elementUI組件和“v-for”封裝成為商品的組件從而在商城首頁之中顯示。
4.2登錄/注銷頁面
用戶輸入注冊賬號信息進(jìn)行登錄。登錄時,用戶名或密碼錯誤都無法登陸成功。登錄失敗只顯示首頁商品,不能對商品進(jìn)行其他操作,包括加入購物車、結(jié)算商品、加入心愿單等。登錄后可對商品進(jìn)行加入購物車、修改賬戶信息等操作。登錄、注冊、注銷需進(jìn)行一個“v-if”是否登錄的判斷,若登錄,則不顯示登錄頁面路由;若未登錄,則顯示登錄頁面路由。此外,注銷的“@click”監(jiān)聽與函數(shù)共同實現(xiàn)注銷功能,退出登錄、提示注銷并跳轉(zhuǎn)到商城主頁頁面,顯示注冊和登錄頁面路由。
4.3購物車頁面
購物車界面可以增加/減少商品的數(shù)量、對商品進(jìn)行刪除操作,通過查詢商品的名稱來指定顯示購物車中商品的名稱、價格、數(shù)量等。如:搜索“炸雞”,會搜索出加入購物車之中的炸雞信息,而不會出現(xiàn)購物車中所有的商品。查詢商品通過“v-model”實現(xiàn)數(shù)據(jù)的雙向綁定,實現(xiàn)關(guān)鍵字的搜索。商品數(shù)量的增減通過選擇“商品數(shù)量”單元格設(shè)置點擊綁定事件,并將修改后的數(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”實現(xiàn)數(shù)據(jù)的雙向綁定,實現(xiàn)用戶昵稱/ID的搜索;刪除操作通過@click結(jié)合函數(shù)來刪除指定用戶;修改操作通過選擇欲修改的單元格設(shè)置綁定事件,還添加了jQuery的鍵盤事件“keyup()”,便于管理員修改完成后,通過“回車鍵”修改用戶信息的操作。
5總結(jié)
前后端分離式開發(fā)有效地提高了開發(fā)的效率,同時模塊化的開發(fā)方式也讓分工更明確,同時也讓項目有了更高的復(fù)用性和可擴(kuò)展性,使得編程的質(zhì)量得到了很大的提升,減少了不必要的開發(fā)時間。本文從系統(tǒng)概述、系統(tǒng)設(shè)計、相關(guān)技術(shù)、系統(tǒng)部分功能實現(xiàn)這四個方面闡述了本在線商城的設(shè)計與開發(fā)工作。前端的Vue.js框架,后端的Node.js框架,mongoDB數(shù)據(jù)庫三者有效結(jié)合實現(xiàn)了該在線商城的系統(tǒng)的開發(fā)。主體功能實現(xiàn)較為完整,參與在線商城的開發(fā)人員經(jīng)驗不豐富,本平臺的界面美觀、交互體驗有待提升。
參考文獻(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)管單位間多點接入問題[J].金融科技時代,2019(4):33-36.
【通聯(lián)編輯:朱寶貴】