实现简单的登录功能,后端写登录接口,前端请求登录接口,进行数据库的验证,从而登录成功。权限什么还没设置,后面会写权限功能。
1、SpringBoot实现登录
- UserController.java
//登录
@PostMapping("/login")
public boolean login(@RequestBody UserDTO userDTO){
//先验证都不为空,再去比对数据库
String username = userDTO.getUsername();
String password = userDTO.getPassword();
if (StrUtil.isBlank(username) || StrUtil.isBlank(password)){
return false;
}
return userService.login(userDTO);
}
- 写登录的具体业务
UserService.java
//登录
public boolean login(UserDTO userDTO) {
QueryWrapper<User>queryWrapper = new QueryWrapper<>();
queryWrapper.eq("username",userDTO.getUsername());
queryWrapper.eq("password",userDTO.getPassword());
List<User> list = list(queryWrapper);
return list.size()!=0;
}
UserDTO.java
package com.xqh.controller.dto;
import lombok.Data;
//重新建一个dto接收前端登录请求的参数
@Data
public class UserDTO {
private String username;
private String password;
}
- 去swagger中测试一下,是否可以登录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaTb2Q77-1672321713967)(D:\桌面\Java学习\项目\管理系统–前后端分离\项目截图\22.jpg)]
2、Vue中实现登录
- 先写一个登录页面
Login.vue
<template>
<div class="wrapper">
<div style="margin: 200px auto;background-color: #fff;width:350px;height:300px;padding:20px;border-radius:10px">
<div style="margin: 20px 0;text-align:center;font-size:24px"><b>登 录</b></div>
<el-form :model="user" :rules="rules" ref="userForm">
<el-form-item prop="username">
<el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
</el-form-item>
<el-form-item style="margin: 10px 0;text-align: right">
<el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button>
<el-button type="warning" size="small" autocomplete="off">注册</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default{
name: "Login",
data(){
return{
user: {},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max:10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
]
}
}
},
methods:{
login(){
//前端不通过的时候登录不去请求后端
this.$refs['userForm'].validate((valid)=>{
if (valid) { //表单检验合法
this.request.post("/user/login",this.user).then(res => {
if(!res){
this.$message.error("用户名或密码错误")
}else{
this.$router.push("/")
}
})
} else {
return false;
}
})
}
}
}
</script>
<style>
.wrapper{
height: 100vh;
background-image: linear-gradient(to bottom right,#FC466B, #3F5EFB);
overflow: hidden;
}
</style>
- 请求后端验证密码
- 先做一个前端自己的验证,验证为空和字长等(这些在element组件中表单验证中有)
- 写完Login.vue记得再index.js中注册路由
router/index.js
{
path: '/login',
name: 'Login',
component:()=>import('../views/Login.vue')
}
- 打开页面测试效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pTqbhewj-1672321713968)(D:\桌面\Java学习\项目\管理系统–前后端分离\项目截图\23.jpg)]
测试数据库中的数据,成功登录则会进入首页。登录功能完成!