web第二次课后作业--设计一个注册登录系统

dog shit

已于 2025-05-15 19:20:08 修改

阅读量278

点赞数 2

文章标签：前端 javascript html

于 2025-05-15 18:55:12 首次发布

本文链接：https://blog.csdn.net/2302_80908433/article/details/147989833

版权

一、页面展示

登录页面
提交页面

在这里插入图片描述

二、代码

2.1 登录页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>用户登录</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
</head>
<body>
  <div class="form-container">
    <h2>用户登录</h2>
    <form action="zhuce/denglu_submit.jsp" method="post">
      <div class="form-group">
        <label for="username">账号：</label>
        <input type="text" id="username" name="username" />
      </div>
      <div class="form-group">
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" name="pwd" />
      </div>
      <input type="submit" value="登陆" />
    </form>
    <p class="register-link">还没有账户？ <a href="denglu.jsp">立即注册</a></p>
  </div>
</body>
</html>

2.2 提交页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>提交结果</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
    <style>
        /* Additional styles specific to this page for displaying data */
        .data-display-group {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #FFD1DC; /* Pastel Pink border, consistent with input fields */
            border-radius: 6px;
            background-color: #FFF5FA; /* Lighter LavenderBlush */
        }
        .data-display-group strong {
            color: #C71585; /* MediumVioletRed for labels */
            margin-right: 8px;
        }
    </style>
</head>

<body>
<%
    // 设置请求编码为 UTF-8，确保正确处理中文参数
    request.setCharacterEncoding("UTF-8");
%>
<div class="form-container">
    <h2>提交的数据</h2>

    <div class="data-display-group">
        <strong>用户名：</strong><%= request.getParameter("username") %>
    </div>

    <div class="data-display-group">
        <strong>密码：</strong><%= request.getParameter("pwd") %>
    </div>

    <!--<div class="data-display-group">
        <strong>选择提示问题：</strong><%= request.getParameter("question") %>
    </div>

    <div class="data-display-group">
        <strong>提示答案：</strong><%= request.getParameter("key") %>
    </div>

    <div class="data-display-group">
        <strong>选择的爱好：</strong>
        <%
            String[] like = request.getParameterValues("like");
            if (like != null && like.length > 0) {
                for(int i = 0; i < like.length; i++){
                    out.print(like[i] + (i < like.length - 1 ? ", " : ""));
                }
            } else {
                out.print("无");
            }
        %>
    </div>
-->
    <p style="text-align: center; margin-top: 20px;">
        <a href="biaodan_submit2.jsp" class="submit-style-link">跳转到第二个展示页面</a>
    </p>
</div>

</body>
</html>