一、登录
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', // 注册接口的 URLtype: '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。
