day1:pc端分页显示数据

1.根据名称搜索商品信息,并以分页的方式显示出来

后端:

    @Override
    public Map<String, Object> getSearchProduct(String productName, int currentPage ) {
        Map<String, Object> map = new HashMap<String, Object>();
        ProductExample example = new ProductExample();
        ProductExample.Criteria criteria = example.createCriteria();
        criteria.andNameLike("%"+productName+"%");
        example.setOrderByClause("hot DESC, id DESC ");
        Integer pageSize = 8;
        List<Product> products = this.pagingTool.PagingData("com.sybinal.shop.mapper.ProductMapper.selectByExample", example, currentPage, pageSize);
        int totalCount = this.productMapper.selectByExample(example).size();
        map.put("currentPage", currentPage);
        map.put("pageSize", pageSize);
        map.put("totalPage", Page.confirmPage(totalCount, pageSize));
        map.put("totalCount", totalCount);
        map.put("productList", products);
        return map;
    }

 

前端:数据显示

<template v-if="productListPage&&productListPage.productList.length>0">
          <ul class="shop-item-list row list-inline nomargin">
            <!-- 产品-->
            <li class="col-lg-3 col-sm-3" v-for="product in productListPage.productList">
              <div class="shop-item">
                <div class="thumbnail">
                  <!-- product image(s) -->
                  <a @click="goto('/product','Product',product.id)" class="shop-item-image">
                    <img class="img-responsive" v-bind:src="API.BASE_SERVER_URL+product.defaultImg">
                  </a>
                  <!-- /product image(s) -->
                  <!-- hover buttons -->
                  <div class="shop-option-over">
                    <a
                      class="btn btn-default add-wishlist"
                      @click="addWish(product.id)"
                      data-toggle="tooltip"
                      title="添加收藏"
                    >
                      <i class="fa fa-heart nopadding"></i>
                    </a>
                  </div>
                  <!-- /hover buttons -->
                  <!-- product more info -->
                  <div class="shop-item-info"></div>
                  <!-- /product more info -->
                </div>
                <div class="shop-item-summary text-center">
                  <h2>{{product.name}}</h2>
                  <!-- price -->
                  <div class="shop-item-price">
                    <span class="line-through">￥{{product.price / 100}}</span>
                    ￥{{product.shopPrice / 100}}
                  </div>
                  <!-- /price -->
                </div>
                <!-- /buttons -->
              </div>
            </li>
            <!-- /产品 -->
          </ul>
</template>

 

前端:页码显示

<!-- Pagination Default -->
          <div class="text-center">
                <ul class="pagination bootpag">
                  <li data-lp="1" class="prev disabled">
                    <a href="javascript:void(0);">&lt;</a>
                  </li>
                  <li data-lp="index"   v-for="index in productListPage.totalPage" @click="active(index)" :key="index">
                    <a href="javascript:void(0);" >{{index}}</a>
                  </li>
                  <li data-lp="2" class="next">
                    <a href="javascript:void(0);">&gt;</a>
                  </li>
                </ul>
          </div>
<!-- /Pagination Default -->



<script>
search(productName, currentPage) {
      if ((productName, currentPage)) {
        var vm = this;        
        vm.$get(
          vm.API.API_URL_CATALOG_SEARCH_PRODUCTS +
            "/" +
            productName +
            "/page/" +
            currentPage
        ).then(res => {
          if (res.errorCode == 0) {
           vm.productListPage = res.data;
          }
        });

        var params = {
          name: productName
        };
        vm.Storage.Session.set("data", params);
      }
    }

active(index){
      this.search(this.productName,index)
}
</script>

 

注意:后端把页面大小(pageSIze)写死了,所以前端的页面上每次只能展示固定的数据

 

2.效果图