当前位置： 首页 > article >正文

登录+注册的前后端以及sql

article 2025/2/25 5:17:17

一、登录

1.sql

2.给html的盒子绑上id 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/login.js" defer></script>
</head>

<body>
    <div class="container">
        <h2>登录</h2>
        <input type="text" id="loginUserid" placeholder="请输入账号">
        <input type="password" id="loginPassword" placeholder="请输入密码">
        <input type="button" id="loginButton" value="登录">
        <span>没有账号？<a href="#" id="showRegister">去注册</a></span>
        <div id="loginMessage"></div>
    </div>
</body>

</html>

3.js 

$(document).ready(function () {
    $('#loginButton').click(function () {
        var userid = $('#loginUserid').val();
        var password = $('#loginPassword').val();

        if (userid === '' || password === '') {
            $('#loginMessage').text('账号和密码不能为空');
            return;
        }

        console.log("Sending login request: userid=" + userid + ", password=" + password); 
        $.ajax({
            url: 'login', 
            type: 'POST',
            data: {
                userid: userid,
                password: password
            },
            success: function (response) {
                console.log("Server response: " + response); 
                $('#loginMessage').text(response);
                if (response.trim() === '登录成功！') {
                    window.location.href = 'hbu.html'; 
                }
            },
            error: function (xhr, status, error) {
                console.log("AJAX error: " + error); 
                $('#loginMessage').text('网络错误，请稍后重试');
            }
        });
    });
});

// 去注册按钮点击事件
$('#showRegister').click(function () {
    window.location.href = 'zhuce.html'; // 跳转到注册页面
});

4.servlet

package servelt;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

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

        String userId = request.getParameter("userid");
        String password = request.getParameter("password");

        System.out.println("Received login request: userid=" + userId + ", password=" + password); 
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/plain; charset=UTF-8"); 
        PrintWriter out = response.getWriter();

        // 数据库连接信息
        String jdbcUrl = "jdbc:mysql://localhost:3306/qcby";
        String dbUser = "root";
        String dbPassword = "123456";

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;

        try {
            // 加载数据库驱动
            Class.forName("com.mysql.jdbc.Driver");

            // 建立连接
            conn = DriverManager.getConnection(jdbcUrl, dbUser, dbPassword);

            // 检查用户是否存在且密码正确
            String sql = "SELECT userid FROM loginid WHERE userid = ? AND password = ?";
            ps = conn.prepareStatement(sql);
            ps.setString(1, userId);
            ps.setString(2, password);
            rs = ps.executeQuery();

            if (rs.next()) {
                out.println("登录成功！");
                System.out.println("Login successful for user: " + userId); // 调试信息
            } else {
                out.println("账号或密码错误！");
                System.out.println("Login failed for user: " + userId); // 调试信息
            }
        } catch (Exception e) {
            e.printStackTrace();
            out.println("数据库错误！");
            System.out.println("Database error: " + e.getMessage()); // 调试信息
        } finally {
            // 关闭资源
            try { if (rs != null) rs.close(); } catch (Exception e) {}
            try { if (ps != null) ps.close(); } catch (Exception e) {}
            try { if (conn != null) conn.close(); } catch (Exception e) {}
        }
    }
}

二、注册 

1.html(在login.html基础上改的)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.js"></script>
    <script src="js/register.js" defer></script>
</head>

<body>
    <div class="container">
        <h2>注册</h2>
        <input type="text" id="registerUserid" placeholder="请输入账号">
        <input type="password" id="registerPassword" placeholder="请输入密码">
        <input type="button" id="registerButton" value="注册">
        <div id="registerMessage"></div>
    </div>
</body>

</html>

2.js
 

$(document).ready(function () {
    $('#registerButton').click(function () {
        var userid = $('#registerUserid').val();
        var password = $('#registerPassword').val();

        if (userid === '' || password === '') {
            $('#registerMessage').text('账号和密码不能为空');
            return;
        }

        console.log("Sending register request: userid=" + userid + ", password=" + password); // 调试信息

        $.ajax({
            url: 'register', // 注册接口的 URL
            type: 'POST',
            data: {
                userid: userid,
                password: password
            },
            success: function (response) {
                console.log("Server response: " + response); // 调试信息
                $('#registerMessage').text(response);
                if (response.trim() === '注册成功！') {
                    // 注册成功跳转逻辑，跳转到登录页面
                    window.location.href = 'login.html'; 
                }
            },
            error: function (xhr, status, error) {
                console.log("AJAX error: " + error); // 调试信息
                $('#registerMessage').text('网络错误，请稍后重试');
            }
        });
    });
});

3.servlet

package servelt;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String userId = request.getParameter("userid");
        String password = request.getParameter("password");

        System.out.println("Received register request: userid=" + userId + ", password=" + password);
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/plain; charset=UTF-8");
        PrintWriter out = response.getWriter();
        String jdbcUrl = "jdbc:mysql://localhost:3306/qcby";
        String dbUser = "root";
        String dbPassword = "123456";

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;

        try {
            // 加载数据库驱动
            Class.forName("com.mysql.jdbc.Driver");
            // 建立连接
            conn = DriverManager.getConnection(jdbcUrl, dbUser, dbPassword);
            // 检查用户是否已存在
            String checkSql = "SELECT userid FROM loginid WHERE userid = ?";
            ps = conn.prepareStatement(checkSql);
            ps.setString(1, userId);
            rs = ps.executeQuery();
            if (rs.next()) {
                out.println("该账号已存在！");
                System.out.println("Registration failed: User already exists - " + userId);
            } else {
                // 用户不存在，插入新记录
                String insertSql = "INSERT INTO loginid (userid, password) VALUES (?, ?)";
                ps = conn.prepareStatement(insertSql);
                ps.setString(1, userId);
                ps.setString(2, password);
                int rowsInserted = ps.executeUpdate();
                if (rowsInserted > 0) {
                    out.println("注册成功！");
                    System.out.println("Registration successful for user: " + userId);
                } else {
                    out.println("注册失败，请稍后重试！");
                    System.out.println("Registration failed for user: " + userId);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            out.println("数据库错误！");
            System.out.println("Database error: " + e.getMessage());
        } finally {
            // 关闭资源
            try { if (rs != null) rs.close(); } catch (Exception e) {}
            try { if (ps != null) ps.close(); } catch (Exception e) {}
            try { if (conn != null) conn.close(); } catch (Exception e) {}
        }
    }
}

三、视频展示 

登录+注册

四、反思 

servlet,和js 我是仿照以前的代码写了，出来很多错误，一开始数据库一直连接不上去，我就采用了了最古老的方法，在我的servlet里面又复制了一遍数据库连接的代码，终于连接上，但是一直只显示？？？，我发现是我没有设置字体，我又全部设置成UTF-8，但是后面一直显示登录成功并不跳转界面，最后发现是因为空格问题，导致字符串不匹配 ，用trim()消除字符串，总之，404,500遇见不少，也借助不少chat。好在终于写完了

login写完，regiser就好写不少。可以去csdn上借鉴怎么去找数据库中有没有已经存在的id。


http://www.kler.cn/a/559899.html

相关文章：

  • 【面试】Redis 常见面试题
  • Qt QTreeWidget 总结
  • 企业金融数字场景平台：架构设计、实践与未来趋势
  • Linux-Ansible模块完结
  • Linux 内核中关于 CPU 编号和拓扑管理
  • at32f103a+rtt+AT组件+esp01s 模块使用
  • 网络练级宝典-＞ TCP协议
  • 掌握SQLAlchemy：Python数据库集成的艺术
  • 【R语言】读取CSV数据时，显示[1] PK...＜0 行＞ (或0-长度的row.names)
  • 一：将windows上的Python项目部署到Linux上，并使用公网IP访问
  • 【多模态处理篇八】【DeepSeek增强现实：AR导航实时推理优化】
  • 基于STM32的智能电梯安全监测系统
  • Mybatis常用动态 SQL 相关标签
  • 基于图扑 HT 可视化实现智慧地下采矿可视化
  • 如何在Jenkins上查看Junit报告
  • 91.在 Vue 3 中使用 OpenLayers 非 4326、3857 的投影示例
  • Unity 3D模型边缘锯齿严重
  • 性能巅峰对决：Rust vs C++ —— 速度、安全与权衡的艺术
  • Python----PyQt开发（PyQt高级：手搓一个音乐播放器）
  • 《论多源数据集成及应用》审题技巧 - 系统架构设计师