Views: 0
逻辑
前端部分：
创建登录页面Login.vue，包含账号、密码输入框和角色选择下拉框 默认设置角色为STUDENT 点击登录按钮时，将表单数据(包含username, password, role)发送到后端
后端部分：
后端Controller接收登录请求(/login)，根据role字段分发到不同的Service：
if ("ADMIN".equals(account.getRole())) {
return adminService.login(account);
} else if ("TEACHER".equals(account.getRole())) {
return teacherService.login(account);
} else if ("STUDENT".equals(account.getRole())) {
return studentService.login(account);
}各Service的login方法逻辑类似： 通过username查询用户是否存在 验证密码是否正确 返回用户完整信息或抛出异常
前后端交互：
前端收到200响应后： 存储用户信息到localStorage 跳转到首页(/) 根据用户角色显示对应菜单
Login.vue
<div style="font-weight: bold; font-size: 24px; text-align: center; margin-bottom: 30px; color: #1450aa">欢迎登录学生选课管理系统</div><el-form-item prop="role">
<!--选择角色 管理员 教师 学生 value要和数据库的role角色对应 lable是显示的文字-->
<el-select size="large" style="width: 100%" v-model="data.form.role">
<el-option value="ADMIN" label="管理员"></el-option>
<el-option value="TEACHER" label="教师"></el-option>
<el-option value="STUDENT" label="学生"></el-option>
</el-select>
</el-form-item>const data = reactive({
// 默认是管理员登录
// form: { role: 'ADMIN' },
// 默认是学生登录
form:{role:'STUDENT'},
rules: {
username: [
// 正则表达式 只能是数字和字母
{ required: true, message: '请输入账号', trigger: 'blur' },
],
password: [
// 正则表达式 只能是数字和字母
{ required: true, message: '请输入密码', trigger: 'blur' },
],
}
})
const formRef = ref()
// 点击登录按钮的时候会触发这个方法
const login = () => {
formRef.value.validate((valid => {
if (valid) {
// 调用后台的接口
request.post('/login', data.form).then(res => {
if (res.code === '200') {
ElMessage.success("登录成功")
// 登录成功之后跳转到首页
router.push('/')
// 把对象转换成字符串存储到localStorage中
// 存储的是用户的信息 包括用户的id 用户名 角色 权限 头像 等等信息
localStorage.setItem('system-user', JSON.stringify(res.data))
} else {
// 登录失败 提示用户登录失败
ElMessage.error(res.msg)
}
})
}// 验证不通过
})).catch(error => {
// 登录失败 提示信息
console.error(error)
})
}/* 登录页面的样式*/
.login-container {
height: 747px;
overflow:hidden;
display: flex;
/*水平居中 垂直居中*/
justify-content: center;
align-items: center;
/*background: linear-gradient(to top, #7f7fd5, #86a8e7, #91eae4);渐变背景*/
/*背景图*/
background: url('@/assets/imgs/back.png');
width: 100vw;
height: 100vh;
background-position: center;
/*背景图居中*/
background-size: cover;
}
/*登录框的样式*/
.login-box {
width: 400px;
padding: 50px 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0,.1);
background-color: rgba(255, 255, 255, .5);
}WebController.java
/**
* 登录
*/
@PostMapping("/login")
public Result login(@RequestBody Account account) {
if ("ADMIN".equals(account.getRole())) {
// 管理员登录
return Result.success(adminService.login(account));
//调用adminService的login方法，返回结果
}
if (("TEACHER".equals(account.getRole()))) {
// 教师登录
return Result.success(teacherService.login(account));
//调用teacherService的login方法，返回结果
}
if (("STUDENT".equals(account.getRole()))) {
// 学生登录
return Result.success(studentService.login(account));
//调用studentService的login方法，返回结果
}
TeacherService.java
/**
* 登录
*/
public Teacher login(Account account) {
// ToDo 登录逻辑处理
// 1. 检查用户是否存在
// 2. 检查密码是否正确
// 3. 如果用户不存在，抛出异常
// 4. 如果密码错误，抛出异常
// 5. 如果用户存在，返回用户信息
Teacher dbTeacher = teacherMapper.selectByUsername(account.getUsername());
if (ObjectUtil.isNull(dbTeacher)) {
throw new CustomException("用户不存在");
}
if (!account.getPassword().equals(dbTeacher.getPassword())) {
throw new CustomException("账号或密码错误");
}
return dbTeacher;
}
}StudentService.java
/**
* 登录
*/
public Student login(Account account) {
// ToDo 登录逻辑处理
// 1. 检查用户是否存在
// 2. 检查密码是否正确
// 3. 如果用户不存在，抛出异常
// 4. 如果密码错误，抛出异常
// 5. 如果用户存在，返回用户信息
Student dbStudent = studentMapper.selectByUsername(account.getUsername());
if (ObjectUtil.isNull(dbStudent)) {
throw new CustomException("用户不存在");
}
if (!account.getPassword().equals(dbStudent.getPassword())) {
throw new CustomException("账号或密码错误");
}
return dbStudent;
}
