优化之一！JavaWeb商城项目（Day06）前后端（登录和注册的JSP页面+Servlet程序）

最新推荐文章于 2022-12-29 11:27:25 发布

程序彤

最新推荐文章于 2022-12-29 11:27:25 发布

阅读量398

点赞数

分类专栏：优化 Servlet 经验文章标签： java jsp html servlet

本文链接：https://blog.csdn.net/m0_47119598/article/details/109729224

版权

Servlet 同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

经验

14 篇文章 0 订阅

订阅专栏

优化

5 篇文章 0 订阅

订阅专栏

优化之一

抽取前端jsp公共部分

将全部.html页面改为.jsp页面，在顶部加
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
抽取公共页面（静态包含）
<%@include file="…/…/common/login_regist_menu.jsp"%>
<%@include file="/common/footer.jsp"%>

footer.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="bottom">
        <span>
            程序彤卡宾商城.Copyright &copy;2020.11.12
        </span>
</div>

head.jsp

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


<%--公共的引用 css jquery..--%>

login_regist_menu

<div id="header">
    <%--        TODO img--%>
    <div>
            <span>欢迎
                <span CLASS="um_span">
                    IU
                </span>
                光临卡宾(Cabbeen)商城
            </span>
        <a href="">我的订单</a>
        <a href="">注销</a>
        <a href="">返回</a>
    </div>
</div>

浏览器回显

在最先判断验证码是否输入正确时，如果验证码输入有误，跳转当前页面后，*将原本的用户名密码确认密码邮箱回显到输入框。
技术：
（1）先在servlet后端通过jsp或 el表达式设置request域中的数据（数据是获取客户端向用户请求的参数）
（2）再在前端jsp页面的input输入框中设置value属性，
el写法
value="${requestScope.username}"
jsp原生写法value="<%=request.getAttribute(“username”)==null?"":request.getAttribute(“username”)%>"
在验证码输入正确的基础上，若用户名在数据库中已存在，则又跳转到当前页面后，不回显之前输入的已存在用户名和验证码，其他全部回显

if ("bnbnp".equalsIgnoreCase(code)) {
            if (userService.existsUsername(username)) {
                System.out.println("用户名不可用"+username);
                /*用户已存在时发生错误时回显之前输入的密码、确认密码、邮箱*/
                req.setAttribute("msg","用户名已存在，请重新输入");
                req.setAttribute("password",password);
                req.setAttribute("repwd",repwd);
                req.setAttribute("email",email);
                req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
            }else {
                System.out.println("用户名可用"+username);
                userService.registUser(new User(null,username,password,email));
                req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req,resp);
            }
        }else {
            System.out.println("验证码错误:"+code);
            /*输入验证码错误时回显原本的用户名、密码、确认密码、邮箱*/
            req.setAttribute("msg","验证码输入错误，请重新输入");
            req.setAttribute("username",username);
            req.setAttribute("password",password);
            req.setAttribute("repwd",repwd);
            req.setAttribute("email",email);
            req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
        }

合并LoginServlet/RegistServlet为UserServlet

抽取regist和login方法，在jsp页面的form表单中添加隐藏域设置name action
（定一name移二到多value）由于可用反射优化大量if-else代码，故value写成方法名哦~

核心是form表单中的隐藏域

<form action="http://localhost:8080/userServlet" method="post">
        <input type="hidden" name="action" value="login">

当前是优化后的登录页面login.jsp

<body>
    <div id="login_header">
<!--        <img class="logo_img" alt="无法显示" src="" alt="">-->
    </div>

    <div class="login_banner">
        <div id="l_content">
            <span>欢迎登录</span>
        </div>
        <div id="content">
            <div class="login_form">
                <div class="login_box">
                    <div class="tit">
                        <h1>卡宾会员</h1>
                        <a href="regist.jsp">立即注册</a>
                    </div>

                    <div class="msg_cont">
                        <b></b>
                        <span class="errorMsg">
                            ${requestScope.msg==null?"请输入用户名和密码":requestScope.msg}
                        </span>
                    </div>
                    <div class="form">
                        <form action="http://localhost:8080/userServlet" method="post">
                            <input type="hidden" name="action" value="login">
                            <label>用户名称：</label>
                            <input type="text" name="username" class="itxt">
                            <br>
                            <br>
                            <label>用户密码：</label>
                            <input type="password" name="password" class="itxt">
                            <br>
                            <br>
                            <input id="sub_btn" type="submit" value="登录">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@include file="/common/footer.jsp"%>
</body>

优化后的注册页面regist.jsp

<script>
        $(function () {
            $("#sub_btn").click(function () {
                var usernameText = $("#username").val();
                var usernamePatt = /^\w{5,12}$/;
                if (!usernamePatt.test(usernameText)){
                    $("span.errorMsg").text("用户名不合法")
                    return false;
                }

                var passwordText = $("password").val();
                var passwordpatt = /^\w{5,12}$/;
                if (!passwordpatt.test(passwordText)){
                    $("span.errorMsg").text("您输入的密码不符合命名规范")
                    return false;
                }
                var rewpwdText = $("repwd").val();
                if (rewpwdText!=passwordText){
                    $("span.errorMsg").text("确认密码和密码不一致");
                    return false;
                }
                var emailText = $("email").val();
                // var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                //
                // if (!emailPatt.test(emailText)){
                //     $("span.errorMsg").text("邮箱格式不合法");
                //     return false;
                // }
                var codeText = $("#code").val();
                codeText = $.trim(codeText);
                if (codeText == null || codeText == ""){
                    $("span.errorMsg").text("验证码不能为空！");
                    return false;
                }
                $("span.errorMsg").text(""); // 在最后都正确的情况下，去掉错误信息

            });
        })
    </script>
    <style type="text/css">
        .login_form{
            height: 420px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div id="login_header">
        <img class="logo_img" src="../../static/img/?" alt="">
    </div>
    <div class="login_banner">
        <div id="l_content">
            <span class="login_word">欢迎注册</span>
        </div>
        <div id="content">
            <div class="login_form">
                <div class="login_box">
                    <div class="tit">
                        <h1>注册卡宾会员</h1>
                        <span class="errorMsg">
                            ${requestScope.msg==null?"":requestScope.msg}
                        </span>
                    </div>
                    <div class="form">
<!--                        绝对路径，post请求-->
                        <form action="http://localhost:8080/userServlet" method="post">
                            <input type="hidden" name="action" value="regist">
                            <label>用户名称：</label>

                            <input class="itxt" type="text" placeholder="请输入用户名"
                            autocomplete="off" tabindex="1" name="username" id="username"
                            value="${requestScope.username}"
                            >
                            <br>
                            <br>
                            <label>用户密码：</label>
                            <input class="itxt" type="password" placeholder="请输入密码"
                            autocomplete="off" tabindex="1" name="password" id="password"
                            value="<%=request.getAttribute("password")==null?"":request.getAttribute("password")%>"
                            >
                            <br>
                            <br>
                            <label>确认密码：</label>
                            <input class="itxt" type="password" placeholder="请再次输入密码"
                            autocomplete="off" tabindex="1" name="repwd" id="repwd"
                            value="<%=request.getAttribute("repwd")==null?"":request.getAttribute("repwd")%>"
                            >
                            <br>
                            <br>
                            <label>电子邮箱：</label>
                            <input class="itxt" type="text" placeholder="请输入邮箱地址"
                            autocomplete="off" tabindex="1" name="email" id="email"
                            value="${requestScope.email}"
                            >
                            <br>
                            <br>
                            <label>验证码：</label>
                            <input class="itxt" type="text" name="code" style="width: 150px;" id="code">
                            <img src="../../static/img/code.bmp" alt="" style="float: right;margin-right: 50px">
                            <br>
                            <br>
                            <input type="submit" value="注册" id="sub_btn">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@include file="/common/footer.jsp"%>
</body>

UserServlet封装(LoginServlet+RegistServlet)的2个方法

将LoginServlet和RegistServlet中dopost中的代码分别封装为2个方法。
public void login(HttpServletRequest req, HttpServletResponse resp)
public void regist(HttpServletRequest req, HttpServletResponse resp)

public void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /*
        1.获取输入的用户名和用户密码参数
        2.调用服务层登录方法，
                 如果未查询到返回空值
                    跳转到当前页面
                 否则
                    跳转到登录成功页面
         */
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        User loginUser = userService.login(new User(null, username, password, null));
        if (loginUser != null) {
            req.getRequestDispatcher("pages/user/login_success.jsp").forward(req,resp);
        }else {
            // 在页面提示用户名或密码有误,方法：把错误信息和回显的表单项信息保存在req域中
            // 但在一开始，EL表达式在输出null值时，输出空串，jsp表达式脚本输出null值时，输出的是null字符串
            // 由于刚进入登录页面，服务器还没有获取参数调用登录功能，此时msg的信息还没有返回给客户端，此时在jsp页面用el表达式判断
            req.setAttribute("msg","用户名或密码错误!");
            req.getRequestDispatcher("pages/user/login.jsp").forward(req,resp);
        }
    }

    /**
     * 注册的servlet
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    public void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /*
        1.获取请求的参数
        2.检查验证码是否可用
            正确
                3.检查用户名是否可用
                    不可用
                            跳回注册页面
                    可用
                        4.调用Service层保存到数据库
                            跳转到注册成功页面regist_success.jsp

            不正确
                 跳回注册页面
         */
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String repwd = req.getParameter("repwd");
        String email = req.getParameter("email");
        String code = req.getParameter("code"); // 由服务器生成验证码
        if ("bnbnp".equalsIgnoreCase(code)) {
            if (userService.existsUsername(username)) {
                System.out.println("用户名不可用"+username);
                /*用户已存在时发生错误时回显之前输入的密码、确认密码、邮箱*/
                req.setAttribute("msg","用户名已存在，请重新输入");
                req.setAttribute("password",password);
                req.setAttribute("repwd",repwd);
                req.setAttribute("email",email);
                req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
            }else {
                System.out.println("用户名可用"+username);
                userService.registUser(new User(null,username,password,email));
                req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req,resp);
            }
        }else {
            System.out.println("验证码错误:"+code);
            /*输入验证码错误时回显原本的用户名、密码、确认密码、邮箱*/
            req.setAttribute("msg","验证码输入错误，请重新输入");
            req.setAttribute("username",username);
            req.setAttribute("password",password);
            req.setAttribute("repwd",repwd);
            req.setAttribute("email",email);
            req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
        }
    }

UserServlet中的doPost()方法

用if-else判断调用哪种功能的方法

@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String action = req.getParameter("action"); // 获取隐藏域的name值得请求参数
        if ("login".equals(action)){
            login(req,resp);
        }else if ("regist".equals(action)){
            regist(req,resp);
        }
    }

程序彤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
优化之一！JavaWeb商城项目（Day06）前后端（登录和注册的JSP页面+Servlet程序）

优化之一抽取前端jsp公共部分将全部.html页面改为.jsp页面，在顶部加<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>抽取公共页面（静态包含）<%@include file="…/…/common/login_regist_menu.jsp"%><%@include file="/common/footer.jsp"%>footer.jsp<%@ page c
复制链接

扫一扫