一个简单的登陆验证页面

电玩女神 2024-03-24 16:12 96阅读 0赞

jsp代码：

<%--
      Created by IntelliJ IDEA.
      User: CaptainDong
      Date: 2023/4/7
      Time: 21:47
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <style type="text/css">
            body {
                background-color: #f1f1f1;
            }
            .container {
                margin-top: 50px;
                margin-left: auto;
                margin-right: auto;
                width: 300px;
                height: 200px;
                background-color: #fff;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                padding: 30px;
            }
            input[type=text], input[type=password] {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }
            button {
                background-color: #4CAF50;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                width: 100%;
            }
            button:hover {
                background-color: #45a049;
            }
            .error {
                color: red;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <h2>登录</h2>
        <form action="index_yanzheng.jsp" method="post" id="login-form">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
            <button type="submit">登录</button>
            <span class="error" id="error-msg"></span>
        </form>
    </div>
    </body>
    </html>

<%--
      Created by IntelliJ IDEA.
      User: CaptainDong
      Date: 2023/4/7
      Time: 21:49
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page import="java.sql.*" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
      <title>显示所有学生信息的页面</title>
    </head>
    <body>
    <%
      String username = request.getParameter("username");
      String password = request.getParameter("password");
    
      Class.forName("com.mysql.cj.jdbc.Driver");
    
      request.setCharacterEncoding("UTF-8");
    
      Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/user_db", "root", "123");
      PreparedStatement preparedStatement = conn.prepareStatement("select * from user_account where username=? and password=?");
    
      preparedStatement.setString(1, username);
      preparedStatement.setString(2, password);
    
      ResultSet rs = preparedStatement.executeQuery();
    
      if(rs.next()){
        // 登录成功，跳转到指定的 JSP 页面
        response.sendRedirect("success.jsp");
      }
      else {
        // 登录失败，返回登录页并提示
        out.print("<script>alert('登录失败，请检查用户名和密码是否正确！');window.location.href='index_login.jsp';</script>");
      }
      rs.close();
      preparedStatement.close();
      conn.close();
    %>
    </body>
    </html>

<%--
      Created by IntelliJ IDEA.
      User: CaptainDong
      Date: 2023/4/7
      Time: 21:51
      To change this template use File | Settings | File Templates.
    --%>
    
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
      <title>
        学生信息注册界面
      </title>
    </head>
    <body>
    <h2 align="center">
      学生信息注册界面
    </h2>
    <form action="in_request.jsp" target="_blank" method="post">
      <table align="center">
        <tr>
          <td>
            姓名：<input type="text" name="user_name">
          </td>
        </tr>
        <tr>
          <td>
            性别：<input type="text" name="user_sex">
          </td>
        </tr>
        <tr>
          <td>班级：</td>
          <td>>
            <select name="user_class">
              <option selected>1班</option>
              <option>2班</option>
              <option>3班</option>
              <option>4班</option>
              <option>5班</option>
              <option>6班</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            联系电话：<input type="text" name="user_phone">
          </td>
        </tr>
    
        <tr>
          <td>
            <input type="submit" name="user_submit" value="提交">
            <input type="reset" name="user_reset" value="重置">
          </td>
        </tr>
      </table>
    </form>
    </body>
    </html>

Sql代码：

CREATE DATABASE IF NOT EXISTS user_db CHARACTER SET utf8;
    
    USE user_db;
    
    CREATE TABLE IF NOT EXISTS user_account (
        id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY COMMENT '用户编号',
        username VARCHAR(20) NOT NULL UNIQUE COMMENT '用户名',
        password CHAR(32) NOT NULL COMMENT '密码'
    );
    
    INSERT INTO user_account (username, password) VALUES ('zhangsan', '123456');
    
     SELECT *
     FROM user_account

![5f3280da134d4e6abdc277653c28b961.png][]

[5f3280da134d4e6abdc277653c28b961.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b9d90125db4f43c894b2057a69fae8f5.png