【SpringBoot】DEMO：实战②——登录注册功能实现

一、实现工具：
二、目录结构：
三、设计思路（~~第一次写，语文高考刚及格，见谅~~）
四、代码演示（注释已经写好,每个类的功能不多描述）
五、运行演示

SpringBoot学习视频
最近看的小匠SpringBoot的教学视频，看了20多章的网课，跟着老师跑，感觉比较迷，希望巩固知识

小匠视频链接: https://www.bilibili.com/video/av65117012
——————————————————————————————

前排提醒：暂时不会写cookie和session。。。

前排提醒：不太会用Service层，校验功能在Controller层实现了。。。

前排提醒：没怎学JavaScript，使用 thymeleaf 前端模板进行数据传输。。。

——————————————————————————————

一、实现工具：

编译器选择：DIEA
数据库选择：MySql57
前端框架选择： BootStrap Thymeleaf
后端框架：SpringBoot

二、目录结构：

在这里插入图片描述

三、设计思路（第一次写，语文高考刚及格，见谅）

输入网址，进入主页 index.html ，此时为：游客模式 ,主页没有东西
点击注册，输入账号和密码，注册成功，进入登录页面
输入账号密码，登录成功，进入主页index.htm，此时为登录模式，可以看到图片
结束，下面进行代码演示 ↓

四、代码演示（注释已经写好,每个类的功能不多描述）

1-3为基础配置
4-7为详细代码
8为效果显示gif

maven依赖注入

<?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.2.1.RELEASE</version>
       <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.example</groupId>
   <artifactId>homework</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>homework</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.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web-services</artifactId>
       </dependency>
       <!--mybatis-->
       <dependency>
           <groupId>org.mybatis.spring.boot</groupId>
           <artifactId>mybatis-spring-boot-starter</artifactId>
           <version>1.3.1</version>
       </dependency>
       <!--整合mysql-->
       <dependency>
           <groupId>mysql</groupId>
           <artifactId>mysql-connector-java</artifactId>
           <scope>runtime</scope>
       </dependency>
       <!--json @responseBody/@requestBody-->
       <dependency>
           <groupId>com.alibaba</groupId>
           <artifactId>fastjson</artifactId>
           <version>1.2.54</version>
       </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>
       <dependency>
           <groupId>org.projectlombok</groupId>
           <artifactId>lombok</artifactId>
           <version>1.18.4</version>
           <scope>provided</scope>
       </dependency>
   </dependencies>
   <build>
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
           </plugin>
       </plugins>
   </build>
</project>

application.properties 代码（已解决mysql时序问题）

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/user_spring?serverTimezone=UTC&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=1234

SoringBoot 入口代码

@SpringBootApplication
public class HomeworkApplication {
    public static void main(String[] args) {
        SpringApplication.run(HomeworkApplication.class, args);
    }
}

4. 控制器部分

分为3个控制器
- 注册控制器 : regiestController
- 登录控制器 : loginController
- 主页控制器 : indexController

注册控制器 : regiestController 代码展示（注释已经写好）：

@Controller
public class RegiestController {
   //实现自动装配
   @Autowired
   private UserMapper userMapper;
   //点击注册按钮后，获取input中的两个name，作为参数回传到regiest_show()，进行检测
   @PostMapping("/regiest")
   public String regiest_show(
           @RequestParam("username") String username,
           @RequestParam("password") String password,
           @RequestParam("btn_regiest") String btn_regiest,
           Model model
   ) {
       //把前端的username和password写入user对象，方便后续操作
       User user = new User();
       user.setUsername(username);
       user.setPassword(password);
       if(username == null || username == "" || password == "" || password == null ){
           model.addAttribute("btn_regiest",btn_regiest);
           return "error";
       }else{
           //使用findByUsername（）方法，判断userCheck是否为空（在数据库中是否存在）
           User userCheck = userMapper.findByUsername(username);
           if (userCheck == null) {
               //不存在，执行插入操作，注册成功，返回ok_regiest页面
               userMapper.add(user);
               model.addAttribute("regiest_username", username);
               model.addAttribute("regiest_password", password);
               return "ok_regiest";
           } else {
               int CunZai = 1;
               //账号存在，返回error页面
               model.addAttribute("regiest_username", username);
               model.addAttribute("CunZai",CunZai);
               return "error";
           }
       }
   }
}

登录控制器 : loginController 代码展示

@Controller
public class LoginController {
    //实现自动装配
    @Autowired
    private UserMapper userMapper;
    
    //验证账号密码
    @PostMapping("/login")
    //获取三个参数，账号，密码，按钮是否被点击
    public String login(@Param("username") String username,
                        @Param("password") String password,
                        @Param("btn_login") String btn_login,
                        Model model) {
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        //使用findByUsername_login（）方法，对数据库进行检查，判断账号密码是否正确
        User check_login = userMapper.findByUsername_login(username,password);
        //正确，返回index页面，错误，返回error页面
        if(check_login != null){
            int ok = 1;
            model.addAttribute("ok",ok);
            model.addAttribute("success_login_username",username);
            return "index";
        }else{
            model.addAttribute("error_btn_login",btn_login);
            model.addAttribute("error_login_username",username);
            model.addAttribute("error_login_password",password);
            return "error";
        }
    }
    //返回登录页面
    @GetMapping("/login.html")
    public String return_login(){
        return "login";
    }
    //返回注册页面
    @GetMapping("/regiest.html")
    public String return_regiest(){
        return "regiest";
    }
}

主页控制器：indexController 代码展示

@Controller
public class IndexController {
    //主页面入口
    @GetMapping("/")
    public String regiset() {
        return "index";
    }
}

Mapper层：UserMapper

提供数据库操作接口

@Mapper
@Repository
public interface UserMapper {
    //注册成功，插入一条数据
    @Insert("insert into user(username,password) values (#{username},#{password})")
    void add(User user);
    //检验注册的username是否已经存在数据库中，通过User类创建findByUsername对象，传进username进行与数据库比较
    @Select("select * from user where username = #{username}")
    User findByUsername(@Param("username") String username);
    //登录用：检验账号密码是否正确
    @Select("select * from user where username = #{username} and password = #{password}")
    User findByUsername_login(@Param("username") String username,
                              @Param("password") String password);
}

model层

数据库一张表对应一个实体类，类属性同表字段一一对应

@Repository
public class User {
    private Long id;
    private String username;
    private String Password;
    public Long getId() {
        return id;
    }

    public void setId(Long 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) {
        Password = password;
    }
}

5个HTML页面 : 主页，注册页面，注册成功页面，登录页面，错误页面

登录页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <form align="center" action="/login" method="post">

        <div>这是登录页面</div>
        <div>这是登录页面</div>
        <div>这是登录页面</div>

        <div>账号:<input name="username" id="username" type="text"/></div>
        <div>密码:<input name="password" id="" type="password"></div>
        <input type="submit" value="登录" name="btn_login" id="btn_login">
        <a href="regiest.html">还没有账号？点击这里注册一个</a>
    </form>
</body>
</html>

注册页面

<!DOCTYPE html>
<html html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <form align="center" action="/regiest" method="post">

        <div>这是注册页面</div>
        <div>这是注册页面</div>
        <div>这是注册页面</div>
        <div>账号:<input name="username" id="username" type="text"/></div>
        <div>密码:<input name="password" id="" type="password"></div>
        <input type="submit" value="注册" name="btn_regiest" id="btn_regiest">
        <a href="login">已经有账号，去登录</a>
    </form>

</body>
</html>

注册成功页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
    <meta charset="UTF-8">
    <title>注册成功</title>
</head>
<body>
<form align="center">
    <div>你注册的用户名为：<span th:text="${regiest_username}"></span><br></div>
    <div>你注册的密码为：<span th:text="${regiest_password}"></span></div>
    <div><a href="login.html">去登录吧</a></div>
</form>
</body>
</html>

主页（使用了 Bootstrap 和 Thymeleaf 前端框架）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
    <meta charset="UTF-8">
    <title>欢迎来到我的主页</title>
</head>
<body>

<!--导航栏-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中意社区</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
<!--                未登录，游客模式-->
                <li th:if="${ok != 1}"><a href="login.html">游客模式，点击登录</a></li>
<!--                登录，客户模式-->
                <li th:if="${ok == 1}">
                    <a href="login.html">欢迎回来：<span th:text="${success_login_username}"></span>(点击此处可以切换账号)</a>
                </li>
                <li><a href="regiest.html">注册</a></li>
            </ul>
        </div>
    </div>
</nav>


<!--未登录时看到的页面，游客模式-->
<div th:if="${ok != 1}">
    <center><p>登录有惊喜！</p></center>
</div>


<!--//登录之后看到的页面-->
<div th:if="${ok == 1}">
    <center><p>惊喜吗！</p>
    <img src="picture/123.jpg"></center>
</div>

</body>
</html>

错误页面
- 在SpringBoot中，如果没有error.html页面，遇到错误将会自动跳转到springboot默认错误页面，设立了error.html后，将会跳转到此页面，相当于重写了error页面！
- 所有的错误都会集中在这里
  - 登录：账号密码不匹配
  - 注册：账号或密码为空，已经有人注册了这个账号

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
    <meta charset="UTF-8">
    <title>错误页面</title>
</head>
<body>
<!--注册错误，注册的用户名 或 密码不能为空-->
<div th:if="${btn_regiest != null && error_btn_login == null }">
    <p>注册的用户名 或 密码不能为空！</p>
    <p>自己返回注册页面吧，懒得写Controller跳转代码了</p>
</div>
<!--登录错误-->
<div th:if="${error_btn_login != null}">
    <p>账号和密码错了</p>
    <p>自己返回登录页面吧，懒得写Controller跳转代码了</p>
</div>
<!--注册错误，已经被注册过了-->
<div th:if="${CunZai == 1}">
    <p>你注册的ID：<span th:text="${regiest_username}"></span>已经被注册过了，请重新注册</p>
    <p>自己返回注册页面吧，懒得写Controller跳转代码了</p>
</div>
</body>
</html>