购书流程
本模块业务逻辑:
jsp文件分析
product_list.jsp
是点击分类默认显示的布局,而product_search_list.jsp
是搜索结果页面布局,是内容主要是以下红线框住部分,特点:分类条件显示(只有product_list.jsp
是,product_search_list.jsp
该处统一“全部商品”)、动态显示对应分类或者查询图书结果条数、动态显示书名售价及封面、分页显示的实现。
product_list.jsp
页面显示:
product_search_list.jsp
页面显示:
因为分类和搜索后都会返回一个PageBean到request储存着,所以分类条件显示、动态显示对应分类或者查询图书结果条数这两个功能用EL表达式直接就可以实现。
<h1>商品目录</h1>
<hr />
<h1>${
bean.category}</h1> 共${
bean.totalCount}种商品
<hr />
动态显示书名售价及封面,主要用了c标签
forEach语句遍历输出在Pagebean
中product
list
列表,关于PageBean
的数据结构,如何做到结果分页显示的,有待探讨。
分页显示
<c:forEach items="${bean.ps}" var="p" varStatus="vs">
<td>
<div class="divbookpic">
<p>
<a href="${pageContext.request.contextPath}/findProductById?id=${p.id}">
<img src="${pageContext.request.contextPath}${p.imgurl}" width="115" height="129" border="0" /> </a>
</p>
</div>
<div class="divlisttitle">
<a href="${pageContext.request.contextPath}/findProductById?id=${p.id}">书名: ${
p.name}<br />售价:¥${
p.price} </a>
</div>
</td>
</c:forEach>
分页显示的实现:
<div class="pagination">
<ul>
<!-- 上一页按钮 -->
<c:if test="${bean.currentPage!=1}">
<li class="disablepage_p">
<a class="disablepage_a" href="${pageContext.request.contextPath}/showProductByPage?currentPage=${bean.currentPage-1}&category=${bean.category}"></a>
</li>
</c:if>
<!-- 中间按钮 -->
<c:if test="${bean.currentPage==1}">
<li class="disablepage_p2"></li>
</c:if>
<c:forEach begin="1" end="${bean.totalPage}" var="pageNum">
<c:if test="${pageNum==bean.currentPage}">
<li class="currentpage">${
pageNum }</li>
</c:if>
<c:if test="${pageNum!=bean.currentPage}">
<li><a href="${pageContext.request.contextPath}/showProductByPage?currentPage=${pageNum}&category=${bean.category}">${
pageNum}</a></li>
</c:if>
/c:forEach>
<c:if test="${bean.currentPage==bean.totalPage||bean.totalPage==0}">
<li class="disablepage_n2"></li>
</c:if>
<!-- 下一页按钮 -->
<c:if test="${bean.currentPage!=bean.totalPage&&bean.totalPage!=0}">
<li class="disablepage_n">
<a class="disablepage_a" href="${pageContext.request.contextPath}/showProductByPage?currentPage=${bean.currentPage+1}&category=${bean.category}"></a></li>
</c:if>
</ul>
</div>
main.css
中,例:
.pagination li.disablepage_p {
width: 75px;
height: 15px;
padding: 5px;
color: #929292