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

Vue-Mall

A Vue.js project

1、簡介

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

一、項目依賴基本核心版本：

• 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"

二、項目前端搭建:

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

三、項目後端搭建:

• 使用NodeJs的express框架完成項目後端搭建；
• 使用mongodb完成數據存儲，經過mongoose模塊完成對mongodb數據的構建；

4.該商城基本功能：

項目正常訪問無需管理員權限，對我的中心資料的修改，須要用戶登陸，對商城產品及分類的基本操做（增刪改查），須要有管理員權限，默認一個管理員（chenjun/123456），具體功能以下：

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

五、項目Github地址：vue-mall

2、項目預覽

總體效果，截圖看這裏

3、運行環境

整個項目的運行，首先要確保 Node + MongoDB 安裝並配置好。

4、項目安裝及運行

• 克隆項目，進入項目目錄；

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

5、項目總結

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

6、重要提示

Tips：在npm install or yarn install 的時候，請確保網絡良好，如個別依賴安裝不了，請設置淘寶鏡像爲安裝源；

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

運行此項目必定要先啓動 Mongo 服務，並鏈接 MongoDB 數據庫。

若有問題：請 Issue 或聯繫QQ：402074940