我们今天完成商品列表展示的功能，这个功能在商铺列表展示时就完成了，方法大同小异

DAO:

  //展示商品列表
    List<Product> queryProductList(@Param("productCondition")Product productCondition,
                                   @Param("rowIndex")int rowIndex,@Param("pageSize")int pageSize);//返回一个project集合

第一个参数是我们查询的时候传入的条件（比如我们点击某个商铺，此时商铺的信息就被存储起来的，我们要查看这个商铺下的商品列表，商铺的信息就是一个条件）

第二个参数：用来分页，就是从自己提哦啊与句显示

第三个参数：用来分页，从第二个参数开始显示多少条

我们还要实现一个查出来的商品列表总数返回个前端

   //求queryProductList查询出来的商品列表总数
    int queryProductCount(Product productCondition);

mapper.xml：

根据条件查询：

要说遇到的一个坑：https://blog.csdn.net/Sunmeok/article/details/81452312

 <!--展示查询商品列表通过相应的查询条件-->
    <select id="queryProductList" resultType="product" >
        SELECT
        tb_product.product_id,
        tb_product.product_name,
        tb_product.img_addr,
        tb_product.normal_price,
        tb_product.promotion_price,
        tb_product.priority,
        tb_product.create_time,
        tb_product.last_edit_time,
        tb_product.enable_status,
        tb_product.shop_id,
        tb_product.product_category_id
        FROM
        tb_product
            <where>
                <!-- 根据shopId 查询-->
                <if test="productCondition.shop != null and  productCondition.shop.shopId != null ">
                    and shop_id = #{productCondition.shop.shopId}
                </if>
                <!-- 根据product_category_id  查询-->
                <if test="productCondition.productCategory != null and productCondition.productCategory.productCategoryId != null">
                    and  product_category_id=#{productCondition.productCategory.productCategoryId}
                </if>
                <!-- 根据enable_status  查询-->
                <if test="productCondition.enableStatus != null">
                    and enable_status = #{productCondition.enableStatus}
                </if>
                <!-- 根据product_name  模糊查询-->
                <if test="productCondition.productName != null">
                    and product_name  like '%${productCondition.productName}%'
                </if>
        </where>
        ORDER BY
        priority
        DESC
        LIMIT #{rowIndex},#{pageSize}
    </select>

查询展示列表的总数：

<select id="queryProductCount" resultType="Integer">
        SELECT count(1)
        FROM tb_product
        <where>
            <if test="shop != null and  shop.shopId != null ">
                and shop_id = #{shop.shopId}
            </if>
            <!-- 根据product_category_id  查询-->
            <if test="productCategory != null and productCategory.productCategoryId != null">
                and product_category_id = #{productCategory.productCategoryId}
            </if>
            <!-- 根据enable_status  查询-->
            <if test="enableStatus != null">
                and enable_status = #{enableStatus}
            </if>
            <!-- 根据product_name  模糊查询-->
            <if test="productName != null">
                and product_name  like '%${productName}%'
            </if>
        </where>

    </select>

Service：

这里不需要写获得总数的service层，因为我们在service层的获得商品列表的方法里调用获取总数的方法

 //通过详情条件进行分页查询，获取商品列表
    @Override
    public ProductExecution queryProductList(Product product, int pageIndex, int pageSize) {
        List<Product> productList=null;//查到的商品列表
        int count=0;//总数
       //传入的是页数和当前页的第几个，我们通过页数转行数的转换工具来转换
        try {
            int rowIndex= Pagecalculator.calculateRowIndex(pageIndex,pageSize);
                productList=productDao.queryProductList(product,rowIndex,pageSize);
                count=productDao.queryProductCount(product);
        }catch (ProductOperationException e){
            new ProductExecution(ProductStateEnum.INNER_ERROR);
        }
        return new ProductExecution(ProductStateEnum.SUCCESS,productList,count);

    }

 有一点要注意的，前端传来的是pageSize是当前页数，我们需要将页数转为数据库的第几条语句，用工具类来实现

controller:

  /*
     * 通过前端传来的数据完成条件查询返回相应列表供前端展示
     *
     * */
    @RequestMapping(value ="/getproductlist" ,method = RequestMethod.GET)
    @ResponseBody
    private Map<String,Object> queryProductList(HttpServletRequest request){
        Map modelMap= new HashMap();//存储结果和数据
        // 获取前端传递过来的页码
        int pageIndex = HttpServletRequestUtil.getInt(request, "pageIndex");
        // 获取前端传过来的每页要求返回的商品数量
        int pageSize = HttpServletRequestUtil.getInt(request, "pageSize");

        // 从session中获取shop信息，主要是获取shopId 不依赖前台的参数，尽可能保证安全
        Shop currentShop = (Shop) request.getSession().getAttribute("currentShop");
        // 空值判断
        if ((pageIndex > -1) && (pageSize > -1) && currentShop != null && currentShop.getShopId() != null) {
            // 获取前台可能传递过来的需要检索的条件，包括是否需要从某个商品类别以及根据商品名称模糊查询某个店铺下的商品
            long productCategoryId = HttpServletRequestUtil.getLong(request, "productCategoryId");
            String productName = HttpServletRequestUtil.getString(request, "productName");
            Product productCondition=new Product();
            productCondition=compactProductConditionSearch(currentShop.getShopId(), productCategoryId, productName);
            // 调用服务
            ProductExecution pe = productService.queryProductList(productCondition, pageIndex, pageSize);
            // 将结果返回给前台
            modelMap.put("productList", pe.getProductList());
            modelMap.put("count", pe.getCount());
            modelMap.put("success", true);
        } else {
            modelMap.put("success", false);
            modelMap.put("errMsg", "empty pageSize or pageIndex or shopId");
        }
        return modelMap;
    }

步骤就是从前端获取相应的信息，然后封装起来交给后台处理并返回相应的操作状态

view：

productmanagent.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品管理</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="../resources/css/shop/productmanage.css">
</head>
<body>
<header class="bar bar-nav">
    <h1 class="title">商品管理</h1>
</header>
<div class="content">
    <div class="content-block">
        <div class="row row-product">
            <div class="col-33">商品名称</div>
            <div class="col-33">优先级</div>
            <div class="col-33">操作</div>
        </div>
        <div class="product-wrap">
            <!-- <div class="row row-product">
                <div class="col-40">商品名称</div>
                <div class="col-60">
                    <a href="#">编辑</a>
                    <a href="#">删除</a>
                    <a href="#">预览</a>
                </div>
            </div> -->
        </div>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-50">
                <a href="/storepro/shopadmin/shopmanagement"
                   class="button button-big button-fill button-danger">返回</a>
            </div>
            <div class="col-50">
                <a href="/storepro/shopadmin/productoperation" class="button button-big button-fill button-success" id="new">新增</a>
            </div>
        </div>
    </div>
</div>



<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/shop/productmanage.js' charset='utf-8'></script>
</body>
</html>

productmanage.css

.row-product {
    border: 1px solid #999;
    padding: .5rem;
    border-bottom: none;
}
.row-product:last-child {
    border-bottom: 1px solid #999;
}
.product-name {
    white-space: nowrap;
    overflow-x: scroll;
}
.product-wrap a {
    margin-right: 1rem;
}

productmanage.js

$(function() {
    var listUrl = '/storepro/shopadmin/getproductlist?pageIndex=1&pageSize=9999';
    var changeStuatusURL = '/storepro/shopadmin/modifyproduct';

    getList();
    /**
     * 获取此店铺下的商品列表
     *
     * @returns
     */
    function getList() {
        // 从后台获取此店铺的商品列表
        $.getJSON(listUrl, function(data) {
            if (data.success) {
                var productList = data.productList;
                var tempHtml = '';
                // 遍历每条商品信息，拼接成一行显示，列信息包括：
                // 商品名称，优先级，上架\下架(含productId)，编辑按钮(含productId)
                // 预览(含productId)
                productList.map(function(item, index) {
                    var textOp = "下架";
                    var contraryStatus = 0;
                    if (item.enableStatus == 0) {
                        // 若状态值为0，表明是已下架的商品，操作变为上架(即点击上架按钮上架相关商品)
                        textOp = "上架";
                        contraryStatus = 1;
                    } else {
                        contraryStatus = 0;
                    }
                    // 拼接每件商品的行信息
                    tempHtml += '' + '<div class="row row-product">'
                        + '<div class="col-33">'
                        + item.productName
                        + '</div>'
                        + '<div class="col-20">'
                        + item.priority
                        + '</div>'
                        + '<div class="col-40">'
                        + '<a href="#" class="edit" data-id="'
                        + item.productId
                        + '" data-status="'
                        + item.enableStatus
                        + '">编辑</a>'
                        + '<a href="#" class="status" data-id="'
                        + item.productId
                        + '" data-status="'
                        + contraryStatus
                        + '">'
                        + textOp
                        + '</a>'
                        + '<a href="#" class="preview" data-id="'
                        + item.productId
                        + '" data-status="'
                        + item.enableStatus
                        + '">预览</a>'
                        + '</div>'
                        + '</div>';
                });
                // 将拼接好的信息赋值进html控件中
                $('.product-wrap').html(tempHtml);
            }
        });
    }
    // 将class为product-wrap里面的a标签绑定上点击的事件
    $('.product-wrap')
        .on(
            'click',
            'a',
            function(e) {
                var target = $(e.currentTarget);
                if (target.hasClass('edit')) {
                    // 如果有class edit则点击就进入店铺信息编辑页面，并带有productId参数
                    window.location.href = '/storepro/shopadmin/productoperation?productId='
                        + e.currentTarget.dataset.id;
                } else if (target.hasClass('status')) {
                    // 如果有class status则调用后台功能上/下架相关商品，并带有productId参数
                    changeItemStatus(e.currentTarget.dataset.id,
                        e.currentTarget.dataset.status);
                } else if (target.hasClass('preview')) {
                    // 如果有class preview则去前台展示系统该商品详情页预览商品情况
                    window.location.href = '/storepro/frontend/productdetail?productId='
                        + e.currentTarget.dataset.id;
                }
            });
    function changeItemStatus(id, enableStatus) {
        // 定义product json对象并添加productId以及状态(上架/下架)
        var product = {};
        product.productId = id;
        product.enableStatus = enableStatus;
        $.confirm('确定么?', function() {
            // 上下架相关商品
            $.ajax({
                url : changeStuatusURL,
                type : 'POST',
                data : {
                    productStr : JSON.stringify(product),
                    statusChange : true
                },
                dataType : 'json',
                success : function(data) {
                    if (data.success) {
                        $.toast('操作成功！');
                        getList();
                    } else {
                        $.toast('操作失败！');
                    }
                }
            });
        });
    }
});

展示