家居网购项目（首页搜索+验证码）

1.首页搜索

1.需求分析

2.程序框架图

3.编写dao层

1.修改FurnDao

添加两个方法

    //根据家居名字模糊查询记录条数
    public int getTotalCountByName(String name);
    //根据家居名字和begin以及pageSize模糊查询记录
    public List<Furn> getPageItemsByName(String name, int begin, int pageSize);

2.修改FurnDaoImpl

添加两个方法

    /**
     * 根据姓名进行模糊查询总数
     * @param name
     * @return
     */
    @Override
    public int getTotalCountByName(String name) {
        String sql = "select count(*) from furn where name like ?";
        //注意，在模糊查询的时候不能直接将问号放入引号内部
        String namePattern = "%" + name + "%";
        return ((Number)queryScalar(sql, namePattern)).intValue();
    }

    /**
     * 获取根据姓名分页查询的记录
     * @param name
     * @param begin
     * @param pageSize
     * @return
     */
    @Override
    public List<Furn> getPageItemsByName(String name, int begin, int pageSize) {
        String sql = "select id, name, maker, price, sales, stock, img_path as imgPath " +
                "from furn where name like ? limit ?, ?";
        String namePattern = "%" + name + "%"; //根据姓名模糊查询
        return queryMulti(sql, Furn.class, namePattern, begin, pageSize);
    }

3.单元测试

4.编写service层

1.修改FurnService

添加方法

    //7.根据传入的name和begin和pageSize返回对应的page对象
    public Page<Furn> pageByName(String name, int pageNo, int pageSize);

2.修改FurnServiceImpl

添加方法

    /**
     * 根据名字进行模糊查询，返回指定页，指定页的大小的page对象
     * @param name
     * @param pageNo
     * @param pageSize
     * @return
     */
    @Override
    public Page<Furn> pageByName(String name, int pageNo, int pageSize) {
        Page<Furn> page = new Page<>();
        page.setPageNo(pageNo);
        page.setPageSize(pageSize);
        int totalRow = furnDao.getTotalCountByName(name);
        page.setTotalRow(totalRow);
        //计算总页数
        int pageTotalCount = totalRow / pageSize;
        if (totalRow % pageSize > 0) {
            pageTotalCount += 1;
        }
        page.setPageTotalCount(pageTotalCount);
        //计算当前页显示的记录
        int begin = pageSize * (pageNo - 1);
        List<Furn> pageItems = furnDao.getPageItemsByName(name, begin, pageSize);
        page.setItems(pageItems);
        return page;
    }

3.单元测试

5.编写web层

1.修改index.jsp

2.修改CustomerFurnServlet

添加方法

    /**
     * 根据姓名进行分页查询，将page对象请求转发到index.jsp
     *
     * @param req
     * @param resp
     */
    public void pageByName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取三个信息
        String name = req.getParameter("name");
        Integer pageNo = DataUtils.parseInt(req.getParameter("pageNo"), 1);
        Integer pageSize = DataUtils.parseInt(req.getParameter("pageSize"), 8);
        //根据姓名进行分页查询
        Page<Furn> page = furnService.pageByName(name, pageNo, pageSize);
        //请求转发到index.jsp
        req.setAttribute("page", page);
        req.getRequestDispatcher("/views/customer/index.jsp?name=" + name).forward(req, resp);

    }

3.修改index.jsp的分页导航逻辑

<%--默认action是page--%>
<c:set var="action" value="page"></c:set>
<%--只要是根据姓名查找的，那么就将action变成向pageByName发送请求并携带name--%>
<c:if test="${not empty param.name}">
    <c:set var="action" value="pageByName&name=${param.name}" scope="page"/>
</c:if>

<!--  Pagination Area Start 分页导航条 -->
<div class="pro-pagination-style text-center mb-md-30px mb-lm-30px mt-6" data-aos="fade-up">
    <ul>
        <li><a href="customerFurnServlet?action=${action}&pageNo=1">首页</a></li>
        <%--有上一页再显示--%>
        <c:if test="${requestScope.page.pageNo-1 > 0}">
            <li><a href="customerFurnServlet?action=${action}&pageNo=${requestScope.page.pageNo-1}">上页</a></li>
        </c:if>

        <%--最多显示5页--%>
        <c:forEach begin="${requestScope.page.pageNo - 2 > 0 ? requestScope.page.pageNo - 2 : 1}"
                   end="${requestScope.page.pageNo+2}" var="pageNo">
            <%--页数在范围内才显示--%>
            <c:if test="${pageNo >= 1 && pageNo <= requestScope.page.pageTotalCount}">
                <li>
                        <%-- 如果是当前页号则显示被选中--%>
                    <a class="<c:if test="${requestScope.page.pageNo == pageNo}">active</c:if>"
                       href="customerFurnServlet?action=${action}&pageNo=${pageNo}#">${pageNo}</a>
                </li>
            </c:if>
        </c:forEach>

        <%--有下一页再显示--%>
        <c:if test="${requestScope.page.pageNo+1 <= requestScope.page.pageTotalCount}">
            <li><a href="customerFurnServlet?action=${action}&pageNo=${requestScope.page.pageNo+1}">下页</a></li>
        </c:if>
        <li><a href="customerFurnServlet?action=${action}&pageNo=${requestScope.page.pageTotalCount}">末页</a></li>
        <li><a>共${requestScope.page.pageTotalCount}页</a></li>
        <li><a>共${requestScope.page.totalRow}记录</a></li>
    </ul>
</div>
<!--  Pagination Area End -->

6.结果展示

1.对椅子进行模糊搜索

2.搜到的都是椅子

3.点击导航条也可正常显示剩下的椅子

7.修改bug

点击logo无法返回首页

解决方法

将所有index.html替换为customerFurnServlet?action=page&pageNo=1

2.根据登录状态显示菜单

1.需求分析

2.程序框架图

3.修改MemberServlet

4.修改login_ok.jsp

1.修改头部

2.修改html

3.增加样式

<style>
    .header-content {
        display: flex;
        align-items: center;
    }

    .header-logo {
        margin-right: 30px; /* 适当调整Logo右侧的间距 */
    }

    .user-links {
        display: flex;
        align-items: center;
    }

    .user-links a, .user-links span {
        margin-right: 15px; /* 适当调整链接之间的间距 */
    }

    .user-links .order-management-link,
    .user-links .safe-logout-link,
    .user-links .user-greeting {
        font-size: 1.2em; /* 增加文字的字体大小 */
    }
</style>

5.修改index.jsp

6.结果展示

1.未登录的首页

2.登录成功

3.点击返回首页

3.注销登录

1.需求分析

2.程序框架图

3.修改index.jsp

4.修改login_ok.jsp

5.编写MemberServlet

添加方法

    //注销登录
    public void logout(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        HttpSession session = req.getSession();
        //销毁session
        session.invalidate();
        //重定向到首页
        resp.sendRedirect("customerFurnServlet?action=page&pageNo=1");
    }

6.结果展示

1.登录成功，点击安全退出

2.首页点击安全退出

4.验证码

1.需求分析

2.程序框架图

3. 配置kaptcha

1.导入jar包

2.配置web.xml

    <servlet>
        <servlet-name>kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>kaptcha</servlet-name>
        <url-pattern>/kaptchaServlet</url-pattern>
    </servlet-mapping>

3.注册页面添加验证码图片

向刚才配置的kaptcha发送请求

4.点击刷新验证码图片

4.kaptcha源码阅读

1.打断点，启动debug

2.四个下一步

3.下一步

4.下一步

5.下一步

6.下一步

7.下三步

5.前端校验验证码不能为空

1.修改login.jsp

                //5.判断验证码是否为空
                var codeText = $("#code").val();
                if (codeText == null || codeText == "") {
                    $("span.errorMsg").text("验证码不能为空！");
                    return false;
                }

2.结果展示

6.后端校验验证码

1.修改memberServlet

修改方法register

    public void register(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接受用户注册信息
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");

        //获取验证码
        String codeText = req.getParameter("codeText");
        HttpSession session = req.getSession();
        //获取验证码和时间
        Object kaptchaSessionKey = session.getAttribute(KAPTCHA_SESSION_KEY);
        //获取验证码之后立即删除
        req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);

        Object kaptchaSessionDate = session.getAttribute(KAPTCHA_SESSION_DATE);
        System.out.println((Date) kaptchaSessionDate);

        //验证码正确则按照之前的逻辑走
        if (kaptchaSessionKey != null && ((String) kaptchaSessionKey).equalsIgnoreCase(codeText)) {
            //判断用户名是否在数据库中
            if (!memberService.isExistsUsername(username)) { //不在数据库中，可以注册
                Member member = new Member(null, username, password, email);
                //注册
                if (memberService.registerMember(member)) {
                    //请求转发
                    req.getRequestDispatcher("/views/member/register_ok.html").forward(req, resp);
                } else {
                    //请求转发
                    req.getRequestDispatcher("/views/member/register_fail.html").forward(req, resp);
                }
            } else {
                //返回注册页面
                req.getRequestDispatcher("/views/member/login.jsp").forward(req, resp);
            }
        } else { //验证码不正确，请求转发并携带信息
            req.setAttribute("msg", "验证码不正确");
            req.setAttribute("active", "register");
            //返回注册页面
            req.getRequestDispatcher("/views/member/login.jsp").forward(req, resp);
        }
    }

2.修改login.jsp显示错误信息

1.注册表单增加id

2.模拟点击

3.登录表单提示错误信息逻辑修改

3.结果展示

1.验证码不正确

2.自动点击到会员注册并显示错误信息

文章来源地址https://www.toymoban.com/news/detail-850341.html

到了这里，关于家居网购项目（首页搜索+验证码）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！