【Java实战篇】SpringBoot+MyBatis快速实现登录注册-阿里云开发者社区

项目结构：

案例展示：

使用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"; //注册失败！
        }
    }
}

【Java实战篇】SpringBoot+MyBatis快速实现登录注册

案例展示：

项目结构：

数据库表：

项目依赖：POM文件

Properties配置文件：

静态页面：

Login.html：

Reg.html：

Success.html：

END1.html：

END2.html：

login.css：

背景图片：

MVC架构：

Dao数据库持久层：

Service业务逻辑层：

Controller控制层：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Java实战篇】SpringBoot+MyBatis快速实现登录注册

案例展示：

项目结构：

数据库表：

项目依赖：POM文件

Properties配置文件：

静态页面：

Login.html：

Reg.html：

Success.html：

END1.html：

END2.html：

login.css：

背景图片：

MVC架构：

Dao数据库持久层：

Service业务逻辑层：

Controller控制层：

热门文章

最新文章

相关课程

相关电子书

相关实验场景