移動商城第七篇【查詢商品、分頁查詢、數據回顯】

時間  2019-11-08
標籤 移動 商城 第七 查詢商品、分頁查詢、數據回顯 欄目 無線 简体版
原文   原文鏈接

逆向生成item

將表名設置成eb_item就好了。javascript

<table schema="" tableName="eb_item" enableCountByExample="false"
            enableUpdateByExample="false" enableDeleteByExample="false"
            enableSelectByExample="false" selectByExampleQueryId="false"
        >
        </table>

查詢商品

因爲咱們查詢商品的話，可能商品的數量是很是大的，所以咱們須要用到分頁…css

對於分頁，咱們如今就一點也不陌生了。無非就是把分頁所用到的數據封裝到page對象中，咱們在dao層前端

首先，咱們來看一下對應的原型界面把：java

這裏寫圖片描述

咱們想要看這個原型界面的話，如今是點不進去的了，由於咱們把JSP文件放在WEB-INF下了。所以，咱們用Controller作一個轉發就好了。jquery

建立商品的Controller

@Controller
@RequestMapping("item")
public class EbItemController {

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

}

接着，修改頁面上跳轉的請求連接：sql

<li><a href="${path}/item/listItem.do"><samp class="t05"></samp>商品錄入/上下架</a></li>

咱們發現頁面是這樣子的。數據庫

這裏寫圖片描述

咱們能夠從原型界面上知道：用戶能夠根據多個條件來對咱們的數據進行篩選，而且咱們是須要作分頁的。ruby

建立查詢條件對象

因爲查詢條件有多個，那麼咱們能夠把這些條件封裝成一個對象。markdown

在頁面上咱們能夠發現到4個查詢條件：app

這裏寫圖片描述

用於咱們的分頁有三個條件變量

  • 開始頁數
  • 結束頁數
  • 當前頁數【頁面傳遞過來的】

所以，咱們的查詢對象是這樣子的：

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的。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程