家居网购项目实现06
以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git
14.功能13-首页分页
14.1需求分析/图解
- 顾客进入首页页面
- 分页显示家居
- 正确显示分页导航条
14.2思路分析
14.3代码实现
14.3.1web层
配置customerFurnServlet- <servlet>
- <servlet-name>CustomerFurnServlet</servlet-name>
- <servlet-class>com.li.furns.web.CustomerFurnServlet</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>CustomerFurnServlet</servlet-name>
- <url-pattern>/customerFurnServlet</url-pattern>
- </servlet-mapping>
复制代码 实现servlet- package com.li.furns.web;
- import com.li.furns.entity.Furn;
- import com.li.furns.entity.Page;
- import com.li.furns.service.FurnService;
- import com.li.furns.service.impl.FurnServiceImpl;
- import com.li.furns.utils.DataUtils;
- import javax.servlet.*;
- import javax.servlet.http.*;
- import java.io.IOException;
- public class CustomerFurnServlet extends BasicServlet {
- private FurnService furnService = new FurnServiceImpl();
- /**
- * 处理首页分页请求
- *
- * @param req
- * @param resp
- * @throws ServletException
- * @throws IOException
- */
- protected void page(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- //这里的业务逻辑和原先的家居后台分页非常相似
- int pageNo = DataUtils.parseInt(req.getParameter("pageNo"), 1);
- int pageSize = DataUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
- //调用service方法,获取Page对象
- Page<Furn> page = furnService.page(pageNo, pageSize);
- //将page放入request域中
- req.setAttribute("page", page);
- //请求转发到/views/customer/index.jsp - 真正的主页
- req.getRequestDispatcher("/views/customer/index.jsp")
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form> .forward(req, resp);
- }
- }
复制代码 14.3.2前端页面
1.web/index.jsp前端导航栏- <ul>
- <%--如果当前页大于1,就显示上一页--%>
- <c:if test="${requestScope.page.pageNo>1}">
- <li><a target="_blank" href="https://www.cnblogs.com/customerFurnServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上页</a></li>
- </c:if>
- <%-- 显示所有的分页数
- 先确定开始页数 begin 第一页
- 再确定结束页数 end 第page.TotalCount页
- --%>
- <c:set var="begin" value="1"/>
- <c:set var="end" value="${requestScope.page.pageTotalCount}"/>
- <c:forEach begin="${begin}" end="${end}" var="i">
- <%--如果i为当前页,就使用class=active来修饰--%>
- <c:if test="${i==requestScope.page.pageNo}">
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form><li><a target="_blank" href="https://www.cnblogs.com/customerFurnServlet?action=page&pageNo=${i}">${i}</a></li>
- </c:if>
- <c:if test="${i!=requestScope.page.pageNo}">
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form><li><a target="_blank" href="https://www.cnblogs.com/customerFurnServlet?action=page&pageNo=${i}">${i}</a></li>
- </c:if>
- </c:forEach>
- <%-- --%>
- <%-- 如果当前页小于总页数,就往下一页--%>
- <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotalCount}">
- <li><a target="_blank" href="https://www.cnblogs.com/customerFurnServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下页</a></li>
- </c:if>
- <li><a>共${requestScope.page.pageTotalCount}页</a></li>
- <li><a>共${requestScope.page.totalRow}记录</a></li>
- </ul>
复制代码 14.4完成测试
在浏览器访问http://localhost:8080/furniture_mall/,点击分页超链接,可以完成分页显示数据
15.功能14-首页搜索
15.1需求分析/图解
- 顾客点击首页搜索框,可以输入家居名
- 正确显示分页导航条,并且要求在分页基础上保留上次搜索条件(即点击分页,显示的家居信息仍要符合搜索条件)
15.2思路分析
15.3代码实现
15.3.1dao层
FurnDAO- /**
- * 根据furnName返回符合条件的记录数
- *
- * @param furnName 搜索条件
- * @return 返回符合条件的记录数
- */
- public int getTotalRowByName(String furnName);
- /**
- * 根据 begin,pageSize,furnName,返回furn的记录
- *
- * @param furnName 搜索条件
- * @return 返回furn对象集合
- */
- public List<Furn> getPageItemByName(int begin, int pageSize, String furnName);
复制代码 FurnDAOImpl- @Override
- public int getTotalRowByName(String furnName) {
- String sql = "SELECT COUNT(*) " +
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>"FROM `furn` " +
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>"WHERE `name` LIKE ?";
- return ((Number) queryScalar(sql, "%" + furnName + "%")).intValue();
- }
- @Override
- public List<Furn> getPageItemByName(int begin, int pageSize, String furnName) {
- String sql = "SELECT `id` , `name` , `maker` , `price` , `sales` , `stock` , `img_path` AS imgPath " +
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>"FROM `furn` " +
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>"WHERE `name` LIKE ? LIMIT ?,?";
- return queryMulti(sql, Furn.class, "%" + furnName + "%", begin, pageSize);
- }
复制代码 FurnDAOImplTest- @Test
- public void getPageTotalCountByName() {
- System.out.println("根据名字’沙发‘搜索=>" + furnDAO.getTotalRowByName("沙发"));
- }
- @Test
- public void getPageItemByName() {
- //从第0条记录开始,每页显示5个记录
- List<Furn> furns = furnDAO.getPageItemByName(0, 5, "沙发");
- for (Furn furn : furns) {
- System.out.println(furn);
- }
- }
复制代码 15.3.2service层
FurnService- /**
- * 根据传入的pageNo,pageSize和furnName,返回对应的page对象
- *
- * @param pageNo 表示第几页
- * @param pageSize 表示一页取出多少条记录
- * @param furnName 搜索的家居名
- * @return 返回对应的page对象
- */
- public Page<Furn> pageByName(int pageNo, int pageSize, String furnName);
复制代码 FurnServiceImpl- @Override
- public Page<Furn> pageByName(int pageNo, int pageSize, String furnName) {
- //先创建一个page对象,然后根据实际情况填充属性
- Page<Furn> page = new Page<>();
- //1.当前第几页
- page.setPageNo(pageNo);
- //2.每页取出多少条记录
- page.setPageSize(pageSize);
- //3.根据名字来返回总记录数
- int totalRow = furnDAO.getTotalRowByName(furnName);
- page.setTotalRow(totalRow);
- //4.总页数 = 总记录数 / 每页记录数
- int pageTotalCount = totalRow / pageSize;
- if (totalRow % pageSize > 0) {
- //如果有余数就把总页数 +1
- pageTotalCount++;
- }
- page.setPageTotalCount(pageTotalCount);
- //5.数据集合items
- //SELECT * FROM table_name
- //LIMIT 每页显示记录数*(第几页-1),每页显示记录数
- int begin = (pageNo - 1) * pageSize;
- List<Furn> pageItems = furnDAO.getPageItemByName(begin, pageSize, furnName);
- page.setItems(pageItems);
- //6.还差一个url,分页导航,先放一放
- return page;
- }
复制代码 FurnServiceImplTest- @Test
- public void pageByName() {
- Page<Furn> page = furnService.pageByName(1, 5, "桌子");
- for (Furn furn : page.getItems()) {
- System.out.println(furn);
- }
- }
复制代码 15.3.3web层
CustomerFurnServlet- /**
- * 处理首页搜索请求
- * 并进行分页(只对搜索到的信息分页)
- *
- * @param req
- * @param resp
- * @throws ServletException
- * @throws IOException
- */
- protected void pageByName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- //获取请求参数
- int pageNo = DataUtils.parseInt(req.getParameter("pageNo"), 1);
- int pageSize = DataUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
- //如果参数有name但没有值,接收的就是空串
- //如果参数没有name,接收到的就是null
- String furnName = req.getParameter("furnName");
- //这样做,将""和null的业务逻辑合并在一起
- if (furnName == null) {
- furnName = "";
- }
- //调用service方法,获取Page对象
- Page<Furn> page = furnService.pageByName(pageNo, pageSize, furnName);
- //将page放入request中
- req.setAttribute("page", page);
- //请求转发到/customer/index.jsp
- req.getRequestDispatcher("/views/customer/index.jsp")
- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>.forward(req, resp);
- }
复制代码 15.3.4customer/index.jsp
修改搜索框参数- <form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>
复制代码 关于携带上次检索条件,即点击分页,显示的家居信息仍要符合搜索条件:
- 功能13-首页分页实现,在导航栏的超链接上附上了请求的servlet路径,servlet中方法以及当前页数等参数。检索信息的分页 和 首页分页 的导航栏,两者功能是相似的,只是在请求的servlet,servlet方法等参数不一致
- 检索信息的分页:
由于furnName的值在搜索栏中提交给CustomerFurnServlet,我们可以在CustomerFurnServlet的pageByName方法中获取到的furnName值,并设置在page的属性url中,返回给jsp页面,这样就可以拿到furnName了
- 改进CustomerFurnServlet
- protected void pageByName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取请求参数 int pageNo = DataUtils.parseInt(req.getParameter("pageNo"), 1); int pageSize = DataUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE); //如果参数有name但没有值,接收的就是空串 //如果参数没有name,接收到的就是null String furnName = req.getParameter("furnName"); //这样做,将""和null的业务逻辑合并在一起 if (furnName == null) { furnName = ""; } //调用service方法,获取Page对象 Page page = furnService.pageByName(pageNo, pageSize, furnName); //根据furnName StringBuilder url = new StringBuilder("customerFurnServlet?action=pageByName"); if (!"".equals(furnName)) {//如果furnName不为空串,就拼接 furnName参数 url.append("&furnName=").append(furnName); } page.setUrl(url.toString()); //将page放入request中 req.setAttribute("page", page); //请求转发到/customer/index.jsp req.getRequestDispatcher("/views/customer/index.jsp")<form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>.forward(req, resp);}
复制代码 - index.jsp的分页导航栏
- [list]<form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>
- [*][url=https://www.cnblogs.com/${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}]上页[/url]<form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form><form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form><form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form><form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>
- [*][url=https://www.cnblogs.com/${requestScope.page.url}&pageNo=${i}]${i}[/url]<form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form><form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>
- [*][url=https://www.cnblogs.com/${requestScope.page.url}&pageNo=${i}]${i}[/url]<form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form><form action="customerFurnServlet">
- <input type="hidden" name="action" value="pageByName">
- <input name="furnName" placeholder="输入家居名搜索" type="text" >
- <button type="submit"><i ></i></button>
- </form>
- [*][url=https://www.cnblogs.com/${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}]下页[/url]
- [*][url=http://dis.qidao123.com/]共${requestScope.page.pageTotalCount}页[/url]
- [*][url=http://dis.qidao123.com/]共${requestScope.page.totalRow}记录[/url]
- [/list]
复制代码 15.3.5bugFix
上述代码虽然可以解决搜索信息的分页问题,但是如果我们第一次进入首页的时候,走的是CustomerFurnServlet的page方法,因此返回的page的url中是null,如果这时直接点击分页导航栏,就会显示错误,因为获取不到page的url属性,超链接拼接错误。
解决方案:直接将web/index.jsp的action改为pageByName,由于没有给furnName参数,默认搜索的是所有家居信息
15.4完成测试
访问urlhttp://localhost:8080/furniture_mall/,首次进入首页,点击分页导航栏,功能正常
在搜索框中搜索家居名称,成功返回合法数据,点击分页导航栏,功能正常
搜索结果第一页:
搜素结果第三页:
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |