文章目录 一、登陆界面编写 二、配置登陆界面路由 三、登陆接口编写 1、创建DTO 作为前端跟后端之间的数据传输模型,与数据库模型分离开来 2、编写service中的登陆逻辑 3、编写controller接口 四、给登陆表单添加验证规则 1、改造登陆表单 2、添加规则 3、如果验证通过才点击登陆才发请求 五、登陆异常处理 六、退出登陆 1、添加退出按钮点击事件 2、完成退出操作 3、了解一下@click.native 七、注册界面编写 1、复制登录界面,并调整样式 2、配置注册页面的路由 3、优化注册界面 八、注册接口编写 1、将UserDTO中的内容补全 2、编写业务状态码枚举类 3、编写service注册逻辑 4、编写controller注册接口 5、测试效果 6、解决后台首页显示的用户名BUG 7、添加注册时再次输入密码,预防输入失误 九、个人信息页完成 1、在views文件夹下创建UserinfoView.vue 2、在User View.vue中复制如下代码 3、配置UserinfoView.vue的路由 4、在右侧当前登录用户名下拉菜单中的个人信息按钮添加点击事件 5、调整样式 6、调整以下逻辑 7、后端UserDTO中要把id补上 8.添加校验规则,从注册页面复制 一、登陆界面编写 在views文件夹下创建 LoginView.vue 编写登陆界面 <template> <div class="wrapper"> <div style="