Just Code It

一、搭建SpringBoot專案

1.1、file ——> new ——> project——> Spring Initializr——> next——> next——> next——> finish

注意選擇包依賴關系
在這里插入圖片描述

二、springboot整合mybatis.mysql

2.1、整體結構

在這里插入圖片描述

2.2、設定所需要的依賴

即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.4.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>springboot-web04</groupId>
    <artifactId>demo</artifactId>
    <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-data-jdbc</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>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </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>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.3</version>
            </dependency>

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

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

            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>1.2.1</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、設定application.yml檔案與pplication.properties檔案

在resources目錄下新建yml檔案，用于存放資料庫連接需要的一些資料

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

在application.properties檔案中加入

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

2.4、在pojo下的新建類UserLogin

package springbootweb04.demo.pojo;

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

@Data
@AllArgsConstructor
@NoArgsConstructor

public class UserLogin {
    private String username;
    private String password;

    public String getUsername() {
        return username;
    }
}

2.5、新建資料庫，名為mybatis，創建用戶表，名為userLogin，創建username、password欄位

2.5.1、資料庫名可以隨意，不過要與application.yml檔案中的一致

在這里插入圖片描述

2.5.2、IDEA中連接資料庫

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

在這里插入圖片描述

2.6、mapper層

新建UserLoginMapper介面

package springbootweb04.demo.mapper;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import springbootweb04.demo.pojo.UserLogin;

import java.util.List;

@Mapper
@Repository
public interface UserLoginMapper {
    //查詢
    public List<UserLogin> queryAll();
    //添加資料
    public int add(UserLogin userLogin);
    //根據用戶名查詢資料
    public UserLogin queryByName(String username);
}

2.7、resources目錄下的mapper目錄

在resources目錄下新建mapper目錄，并在這個目錄下新建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="springbootweb04.demo.mapper.UserLoginMapper">
    <select id="queryAll" resultType="springbootweb04.demo.pojo.UserLogin">
        select * from userLogin
    </select>

    <insert id="add" parameterType="springbootweb04.demo.pojo.UserLogin">
        insert into userLogin values (#{username},#{password})
    </insert>

    <select id="queryByName" resultType="springbootweb04.demo.pojo.UserLogin">
        select * from userLogin where username = #{username}
    </select>

</mapper>

2.8、測驗

在test.Java.springbootweb04.demo類中，測驗是否能聯通資料庫，沒有報錯說明成功，

package springbootweb04.demo;

import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;
import springbootweb04.demo.mapper.UserLoginMapper;
import springbootweb04.demo.pojo.UserLogin;
import org.springframework.beans.factory.annotation.Autowired;


import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

@SpringBootTest
class DemoApplicationTests {
    @Autowired
    DataSource dataSource;
    @Test
    void contextLoads() throws SQLException {
        System.out.println(dataSource.getClass());
        Connection connection = dataSource.getConnection();
        System.out.println(connection);

        //template模板，拿來即用
        connection.close();
    }
    @Autowired
    UserLoginMapper userLoginMapper;
    @Test
    public void toTest(){
        List<UserLogin> userLogins = userLoginMapper.queryAll();
        userLogins.forEach(e-> System.out.println(e));
    }
}

2.9、services層

在services下新建介面UserLoginServicesI和類UserLoginServicesImpl

UserLoginServicesI介面：

package springbootweb04.demo.services;

import springbootweb04.demo.pojo.UserLogin;

import java.util.List;

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

UserLoginServicesImpl類

package springbootweb04.demo.services;

import springbootweb04.demo.mapper.UserLoginMapper;
import springbootweb04.demo.pojo.UserLogin;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserLoginServicesImpl implements UserLoginServicesI {

    @Autowired
    UserLoginMapper userLoginMapper;
    @Override
    public List<UserLogin> queryAll() {
        return userLoginMapper.queryAll();
    }

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

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

2.A、conteoller層

撰寫MyController類

package springbootweb04.demo.controller;

import springbootweb04.demo.pojo.UserLogin;
import springbootweb04.demo.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 {
    @Autowired
    UserLoginServicesImpl userLoginServicesImpl;

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

    @RequestMapping("/LoginSuccess")
    public String LoginSuccess(Model model, UserLogin userLogin){
        //先查詢看該用戶名是否存在
        UserLogin userLogin1 = userLoginServicesImpl.queryByName(userLogin.getUsername());
        if(userLogin1 != null){ //  如果查詢的用戶不為空
            System.out.println(userLogin1.toString());
            return "success";
        }
        else{
            //回傳到登錄頁面
            model.addAttribute("data","該用戶不存在，請先注冊");
            return "login";
        }
    }
    //登錄界面
    @RequestMapping("/toRegister")
    public String toRegister(){
        return "register";
    }
    @RequestMapping("/RegisterSuccess")
    public String toRegisterSuccess(Model model,UserLogin userLogin){
        //將賬號密碼加入到資料庫中
        int add = userLoginServicesImpl.add(userLogin);
        System.out.println("資料插入成功！");
        model.addAttribute("data","注冊成功，請登錄！");
        return "login";
    }
}

三、撰寫前端頁面

將以下三個頁面放在templates下面

login.html：登錄頁面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background: aqua">
<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>

register.html:注冊頁面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background: aqua">
<div align="center">
    <br><br>注冊界面<br><br>
    <form method="get" action="/RegisterSuccess">
        用戶名:<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：成功界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四、運行測驗

:localhost:8080/toLogin

框架實作動態登錄與注冊功能

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/260573.html

標籤：java

上一篇：3.13 CountDownLatch使用及原理

下一篇：JavaWeb之Servlet

IDEA下創建SpringBoot+MyBatis+MySql專案實作動態登錄與注冊功能

Just Code It

一、搭建SpringBoot專案

二、springboot整合mybatis.mysql

2.1、整體結構

2.2、設定所需要的依賴

2.3、設定application.yml檔案與pplication.properties檔案

2.4、在pojo下的新建類UserLogin

2.5、新建資料庫，名為mybatis，創建用戶表，名為userLogin，創建username、password欄位

2.5.1、資料庫名可以隨意，不過要與application.yml檔案中的一致

2.5.2、IDEA中連接資料庫

2.6、mapper層

2.7、resources目錄下的mapper目錄

2.8、測驗

2.9、services層

2.A、conteoller層

三、撰寫前端頁面

四、運行測驗