用户登录注册页面-CSDN博客

本文链接：https://blog.csdn.net/weixin_54549357/article/details/152282885

新建模块

在这里插入图片描述

新建包和类

在这里插入图片描述

相关代码如下

UserController

package com.itheima.controller;

import com.itheima.entity.User;
import com.itheima.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class UserController {

    @Autowired
    private UserRepository userRepository;

    // 默认管理员
    private final String adminUser = "CSS"; // ********************输入你自己的账户信息
    private final String adminPass = "111";

    // 登录页面
    @GetMapping("/")
    public String showLoginPage() {
        return "login";
    }

    // 登录逻辑
    @PostMapping("/login")
    public String login(@RequestParam String username,
                        @RequestParam String password,
                        Model model) {

        // 管理员登录
        if ("CSS".equals(username) && "111".equals(password)) {
            model.addAttribute("username", username);  // ✅ 添加用户名到模型
            return "success";
        }

        // 普通用户登录
        User user = userRepository.findByUsername(username);
        if (user != null && user.getPassword().equals(password)) {
            model.addAttribute("username", user.getUsername()); // ✅ 添加用户名
            return "success";
        }

        model.addAttribute("error", "用户名或密码错误！");
        return "login";
    }


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

    // 注册逻辑
    @PostMapping("/register")
    public String register(@RequestParam String username,
                           @RequestParam String password,
                           Model model) {
        if (username.equals(adminUser)) {
            model.addAttribute("error", "管理员账号不可注册！");
            return "register";
        }
        if (userRepository.findByUsername(username) != null) {
            model.addAttribute("error", "该用户名已存在！");
            return "register";
        }
        User newUser = new User();
        newUser.setUsername(username);
        newUser.setPassword(password);
        userRepository.save(newUser);
        model.addAttribute("msg", "注册成功，请返回登录！");
        return "register";
    }
}

User

package com.itheima.entity;

import jakarta.persistence.*;

/**
 * 用户实体类，对应数据库中的 users 表
 */
@Entity
@Table(name = "users")
public class User {

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

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

    @Column(nullable = false)
    private String password;

    // 手动添加 getter 和 setter 方法
    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;
    }
}

UserRepository

```java
package com.itheima.repository;

import com.itheima.entity.User;           // 导入User实体类
import org.springframework.data.jpa.repository.JpaRepository; // 导入Spring Data JPA的Repository接口

/**
 * 用户仓库接口，用于操作数据库中的 users 表
 * JpaRepository 提供了常用的增删改查方法
 * 泛型 <User, Long> 表示操作的实体类是 User，主键类型是 Long
 */
public interface UserRepository extends JpaRepository<User, Long> {

    /**
     * 根据用户名查找用户
     * Spring Data JPA 会根据方法名自动生成对应的查询语句
     *
     * @param username 用户名
     * @return User 对象，如果找不到返回 null
     */
    User findByUsername(String username);
}

前端页面

login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #6a11cb, #2575fc); /* 渐变背景 */
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        .login-box {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            text-align: center;
            width: 320px;
        }

        h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 28px;
        }

        input {
            width: 90%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 16px;
        }

        button {
            width: 95%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 6px;
            background-color: #2575fc;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
        }

        button:hover {
            background-color: #6a11cb;
        }

        .register-btn {
            background-color: #fff;
            color: #2575fc;
            border: 1px solid #2575fc;
        }

        .register-btn:hover {
            background-color: #2575fc;
            color: white;
        }

        .error {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="login-box">
    <h2>用户登录</h2>
    <form th:action="@{/login}" method="post">
        <input type="text" name="username" placeholder="用户名" required/><br/>
        <input type="password" name="password" placeholder="密码" required/><br/>
        <button type="submit">登录</button>
    </form>
    <form th:action="@{/register}" method="get">
        <button type="submit" class="register-btn">注册</button>
    </form>
    <p th:text="${error}" class="error"></p>
</div>
</body>
</html>

register.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        .register-box {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            text-align: center;
            width: 320px;
        }

        h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 28px;
        }

        input {
            width: 90%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 16px;
        }

        button {
            width: 95%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 6px;
            background-color: #ff6a88;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
        }

        button:hover {
            background-color: #ff99ac;
        }

        .back-btn {
            background-color: #fff;
            color: #ff6a88;
            border: 1px solid #ff6a88;
        }

        .back-btn:hover {
            background-color: #ff6a88;
            color: white;
        }

        .error {
            color: red;
            font-size: 14px;
        }

        .msg {
            color: green;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="register-box">
    <h2>用户注册</h2>
    <form th:action="@{/register}" method="post">
        <input type="text" name="username" placeholder="用户名" required/><br/>
        <input type="password" name="password" placeholder="密码" required/><br/>
        <button type="submit">注册</button>
    </form>
    <form th:action="@{ / }" method="get">
        <button type="submit" class="back-btn">返回登录</button>
    </form>
    <p th:text="${error}" class="error"></p>
    <p th:text="${msg}" class="msg"></p>
</div>
</body>
</html>

success.html

<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    <title>登录成功</title>-->
<!--    <style>-->
<!--        body { text-align: center; font-family: Arial, sans-serif; margin-top: 100px; }-->
<!--        h1 { font-size: 32px; color: green; }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<h1>🎉 恭喜你！登录成功 🎉</h1>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录成功</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }
        .success-box {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            text-align: center;
        }
        h2 {
            color: green;
            font-size: 28px;
        }
    </style>
</head>
<body>
<div class="success-box">
    <h2>🎉🎉恭喜你，<span th:text="${username}"></span>，登录成功！🎉🎉</h2>
</div>
</body>
</html>