Vue-Mall Vue全家桶+Node後端服務實現的商城

jone_chen發表於2019-02-16
Vue後端

Vue-Mall

A Vue.js project

一、簡介

Vue全家桶專案，該專案是基於Vue全家桶開發的商城網站，採用的技術棧為 Webpack + Vue + Vuex + Vue-router + Sass + Es6 + LocalStorage + Css3 + Node(express) + MongoDB；整個專案前後端分離開發，前端基於Vue全家桶進行渲染，後端由NodeJs+MongonDB提供服務。整個專案前後端由本人獨自開發，基本實現了一個商城應有的功能！

1、專案依賴基本核心版本：

  • body-parser: “~1.17.1”,
  • cookie-parser: “~1.4.3”,
  • debug: “~2.6.3”,
  • express: “~4.15.2”,
  • jade: “~1.11.0”,
  • moment: “^2.20.1”,
  • morgan: “~1.8.1”,
  • serve-favicon: “~2.4.2”,
  • vue: “^2.5.2”,
  • vue-router: “^3.0.1”,
  • vuex: “^3.0.1”

2、專案前端搭建:

  • 基於Vue全家桶進行前端頁面渲染
  • 基本樣式基於Bootstrap
  • 引入了Moment.js格式化前端頁面顯示時間

3、專案後端搭建:

  • 使用NodeJs的express框架完成專案後端搭建；
  • 使用mongodb完成資料儲存，通過mongoose模組完成對mongodb資料的構建；

4.該商城基本功能：

專案正常訪問無需管理員許可權，對個人中心資料的修改，需要使用者登入，對商城產品及分類的基本操作（增刪改查），需要有管理員許可權，預設一個管理員（chenjun/123456），具體功能如下：

  • 基本的使用者登入、註冊、個人資料修改
  • 使用者許可權管理、登入做session處理（失效期暫為5天）
  • 商城產品及產品分類的增加、刪除、更新，查詢（可分頁查詢）
  • 加入購物車及結算、下單功能
  • 收貨地址的增加、編輯、刪除
  • 關鍵字搜尋功能
  • 訂單查詢功能

5、專案Github地址：vue-mall

二、專案預覽

整體效果，截圖看這裡

三、執行環境

整個專案的執行，首先要確保 Node + MongoDB 安裝並配置好。

四、專案安裝及執行

  • 克隆專案，進入專案目錄；
git clone git@github.com:chenjun1127/vue-mall.git
cd vue-mall
  • 安裝依賴
npm install or yarn install
  • 啟動後端服務
npm run server
  • 執行
npm run dev or npm start
  • 瀏覽
http://localhost:4000/
  • 打包
npm run build

五、專案總結

整個專案由於是本人獨自開發，UI部分基於Bootstrap（沒有UI設計師），整體UI細節有待優化完善；部分功能有細微瑕疵，譬如訂單的操作（增刪改查）未根據訂單的狀態來判斷、產品分類列表未做分頁查詢等等，這些都需要完善！覺得專案不錯的，可以給個Star，謝謝！

六、重要提示

Tips：在npm install or yarn install 的時候，請確保網路良好，如個別依賴安裝不了，請設定淘寶映象為安裝源；

強烈推薦使用 Yarn ，Npm 真的太慢了！

執行此專案一定要先啟動 Mongo 服務，並連線 MongoDB 資料庫。

如有問題：請 Issue 或聯絡QQ：402074940

相關文章