文章目录
- 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
技术与工程实战详解)
