基于SpringBoot实现简单的登入和注册功能

Spring Boot 是一个开源的、基于 Spring Framework 的轻量级 Web 应用开发框架。相比于传统的 Spring 框架，Spring Boot 提供了更方便快捷的配置和构建方式，使得开发者可以更集中地关注业务逻辑而非配置文件。这篇文章简单的实现了登入和注册的功能。本篇文章会与数据库进行连接从而实现用户登入匹配和注册功能。项目结构如下：pom.xml配置<project

文章共2,357字 · 阅读需要大约8分钟

一键AI生成摘要，助你高效阅读

问答

m0_74222549

1382人浏览 · 2023-04-14 11:47:31

m0_74222549 · 2023-04-14 11:47:31 发布

Spring Boot 是一个开源的、基于 Spring Framework 的轻量级 Web 应用开发框架。相比于传统的 Spring 框架，Spring Boot 提供了更方便快捷的配置和构建方式，使得开发者可以更集中地关注业务逻辑而非配置文件。

这篇文章简单的实现了登入和注册的功能。

本篇文章会与数据库进行连接从而实现用户登入匹配和注册功能。

项目结构如下：

pom.xml配置


<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 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>org.lft</groupId>
	<artifactId>logintest</artifactId>
	<version>1.0-SNAPSHOT</version>


	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.4.5</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>


	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter</artifactId>
		</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-web</artifactId>
			<scope>compile</scope>
		</dependency>

		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.4.2</version>
		</dependency>

		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.20</version>
		</dependency>

		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.76</version>
		</dependency>

		<dependency>
			<groupId>commons-lang</groupId>
			<artifactId>commons-lang</artifactId>
			<version>2.6</version>
		</dependency>

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

		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid-spring-boot-starter</artifactId>
			<version>1.1.23</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.data</groupId>
			<artifactId>spring-data-jpa</artifactId>
			<version>2.5.4</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>


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

	</dependencies>

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




	<name>Archetype - reggie_take_out</name>
	<url>https://maven.apache.org</url>
</project>

先实现后端的代码：

LoginController的实现（登入和退出）

package com.lft.demo.controller;

import com.lft.demo.service.UserService;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@Controller
public class LoginController {
    @Autowired
    private UserService userService;

    @GetMapping("/")
    public String loginPage() {
        return "login.html";
    }

    @PostMapping("/login")
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        HttpServletRequest request) {
        if(userService.login(username,password)){
            //System.out.println(username);
            request.getSession().setAttribute("username",username);
            //登入成功则跳转到home.html
            return "redirect:/home.html";
        } else {
            //登入不成功则跳转到login.html
            return "redirect:/login.html";
        }
    }

    @GetMapping("/home")
    public String home(HttpSession session) {
        Object attribute = session.getAttribute("username");
        System.out.println(attribute);
        if (attribute != null) {
            session.setAttribute("username1",attribute);
            return "home.html";
        }
        return "redirect:/login.html";
    }

    @GetMapping("/logout")
    public String logout(HttpSession session) {
        session.removeAttribute("username");
        return "redirect:/login.html";
    }
}

UserController的实现（用户注册）

package com.lft.demo.controller;


import com.lft.demo.model.User;
import com.lft.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.Map;
import java.util.Optional;

@Controller
@RequestMapping(value = "/user")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    @GetMapping("/register")
    public String register() {
        return "reqister"; // 注册页面
    }

    @PostMapping("/register")
    @ResponseBody
    public Map<String, Object> doRegister(@RequestBody User user) {


        String username = user.getUsername();
        String password = user.getPassword();


        Optional<User> optionalUser = Optional.ofNullable(userRepository.findByUsername(username));


        if (optionalUser.isPresent()) {
            return Map.of("result", "failed", "message", "用户名已存在");
        } else {
            User newUser = new User(username, password);
            userRepository.save(newUser);

            return Map.of("result", "success", "nextPage", "/login.html");
        }
    }
}

User类

package com.lft.demo.model;

import javax.persistence.*;

@Entity
@Table(name = "user")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "username", unique = true, nullable = false)
    private String username;

    @Column(name = "password", nullable = false)
    private String password;


    private String gender;

    private String phone;

    private int age;


    public User() {
    }


    public User(String username, String password) {
        this.username = username;
        this.password = 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) {
        this.password = password;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

接口UserRepository

package com.lft.demo.repository;



import com.lft.demo.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
}

UserService的实现

package com.lft.demo.service;




import com.lft.demo.model.User;
import com.lft.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public boolean login(String username, String password) {
        User user = userRepository.findByUsername(username);
        if (user != null && user.getPassword().equals(password)) {
            return true;
        }
        return false;
    }
}

LOginApplication 整个应用程序的启动入口

package com.lft.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class LOginApplication {

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

}

后端的代码就写完了，下面是前端的代码：

登入成功则进入home.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Home Page</title>
  <link rel="stylesheet" href="/static/css/styles.css"/>
</head>
<body>
<div class="container">
  <h1 class="title">Welcome</h1>
  <p class="description">Hello, <span th:text="${session.getAttribute('username')}"></span></p>
<span text="${session.getAttribute('username')}"></span>
  <a class="btn" href="/logout">Logout</a>
</div>
<div type="hidden" name="user" th:text="${session.username}">
</div>
<script src="/js/script.js"></script>
</body>
</html>

登入页面 login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link rel="stylesheet" href="/static/css/styles.css"/>
</head>
<body>
<div class="container">
    <h1 class="title">Login</h1>
    <form class="login-form" method="post" action="/login">
        <div class="input-group">
            <label for="username">Username:</label>
            <input type="text" name="username" id="username" placeholder="Enter your username" required>
        </div>
        <div class="input-group">
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" placeholder="Enter your password" required>
        </div>
        <button type="submit">Login</button>
    </form>


    <button type="button"><a href="register.html">注册</a></button>
    
</div>
<script src="/js/script.js"></script>
</body>
</html>

注册页面 register.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link rel="stylesheet" href="/static/css/styles.css"/>
</head>
<body>
<div class="container">
    <h1 class="title">Login</h1>
    <form class="login-form" method="post" action="/login">
        <div class="input-group">
            <label for="username">Username:</label>
            <input type="text" name="username" id="username" placeholder="Enter your username" required>
        </div>
        <div class="input-group">
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" placeholder="Enter your password" required>
        </div>
        <button type="submit">Login</button>
    </form>


    <button type="button"><a href="register.html">注册</a></button>
    
</div>
<script src="/js/script.js"></script>
</body>
</html>

前端的代码就写完了。

application.properties的配置也就是数据库的连接

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/lftdemo?useSSL=false&serverTimezone=UTC
spring.datasource.username= "数据库用户名"
spring.datasource.password= "数据库密码"

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

logging.file.name=myapp.log

#spring.mvc.view.prefix=/templates/
#spring.mvc.view.suffix=.html

数据库的创建

/*
 Navicat Premium Data Transfer

 Source Server         : root-link
 Source Server Type    : MySQL
 Source Server Version : 80031 (8.0.31)
 Source Host           : localhost:3306
 Source Schema         : lftdemo

 Target Server Type    : MySQL
 Target Server Version : 80031 (8.0.31)
 File Encoding         : 65001

 Date: 14/04/2023 11:46:34
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL,
  `password` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL,
  `age` int NOT NULL,
  `gender` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  `phone` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, 'lisi', '124', 0, NULL, NULL);
INSERT INTO `user` VALUES (2, 'zhangsan', '123', 0, NULL, NULL);
INSERT INTO `user` VALUES (3, 'wangwu', '123', 0, NULL, NULL);
INSERT INTO `user` VALUES (4, 'zhangsanwwwww', '111', 0, NULL, NULL);
INSERT INTO `user` VALUES (5, 'zhangsan1', '111', 0, NULL, NULL);

SET FOREIGN_KEY_CHECKS = 1;

谢谢观看