基於Vue2.0+Vuex+Axios+NodeJs+Express+MySQL實現京東移動web商城

項目地址https://github.com/huangche00...

• 通過一個多月總算完成第一個版本

前端架構

• 頁面結構(H5,CSS3,原生JS)

• 框架(基於Vue腳手架:vue-cli)進行搭建

• 數據請求處理框架(Axios)

• Vue-Router進行路由處理

• Vue-LazyLoad進行圖片賴加載

服務端架構

• 選用NodeJs進行後臺開發

• Express中間件進行服務的配置，路由、請求的處理

  • 官網 http://www.expressjs.com.cn/

• Mysql中間件處理與數據庫的"通訊"

• Body-Parser中間件進行前端請求參數的獲取

• Cookie-Parser、Cookie-Session進行cookie與session的處理

數據庫選取

• 採用MySQL進行相關數據庫的設計與實現

目前項目已實現功能

1. 首頁數據的展現

2. 分類頁數據的展現

3. 購物車

4. 個人

5. 註冊

6. 登陸

7. 商品詳情頁

8. 商品搜索

PC端仿京東首頁

• https://github.com/huangche007/jd

安裝

已安裝MySQL數據庫，而後導入migou.sql文件

而後經過npm安裝本地服務第三方依賴模塊(須要已安裝Node.js)

cd vue-jd

npm install 或 cnpm install(我的比較喜歡使用後者，下載依賴模塊速度較快)

npm run dev

最後開啓後臺服務

node server.js

目錄結構

<pre>
.
├── README.md
├── libs // 後臺經常使用工具模塊的封裝，好比格式化事件、MD5加密等
├── route // 後臺接口的編寫目錄
├── server.js // 後臺服務的配置文件
├── webpack.config.js // webpack配置文件
├── index.html // 項目入口文件
├── package.json // 項目配置文件
├── src // 生產目錄
│   ├── assets // css js 和圖片資源
│   ├── components // 各類Vue組件
│   ├── store // vuex狀態管理器
│   ├── App.vue // 項目中全局Vue
│   ├── main.js // Webpack 預編譯入口
│   └── router.config.js // vue路由配置文件
</pre>

項目效果圖

....未完待續 QQ交流羣:526450553