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

Neilyo 發布于2019-08-20 15:38 / 498人閱讀

摘要：項目地址經過一個多月總算完成第一個版本前端架構頁面結構原生框架基于腳手架進行搭建數據請求處理框架進行路由處理進行圖片賴加載服務端架構選用進行后臺開發中間件進行服務的配置，路由請求的處理官網中間件處理與數據庫的通信中間件進行前端請求參

項目地址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進行相關數據庫的設計與實現

目前項目已實現功能

首頁數據的展示

分類頁數據的展示

購物車

我的

注冊

登錄

商品詳情頁

商品搜索

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

目錄結構


.
├── 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路由配置文件

項目效果圖

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82397.html

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

摘要：項目地址經過一個多月總算完成第一個版本前端架構頁面結構原生框架基于腳手架進行搭建數據請求處理框架進行路由處理進行圖片賴加載服務端架構選用進行后臺開發中間件進行服務的配置，路由請求的處理官網中間件處理與數據庫的通信中間件進行前端請求參項目地址https://github.com/huangche00... 經過一個多月總算完成第一個版本前端架構頁面結構(H5,CSS3,原生JS)...

lylwyy2016 2019-08-01 16:38 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

chengjianhua 2019-08-29 12:35 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

Anonymous1 2019-08-20 16:31 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

dreamtecher 2019-08-01 16:51 評論0 收藏0