基于VNM商城系統的設計與實現

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

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

關鍵詞：商城平臺;Vue.js;Node.js;MongoDB數據庫

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

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

開放科學（資源服務）標識碼（OSID）：

1 背景

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

2 系統設計

2.1 需求分析

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

該系統的開發工具使用的是Sublime Text 3，前端全部基于Node.js環境，使用npm包管理倉庫，數據庫是MongoDB。

2.2 功能模塊分析

本系統前端采用SPA單頁面開發，使得頁面性能更優于傳統的開發，內容的改變不需要重新加載整個頁面，緩存較多的數據減少服務器壓力。后端采用MVC架構的Node.js支撐，非常適合對于前端這種IO密集型的應用，降級運維成本，提高開發的靈活性，這一定會是一個大的趨勢。這種開發模式，使得前臺更注重展示邏輯，后臺更注重業務邏輯，前后端開發的職責明確，形成高內聚低耦合的必然結果。可快速改變SSR模式流程，從前端-后端-數據庫可快速改變為從前端-中間層-后臺-數據庫。

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

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

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

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

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

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

2.3 數據庫設計

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

3 總體設計

3.1 商城前臺設計

在業務流程上，總共需要進行登錄，加入購物車，購物車選擇結算商品，選擇收貨地址，確認訂單，商品付款，訂單成功。

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

3.2 商城后臺設計

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

4 結束語

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

參考文獻：

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

[2] 高源. NoSQL非關系型數據庫的發展和應用研究[J]. 計算機光盤軟件與應用， 2014（5）： 136-136.

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

【通聯編輯：謝媛媛】