【專案demo】SpringBoot+Mybatis實作登錄注冊

前言隨筆：

hkd

學習SpringBoot+Mybatis實作的登錄注冊功能的Demo，實作這個Demo在網上也參考了資料和代碼，本文是本人在實作Demo后的個人總結，以便理清思路，

1.環境

jdk8 ： “1.8.0_281”

Maven： 3.6.3

Idea：2020.2

Mysql：5.6.40

Navicat：10.1.7

2.步驟

2.1 創建一個SpringBoot專案

選擇依賴如下：

Web下的Spring Web，
Template Engines下的Thymeleaf，
SQL下的JDBC API、Spring Data JDBC、MySQL Driver，

專案的結構：

2.2 pom依賴配置

<?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.haungkd</groupId>
    <artifactId>weblogindemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>weblogindemo</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-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <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>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
       
        <!-- mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

        <!--druid連接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.3</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.xmlunit</groupId>
            <artifactId>xmlunit-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.6</version>
        </dependency>
    </dependencies>

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

</project>

2.3 設定組態檔

yml檔案配置：

其中url中的資料庫記得對應，我的庫為login

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/login?serverTimezone=GMT%2B8&useSSL=true
    username: root   #資料庫
    password: 123456 #密碼

properties檔案配置：

#埠號
server.port=8088
#druid資料庫連接池
type=com.alibaba.druid.pool.DruidDataSource
#清除快取
spring.thymeleaf.cache=false
#配置mapper
mybatis.mapper-locations=classpath:mapper/*.xml

2.4 在pojo包下創建物體類UserLogin

package com.huangkd.weblogindemo.pojo;

import javax.persistence.Table;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data  // get/set 方法
@AllArgsConstructor//有參構造器
@NoArgsConstructor//無參構造器
@Table(name = "userlogin")
public class UserLogin {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }
}

2.5創建資料庫和資料表

我創建logiin庫，創建userlogin表，欄位為username和password

2.6 連接資料庫

在IDEA右邊選擇：

Database——> ——> Data Source——> Mysql

如果測驗不通：出現如下：

Server returns invalid timezone. Need to set ‘serverTimezone’ property.

是資料庫時區問題

解決方法：

打開開最右側 Advanced，找到 serverTimezone，在右側value處填寫 GMT，保存即可

2.7Mapper層（Dao）：資料庫持久層

在mapper包下建UserLoginMapper介面

package com.huangkd.weblogindemo.mapper;

import com.huangkd.weblogindemo.pojo.UserLogin;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;


@Mapper
@Repository
public interface UserLoginMapper {

    //定義增刪改查方法

    //查詢所有
    public List<UserLogin> queryAll();
    //添加資料

    public  int add(UserLogin userLogin);

    //根據用戶名查詢

    public UserLogin queryByUsername(String username);
}

在resources下建UserLoginMapper.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="com.huangkd.weblogindemo.mapper.UserLoginMapper">
    <select id="queryAll" resultType="com.huangkd.weblogindemo.pojo.UserLogin">
        select * from userlogin
    </select>
    <insert id="add" parameterType="com.huangkd.weblogindemo.pojo.UserLogin">
        insert  into userlogin values (#{username},#{password})
    </insert>
    <select id="queryByUsername" resultType="com.huangkd.weblogindemo.pojo.UserLogin">
        select * from userlogin where username=#{username}
    </select>
</mapper>

2.8 Service層：業務邏輯層

在services下新建介面UserLoginServicesI和類UserLoginServicesImpl

UserLoginServicesI介面：

import com.huangkd.weblogindemo.pojo.UserLogin;

import java.util.List;

public interface UserLoginServicesl {
    //查詢所有
    public List<UserLogin> queryAll();
    //添加資料
    public  int add(UserLogin userLogin);
    //根據用戶名查詢
    public UserLogin queryByUsername(String username);
}

UserLoginServicesImpl類：

package com.huangkd.weblogindemo.services;

import com.huangkd.weblogindemo.mapper.UserLoginMapper;
import com.huangkd.weblogindemo.pojo.UserLogin;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserLoginServicesImpl implements UserLoginServicesl {

    @Autowired
    //Service層呼叫dao層/mapper層  一般在service層中創建一個dao/mapper層物件
    //用物件呼叫對應的增刪改查方法
    UserLoginMapper userLoginMapper;
    @Override
    public List<UserLogin> queryAll() {
        return userLoginMapper.queryAll();
    }

    @Override
    public int add(UserLogin userLogin) {
        return userLoginMapper.add(userLogin);
    }

    @Override
    public UserLogin queryByUsername(String username) {
        return userLoginMapper.queryByUsername(username);
    }
}

2.9 Controller層：控制層

在controller包下創建MyController類：

package com.huangkd.weblogindemo.controller;

import com.huangkd.weblogindemo.pojo.UserLogin;
import com.huangkd.weblogindemo.services.UserLoginServicesImpl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MyController {
    //controller層呼叫service層
    //創建一個service層物件
    @Autowired
    UserLoginServicesImpl userLoginServices;

    //登錄
    @RequestMapping("/toLogin")
    public String toLogin() {
        return "login";
    }

    @RequestMapping("/loginSuccess")
    public String loginSuccess(Model model, UserLogin userLogin) {
        //查詢用戶名是否存在
        UserLogin userLogin1 = userLoginServices.queryByUsername(userLogin.getUsername());
        if (userLogin1 != null) { //如果用戶名存在
            if (userLogin1.getPassword().equals(userLogin.getPassword())) {
                System.out.println(userLogin1.toString());
                return "success";
            } else {
                model.addAttribute("data", "密碼不正確");
                return "login";
            }

        } else { //用戶名不存在，直接回傳到登錄頁面
            model.addAttribute("data", "該用戶不存在，請先注冊");
            return "login";
        }
    }


    //注冊
    @RequestMapping("/toRegister")
    public String toRegister() {
        return "register";
    }

    @RequestMapping("/toRegisterSuccess")
    public String toRegisterSuccess(Model model,UserLogin userLogin) {
        //添加一條記錄到資料庫中
        int add = userLoginServices.add(userLogin);
        System.out.println("插入資料成功");
        model.addAttribute("data","注冊成功，請登錄");
        return "login";

    }
}

2.10 前端頁面

login.html：登錄頁面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body background="back.jpg">
<div align="center">
    <br><br><h2>登錄界面</h2><br><br>
    <span th:text="${data}" style="text-color:red;font-size: 10px"></span>
    <form method="get" action="/loginSuccess">
        用戶名:<input type="text" name="username" placeholder="請輸入用戶名" required/><br><br>
        密碼：<input type="text" name="password" placeholder="請輸入密碼" required/><br><br>
        <input type="submit" value="登錄">
    </form>
    <br>
    <form method="get" action="/toRegister">
        <input type="submit" value="注冊">
    </form>
</div>
</body>
</html>

regsister.html：注冊頁面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body background="back.jpg" >
<div align="center">
    <br><br><h1>注冊界面</h1><br><br>
    <form method="get" action="/toRegisterSuccess">
        用戶名:<input type="text" name="username" placeholder="請輸入用戶名" required/><br><br>
        密碼：<input type="text" name="password" placeholder="請輸入密碼" required/><br><br>
        確認密碼：<input type="text" name="password2" placeholder="請輸入密碼" required/><br><br>
        <input type="submit" value="注冊">
    </form>
</div>
</body>
</html>

success.html：成功頁面

成功頁面我復制本人csdn首頁源代碼

3.測驗

登錄：

注冊：

成功：