[Java知识库]【Java实战篇】SpringBoot+MyBatis快速实现登录注册

?

目录

项目结构：

数据库表：

项目依赖：POM文件

Properties配置文件：

静态页面：

Login.html：

Reg.html：

Success.html：

END1.html：

END2.html：

login.css：

背景图片：

MVC架构：

Dao数据库持久层：

Service业务逻辑层：

Controller控制层：

案例展示：

使用SpringBoot+MyBatis完成登录注册板块：

项目结构：

数据库表：

📎student.sql

-- auto-generated definition
create table student
(
    stu_id       int unsigned zerofill auto_increment comment '学生id'
        primary key,
    stu_name     varchar(40) not null comment '学生姓名',
    stu_no       varchar(50) not null comment '学生学号',
    stu_phone    varchar(50) null comment '学生电话',
    stu_password varchar(50) not null comment '学生密码'
);

项目依赖：POM文件

使用了Lombok简化了开发！！！

<?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.4.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.krian</groupId>
    <artifactId>demo</artifactId>
    <packaging>jar</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</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-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.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>

<!--            <resources>-->
<!--                <resource>-->
<!--                    <directory>src/main/resources</directory>-->
<!--                    <includes>-->
<!--                        <include>**/*.properties</include>-->
<!--                        <include>**/*.xml</include>-->
<!--                        <include>**/*.html</include>-->
<!--                        <include>**/*.jpg</include>-->
<!--                    </includes>-->
<!--                    <filtering>true</filtering>-->
<!--                </resource>-->
<!--                <resource>-->
<!--                    <directory>src/main/java</directory>-->
<!--                    <includes>-->
<!--                        <include>**/*.properties</include>-->
<!--                        <include>**/*.xml</include>-->
<!--                    </includes>-->
<!--                    <filtering>true</filtering>-->
<!--                </resource>-->
<!--            </resources>-->

    </build>
</project>

Properties配置文件：

配置了数据库连接信息

#数据库连接信息：
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/milib?useUnicode=true&characterEncoding=utf8&useSSL=true
spring.datasource.username=root
spring.datasource.password=131452

#配置mapper：
mybatis.mapper-locations=classpath:mapper/*.xml

#关闭Thymeleaf页面缓存：
spring.thymeleaf.cache=false

#开启驼峰命名：
mybatis.configuration.map-underscore-to-camel-case=true

静态页面：

Login.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <style>
        #s1{
            float: left;
            margin: 50px 0px 0px 100px;
        }
        #s2{
            float: left;
            margin: 50px 0px 0px 50px;
        }
    </style>
    <script type="text/javascript">
        function f2(){

            var regx = /^[a-zA-Z0-9]{5,12}$/;
            var password = document.getElementById("password").value;
            if(regx.test(password)){
                document.getElementById("d2").style.color = "green";
                document.getElementById("d2").innerHTML="√";
                return true;
            }else{
                document.getElementById("d2").style.color = "red";
                document.getElementById("d2").innerHTML="请重新输入！！！";
                return false;
            }
        }
        function subForm(){
            if (f2()){
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<div>
    <form th:action="@{/result}" method="get" onsubmit="return subForm()">
        <table>
            <tr>
                <td><span>用户名：</span></td>
                <td><input id="username" type="text" name="username" placeholder="请输入您的用户名" onblur="f1()"><span id="d1"></span></td>
            </tr>
            <tr>
                <td>
                    <span>密码：</span>
                </td>
                <td><input id="password" type="password" name="password" placeholder="请输入您的密码" onblur="f2()"><span id="d2"></span></td>
            </tr>
        </table>
        <input id="s1" type="submit" value="登录">
    </form>

    <form th:action="@{/reg}" method="get" >
        <input id="s2" type="submit" value="注册" onclick="zhuCe()">
    </form>
</div>
</body>
</html>

Reg.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <style type="text/css">
        #s1{
            float: left;
            margin: 50px 0px 0px 120px;
        }
    </style>
    <script type="text/javascript">
        function f2(){
            var regx = /^[a-zA-Z0-9]{5,12}$/;
            var password = document.getElementById("password").value;
            if(regx.test(password)){
                document.getElementById("d2").style.color = "green";
                document.getElementById("d2").innerHTML="√";
                return true;
            }else{
                document.getElementById("d2").style.color = "red";
                document.getElementById("d2").innerHTML="×";
                return false;
            }
        }
        function subForm(){
            if (f2()){
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<form action="/end" method="get" onsubmit="return subForm()">
    <table>
        <tr>
            <td> <span>用户名：</span></td>
            <td><input id="username" type="text" name="username" placeholder="请输入您想要设置的用户名！"><span id="d1"></span></td>
        </tr>
        <tr>
            <td>
                <span>密码：</span>
            </td>
            <td><input id="password" type="password" name="password" placeholder="请输入您想要设置的密码！" onblur="f2()"><span id="d2"></span></td>
        </tr>
        <tr>
            <td>
                <span>学号：</span>
            </td>
            <td><input id="stuNo" type="text" name="stuNo" placeholder="请输入您的学号！"><span id="d3"></span></td>
        </tr>
        <tr>
            <td>
                <span>电话：</span>
            </td>
            <td><input id="phone" type="text" name="phone" placeholder="请输入您的电话号码！"><span id="d4"></span></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="s1" type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>
</html>

Success.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/css/login.css}">
  </style>

</head>
<body>
<h1>Hi,欢迎登录！</h1>
</body>
</html>

END1.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>注册成功</title>
  <link rel="stylesheet" th:href="@{/css/login.css}">
  <script type="text/javascript">
    window.onload = function f() {
      var i =5;
      var a = setInterval(function () {
        i--;
        if(i<=0){
          document.getElementById("p1").innerHTML = "注册成功，返回登录界面";
          clearInterval(a);
          location = "/tologin";
        }else {
          document.getElementById("p1").innerHTML = "注册成功,还有"+i+"秒跳转回登录界面";
          return false;
        }
      },1000)
    }
  </script>
</head>
<body>
<p id="p1">注册成功,还有5秒跳转回登录界面</p>
</body>
</html>

END2.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>注册失败</title>
  <link rel="stylesheet" th:href="@{/css/login.css}">
  <script type="text/javascript">
    window.onload = function f() {
      var i =5;
      var a = setInterval(function () {
        i--;
        if(i<=0){
          document.getElementById("p1").innerHTML = "注册失败，返回登录界面";
          clearInterval(a);
          location = "/tologin";
        }else {
          document.getElementById("p1").innerHTML = "注册失败,还有"+i+"秒跳转回登录界面";
          return false;
        }
      },1000)
    }
  </script>
</head>
<body>
<p id="p1">注册失败,还有5秒跳转回登录界面</p>
</body>
</html>

login.css：

body{
    background-image: url("../images/back.jpg");
    background-size: 100%;
}

背景图片：

MVC架构：

Dao数据库持久层：

持久层，定义操作数据库方法：

StudentController.java：

package com.krian.demo.dao.studentDao;

import com.krian.demo.pojo.Student;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;


/**
 * @Author: Lunaticer
 * @Create: 2021-07-26 23:23
 * @Tip: Keeping the eyes of the prize !
 * @Description: dao持久层，对应daoMapper.xml操作数据库！
 */
@SuppressWarnings({"all"})
@Mapper
@Repository
public interface StuMapper {

    //通过学生姓名查询：
    public Student selectStuByName(String name);

    //插入学生数据：
    public int insertStudent(Student student);

}

以接口的形式进行方法的定义，对应DaoMapper.xml对具体的数据库操作进行实现：

StuMapper.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">

<!--映射dao接口类-->
<mapper namespace="com.krian.demo.dao.studentDao.StuMapper">

    <select id="selectStuByName" resultType="com.krian.demo.pojo.Student" parameterType="String">
        select * from student where stu_name = #{name}
    </select>

    <insert id="insertStudent" parameterType="com.krian.demo.pojo.Student">
        insert into student(stu_name,stu_no,stu_phone,stu_password)
                    values (#{stuName},#{stuNo},#{stuPhone},#{stuPassword})
    </insert>

</mapper>

Service业务逻辑层：

通过调用Dao层接口，实习具体复杂的业务逻辑：

StudentService.java：

package com.krian.demo.service.StudentService;

import com.krian.demo.dao.studentDao.StuMapper;
import com.krian.demo.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * @Author: Lunaticer
 * @Create: 2021-07-26 23:30
 * @Tip: Keeping the eyes of the prize !
 * @Description: 业务逻辑层，调用dao层接口，实现业务逻辑，返回执行结果给控制层！
 */
@SuppressWarnings({"all"})
@Service
public class StudentService {

    @Autowired
    StuMapper stuMapper;

    /**
     * 学生登录
     *
     * @param student
     * @return
     */
    public boolean login(Student student){
        String loginName = student.getStuName();
        String loginPassWord = student.getStuPassword();

        Student loginStudent = stuMapper.selectStuByName(loginName);

        System.out.println("进行验证！！！");

        if (loginStudent == null){
            return false;
        } else if (loginStudent.getStuPassword().equals(loginPassWord)){
            return true;
        } else{
            return false;
        }
    }

    /**
     * 学生注册
     *
     * @param student
     * @return
     */
    public boolean reg(Student student){
        int i = stuMapper.insertStudent(student);
        if (i > 0){
            return true; //注册成功！
        } else {
            return false; //注册失败！
        }
    }

}

Controller控制层：

通过调用业务层执行具体业务，通过业务层返回判断，实现具体的页面跳转，视图控制：

StudentController.java：

package com.krian.demo.controller.studentController;

import com.krian.demo.pojo.Student;
import com.krian.demo.service.StudentService.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Author: Lunaticer
 * @Create: 2021-07-26 23:38
 * @Tip: Keeping the eyes of the prize !
 * @Description: 控制层，接收请求，控制视图跳转！
 */
@SuppressWarnings({"all"})
@Controller
public class StudentController {

    @Autowired
    StudentService studentService;

    /**
     * 登录
     *
     * @return
     */
    @RequestMapping("/tologin")
    public String login(){
        return "Login";
    }
    @GetMapping("/result")
    public String login(HttpServletRequest req, HttpServletResponse resp) {

        //前端获取数据：
        String studentName = req.getParameter("username");
        String stduentPassword = req.getParameter("password");

        //创建实例，接收前端数据：
        Student student = new Student();
        student.setStuName(studentName);
        student.setStuPassword(stduentPassword);

        //调用Service层方法：
        boolean login = studentService.login(student);

        //判断Service层返回的结果，进行页面的跳转：
        if (login == true){
            return "Success";
        } else {
            return "Login";
        }
    }

    /**
     * 注册
     *
     * @return
     */
    @GetMapping("/reg")
    public String reg(){
        return "Reg";
    }
    @GetMapping("/end")
    public String end(HttpServletRequest req, HttpServletResponse resp) {

        //获取前端数据；
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String stuNo = req.getParameter("stuNo");
        String phone = req.getParameter("phone");

        //创建实例接收数据：
        Student student = new Student();

        student.setStuPassword(password);
        student.setStuNo(stuNo);
        student.setStuName(username);
        student.setStuPhone(phone);

        System.out.println("插入数据！！！");

        //判断Service层返回的结果，进行页面的跳转：
        boolean flog = studentService.reg(student);
        if (flog){
            return "END1"; //注册成功！
        } else {
            return "END2"; //注册失败！
        }
    }
}