這是一個(gè)基于vue全家桶+node.js+express+mysql實(shí)現(xiàn)的商城網(wǎng)站
項(xiàng)目github地址：vueMall
查看demo:地址
如果覺得對(duì)您有幫助，您可以在左下角給我個(gè)喜歡支持一下，謝謝！
項(xiàng)目結(jié)構(gòu)
如下圖所示：
注：該項(xiàng)目是真實(shí)的請(qǐng)求后臺(tái)api。server為后端數(shù)據(jù)接口項(xiàng)目結(jié)構(gòu)，運(yùn)行時(shí)可以單獨(dú)拿出來放在wamp/www下或者xammp/htdocs 這兩是集成包（apache+php+mysql...）沒用過的小伙伴可以百度學(xué)習(xí)學(xué)習(xí)很容易的。當(dāng)然你也可以自己?jiǎn)为?dú)配置Mysql環(huán)境，這個(gè)看個(gè)人習(xí)慣。連接Mysql代碼在server/conf/conf.js大家只要將配置信息改成自己的就行。表創(chuàng)建sql語(yǔ)句在server/malldata.sql文件內(nèi)大家可以直接復(fù)制插入就ok。我的數(shù)據(jù)庫(kù)名是malldata，大家不一樣的記得改，不懂的用數(shù)據(jù)庫(kù)的小伙伴們?nèi)グ俣劝俣群苋菀椎模镜脑鰟h改查會(huì)就夠了。
項(xiàng)目運(yùn)行
# 克隆到本地：
https://github.com/wzz5304/vueMall.git
# 安裝依賴：
vue:
....
cd vueMall-master(進(jìn)入項(xiàng)目文件下)
npm install （安裝依賴）
express:(進(jìn)入項(xiàng)目文件下)
cd server
npm install（安裝依賴）
# 本地開發(fā)，開啟服務(wù)器，瀏覽器訪問http://localhost:8081,express監(jiān)聽的是3001端口http://localhost:3001（我改了監(jiān)聽端口）
vue:
npm run dev
express:
node bin\www
# 構(gòu)建生產(chǎn)
npm run build
注：第一次使用vue和express的小伙伴記得全局安裝下vue-cli和express
-
vue-cli
鍵入命令：npm install -g vue-cli
-
express
鍵入命令：cnpm i -g express-generator
不懂的改后臺(tái)監(jiān)聽端口的可以打開查看，對(duì)你有幫助記得給個(gè)愛心哦，謝謝！
項(xiàng)目說明
-
用到的技術(shù)棧
vue-cli2 + vue2.0 + vue-router + vuex + axios + stylus + scss + node.js + es6 + express + mysql
實(shí)現(xiàn)功能
- 登錄注冊(cè)
- 商品詳情
- 購(gòu)物車管理
- 地址管理
- 模擬支付（由于調(diào)用不了支付接口）
- 訂單管理
- 功能說明
- 基于vue2.0
- 使用vue-cli腳手架搭建項(xiàng)目
- 使用vue-router實(shí)現(xiàn)路由切換
- 使用vuex進(jìn)行狀態(tài)管理
- 使用axios進(jìn)行數(shù)據(jù)請(qǐng)求
- stylus和scss編寫樣式
- 聯(lián)動(dòng)滾動(dòng)借助了vue-infinite-scroll插件和圖片懶加載vue-lazyload插件
- Express編寫后臺(tái)api
- Mysql實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)
學(xué)習(xí)參考
- vue2.0官網(wǎng) https://vuefe.cn/v2/guide/
- npm https://www.npmjs.com/
- ES6 http://es6.ruanyifeng.com/
- Sticky footers https://juejin.im/post/5a52d62a518825734c5b3c37
- awesome-vue https://github.com/vuejs/awesome-vue
