11---SpringBoot和Vue实现登录功能

实现简单的登录功能，后端写登录接口，前端请求登录接口，进行数据库的验证，从而登录成功。权限什么还没设置，后面会写权限功能。

1、SpringBoot实现登录

1. 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);
    }

2. 写登录的具体业务

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;
}

3. 去swagger中测试一下，是否可以登录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaTb2Q77-1672321713967)(D:\桌面\Java学习\项目\管理系统–前后端分离\项目截图\22.jpg)]

2、Vue中实现登录

1. 先写一个登录页面

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组件中表单验证中有）

2. 写完Login.vue记得再index.js中注册路由

router/index.js

{
    path: '/login',
    name: 'Login',
    component:()=>import('../views/Login.vue')
  }

3. 打开页面测试效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pTqbhewj-1672321713968)(D:\桌面\Java学习\项目\管理系统–前后端分离\项目截图\23.jpg)]

测试数据库中的数据，成功登录则会进入首页。登录功能完成！