纯JSP方式实现用户登录功能

傷城~ 2024-05-07 17:05 60阅读 0赞

### 一、纯JSP方式实现用户登录功能 ###

#### （一）实现思路 ####

*  登录页面login.jsp，输入用户名和密码后，跳转到登录处理页面doLogin.jsp进行业务逻辑处理，登录成功，跳转到登录成功页面success.jsp，否则跳转到登录失败页面failure.jsp。

#### （二）实现步骤 ####

##### 1、创建Web项目 #####

*  开始先创建Java Enterprise项目，添加Web Application功能  
    ![在这里插入图片描述][2e05e806f8de4a9fa77406b5263bdd5a.png]

![在这里插入图片描述][7a3ef389f05748eb88da2d31930cfaeb.png]

*  设置项目名为LoginDemo，并设置好保存位置  
    ![在这里插入图片描述][9b4edcabbebb42469fbd4599c2d31118.png]
 *  单击【Finish】按钮  
    ![在这里插入图片描述][af922dabd4c84658a3ed141b214a6003.png]
 *  在项目结构窗口里修改Artifact名 - LoginDemo01，把后缀删除掉  
    ![在这里插入图片描述][a6aa0870d15749a7a552c1df1d2ad9b2.png]  
    ![在这里插入图片描述][a7cf9976beb546d796e3595075af72f6.png]
 *  编辑服务器配置，重新部署项目  
    ![在这里插入图片描述][d25d8a2f33f54e48abb66f4d252c4ffd.png]
 *  先是【Server】选项卡  
    ![在这里插入图片描述][9072a19c6f3c4705912e9ec4186cdacf.png]
 *  然后切换到【Deployment】选项卡  
    ![在这里插入图片描述][00a5d8aae1d046a3a828fe3965f9b93a.png]

##### 2、创建登录页面 #####

*  创建登录页面 - login.jsp  
    ![在这里插入图片描述][5751fbd73ad84ddd93f243610f67341e.png]
 *  代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>用户登录</title>
    </head>
    <body>
    <h3 style="text-align: center">用户登录</h3>
    <form action="doLogin.jsp" method="post">
        <table border="1" cellpadding="10" style="margin: 0px auto">
            <tr>
                <td align="center">账号</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td align="center">密码</td>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit" value="登录"/>
                    <input type="reset" value="重置"/>
                </td>
            </tr>
        </table>
    </form>
    </body>
    </html>

##### 3、创建登录处理页面 #####

*  创建登录处理页面 - doLogin.jsp  
    ![在这里插入图片描述][eeb41ecf921842219d8c480fb6adbcf2.png]
 *  代码如下

<%
        // 获取登录表单数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 判断登录是否成功
        if (username.equals("无心剑") && password.equals("903213")) {
        
            // 跳转到登录成功页面，传递用户名
            response.sendRedirect("success.jsp?username=" + username);
        } else {
        
            // 跳转到登录失败页面，传递用户名
            response.sendRedirect("failure.jsp?username=" + username);
        }
    %>

##### 4、创建登录成功页面 #####

*  登录成功页面 - success.jsp  
    ![在这里插入图片描述][42f16a88592a4f6e9b799a21d9fc89cd.png]
 *  代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>登录成功</title>
    </head>
    <body>
    <h3 style="text-align: center">恭喜，<%=request.getParameter("username")%>，登录成功！</h3>
    </body>
    </html>

##### 5、创建登录失败页面 #####

*  创建登录失败页面 - failure.jsp  
    ![在这里插入图片描述][f08fbd6737ec499fb42d67bb1da81ce1.png]
 *  代码如下

##### 6、编辑项目首页 #####

*  项目首页 - index.jsp  
    ![在这里插入图片描述][2491dcac1c16469d93c50211abd17276.png]
 *  代码如下

##### （三）测试结果 #####

*  启动服务器，显示首页  
    ![在这里插入图片描述][278a885ac93342b3bc2a22212d29389f.png]
 *  单击【跳转到登录页面】超链接  
    ![在这里插入图片描述][7d9e0783075d4c119162f9c8e897e17d.png]
 *  输入正确的用户名和密码（无心剑：903213）  
    ![在这里插入图片描述][46db275f517a418084c207838533b832.png]
 *  单击【登录】按钮，跳转到登录成功页面  
    ![在这里插入图片描述][b4af57b03e814431aa1af18d75c05a52.png]
 *  返回登录页面，输入错误的用户名或密码  
    ![在这里插入图片描述][c054be1a22554bebb304ffd6e4643054.png]
 *  录屏操作  
    ![在这里插入图片描述][55d47cc5bdf64fbdb377d0f111848820.gif_pic_center]

[2e05e806f8de4a9fa77406b5263bdd5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/d290bd040c0b4258939a1a57c02e2a60.png
[7a3ef389f05748eb88da2d31930cfaeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/c22ab957a0fa44eea3e63fb6e9ed21df.png
[9b4edcabbebb42469fbd4599c2d31118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/ffb72ada8b48475eaed664d9f3db569b.png
[af922dabd4c84658a3ed141b214a6003.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/deec22e8176c41fa8261f2d08811aa5c.png
[a6aa0870d15749a7a552c1df1d2ad9b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/a41b37fd0f044d0eafd5fd512547196c.png
[a7cf9976beb546d796e3595075af72f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/860bf6b87f754a72aabf88d951fc2e21.png
[d25d8a2f33f54e48abb66f4d252c4ffd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/75727e326cad499184fc8cc7661a3d9c.png
[9072a19c6f3c4705912e9ec4186cdacf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/f22edf237ac44f3fadc6cde40791fcf9.png
[00a5d8aae1d046a3a828fe3965f9b93a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/1cf9e9d9badb485382797d50f958ea92.png
[5751fbd73ad84ddd93f243610f67341e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/0b65025f2ed54b97b22d76ba3cda22cc.png
[eeb41ecf921842219d8c480fb6adbcf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/05c513da82e4423296f4507407c5794b.png
[42f16a88592a4f6e9b799a21d9fc89cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/002ee03928a2498dbb14b40e24a7c351.png
[f08fbd6737ec499fb42d67bb1da81ce1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/236610e4de444f72be1ee9b70da9401c.png
[2491dcac1c16469d93c50211abd17276.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/8d975762f6314cf783ede812d5a44a0b.png
[278a885ac93342b3bc2a22212d29389f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/a6ec3f6e7a1f48c0875b1d40524ed27e.png
[7d9e0783075d4c119162f9c8e897e17d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/e7edc4a5dabe40409630cd781b49e494.png
[46db275f517a418084c207838533b832.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/3520a44b21e944e0a5877374618ba2b8.png
[b4af57b03e814431aa1af18d75c05a52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/e4b8995e71bc434592bee27fbcb57f2e.png
[c054be1a22554bebb304ffd6e4643054.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/e391afc63e274dc5bae22556b91a8eb7.png
[55d47cc5bdf64fbdb377d0f111848820.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/954ed7daa1264815bc94da6e33149319.gif