菜鸟-创作你的创作

利用jsp+mysql实现好看的登录与注册页面(动态背景)

lichongyang

下面给你一套**「JSP + MySQL 实现【好看】的登录 / 注册页面（含动态背景）」完整实战方案**，这是课程设计 / 实训 / 展示级别的做法，不是那种“丑 JSP”。

特点👇
✅ JSP + Servlet + MySQL
✅ JDBC 原生实现（老师最认可）
✅ 动态渐变背景 / 粒子动画背景（二选一）
✅ 登录 / 注册完整闭环
✅ 页面美观，可直接截图当成果

一、最终效果说明（你做出来会是这样）

二、项目结构（标准 + 清晰）

LoginSystem/
│
├── src/
│   ├── entity/
│   │   └── User.java
│   ├── util/
│   │   └── DBUtil.java
│   ├── servlet/
│   │   ├── LoginServlet.java
│   │   └── RegisterServlet.java
│
├── WebContent/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── particles.min.js
│   ├── login.jsp
│   ├── register.jsp
│   └── success.jsp
│
└── web.xml

三、MySQL 数据库设计（必考点）

1️⃣ 建库建表

CREATE DATABASE jsp_login CHARACTER SET utf8;

USE jsp_login;

CREATE TABLE user (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE,
    password VARCHAR(50)
);

四、数据库工具类（DBUtil.java）

package util;

import java.sql.*;

public class DBUtil {
    private static final String URL =
        "jdbc:mysql://localhost:3306/jsp_login?useUnicode=true&characterEncoding=utf8";
    private static final String USER = "root";
    private static final String PASSWORD = "123456";

    static {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(URL, USER, PASSWORD);
    }
}

⚠️ 注意：

五、注册页面（register.jsp）【动态背景】

1️⃣ HTML + CSS + 动态渐变背景

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="bg"></div>

<div class="login-box">
    <h2>用户注册</h2>
    <form action="RegisterServlet" method="post">
        <input type="text" name="username" placeholder="用户名" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit">注册</button>
    </form>
    <p><a href="login.jsp">已有账号？去登录</a></p>
</div>

</body>
</html>

六、CSS 美化 + 动态背景（style.css）

* {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI";
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg,
        #6a11cb, #2575fc, #ff512f, #dd2476);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    padding: 40px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    color: #fff;
    text-align: center;
}

.login-box h2 {
    margin-bottom: 20px;
}

.login-box input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
}

.login-box button {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

📌 这套 CSS 非常适合课程展示，老师一看就加分

七、注册 Servlet（RegisterServlet）

@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        try (Connection conn = DBUtil.getConnection()) {
            String sql = "INSERT INTO user(username,password) VALUES (?,?)";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, username);
            ps.setString(2, password);
            ps.executeUpdate();

            response.sendRedirect("login.jsp");
        } catch (Exception e) {
            response.getWriter().write("注册失败，用户名已存在");
        }
    }
}

八、登录页面（login.jsp）

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="bg"></div>

<div class="login-box">
    <h2>用户登录</h2>
    <form action="LoginServlet" method="post">
        <input type="text" name="username" placeholder="用户名" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit">登录</button>
    </form>
    <p><a href="register.jsp">没有账号？去注册</a></p>
</div>

</body>
</html>

九、登录 Servlet（LoginServlet）

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        try (Connection conn = DBUtil.getConnection()) {
            String sql = "SELECT * FROM user WHERE username=? AND password=?";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, username);
            ps.setString(2, password);

            ResultSet rs = ps.executeQuery();

            if (rs.next()) {
                request.getSession().setAttribute("user", username);
                response.sendRedirect("success.jsp");
            } else {
                response.getWriter().write("用户名或密码错误");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

十、登录成功页面（success.jsp）

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<body>
<h2>登录成功！</h2>
欢迎你：${sessionScope.user}
</body>
</html>

十一、全过程总结（考试必背）

  1. JSP 提供页面展示
  2. CSS 实现动态背景与美化
  3. 表单提交给 Servlet
  4. Servlet 使用 JDBC 操作 MySQL
  5. 登录成功 → Session 保存用户信息
  6. 页面跳转

十二、还能继续升级（直接拉满）

🔥 粒子背景（particles.js）
🔥 密码加密（MD5 / BCrypt）
🔥 验证码
🔥 登录拦截器 Filter
🔥 前后端分离（Vue + Spring Boot）

退出移动版