移动商城第七篇【查询商品、分页查询、数据回显】

太过爱你忘了你带给我的痛 2021-09-17 07:40 444阅读 0赞

# 逆向生成item #

将表名设置成eb\_item就行了。

# 查询商品 #

由于我们查询商品的话，可能商品的数量是非常大的，因此我们需要用到分页…

对于分页，我们现在就一点也不陌生了。无非就是把分页所用到的数据封装到page对象中，我们在dao层

首先，我们来看一下对应的原型界面把：

![这里写图片描述][SouthEast]

我们想要看这个原型界面的话，现在是点不进去的了，因为我们把JSP文件放在WEB-INF下了。因此，我们**用Controller做一个转发就行了**。

## 创建商品的Controller ##

@Controller
    @RequestMapping("item")
    public class EbItemController { 
    
        @RequestMapping("/listItem.do")
        public String listItem() {
            return "item/list";
        }
    
    }

接着，修改页面上跳转的请求链接：

我们发现页面是这样子的。

![这里写图片描述][SouthEast 1]

我们可以从原型界面上知道：**用户可以根据多个条件来对我们的数据进行筛选，并且我们是需要做分页的**。

## 创建查询条件对象 ##

由于查询条件有多个，那么我们可以把这些条件封装成一个对象。

在页面上我们可以发现到4个查询条件：

![这里写图片描述][SouthEast 2]

用于我们的分页有三个条件变量

*  开始页数
 *  结束页数
 *  当前页数【页面传递过来的】

因此，我们的查询对象是这样子的：

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>

![这里写图片描述][SouthEast 3]

--------------------

## 设置默认的上架状态 ##

![这里写图片描述][SouthEast 4]

在我们的页面上，是没有原始的上架状态的。我们使用class属性设置默认的查询上架状态：

## 测试条件查询 ##

<%--上架的状态模块--%>
            <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>

模糊查询回显：

上架状态条件回显：

上架状态的条件并不是通过表单来提交的，而是直接使用超链接定位的。

当我们店家未上架商品的时候，我们的样式应该是会改变到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");
                }
            });

# 页面的上分页 #

![这里写图片描述][SouthEast 5]

<%--页数--%>
                <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标签上多了一行这么一段代码：

那为什么我们要使用currentPageNo这么一行代码呢？？？而我们的**Jquery代码也是拿currentPageNo它的值作为我们页面跳转**。

如果没有这行代码，直接使用PageNo会怎么样呢？？

**解释：**

其实我们的页面跳转**也是需要根据查询条件的结果来进行跳转的**！

*  如果我们查询了所有数据，我们跳转到第7页，再设置条件为“三星”，**如果直接使用PageNo的话，那么系统就会去找“三星”的第七页数据**，显然，这是不合理的，**当我们设置了查询条件时，应该跳转到的是“三星”的第一页数据！**
 *  归终到底，currentPageNo它就是**根据我们当前条件来进行跳转**！**如果查询条件修改了，那么PageNo默认的值是为1的**。

[SouthEast]: /images/20210827/a8494058e4cf48fba93890538a38d017.png
[SouthEast 1]: /images/20210827/de1c9262ffa348f4b649d6d2c014874b.png
[SouthEast 2]: /images/20210827/47763bac43bf4c7895906205bc45ee89.png
[SouthEast 3]: /images/20210827/2e536a3ab7674822a3b60a592d2a765c.png
[SouthEast 4]: /images/20210827/4704ea1ce2e24e02a4d2a96a35775e1e.png
[SouthEast 5]: /images/20210827/05320569878c4fc38cd9a03b5bbbe3bf.png