Springboot3+vue3实现登录注册功能

登录

页面 Login.vue

<template><div class="bg"><div style="width: 350px;background-color: #ffffff;opacity:0.8;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.1);padding:40px 20px"><el-form ref="formRef":model="data.form" :rules="data.rules"><div style="margin-bottom: 40px;text-align: center;font-weight: bold;font-size: 24px">欢 迎 登 录</div><el-form-item prop="username"><el-input size="large" v-model="data.form.username" autocomplete="off" prefix-icon="User" placeholder="请输入账号"/></el-form-item><el-form-item prop="password"><el-input size="large" show-password v-model="data.form.password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><div style="margin-bottom: 20px"><el-button style="width: 100%" size="large" type="primary" @click="login">登 录</el-button></div><div style="text-align: right">还没有账号？请<a style="color: #274afa" href="/register">注册</a></div></el-form></div></div>
</template><script setup>
import {reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";const formRef = ref()const data = reactive({form:{},rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur'}],password: [{ required: true, message: '请输入密码', trigger: 'blur'}],}
})const login = () => {request.post('/login',data.form).then(res => {if (res.code === '200'){//存储用户信息localStorage.setItem("code_user",JSON.stringify(res.data || {}))ElMessage.success('登录成功')router.push('/')}else {ElMessage.error(res.msg)}})
}
</script><style>
.bg{height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;background-image: url("@/assets/imgs/bg.png");background-size: cover;
}
</style>

存储用户信息

登录接口

controller

    @PostMapping("/login")public Result login(@RequestBody Account account){Account dbAccount =null;if ("ADMIN".equals(account.getRole())){dbAccount = adminService.login(account);}else if ("USER".equals(account.getRole())){dbAccount = userService.login(account);}else {throw new CustomerException("非法请求");}return Result.success(dbAccount);}

service

  public Admin login(Account account) {//验证账号是否存在Admin dbAdmin = adminMapper.selectByUsername(account.getUsername());if(dbAdmin == null){throw new CustomerException("账号不存在");}//验证密码是否正确if(!dbAdmin.getPassword().equals(account.getPassword())){throw new CustomerException("账号或密码错误");}return dbAdmin;}

模仿管理员开发用户管理

数据库表user

CREATE TABLE `user` (`id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',`username` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '账号',`password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',`name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',`phone` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '手机',`email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮箱',`role`  varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',PRIMARY KEY (`id`),UNIQUE KEY `username_index` (`username`) USING BTREE COMMENT '账号'
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='管理员信息';

User 相关的接口 和 管理页面

开发过程：复制 Admin 相关的 Entity、Controller、Service、Mapper、Mapper.xml，然后改名 Admin -> User n即可

注意 UserService 的 add 方法 和 AdminService 的 add 方法 是不一样的
user

 public void add(User user) {//根据新的账号查询数据库，是否存在同样账号的数据User dbUser = userMapper.selectByUsername(user.getUsername());if(dbUser != null){throw new CustomerException("账号重复");}//默认密码 userif (StrUtil.isBlank(user.getPassword())) {user.setPassword("123");}if (StrUtil.isBlank(user.getName())) {user.setName(user.getUsername());}user.setRole("USER");userMapper.insert(user);}

admin

public void add(Admin admin) {//根据新的账号查询数据库，是否存在同样账号的数据Admin dbAdmin = adminMapper.selectByUsername(admin.getUsername());if(dbAdmin != null){throw new CustomerException("账号重复");}//默认密码 adminif (StrUtil.isBlank(admin.getPassword())) {admin.setPassword("admin");}admin.setRole("ADMIN");adminMapper.insert(admin);}

**注意在 AdminService.xml 和 UserService.xml里面补充 role

**遇到“未找到接口”的问题

这是因为没有重启后台，重启即可。还有可能是没有写对应的接口

注册

页面 Register.vue

<template><div class="bg"><div style="width: 350px;background-color: #ffffff;opacity:0.8;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.1);padding:40px 20px"><el-form ref="formRef":model="data.form" :rules="data.rules"><div style="margin-bottom: 40px;text-align: center;font-weight: bold;font-size: 24px">欢 迎 登 录</div><el-form-item prop="username"><el-input size="large" v-model="data.form.username" autocomplete="off" prefix-icon="User" placeholder="请输入账号"/></el-form-item><el-form-item prop="password"><el-input size="large" show-password v-model="data.form.password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item prop="role"><el-select size="large" style="width: 100%" v-model="data.form.role"><el-option label="管理员" value="ADMIN"></el-option><el-option label="普通用户" value="USER"></el-option></el-select></el-form-item><div style="margin-bottom: 20px"><el-button style="width: 100%" size="large" type="primary" @click="login">登 录</el-button></div><div style="text-align: right">还没有账号？请<a style="color: #274afa" href="/register">注册</a></div></el-form></div></div>
</template><script setup>
import {reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";const formRef = ref()const data = reactive({form:{ role:'ADMIN'},rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur'}],password: [{ required: true, message: '请输入密码', trigger: 'blur'}],}
})const login = () => {formRef.value.validate((valid) => {if(valid){request.post('/login',data.form).then(res => {if (res.code === '200'){//存储用户信息localStorage.setItem("code_user",JSON.stringify(res.data || {}))ElMessage.success('登录成功')router.push('/')}else {ElMessage.error(res.msg)}})}})}
</script><style>
.bg{height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;background-image: url("@/assets/imgs/bg.png");background-size: cover;
}
</style>

注册接口

controller

 @PostMapping("/register")public Result register(@RequestBody User user){userService.register(user);return Result.success();}

service

  public void register(User user) {this.add(user);}

自定义错误

不是系统错误，不是代码的 bug，这是我们给前端抛出的错误信息