- 項目搭建先跳過
登錄退出功能
登錄業務流程：
- 在登錄頁輸入用戶名和密碼
- 調用後臺接口進行驗證
- 通過驗證後，根據後臺返回的狀態，跳轉到項目主頁
技術點：
4. http 是無狀態的
5. 通過cookie在客戶端記錄狀態
6. 通過session在服務器保存狀態
7. 通過token維持狀態
實操：
8. 登錄用到的element表單組件
el-form(表單的數據綁定，校驗規則，表單的引用)，el-forrn-item(通過prop來接收數據綁定裏面的值)，el-input(prefix-icon=""設置圖標，v-model=“”“form，form-item”的值)
9. data裏面 初始化form數據
10. 表單的校驗規則：
重置數據： 利用表單的引用，獲取到表單的實例對象，調用resetFields
表單預校驗：validate() 參數是一個回調函數，通過，返回true，拿返回值作爲判斷條件，如果失敗return 成功，調用驗證用戶名密碼是否正確
11. 我簡單理解一下這個post接口：參數不能爲空，就是你現在定義的username，password可以是空的字符串，但是在提交數據的時候，你的這兩個字段都是有數據的，其實這也和表單的預校驗是一樣的
至此：請求成功，接下來就是將服務器返回的token通過sessionStroge保存在本地,然後跳轉到項目主頁
windoe.sessionStroge.setItem(‘token’,res.data.token)
this.$router.push(’/home’)
12. 項目中所有項目除了 登錄之外的api，只要登錄才能訪問,路由守衛
router.beforeEach((to,form,next)=>{
if (to.path === ‘login’) return next()
var tokenStr = window.sessionStroge.getItem(‘token’)
if (!tokenStr) return next(’/login’)
next()
})
退出功能
清除token，並且跳轉到登錄頁
window.sessionStroge.clear(’‘token’)
this.$router.push(’/login’)
主頁佈局
整體佈局：container,header,container,aside,main
二級菜單欄佈局：el-menu> el-submenu(需要index)> i span >
通過接口獲取菜單欄數據
通過axios的請求攔截器添加token，保證有獲取數據的權限
axios.interceptors.request.use(config=>{
config.headers.Authorization = window.sessionStroge.getItem(‘token’)
return config
)
動態渲染數據，並對路由進行控制
- 通過v-for雙成循環，分別對一級菜單和二級慘菜單進行渲染
- 通過路由的相關屬性，啓用菜單的相關功能
- 保存當前狀態(通過點擊事件) 先將狀態保存下來sessionstorge
- default-active：狀態
- 自定義圖標 :class=“iconObj[item.id]”
- 展開合住：roggleButton :collapse= 'isCollapse"
- el-aside :width:= isCollapse ? ‘64px’: ‘200px’’
用戶管理
包括用戶信息的展示，搜索，修改，刪除
用戶列表展示
- 麪包屑導航：el-breadcrumb el-breadcrumb-item
- 卡片視圖： card 柵格系統 row col input button,通過作用域插槽，自定義數據