gitee地址

一、項目初始化

vue create manager-admin // 創建vue項目// 管理員權限安裝
cnpm i -S koa@2 // 下載koa2依賴
cnpm install  --global koa-generator // 下載框架 koa-generator
koa2 manager-server // 創建項目
cd manager-server // 進入項目
npm install // 安裝依賴
npm start // 啟動項目cnpm i koa2-cors -S // 解決跨域

二、邏輯梳理

1. 登錄后，接口返回uid → 請求路由權限API
2. 接口返回該用戶對應路由權限列表（JSON，非樹結構，含pid）
3. 前端將JSON樹形結構化
4. 樹形結構化 → vue路由結構
5. 路由結構動態 → 靜態路由
6. 樹形結構化數據 → 菜單組件

// 服務端 路由列表{id: 2,pid: 0,path: '/course',name: 'Course',title: '課程管理'},{id: 3,pid: 2,path: 'operate',name: 'CourseOperate',link: '/course/operate',title: '課程操作'},

7. 全局的請求數據做在vuex的action里，在main.js里dispatch
8. store/index.js 里引入 state.js mutation.js action.js
9. libs/utils
10. 前端的權限控制：根據后端返回的權限，做成動態路由