Vue+Node全棧實踐(帶原始碼)

rickchen發表於2018-07-01
Vue全棧原始碼

使用Vue和Node實現前端，服務端，後臺管理系統三個專案。

前後端分離，Restful API。

  • 前端: Vue-CLI

  • 服務端:Node-Koa2-Mongodb-Mongoose-七牛雲物件儲存

  • 後臺管理系統: iView-Admin

  • 開發IDE：VSCode

  • 部署環境:阿里雲-Ubuntu16.04

  • 版本管理: Git

效果預覽

Vue+Node全棧實踐(帶原始碼)

Vue+Node全棧實踐(帶原始碼)

線上訪問

前端:

掃碼檢視:

Vue+Node全棧實踐(帶原始碼)

線上檢視：

infinite.czero.cn/Infinite-we…

後臺管理系統:

還沒有新增許可權管理的功能，後續會加上。進入登入頁面，如果不懂或者需要賬號私聊我。。。 第一次使用iview-admin，感覺功能還是挺多的，還在摸索階段，只用來實現簡陋的功能，後續會持續優化。

Vue+Node全棧實踐(帶原始碼)

線上檢視:

infinite.czero.cn/Infinite-we…

專案概覽

前端(Vue-CLI)：

功能: 架構是基於Vue全家桶購物商城

  1. 新增better-scroll元件實現下拉重新整理和上拉載入。
  2. 請求服務端API，真實的資料互動。
  3. 新增搜尋，登入，註冊等功能並Vuex進行儲存。
  4. 圖片都是使用Iconfont。
  5. 動畫切換，使用Vue-router做路由判斷來實現不同的切換動畫。
  6. 模組化，全域性註冊元件彈窗(alert和toast)效果，封裝共用js函式類。
  7. 配置Webpack請求代理，解決請求伺服器端跨域問題。
  8. 使用keep-alive對元件進行快取

目錄結構:

├── config  (配置目錄，需要在index.js配置代理,不然會出現跨域的問題)
│   ├── dev.env.js
│   ├── index.js    (配置跨域)
│   └── prod.env.js
├── image
│   └── github.png
├── index.html
    ├── components  (元件目錄)
    │   ├──     About(關於我們)
    │   ├──     Agreement(使用者協議)
    │   ├──     Base(共用基礎元件)
    │   ├──     Collect(我的收藏)
    │   ├──     Detail(內容詳情)
    │   ├──     ForgetPasswd(忘記密碼)
    │   ├──     Hot(發現熱門頁)
    │   ├──     Index.vue(首頁,推薦頁面)
    │   ├──     Login(登入頁)
    │   ├──     Member(個人中心頁)
    │   ├──     ModelBox(全域性註冊彈窗元件)
    │   ├──     Register(註冊頁)
    │   ├──     Search(搜尋頁)
    │   └──     ToastBox(全域性註冊Toast元件)
    ├── main.js
    ├── router
    │   └── index.js
    └── store   (Vuex)
        ├── actions.js
        ├── getters.js  (獲取Vuex狀態)
        ├── index.js    (Vuex入口檔案)
        ├── mutation-types.js   (變數儲存)
        ├── mutations.js    (to修改動作)
        └── state.js    (狀態倉庫)
複製程式碼

服務端(Node-Koa2-Mongodb-Mongoose):

功能：

  1. 分頁載入
  2. 模糊查詢
  3. 定製Restful API
  4. 七牛雲第三方物件儲存對接
  5. pm2部署到阿里雲

專案目錄:

├── app
│   ├── controllers (邏輯處理目錄)
│   │   ├── admin
│   │   ├── app.js
│   │   ├── hot
│   │   ├── recommend
│   │   ├── upload
│   │   └── user
│   ├── dbhelper (操控資料表目錄)
│   │   ├── AdminHelper.js
│   │   ├── hotHelper.js
│   │   ├── recommendHelper.js
│   │   └── userHelper.js
│   └── models  (資料庫模型目錄)
│       ├── admin.js    (管理員表)
│       ├── hot.js      (熱門發現資料表)
│       ├── recommend.js    (首頁推薦表)
│       └── user.js (使用者管理表--登入註冊)
├── app.js (服務端啟動入口檔案  node app.js)
├── config  (配置目錄)
│   ├── config.js   (基礎配置資訊--七牛雲配置,資料庫配置)
│   └── router.js   (路由配置)
複製程式碼

後臺管理系統(iView-Admin):

功能:

  1. 文章管理，圖片上傳到七牛雲。
  2. 編輯文章
  3. 新增文章
  4. 使用者管理
  5. 富文字內容新增

專案目錄:

├── build (配置全域性請求地址和跨域處理)
│   ├── webpack.dev.config.js   (在這裡配置請求跨域問題,及全域性請求地址)
├── index.html
├── src
│   ├── main.js
│   ├── mixins  (公共js工具目錄)
│   │   └── common.js
│   ├── router (路由配置)
│   │   ├── index.js
│   │   └── router.js
│   └── views
│       ├── Main.vue
│       ├── error-page
│       ├── home
│       ├── login.less
│       ├── login.vue
│       ├── main-components (元件入口目錄)
│       ├── main-menu
│               ├─── edit   (編輯)
│               ├── hot     (熱門)
│               ├── recommend   (發現)
│               ├── user    (使用者管理)
│       ├── main.less
│       ├── message
│       └── my-components
複製程式碼

除錯方法:

  1. Chrome除錯(谷歌瀏覽器工具)
  2. vConsole除錯(真機除錯檢視log日誌神器)
  3. API除錯神奇Postman。
  4. Vue-devtools(除錯Vuex狀態)

跨域處理

  1. 使用Webpack的proxyTable進行請求代理
  2. Chrome安裝cors擴充
  3. 服務端配置所以路徑都可跨域或者將開發的IP加入白名單

原始碼

前端原始碼: github.com/czero1995/I…

服務端原始碼：github.com/czero1995/I…

後臺管理原始碼: github.com/czero1995/I…

最後

如有建議或者問題，請私聊聯絡我，一起學習和進步。反手給我一個star^_^

相關文章