Spring Boot 案例：连接后台数据库实现用户登录

一、运行效果

二、涉及知识点

• MySQL数据库操作
• Spring Boot Web项目
• Spring Boot整合MyBatis
• Spring Boot整合Thymeleaf
• Spring Boot整合Bootstrap

三、项目实现步骤

（一）在博客数据库里创建用户表

• 创建用户表t_user

CREATE TABLE `t_user` (
  `id` int(20) NOT NULL AUTO_INCREMENT COMMENT '用户编号',
  `username` varchar(200) DEFAULT NULL COMMENT '用户名',
  `password` longtext COMMENT '密码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

• 在用户表里插入数据记录

INSERT INTO `t_user` VALUES ('1', 'admin', '123456');
INSERT INTO `t_user` VALUES ('2', 'howard', '903213');
INSERT INTO `t_user` VALUES ('3', '无心剑', '213903');

• 查看用户表记录
  

（二）创建Spring Boot Web项目Login

• 设置项目元数据
  
• 设置项目名称与位置
  
• 单击【完成】按钮，完成项目初始化
  
• 查看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.3.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>net.hw</groupId>
    <artifactId>userlogin</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>UserLogin</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

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

</project>

（三）创建用户实体类User

• 在net.hw.userlogin包里创建bean子包
  
• 在net.hw.userlogin.bean包里创建用户实体类User
  

package net.hw.userlogin.bean;

/**
 * 功能：用户实体类
 * 作者：华卫
 * 日期：2020年09月09日
 */
public class User {
    
    
    private int id;
    private String username;
    private String password;

    public int getId() {
    
    
        return id;
    }

    public void setId(int id) {
    
    
        this.id = id;
    }

    public String getUsername() {
    
    
        return username;
    }

    public void setUsername(String username) {
    
    
        this.username = username;
    }

    public String getPassword() {
    
    
        return password;
    }

    public void setPassword(String password) {
    
    
        this.password = password;
    }

    @Override
    public String toString() {
    
    
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

（四）创建用户映射器配置文件UserMapper.xml

• 在resources目录下创建mapper子目录
  
• 在mapper子目录里创建UserMapper.xml
  

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="net.hw.userlogin.mapper.UserMapper">
    <select id="login" resultType="net.hw.userlogin.bean.User">
        select * from t_user where username = #{username} and password = #{password}
    </select>
</mapper>

（五）创建用户映射器接口UserMapper

• 在net.hw.userlogin包里创建mapper子包
  
• 在mapper子包里创建UserMapper接口
  

package net.hw.userlogin.mapper;

import net.hw.userlogin.bean.User;
import org.apache.ibatis.annotations.Mapper;

/**
 * 功能：用户映射器接口
 * 作者：华卫
 * 日期：2020年09月09日
 */
@Mapper
public interface UserMapper {
    
    
    public User login(String username, String password);
}

（六）创建登录控制器LoginController

• 在net.hw.userlogin包里创建controller子包
  
• 在controller子包里创建LoginController
  

package net.hw.userlogin.controller;

import net.hw.userlogin.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.Calendar;

/**
 * 功能：登录控制器
 * 作者：华卫
 * 日期：2020年09月09日
 */
@Controller
public class LoginController {
    
    
    @Autowired
    private UserMapper userMapper;
    
    /**
     * 通过请求“toLoginPage”跳转到templates目录下的
     * login页面，并把当前年份数据保存到模型对象中
     */
    @GetMapping("toLoginPage")
    public String toLoginPage(Model model){
    
    
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login"; // 返回逻辑页面视图名称
    }

    @PostMapping("login")
    public String login(HttpServletRequest request, Model model) {
    
    
        // 获取表单提交的用户名与密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 判断用户是否登录成功
        if (userMapper.login(username, password) != null) {
    
    
            model.addAttribute("loginMsg", "恭喜，用户登录成功~");
            return "success";
        } else {
    
    
            model.addAttribute("loginMsg", "遗憾，用户登录失败~");
            return "failure";
        }
    }
}

（六）将Bootstrap引入项目

• Bootstrap压缩包下载链接：https://pan.baidu.com/s/1gWca14KH2OnLjoVzp7BirQ 提取码：li4b
  

• 解压缩到bootstrap-4.0.0目录
  

• 将bootstrap-4.0.0目录拷贝项目的static目录
  

（七）编写应用配置文件application.properties

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/blog?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=root

#配置MyBatis的xml配置文件路径
mybatis.mapper-locations=classpath:mapper/*.xml
#配置XML映射文件中指定的实体类别名路径
mybatis.type-aliases-package=net.hw.userlogin.bean

#缓存配置，默认即是true，开发阶段设置为false
spring.thymeleaf.cache = false
#设置模板使用的编码为utf-8
spring.thymeleaf.encoding = UTF-8
#指定为模板使用的模式为html5，默认html
spring.thymeleaf.mode = HTML5
#指定前缀，默认位置为/templates/，可以修改成其它位置
spring.thymeleaf.prefix = classpath:/templates/
#指定模板文件后缀，默认值为.html，可以修改成其它值
spring.thymeleaf.suffix = .html

（八）在templates目录里创建页面

1、创建登录页面login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名" required
                       autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" placeholder="输入密码" required>
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox" id="remember-me">记住我
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

2、创建登录成功页面success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-info border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-success"></p>
</div>
</body>
</html>

3、创建登录失败页面failure.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录失败</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-warning border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-danger"></p>
</div>
</body>
</html>

（九）启动项目，查看效果

• 启动UserLoginApplication
  

• 在浏览器里访问http://localhost:8080/toLoginPage
  

• 查看用户表
  

• 输入第3条记录的用户名与密码
  

• 输入未注册用户的用户名和密码