Django之入門 CMDB系統 (五) 前後端分離之前端Django之入門 CMDB系統 (五) 前後端分離之前端

作者: 何全，github位址: https://github.com/hequan2017 QQ交流群: 620176501 通過此教程完成從零入門，能夠獨立編寫一個簡單的CMDB系統。 目前主流的方法開發方式，分為2種：mvc 和 mvvc方式。本教程為 mvvc(前後端分離)的入門教程。 教程項目位址: https://github.com/hequan2017/panda/ 教程文檔位址: https://github.com/hequan2017/pandaAdmin

架構架構選擇

vue (入門簡單，自學可以跟着官網例子入門)

d2Admin (基于element,樣式外觀好看，例子較多)

開發工具

vs code

相較于react, vue入門更簡單，基于模闆文法，适合從mvc方式 循序漸進到 mvvc方式。 模闆選擇為 基于element的模闆. iview現在已經轉為收費方式，不太适合個人開發者練習使用。antd vue版本 沒有合适的 admin模闆，是以放棄了. vue-element-admin 和 d2admin 差不多，資料文檔都非常全。看個人選擇。

vue

https://cn.vuejs.org/v2/guide/

axios ajax 發送請求 擷取資訊

store 擷取到的資訊儲存

router 路由跳轉

https://fairyever.com/d2-admin/doc/zh/ #具體模闆詳細 可以 看這個文檔，非常詳細

下載下傳基礎模闆

git clone https://github.com/d2-projects/d2-admin-start-kit

src/modules/d2admin/modules/account.js #主要為 前端登入資訊 狀态 儲存和讀取

src/api/sys.login.js # 設定擷取 token 和 info

登入token攔截設定 src\plugin\axios\index.js

使用者資訊調用例子

路由

src/api/sys.login.js

src/asset/index.vue

src/router/routers.js

npm install npm run dev