移动商城第七篇【查询商品、分页查询、数据回显】
逆向生成item
将表名设置成eb_item就行了。
<table schema="" tableName="eb_item" enableCountByExample="false"
enableUpdateByExample="false" enableDeleteByExample="false"
enableSelectByExample="false" selectByExampleQueryId="false"
>
</table>查询商品
由于我们查询商品的话，可能商品的数量是非常大的，因此我们需要用到分页…
对于分页，我们现在就一点也不陌生了。无非就是把分页所用到的数据封装到page对象中，我们在dao层
首先，我们来看一下对应的原型界面把：
我们想要看这个原型界面的话，现在是点不进去的了，因为我们把JSP文件放在WEB-INF下了。因此，我们用Controller做一个转发就行了。
创建商品的Controller
@Controller
@RequestMapping("item")
public class EbItemController {
@RequestMapping("/listItem.do")
public String listItem() {
return "item/list";
}
}接着，修改页面上跳转的请求链接：
<li><a href="${path}/item/listItem.do"><samp class="t05"></samp>商品录入/上下架</a></li>我们发现页面是这样子的。
我们可以从原型界面上知道：用户可以根据多个条件来对我们的数据进行筛选，并且我们是需要做分页的。
创建查询条件对象
由于查询条件有多个，那么我们可以把这些条件封装成一个对象。
在页面上我们可以发现到4个查询条件：
用于我们的分页有三个条件变量
- 开始页数
- 结束页数
- 当前页数【页面传递过来的】
因此，我们的查询对象是这样子的：
package com.rl.ecps.model;
public class QueryCondition {
private Integer auditStatus;
private Integer showStatus;
private Long brandId;
private String itemName;
private Integer startNum;
private Integer endNum;
private Integer pageNo;
public Integer getPageNo() {
return pageNo;
}
public void setPageNo(Integer pageNo) {
this.pageNo = pageNo;
}
public Integer getAuditStatus() {
return auditStatus;
}
public void setAuditStatus(Integer auditStatus) {
this.auditStatus = auditStatus;
}
public Integer getShowStatus() {
return showStatus;
}
public void setShowStatus(Integer showStatus) {
this.showStatus = showStatus;
}
public Long getBrandId() {
return brandId;
}
public void setBrandId(Long brandId) {
this.brandId = brandId;
}
public String getItemName() {
return itemName;
}
public void setItemName(String itemName) {
this.itemName = itemName;
}
public Integer getStartNum() {
return startNum;
}
public void setStartNum(Integer startNum) {
this.startNum = startNum;
}
public Integer getEndNum() {
return endNum;
}
public void setEndNum(Integer endNum) {
this.endNum = endNum;
}
}
创建分页对象
package com.rl.ecps.utils;
import java.util.List;
public class Page {
/**
* 当前页码（已知）
*/
private int pageNo = 1;
/**
* 每页记录数（已知）
*/
private int pageSize = 5;
/**
* 指定查询条件下 的记录数（已知）
*/
private int totalCount = 0;
/**
* 指定查询下的总页数（未知）
*/
private int totalPage = 1;
/**
* 开始行号（未知）
*/
private int startNum = 0;
/**
* 未知
*/
private int endNum = 0;
private List<?> list;
public int getPageNo() {
return pageNo;
}
public void setPageNo(int pageNo) {
this.pageNo = pageNo;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
/**
* totalCount pageSize totalPage
* 0 10 1
* 95 10 10
* 100 10 10
*
*
*
* @return
*/
public int getTotalPage() {
totalPage = totalCount/pageSize;
if(totalCount == 0 || totalCount%pageSize != 0){
totalPage++;
}
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStartNum() {
return (pageNo - 1)*pageSize;
}
public void setStartNum(int startNum) {
this.startNum = startNum;
}
public int getEndNum() {
return pageNo*pageSize + 1;
}
public void setEndNum(int endNum) {
this.endNum = endNum;
}
public List<?> getList() {
return list;
}
public void setList(List<?> list) {
this.list = list;
}
}
编写SQL
由于我们的条件未必是存在的，因此我们使用到了动态SQL。
<!--根据条件查询分页查询数据-->
<select id="selectItemByCondition" parameterType="com.rl.ecps.model.QueryCondition" resultMap="BaseResultMap">
select * from (
select eb_item.*,ROWNUM rn from eb_item
<where>
<if test="brandId != null">
brand_id = #{brandId}
</if>
<if test="auditStatus != null">
and audit_status = #{auditStatus}
</if>
<if test="showStatus != null">
and show_status = #{showStatus}
</if>
<if test="itemName != null">
and item_name like '%${itemName}%'
</if>
<![CDATA[ and rownum < ]]> #{endNum}
</where>
order by item_id desc
)t
where t.rn <![CDATA[ > ]]>#{startNum}
</select>
<!--根据条件查询总页数-->
<select id="selectItemByConditionCount" parameterType="com.rl.ecps.model.QueryCondition" resultType="int">
SELECT count(item_id) from eb_item t
<where>
<if test="brandId != null">
t.brand_id = #{brandId}
</if>
<if test="auditStatus != null">
and t.audit_status = #{auditStatus}
</if>
<if test="showStatus != null">
and t.show_status = #{showStatus}
</if>
<if test="itemName != null">
and t.item_name like '%${itemName}%'
</if>
</where>
</select>
编写Dao
@Repository
public class EbItemDaoImpl extends SqlSessionDaoSupport implements EbItemDao {
String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemMapper.";
public List<EbItem> selectItemByCondition(QueryCondition queryCondition) {
return this.getSqlSession().selectList(nameSpace + "selectItemByCondition", queryCondition);
}
public int selectItemByConditionCount(QueryCondition queryCondition) {
return this.getSqlSession().selectOne(nameSpace + "selectItemByConditionCount", queryCondition);
}
}编写service
@Service
public class EbItemServiceImpl implements EbItemService {
@Qualifier("ebItemDaoImpl")
@Autowired
private EbItemDao itemDao;
public Page selectItemByCondition(QueryCondition queryCondition) {
//查询当前条件下的总页数
int count = itemDao.selectItemByConditionCount(queryCondition);
//根据总页数和当前页数【qc从前端拿到的】，计算得出其他分页属性的数据
Page page = new Page();
page.setTotalCount(count);
page.setPageNo(queryCondition.getPageNo());
int startNum = page.getStartNum();
int endNum = page.getEndNum();
//将计算出来的开始页数和结束页数封装到qc中，获取数据库中的数据
queryCondition.setStartNum(startNum);
queryCondition.setEndNum(endNum);
List<EbItem> ebItems = itemDao.selectItemByCondition(queryCondition);
//设置到page对象中
page.setList(ebItems);
return page ;
}
}
编写Controller
@Controller
@RequestMapping("/item")
public class EbItemController {
@Qualifier("ebItemServiceImpl")
@Autowired
private EbItemService itemService;
@Qualifier("ebBrandServiceImpl")
@Autowired
private EbBrandService ebBrandService;
@RequestMapping("/listItem.do")
public String listItem(QueryCondition queryCondition, Model model) {
//拿到所有的品牌，用于给用户下拉框选择
List<EbBrand> ebBrands = ebBrandService.selectBrand();
//如果是第一次访问的话，那么默认是没有当前页号的，因此赋值为1
if (queryCondition.getPageNo() == null) {
queryCondition.setPageNo(1);
}
//得到分页数据
Page page = itemService.selectItemByCondition(queryCondition);
model.addAttribute("page", page);
model.addAttribute("ebBrands", ebBrands);
//回显条件数据
model.addAttribute("queryCondition", queryCondition);
return "item/list";
}
}得到所有的品牌
使用下拉框来进行遍历出我们所有的品牌就行了。
开始的时候使用一个空值”全部品牌“
<select id="brandId" name="brandId" >
<option value="">全部品牌</option>
<c:forEach items="${ebBrands}" var="brand">
<option value="${brand.brandId}">${brand.brandName}</option>
</c:forEach>
</select>设置默认的上架状态
在我们的页面上，是没有原始的上架状态的。我们使用class属性设置默认的查询上架状态：
<a id="label6" href="${path}/item/queryItemByCondtion.do" title="全部实体商品" class="here">全部</a>测试条件查询
<%--上架的状态模块--%>
<h2 class="h2_ch"><span id="tabs" class="l">
<a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a>
<a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"
class="nor">未上架</a>
<a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"
class="nor">已上架</a>
</span></h2>
<form id="form1" name="form1" action="${path}/item/listItem.do" method="post">
<%--得到初始的上下架状态的值--%>
<input type="hidden" name="showStatus" value="${queryCondition.showStatus}">
<%--条件查询模块--%>
<div class="sch">
<p>搜索：
<select id="brandId" name="brandId">
<option value="">全部品牌</option>
<c:forEach items="${ebBrands}" var="brand">
<option value="${brand.brandId}">${brand.brandName}</option>
</c:forEach>
</select>
<select id="auditStatus" name="auditStatus">
<option value="" selected>全部审核状态</option>
<option value="0">待审核</option>
<option value="1">通过</option>
<option value="2">不通过</option>
</select>
<input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray"/>
<input type="submit" id="goSearch" class="hand btn60x20" value="查询"/>
</p>
</div>到目前为止，我们4个查询条件可以都使用了。接下来就是我们的数据回显了。
为什么要数据回显？？我们一旦使用了条件查询，跳转到对应的controller时，返回的页面的查询条件就没有了，这是不合理的。因此我们要对条件查询进行回显
品牌回显：只要查询条件的值等于品牌对应的值，那么我们就选中！
<select id="brandId" name="brandId">
<option value="">全部品牌</option>
<c:forEach items="${ebBrands}" var="brand">
<option value="${brand.brandId}" <c:if test="${queryCondition.brandId == brand.brandId}">selected</c:if>>
${brand.brandName}
</option>
</c:forEach>
</select>审核条件回显：只要查询条件的值等于审核条件的值，那么就选中！
<select id="auditStatus" name="auditStatus">
<option value="" selected>全部审核状态</option>
<option value="0" <c:if test="${queryCondition.auditStatus==0}">selected</c:if>>待审核</option>
<option value="1" <c:if test="${queryCondition.auditStatus==1}">selected</c:if>>通过</option>
<option value="2" <c:if test="${queryCondition.auditStatus==2}">selected</c:if>>不通过</option>
</select>模糊查询回显：
<input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray" value="${queryCondition.itemName}"/>上架状态条件回显：
上架状态的条件并不是通过表单来提交的，而是直接使用超链接定位的。
<a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a>
<a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"
class="nor">未上架</a>
<a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"
class="nor">已上架</a>当我们店家未上架商品的时候，我们的样式应该是会改变到here属性上的。因此，我们想要上架状态条件回显，首先得获取到对应的值
<%--得到上下架状态的值--%>
<input type="hidden" id="showStatus" name="showStatus" value="${queryCondition.showStatus}">使用jquery代码进行控制样式
$(function () {
var showStatusVal = $("#showStatus").val();
if(showStatusVal=='0') {
$("#label5").attr("class", "here");
}else if(showStatusVal=='1') {
$("#label4").attr("class", "here");
}else {
$("#label6").attr("class", "here");
}
});页面的上分页
<%--页数--%>
<div class="page_c">
<span class="l inb_a">
</span>
<span class="r page">
<input type="hidden" id="pageNo" name="pageNo" />
<input type="hidden" value="${page.totalCount}" id="totalCount" name="totalCount"/>
<input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/>
<input type="hidden" value="${page.totalPage}" id="totalPage" name="totalPage"/>
共<var id="pagePiece" class="orange">${page.totalCount}</var>条<var
id="pageTotal">${page.pageNo}/${page.totalPage}</var>
<a href="javascript:void(0);" id="previous" class="show" title="上一页">上一页</a>
<a href="javascript:void(0);" id="next" class="show" title="下一页">下一页</a>
</span>
</div>我们也可以使用Jquery代码来对分页进行页面的逻辑控制
//得到当前页数，总页数
var pageNoVal = parseInt($("#currentPageNo").val());//1,2
var totalPageVal = parseInt($("#totalPage").val());
//上一页和下一页都不显示的条件
if (pageNoVal ==1 && pageNoVal==totalPageVal ) {
$("#previous").hide();
$("#next").hide();
}//显示下一页，不显示上一页的条件
else if (pageNoVal == 1 && pageNoVal < totalPageVal) {
$("#next").show();
$("#previous").hide();
} //既显示上一页和下一页的条件
else if(pageNoVal > 1 && pageNoVal < totalPageVal) {
$("#next").show();
$("#previous").show();
}//显示上一页，不显示下一页的条件
else if(pageNoVal > 1 && pageNoVal==totalPageVal) {
$("#next").hide();
$("#previous").show();
}
//按钮点击事件
$("#next").click(function () {
//将当前页数+1，设置到我们的隐藏域中
pageNoVal++;//2
$("#pageNo").val(pageNoVal);//2
//提交表单
$("#form1").submit();
});
$("#previous").click(function () {
//将当前页数+1，设置到我们的隐藏域中
pageNoVal--;
$("#pageNo").val(pageNoVal);
//提交表单
$("#form1").submit();
});
需要值得注意的是：我们在input标签上多了一行这么一段代码：
<input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/>
那为什么我们要使用currentPageNo这么一行代码呢？？？而我们的Jquery代码也是拿currentPageNo它的值作为我们页面跳转。
如果没有这行代码，直接使用PageNo会怎么样呢？？
解释：
其实我们的页面跳转也是需要根据查询条件的结果来进行跳转的！
- 如果我们查询了所有数据，我们跳转到第7页，再设置条件为“三星”，如果直接使用PageNo的话，那么系统就会去找“三星”的第七页数据，显然，这是不合理的，当我们设置了查询条件时，应该跳转到的是“三星”的第一页数据！
- 归终到底，currentPageNo它就是根据我们当前条件来进行跳转！如果查询条件修改了，那么PageNo默认的值是为1的。
如果您觉得这篇文章帮助到了您，可以给作者一点鼓励
