Vue+SpringBoot项目开发：后台登陆功能的实现（二）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue+SpringBoot项目开发：后台登陆功能的实现（二）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在开始:一个搬砖程序员的随缘记录

一、SpringBoot项目的搭建

项目搭建传送门：从零开始，SpringBoot项目快速搭建

二、数据库配置

1、新建数据库

在本地mysql数据库新建库，库名：vue_demo，（数据库名字可自行更改，更改完记得在pom.xml中也同步更改）

2、新建用户表

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `username` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

三、SpringBoot项目的配置

项目结构
Vue+SpringBoot项目开发：后台登陆功能的实现（二）,Vue3+SpringBoot后台管理系统,vue.js,spring boot,前端
下面是具体文件的代码
pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.cn</groupId>
    <artifactId>vue_demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>vue_demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <skipTests>true</skipTests>
        <druid.version>1.1.10</druid.version>
        <mysql-connector.version>8.0.16</mysql-connector.version>
        <mybatis-plus.version>3.3.2</mybatis-plus.version>
    </properties>

    <dependencies>
        <!--SpringBoot通用依赖模块-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--SpringBoot校验框架-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <!--集成druid连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>${druid.version}</version>
        </dependency>
        <!--Mysql数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql-connector.version}</version>
        </dependency>
        <!--lombok依赖-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--SpringBoot配置处理-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <!--MyBatis Plus 依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${mybatis-plus.version}</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

返回实体类封装ResultBody
ResultBody.java

package com.cn.vuedemo.entity;

/**
 * 请求
 *
 * @author demo
 */
public class ResultBody<T> {
    /**
     * 响应码
     */
    private int code;
    /**
     * 消息
     */
    private String message;
    /**
     * 数据
     */
    private T data;


    public ResultBody(int code, String message, T data) {
        this.code = code;
        this.message = message;
        this.data = data;
    }

    public ResultBody(String message) {
        this.code = 200;
        this.message = message;
    }

    public ResultBody(int code, String message) {
        this.code = code;
        this.message = message;
    }

    public ResultBody(T data) {
        this.code = 200;
        this.message = "请求成功";
        this.data = data;
    }

    public ResultBody(int code) {
        this.code = code;
        this.message = "请求成功";
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}

用户实体类
User.java

package com.cn.vuedemo.entity;


import lombok.Data;

/**
 * @author demo
 * @date 2023/07/31 11:18
 */
@Data
public class User {
    /**
     * id
     * */
    private Integer id;
    /**
     * 账号
     * */
    private String username;
    /**
     * 密码
     * */
    private String password;
}

登录方法入参
LoginReq.java

package com.cn.vuedemo.model.request;

import lombok.Data;

/**
 * @author demo
 * @since 2023/07/31 11:18
 */
@Data
public class LoginReq {
    /**
     * 账号
     * */
    private String username;

    /**
     * 密码
     * */
    private String password;
}

service
UserService.java

package com.cn.vuedemo.service;

import com.cn.vuedemo.entity.User;
import com.cn.vuedemo.model.request.LoginReq;

import java.util.List;

/**
 * @author demo
 * @since 2023/07/31 11:18
 */
public interface UserService {

    /**
     * 登录
     *
     * @param loginReq loginReq
     * @return com.cn.vuedemo.entity.User
     * @author demo
     * @since 2023/07/31 11:18
     */
    User login(LoginReq loginReq);
}

service实现
UserServiceImpl.java

package com.cn.vuedemo.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.cn.vuedemo.entity.User;
import com.cn.vuedemo.mapper.UserMapper;
import com.cn.vuedemo.model.request.LoginReq;
import com.cn.vuedemo.service.UserService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

/**
 * @author demo
 * @since 2023/07/31 11:18
 */
@Service
@RequiredArgsConstructor
public class UserServiceImpl implements UserService {

    private final UserMapper userMapper;

    @Override
    public User login(LoginReq loginReq) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.lambda().eq(User::getUsername, loginReq.getUsername())
                .eq(User::getPassword, loginReq.getPassword());
        User user = userMapper.selectOne(queryWrapper);
        return user;
    }
}

mapper
UserMapper.java

package com.cn.vuedemo.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.cn.vuedemo.entity.User;
import org.apache.ibatis.annotations.Mapper;

/**
 * @author demo
 * @since 2023/07/31 11:18
 */
@Mapper
public interface UserMapper extends BaseMapper<User> {
}

控制层controller
LoginController.java

package com.cn.vuedemo.controller;

import com.cn.vuedemo.entity.ResultBody;
import com.cn.vuedemo.entity.User;
import com.cn.vuedemo.model.request.LoginReq;
import com.cn.vuedemo.service.UserService;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Objects;

/**
 * @author demo
 * @date 2023/07/31 11:18
 */
@RestController
@Slf4j
@RequestMapping("/user")
@RequiredArgsConstructor
public class LoginController {

    private final UserService userService;

    /**
     * 登陆
     *
     * @param loginReq loginReq
     * @return com.cn.vuedemo.entity.ResultBody
     * @author demo
     * @since 2023/7/31
     */
    @PostMapping(value = "/login")
    public ResultBody login(@RequestBody LoginReq loginReq) {
        log.info("loginReq:" + loginReq);
        User user = userService.login(loginReq);
        if (Objects.isNull(user)) {
            return new ResultBody(500, "密码不正确");
        }

        return new ResultBody(user);
    }
}