qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 物联网/工业互联网 › 物联网 › 043 商品详情

043 商品详情

[复制链接]
发表于 2025-12-23 17:17:49 | 显示全部楼层 |阅读模式
详情页数据

1.sku根本信息
2.sku图片信息(多个图片)
3.spu的贩卖属性
4.spu的形貌信息
5.sku分组规格参数属性值
表结构


vo

SkuItemVo.java

  1. package com.xd.cubemall.product.vo;
  3. import com.xd.cubemall.product.entity.SkuImagesEntity;
  4. import com.xd.cubemall.product.entity.SkuInfoEntity;
  5. import com.xd.cubemall.product.entity.SpuInfoDescEntity;
  6. import lombok.Data;
  7. import lombok.ToString;
  9. import java.util.List;
  11. @ToString
  12. @Data
  13. public class SkuItemVo {
  15.     //1.sku基本信息
  16.     private SkuInfoEntity info;
  18.     //2.sku图片信息
  19.     private List<SkuImagesEntity> images;
  22.     //3.spu的销售属性组合
  23.     private List<SkuItemSaleAttrVo> attrSales;
  25.     //4.spu描述信息
  26.     private SpuInfoDescEntity desc;
  28.     //5.spu分组(主体，基本信息...)规格属性
  29.     private List<SpuAttrGroupVo> attrGroups;
  32. }
复制代码
SkuItemSaleAttrVo.java

  1. package com.xd.cubemall.product.vo;
  4. import lombok.Data;
  5. import lombok.ToString;
  7. import java.util.List;
  9. @ToString
  10. @Data
  11. public class SkuItemSaleAttrVo {
  12.     private Long attrId;
  13.     private String attrName;
  14.     //属性值
  15.     private List<AttrValueAndSkuIdVo> attrValues;
  17. }
复制代码
AttrValueAndSkuIdVo.java

  1. package com.xd.cubemall.product.vo;
  4. import lombok.Data;
  5. import lombok.ToString;
  7. @ToString
  8. @Data
  9. public class AttrValueAndSkuIdVo {
  11.     // skuids组合id
  12.     private String skuIds;
  14.     // 属性值: 白色，128G
  15.     private String attrValue;
  16. }
复制代码
SpuAttrGroupVo.java

  1. package com.xd.cubemall.product.vo;
  3. import lombok.Data;
  4. import lombok.ToString;
  6. import java.util.List;
  8. @ToString
  9. @Data
  10. public class SpuAttrGroupVo {
  12.     private String groupName;
  14.     // 属性参数
  15.     private List<Attr> attrs;
  16. }
复制代码
GroupAttrParamVo.java

  1. package com.xd.cubemall.product.vo;
  4. import lombok.Data;
  5. import lombok.ToString;
  7. @ToString
  8. @Data
  9. public class GroupAttrParamVo {
  10.     private Long spuId;
  11.     private Long categoryId;
  12. }
复制代码
pom.xml

  2.         <!--添加模板技术渲染页面-->
  3.         <dependency>
  4.             <groupId>org.springframework.boot</groupId>
  5.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  6.         </dependency>
复制代码
  在MySQL中，当启用了ONLY_FULL_GROUP_BY SQL模式时，假如一个SELECT查询包罗聚合函数（如GROUP_CONCAT），那么全部非聚合的列都必须在GROUP BY子句中明白指定。这是由于ONLY_FULL_GROUP_BY模式要求全部的结果列要么是通过聚合函数处理处罚的，要么是在GROUP BY子句中明白指定的。
  从错误信息来看，查询试图在不使用GROUP BY子句的情况下选择非聚合列v.attr_id、v.attr_name和v.attr_value，同时还使用了聚合函数GROUP_CONCAT(v.sku_id)。这违背了ONLY_FULL_GROUP_BY的规则。
  为相识决这个题目，必要修改查询，添加一个GROUP BY子句，包罗全部非聚合的列。如许，每个组都会有唯一的attr_id、attr_name和attr_value，而GROUP_CONCAT则会将同一组内的sku_id毗连起来。

  SkuSaleAttrValueDao.xml

  1.     <resultMap id="spuSaleAttrMap" type="com.xd.cubemall.product.vo.SkuItemSaleAttrVo">
  2.         <result property="attrId" column="attr_id"></result>
  3.         <result property="attrName" column="attr_name"></result>
  4.         <collection property="attrValues" ofType="com.xd.cubemall.product.vo.AttrValueAndSkuIdVo">
  5.             <result property="skuIds" column="skuIds"></result>
  6.             <result property="attrValue" column="attr_value"></result>
  7.         </collection>
  8.     </resultMap>
  11.     <!--sql: tb_sku_info,tb_sku_sale_attr_value-->
  12.     <select id="getSaleAttrs" resultMap="spuSaleAttrMap" parameterType="java.lang.Long">
  13.         SELECT
  14.             v.attr_id,
  15.             v.attr_name,
  16.             v.attr_value,
  17.             GROUP_CONCAT( v.sku_id ) AS skuIds
  18.         FROM
  19.             tb_sku_info i
  20.                 LEFT JOIN tb_sku_sale_attr_value v ON i.id = v.sku_id
  21.         WHERE
  22.             spu_id = #{spuId}
  23.         GROUP BY
  24.             v.attr_id,
  25.             v.attr_name,
  26.             v.attr_value;
  27.     </select>
复制代码
SkuSaleAttrValueDao.java

  1. package com.xd.cubemall.product.dao;
  3. import com.xd.cubemall.product.entity.SkuSaleAttrValueEntity;
  4. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  5. import com.xd.cubemall.product.vo.SkuItemSaleAttrVo;
  6. import org.apache.ibatis.annotations.Mapper;
  8. import java.util.List;
  10. /**
  11. * sku销售属性值
  12. *
  13. * @author xuedong
  14. * @email email@gmail.com
  15. * @date 2024-08-13 01:36:04
  16. */
  17. @Mapper
  18. public interface SkuSaleAttrValueDao extends BaseMapper<SkuSaleAttrValueEntity> {
  19.     public List<SkuItemSaleAttrVo> getSaleAttrs(Long spuId);
  20. }
复制代码
AttrGroupDao.xml

  1.     <resultMap id="spuAttrGroupMap" type="com.xd.cubemall.product.vo.SpuAttrGroupVo">
  2.         <result property="groupName" column="groupName"></result>
  3.         <collection property="attrs" ofType="com.xd.cubemall.product.vo.Attr">
  4.             <result property="attrName" column="attrName"></result>
  5.             <result property="attrValue" column="attrValue"></result>
  6.         </collection>
  7.     </resultMap>
  10.     <!--SQL: 根据spuID,categoryId 查询 sku分组规格参数属性值-->
  12.     <select id="getGroupAttr" resultMap="spuAttrGroupMap" parameterType="com.xd.cubemall.product.vo.GroupAttrParamVo">
  13.         SELECT
  14.             g.NAME AS groupName,
  15.             v.attr_name AS attrName,
  16.             v.attr_value AS attrValue
  17.         FROM
  18.             tb_product_attr_value v
  19.                 JOIN tb_attr_attrgroup_relation r ON v.attr_id = r.attr_id
  20.                 JOIN tb_attr_group g ON r.attr_group_id = g.id
  21.         WHERE
  22.             spu_id = #{spuId}
  23.           AND g.category_id = #{categoryId}
  24.     </select>
复制代码
AttrGroupServiceImpl.java

  1.     //根据spuID,categoryId 查询 sku分组规格参数属性值
  2.     @Override
  3.     public List<SpuAttrGroupVo> getGroupAttr(Long spuId, Long categoryId) {
  5.         GroupAttrParamVo paramVo = new GroupAttrParamVo();
  6.         paramVo.setSpuId(spuId);
  7.         paramVo.setCategoryId(categoryId);
  9.         List<SpuAttrGroupVo> attrGroupVos = this.baseMapper.getGroupAttr(paramVo);
  10.         return attrGroupVos;
  11.     }
复制代码
SkuInfoServiceImpl.java

  1.     @Autowired
  2.     private SkuImagesService skuImagesService;
  4.     //注入销售属性组合服务
  5.     @Autowired
  6.     private SkuSaleAttrValueService skuSaleAttrValueService;
  8.     //注入spu描述服务
  9.     @Autowired
  10.     private SpuInfoDescService spuInfoDescService;
  12.     @Autowired
  13.     private AttrGroupService attrGroupService;
  15.     @Override
  16.     public SkuItemVo skuItem(Long skuId) {
  18.         // 新建一个包装类对象
  19.         SkuItemVo itemVo = new SkuItemVo();
  22.         /*
  23.         1.sku基本信息
  24.         2.sku图片信息(多个图片)
  25.         3.spu的销售属性
  26.         4.spu的描述信息
  27.         5.sku分组规格参数属性值
  28.          */
  31.         // 1.根据skuId 查询 sku基本信息
  32.         SkuInfoEntity skuInfoEntity = this.getById(skuId);
  33.         itemVo.setInfo(skuInfoEntity);
  35.         // 获取sku与之对应的spuId
  36.         Long spuId = skuInfoEntity.getSpuId();
  37.         // 获取分类id
  38.         Long categoryId = skuInfoEntity.getCategoryId();
  40.         // 2.根据skuId查询sku图片信息(多个图片)，skuId是外键
  41.         List<SkuImagesEntity> imageList = skuImagesService.list(new QueryWrapper<SkuImagesEntity>().eq("sku_id", skuId));
  42.         itemVo.setImages(imageList);
  44.         //3.根据spuID获取spu的销售属性
  45.         List<SkuItemSaleAttrVo> saleAttrVos = skuSaleAttrValueService.getSaleAttrs(spuId);
  46.         itemVo.setAttrSales(saleAttrVos);
  48.         //4.根据spuId查询spu的描述信息
  49.         SpuInfoDescEntity spuInfoDescEntity = spuInfoDescService.getOne(new QueryWrapper<SpuInfoDescEntity>().eq("spu_id",spuId));
  50.         itemVo.setDesc(spuInfoDescEntity);
  52.         //5.根据spuID,categoryId查询 sku分组规格参数属性值
  53.         List<SpuAttrGroupVo> attrGroupVos = attrGroupService.getGroupAttr(spuId,categoryId);
  54.         itemVo.setAttrGroups(attrGroupVos);
  55.         return itemVo;
  56.     }
复制代码
SkuSaleAttrValueServiceImpl.java

  1.     /**
  2.      * 根据id查询销售属性组合
  3.      * @param spuId
  4.      * @return
  5.      */
  6.     @Override
  7.     public List<SkuItemSaleAttrVo> getSaleAttrs(Long spuId) {
  8.         //List<SkuItemSaleAttrVo> saleAttrVos = skuSaleAttrValueService.getSaleAttrs(spuId);
  9.         List<SkuItemSaleAttrVo> saleAttrVos = this.baseMapper.getSaleAttrs(spuId);
  10.         return saleAttrVos;
  11.     }
复制代码
AttrGroupDao.java

  1. package com.xd.cubemall.product.dao;
  3. import com.xd.cubemall.product.entity.AttrGroupEntity;
  4. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  5. import com.xd.cubemall.product.vo.GroupAttrParamVo;
  6. import com.xd.cubemall.product.vo.SpuAttrGroupVo;
  7. import org.apache.ibatis.annotations.Mapper;
  9. import java.util.List;
  11. /**
  12. * 属性分组表
  13. *
  14. * @author xuedong
  15. * @email email@gmail.com
  16. * @date 2024-08-13 01:36:04
  17. */
  18. @Mapper
  19. public interface AttrGroupDao extends BaseMapper<AttrGroupEntity> {
  20.     //根据spuID,categoryId 查询 sku分组规格参数属性值
  21.     public List<SpuAttrGroupVo> getGroupAttr(GroupAttrParamVo paramVo);
  22. }
复制代码
SkuSaleAttrValueDao.java

  1. package com.xd.cubemall.product.dao;
  3. import com.xd.cubemall.product.entity.SkuSaleAttrValueEntity;
  4. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  5. import com.xd.cubemall.product.vo.SkuItemSaleAttrVo;
  6. import org.apache.ibatis.annotations.Mapper;
  8. import java.util.List;
  10. /**
  11. * sku销售属性值
  12. *
  13. * @author xuedong
  14. * @email email@gmail.com
  15. * @date 2024-08-13 01:36:04
  16. */
  17. @Mapper
  18. public interface SkuSaleAttrValueDao extends BaseMapper<SkuSaleAttrValueEntity> {
  19.     public List<SkuItemSaleAttrVo> getSaleAttrs(Long spuId);
  20. }
复制代码
SkuItemController.java

  1. package com.xd.cubemall.product.web;
  4. import com.xd.cubemall.product.service.SkuInfoService;
  5. import com.xd.cubemall.product.vo.SkuItemVo;
  6. import lombok.extern.slf4j.Slf4j;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.ui.Model;
  10. import org.springframework.web.bind.annotation.GetMapping;
  11. import org.springframework.web.bind.annotation.PathVariable;
  12. import org.springframework.web.bind.annotation.RestController;
  13. @Slf4j
  14. @Controller
  15. public class SkuItemController {
  18.     @Autowired
  19.     private SkuInfoService skuInfoService;
  21.     /**
  22.      * 根据skuId查询商品详情信息
  23.      */
  25.     @GetMapping("/{skuId}.html")
  26.     public String skuItem(@PathVariable Long skuId, Model model){
  27.         // 调用服务层商品详情接口
  28.         SkuItemVo itemVo = skuInfoService.skuItem(skuId);
  30.         // 输出日志日志
  31.         log.info("商品详情接口，查询的数据：{}",itemVo);
  33.         // 把数据放入模型驱动
  34.         model.addAttribute("item",itemVo);
  36.         // 返回视图页面，做视图数据渲染
  38.         return "item";
  39.     }
  40. }
复制代码
默认

  1.                                     <a href="javascript:;" th:attr="class=${#lists.contains(#strings.listSplit(attrvalues.skuIds,','),item.info.id.toString())?'sku_attr_value selected':'sku_attr_value'},skus=${attrvalues.skuIds}">
  3.         <!--th:v-bind:class="|{selected:sel('${spec.key}','${arrValue}')}|"-->
  4. <!--                                       th:@click="|selectSpecification('${spec.key}','${arrValue}')|" >-->
  5. <!--                                        <i th:text="${arrValue}"></i>-->[[${attrvalues.attrValue}]]
  6.                                         <span title="点击取消选择">&nbsp;</span>
  7.                                     </a>
复制代码
点击选中

  1.     $(".sku_attr_value").click(function () {
  2.         // 移除选中状态
  3.         $(this).parent().parent().find(".sku_attr_value").removeClass("selected");
  4.         // 给点击元素添加选中状态属性
  5.         $(this).addClass("selected");
  7.         let skus = new Array();
  8.         //选择不同的规格属性后，根据不同的属性id重新加载相应的数据
  9.         $("a[class='sku_attr_value selected']").each(function () {
  10.             skus.push($(this).attr("skus").split(","));
  11.         })
  12.         // 获取第0个元素
  13.         let sku_1 = skus[0];
  14.         // 白色： skuIds  = {1,3}
  15.         // 128GB : skuIds = {3,9}
  16.         // 白色+128GB 规则属性组合的id : 求交集 ，skuId = 3
  17.         for(let i=1;i<skus.length;i++){
  18.             // 遍历每一个属性的skuids，获取交集
  19.             // 比如：白色： skuIds  = {1,3}，128GB : skuIds = {3,9} ，此时： {1,3}.filter({3,9}) = 3
  20.             sku_1 = $(sku_1).filter(skus[i])[0];
  21.         }
  23.         // 拼接请求
  24.         location.href = "http://localhost:8081/"+sku_1+".html";
  26.     })
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

玛卡巴卡的卡巴卡玛
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表