前端底層框架開發(fā)教程，Vue-項目《人力資源管理系統(tǒng)》

一、項目模板
1.拉取基礎(chǔ)模板
2.項目目錄及入口文件介紹
3.App.vue根組件解析
4.setting.js和permission.js
5.Vuex結(jié)構(gòu)介紹
6.模板中的圖標使用
7.擴展-Icon圖標的解析

二、登錄模塊
1. 導入樣式并使用git管理
2. 登錄頁面結(jié)構(gòu)和表單
3. 登錄表單校驗手機號和密碼
4. 登錄表單校驗勾選和整體校驗
4. Vuex中的用戶模塊
5. Vuex中的token持久化
6. Vue-cli代理解決跨域問題
7. axios封裝處理請求攔截器
8. axios處理響應(yīng)攔截器
9. axios區(qū)分不同環(huán)境
10. 登錄聯(lián)調(diào)封裝請求模塊和調(diào)用接口
11. 登錄聯(lián)調(diào)跳轉(zhuǎn)到主頁

三、主頁
1. 主頁權(quán)限驗證分析
2.主頁權(quán)限驗證-有token的情況
3. 主頁權(quán)限驗證-沒token的情況
4. 獲取用戶資料調(diào)用action
5. 調(diào)整調(diào)用action的位置
6. 顯示用戶的名稱和頭像
7.處理用戶頭像為空的情況
8.處理token失效
9.調(diào)整下拉菜單-實現(xiàn)退出登錄
10.修改密碼-彈出層
11.修改密碼-實現(xiàn)表單結(jié)構(gòu)
12.修改密碼-表單校驗
13.修改密碼-表單提交
14. 清理路由配置和組件
15. 創(chuàng)建項目所需要的的路由和頁面
16. 批量創(chuàng)建路由和組件
17. 擴展-解析左側(cè)菜單渲染
18. 顯示項目logo

四、組織架構(gòu)
1.組織架構(gòu)-樹形組件的應(yīng)用
2.組織架構(gòu)-樹形自定義結(jié)構(gòu)
3.組織架構(gòu)-節(jié)點數(shù)據(jù)的展示
4.組織架構(gòu)-獲取數(shù)據(jù)
5.組織架構(gòu)-遞歸轉(zhuǎn)化樹形數(shù)據(jù)
6.組織架構(gòu)-添加子部門-彈層
7.組織架構(gòu)-添加子部門-表單結(jié)構(gòu)
8.組織架構(gòu)-添加子部門-表單基本校驗
9.組織架構(gòu)-添加子部門-業(yè)務(wù)校驗
10.組織架構(gòu)-添加子部門-負責人數(shù)據(jù)
11.組織架構(gòu)-添加子部門-記錄部門
12.組織架構(gòu)-添加子部門-確認和取消
13.組織架構(gòu)-編輯部門-彈出層獲取數(shù)據(jù)
14.組織架構(gòu)-編輯部門-編輯表單校驗
15.組織架構(gòu)-編輯部門-確認取消
16.組織架構(gòu)-刪除部門

五、角色管理
1.角色管理-搭建頁面結(jié)構(gòu)
2.角色管理-獲取角色數(shù)據(jù)
3角色管理-表格列的自定義結(jié)構(gòu)
4.角色管理-分頁功能
5.角色管理-添加角色彈出層
6.角色管理-添加角色-表單校驗
7.角色管理-添加角色-確定取消
8.角色管理-編輯角色-行內(nèi)編輯解析
9.角色管理-編輯角色-行內(nèi)編輯狀態(tài)
10.角色管理-編輯角色-行內(nèi)編數(shù)據(jù)緩存
11.角色管理-編輯角色-確定和取消
12.角色管理-刪除角色

六、員工模塊
1.員工管理-準備頁面結(jié)構(gòu)
2.員工管理-左樹數(shù)據(jù)加載
3.員工管理-記錄樹節(jié)點
4.員工管理-員工列表結(jié)構(gòu)
5.員工管理-員工數(shù)據(jù)的獲取
6.員工管理-頭像和聘用形式
7.員工管理-員工數(shù)據(jù)分頁
8.員工管理-員工模糊搜索
9.員工管理-員工導出excel
10.員工管理-excel導入組件封裝
11.員工管理-員工導入模版下載
12.員工管理-excel導入-上
13.員工管理-excel導入-下
14.員工管理-刪除員工
15.員工詳情-頁面結(jié)構(gòu)和路由
16.員工詳情-數(shù)據(jù)和校驗
17.員工詳情-級聯(lián)組件封裝
18.員工詳情-級聯(lián)組件雙向綁定
19.員工詳情-新增員工實現(xiàn)
20.員工詳情-編輯數(shù)據(jù)-查看員工
21.員工詳情-編輯員工-保存
22.員工詳情-封裝員工頭像-上
23.員工詳情-封裝員工頭像-下
24.員工詳情-上傳圖片-創(chuàng)建騰訊云存儲桶
25.員工詳情-使用cos-sdk上傳

七、權(quán)限
1.權(quán)限管理-搭建頁面結(jié)構(gòu)
2.權(quán)限管理-獲取權(quán)限數(shù)據(jù)
3.作業(yè)-權(quán)限管理
4.權(quán)限管理-權(quán)限概念
5.權(quán)限應(yīng)用-用戶分配角色-彈出層
6.權(quán)限應(yīng)用-用戶分配角色-數(shù)據(jù)提交
7.權(quán)限應(yīng)用-角色分配權(quán)限-彈出層
8.權(quán)限應(yīng)用-角色分配權(quán)限-回顯權(quán)限數(shù)據(jù)
9.權(quán)限應(yīng)用-角色分配權(quán)限-確定取消
10.權(quán)限應(yīng)用-拆分靜態(tài)路由和動態(tài)路由
11.權(quán)限應(yīng)用-根據(jù)權(quán)限篩選出路由
12.權(quán)限應(yīng)用-動態(tài)添加路由
13.權(quán)限應(yīng)用-根據(jù)權(quán)限渲染菜單
14.退出登錄-重置路由
15.權(quán)限應(yīng)用-功能權(quán)限-按鈕權(quán)限標識
16.權(quán)限應(yīng)用-功能權(quán)限-自定義指令
17.其他模塊集成

八、首頁
1.首頁結(jié)構(gòu)和數(shù)字滾動
2.首頁-個人信息的展示
3.首頁-企業(yè)信息的獲取
4.首頁-通知信息的獲取
5.首頁-圖表的應(yīng)用
6.首頁-圖表的按需導入

九、上線
1.將路由改成history模式
2.打包分析
3.cdn的引入
4.打包-mac下安裝nginx
5.mac-windows啟動服務(wù)
6.max-windows配置nginx解決404的問題
7.mac-windows中nginx代理解決生產(chǎn)環(huán)境跨域問題