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

• 请求后端验证密码
• 先做一个前端自己的验证，验证为空和字长等（这些在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)]

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