怎么回事?

怎么回事?

我的店铺显示可以了

我点击六个分类的时候,进去点击他们的分类可以获取到

而我在首页点全部商品之后,为什么我在点击里面的分类,分类id为空呢???

我发现越到稍微复杂的项目,因为回答的越慢,越不需要这个功能,我已经好久都没有用到这个问答了,每次提问还没等老师回答就已经解决了,因为时间太长了

$(function() {
  var loading = false;
  // 分页允许返回的最大条数,超过此数则禁止访问后台
  var maxItems = 999;
  // 一页返回的最大条数
  var pageSize = 3;
  // 获取店铺列表的URL
  var listUrl = '/frontend/listshops';
  // 获取店铺类别列表以及区域列表的URL
  var searchDivUrl = '/frontend/listshopspageinfo';
  // 页码
  var pageNum = 1;
  // 从地址栏URL里尝试获取parent shop category id.
  var parentId = getQueryString('parentId');
  var areaId = '';
  var shopCategoryId = '';
  var shopName = '';
  // 渲染出店铺类别列表以及区域列表以供搜索
  getSearchDivData();
  // 预先加载10条店铺信息
  addItems(pageSize, pageNum);
  /**
   * 获取店铺类别列表以及区域列表信息
   *
   * @returns
   */
  function getSearchDivData() {
     // 如果传入了parentId,则取出此一级类别下面的所有二级类别
     var url = searchDivUrl + '?' + 'parentId=' + parentId;
     $
           .getJSON(
                 url,
                 function(data) {
                    if (data.success) {
                       // 获取后台返回过来的店铺类别列表
                       var shopCategoryList = data.shopCategoryList;
                       var html = '';
                       html += '<a href="#" class="button" data-category-id=""> 全部类别  </a>';
                       // 遍历店铺类别列表,拼接出a标签集
                       shopCategoryList
                             .map(function(item, index) {
                                html += '<a href="#" class="button" data-category-id='
                                      + item.shopCategoryId
                                      + '>'
                                      + item.shopCategoryName
                                      + '</a>';
                             });
                       // 将拼接好的类别标签嵌入前台的html组件里
                       $('#shoplist-search-div').html(html);
                       var selectOptions = '<option value="">全部街道</option>';
                       // 获取后台返回过来的区域信息列表
                       var areaList = data.areaList;
                       // 遍历区域信息列表,拼接出option标签集
                       areaList.map(function(item, index) {
                          selectOptions += '<option value="'
                                + item.areaId + '">'
                                + item.areaName + '</option>';
                       });
                       // 将标签集添加进area列表里
                       $('#area-search').html(selectOptions);
                    }
                 });
  }

  /**
   * 获取分页展示的店铺列表信息
   *
   * @param pageSize
   * @param pageIndex
   * @returns
   */
  function addItems(pageSize, pageIndex) {
     // 拼接出查询的URL,赋空值默认就去掉这个条件的限制,有值就代表按这个条件去查询
     var url = listUrl + '?' + 'pageIndex=' + pageIndex + '&pageSize='
           + pageSize + '&parentId=' + parentId + '&areaId=' + areaId
           + '&shopCategoryId=' + shopCategoryId + '&shopName=' + shopName;
     // 设定加载符,若还在后台取数据则不能再次访问后台,避免多次重复加载
     loading = true;
     // 访问后台获取相应查询条件下的店铺列表
     $.getJSON(url, function(data) {
        if (data.success) {
           // 获取当前查询条件下店铺的总数
           maxItems = data.count;
           var html = '';
           // 遍历店铺列表,拼接出卡片集合
           data.shopList.map(function(item, index) {
              html += '' + '<div class="card" data-shop-id="'
                    + item.shopId + '">' + '<div class="card-header">'
                    + item.shopName + '</div>'
                    + '<div class="card-content">'
                    + '<div class="list-block media-list">' + '<ul>'
                    + '<li class="item-content">'
                    + '<div class="item-media">' + '<img src="'
                    + item.shopImg + '" width="44">' + '</div>'
                    + '<div class="item-inner">'
                    + '<div class="item-subtitle">' + item.shopDesc
                    + '</div>' + '</div>' + '</li>' + '</ul>'
                    + '</div>' + '</div>' + '<div class="card-footer">'
                    + '<p class="color-gray">'
                    + new Date(item.lastEditTime).Format("yyyy-MM-dd")
                    + '更新</p>' + '<span>点击查看</span>' + '</div>'
                    + '</div>';
           });
           // 将卡片集合添加到目标HTML组件里
           $('.list-div').append(html);
           // 获取目前为止已显示的卡片总数,包含之前已经加载的
           var total = $('.list-div .card').length;
           // 若总数达到跟按照此查询条件列出来的总数一致,则停止后台的加载
           if (total >= maxItems) {
              // 隐藏提示符
              $('.infinite-scroll-preloader').hide();
           } else {
              $('.infinite-scroll-preloader').show();
           }
           // 否则页码加1,继续load出新的店铺
           pageNum += 1;
           // 加载结束,可以再次加载了
           loading = false;
           // 刷新页面,显示新加载的店铺
           $.refreshScroller();
        }
     });
  }

  // 下滑屏幕自动进行分页搜索
  $(document).on('infinite', '.infinite-scroll-bottom', function() {
     if (loading)
        return;
     addItems(pageSize, pageNum);
  });

  // 点击店铺的卡片进入该店铺的详情页
  $('.shop-list').on('click', '.card', function(e) {
     var shopId = e.currentTarget.dataset.shopId;
     window.location.href = '/frontend/shopdetail?shopId=' + shopId;
  });

  // 选择新的店铺类别之后,重置页码,清空原先的店铺列表,按照新的类别去查询
  $('#shoplist-search-div').on(
        'click',
        '.button',
        function(e) {
           if (parentId) {// 如果传递过来的是一个父类下的子类
              shopCategoryId = e.target.dataset.categoryId;
              // 若之前已选定了别的category,则移除其选定效果,改成选定新的
              if ($(e.target).hasClass('button-fill')) {
                 $(e.target).removeClass('button-fill');
                 shopCategoryId = '';
              } else {
                 $(e.target).addClass('button-fill').siblings()
                       .removeClass('button-fill');
              }
              // 由于查询条件改变,清空店铺列表再进行查询
              $('.list-div').empty();
              // 重置页码
              pageNum = 1;
              addItems(pageSize, pageNum);
           } else {// 如果传递过来的父类为空,则按照父类查询
              parentId = e.target.dataset.categoryId;
              if ($(e.target).hasClass('button-fill')) {
                 $(e.target).removeClass('button-fill');
                 parentId = '';
              } else {
                 $(e.target).addClass('button-fill').siblings()
                       .removeClass('button-fill');
              }
              // 由于查询条件改变,清空店铺列表再进行查询
              $('.list-div').empty();
              // 重置页码
              pageNum = 1;
              addItems(pageSize, pageNum);
                   parentId = '';
           }

        });

  // 需要查询的店铺名字发生变化后,重置页码,清空原先的店铺列表,按照新的名字去查询
  $('#search').on('change', function(e) {
     shopName = e.target.value;
     $('.list-div').empty();
     pageNum = 1;
     addItems(pageSize, pageNum);
  });

  // 区域信息发生变化后,重置页码,清空原先的店铺列表,按照新的区域去查询
  $('#area-search').on('change', function() {
     areaId = $('#area-search').val();
     $('.list-div').empty();
     pageNum = 1;
     addItems(pageSize, pageNum);
  });

  // 点击后打开右侧栏
  $('#me').click(function() {
     $.openPanel('#panel-right-demo');
  });

  // 初始化页面
  $.init();
});


package com.xing.o2o.web.frontend;

import com.xing.o2o.dto.ShopExecution;
import com.xing.o2o.entity.Area;
import com.xing.o2o.entity.ProductCategory;
import com.xing.o2o.entity.Shop;
import com.xing.o2o.entity.ShopCategory;
import com.xing.o2o.enums.ShopEnum;
import com.xing.o2o.service.AreaService;
import com.xing.o2o.service.ShopCategoryService;
import com.xing.o2o.service.ShopService;
import com.xing.o2o.utils.HttpServletRequestUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/frontend")
public class ShopListController {
   @Autowired
   private AreaService areaService;
   @Autowired
   private ShopService shopService;
   @Autowired
   private ShopCategoryService shopCategoryService;


   //获取区域信息和商品分类信息
   @GetMapping("/listshopspageinfo")
   private Map<String,Object> listShopsPageInfo(HttpServletRequest request){
       Map<String,Object> moudelMap = new HashMap<String, Object>();
       //判断productId是否存在
       long parentId = HttpServletRequestUtil.getLong(request, "parentId");
       //如果存在测取出二级店铺下商品分类信息信息
       List<ShopCategory> shopCategoryList = null;
       if(parentId!=-1){
           ShopCategory shopCategory = new ShopCategory();
           ShopCategory se = new ShopCategory();
           se.setShopCategoryId(parentId);
           shopCategory.setParent(se);
           shopCategoryList=shopCategoryService.getShopCategoryList(shopCategory);

       }else {
           //如果不存在那么取出所有商品分类

           shopCategoryList = shopCategoryService.getShopCategoryList(null);

       }
       moudelMap.put("shopCategoryList",shopCategoryList);
       //获取区域信息
       try {
           List<Area> areaList = areaService.getAreaList();
           moudelMap.put("areaList",areaList);
           moudelMap.put("success",true);
       }catch (Exception e){
           moudelMap.put("success",false);
           moudelMap.put("errMsg",e.getMessage());
       }
       return moudelMap;
   }

   //获取分类下商品列表
   @GetMapping("/listshops")
   private Map<String,Object> shopList(HttpServletRequest request){
       Map<String,Object> moudelMap = new HashMap<String, Object>();
       int pageIndex = HttpServletRequestUtil.getInt(request, "pageIndex");
       int pageSize = HttpServletRequestUtil.getInt(request, "pageSize");
       if(pageIndex>-1&&pageSize>-1){
           long parentId = HttpServletRequestUtil.getLong(request, "parentId");
           long shopCategoryId = HttpServletRequestUtil.getLong(request, "shopCategoryId");
           int areaId = HttpServletRequestUtil.getInt(request, "areaId");
           String shopName = HttpServletRequestUtil.getString(request, "shopName");
           Shop shop = Compositequery(parentId,shopCategoryId,areaId,shopName);
           try {
               ShopExecution shopExecution = shopService.getShopList(shop, pageIndex, pageSize);
                   moudelMap.put("shopList",shopExecution.getShopList());
                   moudelMap.put("count",shopExecution.getCount());
                   moudelMap.put("success",true);
           }catch (Exception e){
               moudelMap.put("success",false);
               moudelMap.put("errMsg",e.getMessage());
           }
       }
       return moudelMap;

   }

   private Shop Compositequery(long parentId, long shopCategoryId, int areaId, String shopName) {
       Shop shop = new Shop();
       if(parentId!=-1){
           ShopCategory shopCategory = new ShopCategory();
           ShopCategory se = new ShopCategory();
           se.setShopCategoryId(parentId);
           shopCategory.setParent(se);
           shop.setShopCategory(shopCategory);
       }
       if(shopCategoryId!=-1){
           ShopCategory shopCategory = new ShopCategory();
           shopCategory.setShopCategoryId(shopCategoryId);
           shop.setShopCategory(shopCategory);
       }
       if(areaId!=-1){
           Area area = new Area();
           area.setAreaId(areaId);
           shop.setArea(area);
       }
       if(shopName!=null){
           shop.setShopName(shopName);
       }
       shop.setEnableStatus(1);
   return shop;

   }

}


http://img1.sycdn.imooc.com//climg/5e40fb1b09f9a04710820608.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕阿满 2020-02-10 19:23:27

同学你好,后边data-category-id就是分类对应的id,所以二级分类可以获取id

http://img1.sycdn.imooc.com//climg/5e413c5d095b65d306170243.jpg

查询全部类别,不需要分类id。

祝:学习愉快~

提问者 邢文凯888 2020-02-10 18:50:50

http://img1.sycdn.imooc.com//climg/5e41357109ffec1111680542.jpg

这个标签也是这样呀,这个怎么可以获取到id????

好帮手慕阿满 2020-02-10 18:42:55

同学你好,同学说的二级分类可以获取到值,是值点击二手市场,美食餐饮等可以获取值,但是点击全部类别不能获取值是吗?这个是正常的。

在全部类别中,a标签中herf是“#”,所以不能获取shopCategoryId

http://img1.sycdn.imooc.com//climg/5e41338409ed926c07560050.jpg

祝:学习愉快~

  • 提问者 邢文凯888 #1
    那怎么获取到
    2020-02-10 18:48:31
好帮手慕阿满 2020-02-10 17:15:38

同学你好,很抱歉给同学带来不好的学习体验。随着项目复杂,验证问题等时间也会变长。同学自己能够解决问题,也是一种学习,一种进步。对比同学的代码,并没有发现问题,建议同学检查一下浏览器Elements中,类别对应的html中,a标签中是否有shopCategoryId,如下代码是否有写入html中。

http://img1.sycdn.imooc.com//climg/5e411ecd09f0f48d07130361.jpg


祝:学习愉快~

  • 提问者 邢文凯888 #1
    都有呀,而且在div中也有id值,但是在一获取以后就没有了,这是为什么,主要是在过去二级分类之后点进去是可以接到值的,到了全部分类之后就获取不到了,奇怪呀!
    2020-02-10 17:18:39
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师