楊楠 張媛媛 王偉祥 鄔杭龍 董書朗

摘要：基于最新的Vue.js+Node.js+MongoDB的前端框架，來(lái)建立一個(gè)內(nèi)容豐富，操作便捷，更易于用戶及商家進(jìn)行交易，讓買家省心、放心的商城平臺(tái)便是我們希望的目標(biāo)?；诋?dāng)前掌握的技術(shù)，得以實(shí)現(xiàn)一個(gè)快捷、方便、高效的商城系統(tǒng)。搭建了一個(gè)基于Vue.js+Node.js+MongoDB的前端框架下的商城平臺(tái)。用戶可以在平臺(tái)上瀏覽，搜索所需商品，商家可以在后臺(tái)上傳商品信息并實(shí)時(shí)發(fā)布到平臺(tái)供用戶進(jìn)行購(gòu)買，數(shù)據(jù)庫(kù)會(huì)實(shí)時(shí)向用戶展示平臺(tái)上的各種商品。平臺(tái)操作簡(jiǎn)單快捷，便于商家及用戶的使用。

關(guān)鍵詞：商城平臺(tái);Vue.js;Node.js;MongoDB數(shù)據(jù)庫(kù)

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

文章編號(hào)：1009-3044（2019）21-0276-02

開(kāi)放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 背景

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展與廣泛應(yīng)用，各類網(wǎng)絡(luò)技術(shù)已經(jīng)逐漸融入人們的生活當(dāng)中，其中網(wǎng)上購(gòu)物更是已經(jīng)成為生活中必不可少的一部分。加之因?yàn)楦鞔笊虡I(yè)平臺(tái)的建立以及對(duì)國(guó)家政策商戶監(jiān)管力度的加大，網(wǎng)上購(gòu)物的安全性得到大大提高，網(wǎng)上購(gòu)物的便利、快捷、實(shí)惠的優(yōu)點(diǎn)逐漸被發(fā)揮出來(lái)。相比于傳統(tǒng)的實(shí)體商業(yè)體系在未來(lái)幾年里，相信網(wǎng)上購(gòu)物的優(yōu)勢(shì)會(huì)得到更加充分的發(fā)揮，俗話說(shuō)貨比三家，在網(wǎng)上購(gòu)物已經(jīng)實(shí)現(xiàn)普及的當(dāng)下，用戶需要更全面、更多、更豐富的平臺(tái)及商家來(lái)提供給供用戶選擇，屆時(shí)網(wǎng)絡(luò)用戶對(duì)網(wǎng)上商城的需求量會(huì)大大增加，一些更內(nèi)容豐富，更操作更便捷的網(wǎng)絡(luò)商城勢(shì)必會(huì)贏得用戶的正面評(píng)價(jià)以及商家的信賴。技術(shù)上我們拆分組件，讓每個(gè)組件獨(dú)立化，一個(gè)不影響另一個(gè)組件，并且還能實(shí)現(xiàn)組件之間的通信，采用MVVM框架實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。后端只為實(shí)現(xiàn)接口，通過(guò)Express框架實(shí)現(xiàn)后端的REST接口并且以json格式輸出。數(shù)據(jù)庫(kù)選用MongoDB，它以最常見(jiàn)的json數(shù)據(jù)傳輸格式進(jìn)行數(shù)據(jù)的存儲(chǔ)，并可以和Node.js進(jìn)行無(wú)縫的集成。

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

2.1 需求分析

該系統(tǒng)是前后端分離開(kāi)發(fā)，前后端功能需求完全獨(dú)立，數(shù)據(jù)上卻相互依靠。前端包括以下幾點(diǎn)的核心功能模塊：1）商品列表展示模塊;2）登錄注銷模塊;3）購(gòu)物車模塊;4）地址列表模塊;5）訂單詳情模塊;6）確認(rèn)訂單模塊。后端主要實(shí)現(xiàn)的功能為：1）按要求查詢商品列表功能;2）用戶登錄注銷校驗(yàn)功能;3）對(duì)購(gòu)物車相應(yīng)數(shù)據(jù)的增加、查詢、更新、刪除;4）對(duì)收貨地址相應(yīng)數(shù)據(jù)的增加、查詢、更新、刪除;5）訂單詳情和訂單確認(rèn)功能。

該系統(tǒng)的開(kāi)發(fā)工具使用的是Sublime Text 3，前端全部基于Node.js環(huán)境，使用npm包管理倉(cāng)庫(kù)，數(shù)據(jù)庫(kù)是MongoDB。

2.2 功能模塊分析

本系統(tǒng)前端采用SPA單頁(yè)面開(kāi)發(fā)，使得頁(yè)面性能更優(yōu)于傳統(tǒng)的開(kāi)發(fā)，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，緩存較多的數(shù)據(jù)減少服務(wù)器壓力。后端采用MVC架構(gòu)的Node.js支撐，非常適合對(duì)于前端這種IO密集型的應(yīng)用，降級(jí)運(yùn)維成本，提高開(kāi)發(fā)的靈活性，這一定會(huì)是一個(gè)大的趨勢(shì)。這種開(kāi)發(fā)模式，使得前臺(tái)更注重展示邏輯，后臺(tái)更注重業(yè)務(wù)邏輯，前后端開(kāi)發(fā)的職責(zé)明確，形成高內(nèi)聚低耦合的必然結(jié)果。可快速改變SSR模式流程，從前端-后端-數(shù)據(jù)庫(kù)可快速改變?yōu)閺那岸?中間層-后臺(tái)-數(shù)據(jù)庫(kù)。

1）商品列表模塊設(shè)計(jì)：實(shí)現(xiàn)商品列表的整體布局和組件拆分，根據(jù)mock數(shù)據(jù)實(shí)現(xiàn)商品列表的數(shù)據(jù)渲染功能，商品列表頁(yè)面采用響應(yīng)式設(shè)計(jì)，可以自適應(yīng)手機(jī)、平板和電腦等多種設(shè)備。采用懶加載的加載模式，大大提高了頁(yè)面的加載速度，提高用戶體驗(yàn)，降低了后臺(tái)API請(qǐng)求數(shù)據(jù)的壓力。利用MongoDB提供的API接口實(shí)現(xiàn)升降序列排列功能，實(shí)現(xiàn)價(jià)格區(qū)間過(guò)濾選擇功能。

2）登錄模塊設(shè)計(jì)：主要實(shí)現(xiàn)網(wǎng)站整體的登錄，注銷和用戶校驗(yàn)功能，當(dāng)用戶未進(jìn)行登錄時(shí)不可以對(duì)購(gòu)買商品進(jìn)行操作，只能進(jìn)行商品的查看，在后臺(tái)中添加請(qǐng)求攔截可以實(shí)現(xiàn)此功能。用戶登錄后可以實(shí)現(xiàn)加入購(gòu)物車以及購(gòu)買商品等一系列操作。

3）地址模塊設(shè)計(jì)：在登錄成功之后，用戶可以選擇和管理自己的購(gòu)物收貨地址信息，具體可以實(shí)現(xiàn)新增收貨地址，刪除收貨地址，設(shè)置默認(rèn)收貨地址以及查看收貨地址等操作，當(dāng)用戶設(shè)置了默認(rèn)收貨地址后，下次購(gòu)買商品時(shí)會(huì)默認(rèn)選中該收貨地址。

4）購(gòu)物車模塊設(shè)計(jì)：在用戶登錄成功之后，選擇商品加入購(gòu)物車，在購(gòu)物車中可以查看到所選擇商品的名稱，商品的價(jià)格，商品購(gòu)買的數(shù)量以及商品小計(jì)?？梢詫?duì)不想買的商品進(jìn)行刪除操作，可以修改商品要購(gòu)買的數(shù)量，通過(guò)復(fù)選框選擇要結(jié)算的商品，在選擇復(fù)選框的同時(shí)也會(huì)自動(dòng)計(jì)算總金額。購(gòu)物車模塊還提供全選功能，方便用戶全選所有商品省去煩瑣步驟。

5）確認(rèn)訂單模塊設(shè)計(jì)：在用戶登錄成功后，經(jīng)過(guò)確認(rèn)地址的環(huán)節(jié)后進(jìn)入確認(rèn)訂單模塊，模塊主要展示商品總計(jì)、配送費(fèi)、折扣金額、稅收金額和訂單總額等信息，供用戶確認(rèn)自己購(gòu)買的信息。

6）訂單完成功能模塊設(shè)計(jì)：當(dāng)用戶付款完成之后進(jìn)入訂單確認(rèn)頁(yè)。訂單確認(rèn)頁(yè)會(huì)反饋給用戶是否商品購(gòu)買成功，并且建立一個(gè)訂單號(hào)，這個(gè)訂單號(hào)是整個(gè)訂單完成功能模塊的重點(diǎn)，為保證訂單號(hào)的唯一，需要用到平臺(tái)碼，兩位隨機(jī)數(shù)以及時(shí)間和日期的組合。

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

數(shù)據(jù)是一套系統(tǒng)的關(guān)鍵，唯有數(shù)據(jù)的支持才能叫作一個(gè)完整的系統(tǒng)。在大前端的開(kāi)發(fā)中，我選擇了MongoDB數(shù)據(jù)庫(kù)，眾所周知數(shù)據(jù)庫(kù)分為關(guān)系型數(shù)據(jù)庫(kù)和非關(guān)系型數(shù)據(jù)庫(kù)，而我選擇的這種非關(guān)系型數(shù)據(jù)庫(kù)擁有以json格式進(jìn)行數(shù)據(jù)傳輸與存儲(chǔ)，沒(méi)有煩瑣的業(yè)務(wù)關(guān)系的處理，并且與node.js兼容性非常的良好，我們采用mongoose對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作。使用MongoDB Compass圖形化管理數(shù)據(jù)。我們?yōu)楸鞠到y(tǒng)準(zhǔn)備了兩張表，一張表用來(lái)存放商品信息，另一張表用來(lái)存放用戶信息。

3 總體設(shè)計(jì)

3.1 商城前臺(tái)設(shè)計(jì)

在業(yè)務(wù)流程上，總共需要進(jìn)行登錄，加入購(gòu)物車，購(gòu)物車選擇結(jié)算商品，選擇收貨地址，確認(rèn)訂單，商品付款，訂單成功。

在技術(shù)上，我們采用Vue.js前端框架來(lái)實(shí)現(xiàn)，Vue.js是一款優(yōu)秀的MVVM框架，可以獨(dú)立構(gòu)建SPA單一頁(yè)面應(yīng)用。在使用Vue.js中涉及很多內(nèi)容，使用Vue-Router，這是主要針對(duì)前端頁(yè)面路由的跳轉(zhuǎn)，從商品列表到購(gòu)物車以及地址等頁(yè)面之間的轉(zhuǎn)換都是通過(guò)Vue-Router實(shí)現(xiàn)，每個(gè)SPA都會(huì)有一臺(tái)完整的路由。利用Axios用于異步接口請(qǐng)求，項(xiàng)目的Node通過(guò)提供Rest接口對(duì)接前端，前端所有的請(qǐng)求均通過(guò)Axios來(lái)實(shí)現(xiàn)數(shù)據(jù)接收和頁(yè)面渲染。采用Vuex來(lái)實(shí)現(xiàn)狀態(tài)集中管理，商城的登錄狀態(tài)和購(gòu)物車數(shù)量等狀態(tài)在每個(gè)頁(yè)面都需要使用，因此使用Vuex來(lái)集中管理，大大降低我們組件開(kāi)發(fā)數(shù)據(jù)傳遞的復(fù)雜度。

3.2 商城后臺(tái)設(shè)計(jì)

后臺(tái)使用的是Node.js語(yǔ)言，配合Express框架來(lái)一起構(gòu)建成webAPI。整個(gè)商城后臺(tái)通過(guò)Node.js進(jìn)行實(shí)現(xiàn)，通過(guò)Express框架實(shí)現(xiàn)后端的REST接口，并以json的形式進(jìn)行輸出。配合與Node.js兼容性非常好的MongoDB數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)的存儲(chǔ)。

4 結(jié)束語(yǔ)

該網(wǎng)上商城順應(yīng)了互聯(lián)網(wǎng)時(shí)代的發(fā)展，能夠滿足當(dāng)代人的社會(huì)生活。商城很好地將生活與互聯(lián)網(wǎng)實(shí)際結(jié)合起來(lái)，使人們的生活更加簡(jiǎn)便，節(jié)約了在實(shí)體店購(gòu)物的時(shí)間。此外該商城的商品種類齊全，還可以按價(jià)格高低等順序排列，還能篩選不同價(jià)位的商品進(jìn)行查看購(gòu)買，樣式新穎，能夠抓住人們的眼球。由此，該網(wǎng)絡(luò)商城的設(shè)計(jì)極大豐富了人們的生活，提高了購(gòu)物的效率使購(gòu)物更加便捷，是一個(gè)集美觀與實(shí)用為一體的設(shè)計(jì)。

參考文獻(xiàn)：

[1] 李鵬. Node.js 及 MongoDb 應(yīng)用研究[J]. 天津科技， 2015（6）： 34-36.

[2] 高源. NoSQL非關(guān)系型數(shù)據(jù)庫(kù)的發(fā)展和應(yīng)用研究[J]. 計(jì)算機(jī)光盤軟件與應(yīng)用， 2014（5）： 136-136.

[3] 程桂花， 沈煒， 何松林， 等. Node.js中Express框架路由機(jī)制的研究[J]. 工業(yè)控制計(jì)算機(jī)， 2016， 29（8）： 101-102.

【通聯(lián)編輯：謝媛媛】