說明：
本項(xiàng)目包含 移動端（vue全家桶）+pc端后臺管理系統(tǒng)（自建vue腳手架）+服務(wù)器端（nodejs+mongodb）
github地址：https://github.com/estherzz/vue2--tuangou
技術(shù)棧
vue cli, vue, vuex, vue-router, axios, webpack, ES6, ES Module, mongodb，ElementUI，nodejs, express, mongodb
實(shí)現(xiàn)功能
移動端：
- 分類模塊
查看更多
價(jià)格排序
好評排序
銷量排序
優(yōu)惠排序
搜索功能
點(diǎn)擊商品-跳轉(zhuǎn)商品詳情頁面 - 詳情模塊
購物車-價(jià)格實(shí)時(shí)結(jié)算
立即購買-跳轉(zhuǎn)購物車頁面 - 購物結(jié)算模塊
總價(jià)- 隨單個(gè)商品數(shù)量增加而增加
后臺管理系統(tǒng)pc端：
- 登錄驗(yàn)證
用戶名密碼驗(yàn)證
刷新免重復(fù)登錄
修改用戶名/密碼
二次確認(rèn)密碼 - 商品管理
創(chuàng)建商品
圖片上傳
編輯商品
刪除商品
商品列表 - 用戶管理
創(chuàng)建用戶
用戶列表
項(xiàng)目運(yùn)行
git clone https://github.com/estherzz/vue2--tuangou.git
安裝mongodb https://www.mongodb.com/try/download/community
MongoDB將數(shù)據(jù)目錄存儲在 db 目錄下。但是這個(gè)數(shù)據(jù)目錄不會主動創(chuàng)建，在安裝完成后需要創(chuàng)建，并且數(shù)據(jù)目錄放在根目錄下（(如： C:\ 或者 D:\ 等 )
推薦在 C 盤安裝 mongodb=>創(chuàng)建一個(gè) data 的目錄 => data 目錄里創(chuàng)建 db 目錄。安裝 nodejs https://nodejs.org/en/download/
打開數(shù)據(jù)庫
mongod --dbpath 自定義想要存儲數(shù)據(jù)的數(shù)據(jù)庫位置在項(xiàng)目文件目錄打開命令窗口
項(xiàng)目文件目錄.png
- 導(dǎo)入數(shù)據(jù)：
mongoimport -d bp_data -c product --file ./database/product -
進(jìn)入server目錄
cd server - 打開務(wù)器
node app.js - 打開網(wǎng)頁
移動端 http://localhost:3003/ （按鍵F12 => 調(diào)成手機(jī)模式）
后臺管理系統(tǒng)pc端 http://localhost:3003/admin/ (初始登錄賬號：yiyi，密碼：123abc)
版本：
mongodb： ^3.5.4
nodejs: ^12.16.2.0
移動端截圖
首頁.png
商品列表頁.png
商品列表+查看更多.png
商品列表+搜索結(jié)果.png
商品詳情.png
購物結(jié)算.png
移動端gif效果動圖
首頁.gif
美食模塊 -- 查看更多+價(jià)格排序+好評排序+銷量排序+優(yōu)惠排序+搜索功能.gif
跳轉(zhuǎn)商品詳情.gif
底部價(jià)格結(jié)算.gif
購買頁面價(jià)格結(jié)算.gif
后臺管理系統(tǒng)PC端截圖
登錄.png
創(chuàng)建商品.png
商品列表.png
創(chuàng)建用戶.png
用戶列表.png
后臺管理系統(tǒng)PC端gif效果圖
admin首頁.gif
創(chuàng)建商品.gif
商品列表.gif
刪除商品.gif
修改商品.gif
修改密碼.gif
用戶列表+創(chuàng)建用戶.gif
