基於Vue2.0+Vuex+Axios+NodeJs+Express+MySQL實現京東移動web商城
阿新 • • 發佈:2018-12-31
| 做一個技術前沿的開發者,我們都知道Vue與NodeJs是現在很流行的前端框架及後端語言。在前端群發現很多小夥伴都在學Vue。也是自己抽寫了個小專案,從資料庫設計到後端介面的編寫最後到前端的實現整個過程,希望對小夥伴們能有很大的幫助。
前端架構
- 頁面結構(H5,CSS3,原生JS)
- 框架(基於Vue腳手架:vue-cli)進行搭建
- 資料請求處理框架(Axios)
- Vue-Router進行路由處理
- Vue-LazyLoad進行圖片賴載入
服務端架構
- 選用NodeJs進行後臺開發
- Mysql中介軟體處理與資料庫的”通訊”
- Body-Parser中介軟體進行前端請求引數的獲取
- Cookie-Parser、Cookie-Session進行cookie與session的處理
資料庫選取
- 採用MySQL進行相關資料庫的設計與實現
目前專案已實現功能
- 首頁資料的展示
- 分類頁資料的展示
- 購物車
- 我的
- 註冊
- 登入
- 商品詳情頁
- 商品搜尋
PC端仿京東首頁
安裝
已安裝MySQL資料庫,然後匯入migou.sql檔案
然後通過npm
安裝本地服務第三方依賴模組(需要已安裝Node.js)
cd vue-jd
npm install 或 cnpm install(個人比較喜歡使用後者,下載依賴模組速度較快)
npm run dev
最後開啟後臺服務
node server.js
目錄結構
. ├── 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路由配置檔案