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

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

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

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

文章編號：1009-3044（2019）21-0276-02

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

1 背景

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

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

2.1 需求分析

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

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

2.2 功能模塊分析

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

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

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

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

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

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

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

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

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

3 總體設(shè)計

3.1 商城前臺設(shè)計

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

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

3.2 商城后臺設(shè)計

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

4 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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