文章目錄
- 1 登錄功能
-
- 1.1 登錄頁面(Login.vue)
-
- 1.1.1 頁面布局
- 1.1.2 初始化數據
- 1.1.3 confirm方法
- 1.1.4 UserController.java(登錄接口)
- 1.1.5 Login.vue
- 1.2 登錄頁面的路由
-
- 1.2.1 創建路由文件(router/index.js)
- 1.2.2 注冊路由器(main.js)
- 1.2.3 路由視圖(App.vue)
- 2 退出登錄
-
- 2.1 展示用戶名(Header.vue)
- 2.2 logout()退出登錄事件
- 2.3 logout()增加退出確認
-
- 2.3.1 MessageBox彈框
- 2.3.2 退出提示信息
- 3 參考附錄
配置登錄頁面的路由，點擊登錄，從后臺查詢對應的用戶，并將返回到前端的用戶信息存儲到sessionStorage供后續使用，然后跳轉到主頁。點擊退出登錄，跳轉到登錄頁面，同時清空sessionStorage。
1 登錄功能
1、登錄頁面
2、后臺查詢代碼
3、登錄頁面的路由
(1)安裝路由插件vue-router@3.5.4
(2)創建路由文件
1.1 登錄頁面(Login.vue)
1.1.1 頁面布局
實現了一個基于 Element UI 的登錄表單，包含賬號和密碼輸入框，支持回車提交和表單驗證功能。
1、使用el-form定義表單：
(1)綁定表單數據對象loginForm；
(2)設定表單驗證規則rules；
(3)給表單設置引用名loginForm，便于在JS中調用表單方法(如驗證)。
例如this.$refs.loginForm.validate()。
2、通過el
技術與工程實戰詳解)
