JSP-用户登陆验证

水深无声 2024-03-24 12:37 67阅读 0赞

**目录**

1.用户登陆界面

代码：

2.信息验证界面

代码：

3.登陆成功Or失败界面

代码

浏览器页面展示：

--------------------

### 1.用户登陆界面 ###

*  #### 代码： ####

<%--
      Created by IntelliJ IDEA.
      User: CaptainDong
      Date: 2023/3/31
      Time: 21:22
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>用户登陆界面</title>
        <style>
            h1 {
                font-size: 30px;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }
            .center-form{
                display: flex;
                justify-content: center; /* 在主轴方向上居中 */
                align-items: center; /* 在交叉轴方向上居中 */
                height: 100vh; /* 设置高度为整个视口高度 */
                font-size: 22px;
            }
        </style>
    </head>
    <body>
    <h1>用户登陆界面</h1>
    <form action="ch_3_11_userReceive.jsp" method="post" class="center-form">
        <div align="center">
            <div>
                姓名：<input type="text" name="RdName">
            </div>
            <div>
                密码：<input type="text" name="RdPassword"><%--密码不可见<input type="password" name="RdPassword">--%>
            </div>
            <div>
                <table>
                    <tr>
                        <td>
                            <input type="submit" value="确定提交">
                        </td>
                        <td>
                            <input type="reset" value="重置">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
    </body>
    </html>

### 2.信息验证界面 ###

*  #### 代码： ####

<%--
      Created by IntelliJ IDEA.
      User: CaptainDong
      Date: 2023/3/31
      Time: 21:23
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>信息验证界面</title>
    </head>
    <body>
    <%
        String xm = request.getParameter("RdName");
        String mm = request.getParameter("RdPassword");
        if (xm.equals("zhangsan") && mm.equals("123456")) {%>
    <jsp:forward page="ch3_11_userCorrect.jsp"></jsp:forward>
    <%
        } else {
            response.sendRedirect("https://baidu.com");
        }
    %>
    </body>
    </html>

### 3.登陆成功Or失败界面 ###

*  #### 代码 ####

<%--
      Created by IntelliJ IDEA.
      User: CaptainDong
      Date: 2023/3/31
      Time: 21:24
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>登陆成功Or失败界面</title>
        <style>
            #center-context {
                display: flex;
                justify-content: center; /* 在主轴方向上居中 */
                align-items: center; /* 在交叉轴方向上居中 */
                height: 100vh; /* 设置高度为整个视口高度 */
                font-size: 24px;
            }
        </style>
    </head>
    <body>
    <%
        String name = request.getParameter("RdName");
    %>
    <div id="center-context">
        <fron>欢迎，</fron>
        <%=
        name
        %>
        <fron>成功登陆！</fron>
    </div>
    </body>
    </html>

### 浏览器页面展示： ###

*  #### 1. ####

![83d603a42b344f1c925a5d9bded716a3.png][]

*  #### 2. ####
 *  ![aea2761a7f4d41f6a1171878e252acd0.png][]

登陆失败就转到百度官网了。。。

[83d603a42b344f1c925a5d9bded716a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c2497ed30978468192029b21b37ddb0b.png
[aea2761a7f4d41f6a1171878e252acd0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/88d96440bbe84601ac1267333de519dc.png