| 做一個技術前沿的開發者，我們都知道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進行相關資料庫的設計與實現

目前專案已實現功能

1. 首頁資料的展示
2. 分類頁資料的展示
3. 購物車
4. 我的
5. 註冊
6. 登入
7. 商品詳情頁
8. 商品搜尋

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路由配置檔案

專案效果圖