• 【畅购商城】详情页详情之商品详情

    1.构建详情页

    步骤0：确定访问路径

    http://localhost:3000/Goods?id=1

     

    步骤二：复制 ~/static/goods.html 内容，导入第三方资源（css、js） 

    1.  head: {
    2.     title: '列表页面',
    3.     link: [
    4.       {rel:'stylesheet',href: '/style/goods.css'},
    5.       {rel:'stylesheet',href: '/style/common.css'},
    6.       {rel:'stylesheet',href: '/style/bottomnav.css'},
    7.       {rel:'stylesheet',href: '/style/jqzoom.css'},
    8.     ],
    9.     script: [
    10.       { type: 'text/javascript', src: '/js/header.js' },
    11.       { type: 'text/javascript', src: '/js/goods.js' },
    12.       { type: 'text/javascript', src: '/js/jqzoom-core.js' },
    13.     ]
    14.   },

    步骤三：导入公共资源

    步骤四：添加原页面js特效

     

    2.详情

    2.1分析

    2.2接口

    GET http://localhost:10010/web-service/sku/goods/2600242

    返回值

    1. {
    2.     skuid:"商品ID，skuid",
    3.     spuid:"商品ID，skuid",
    4.     goods_name:"商品名称",
    5.     price:"价格",
    6.     on_sale_date:"上架时间",
    7.     comment_count:"评论数量",
    8.     comment_level:"评论级别(1-5)",
    9.     cat1_info:{
    10.         id:"分类ID",
    11.         cat_name:"分类名称"
    12.     },
    13.     cat2_info:{
    14.         id:"分类ID",
    15.         cat_name:"分类名称"
    16.     },
    17.     cat3_info:{
    18.         id:"分类ID",
    19.         cat_name:"分类名称"
    20.     },
    21.     logo:{
    22.         smlogo:"小LOGO(50x50)",
    23.         biglogo:"大LOGO(350x350)",
    24.         xbiglogo:"超大LOGO(800x800)"
    25.     },
    26.     photos:[
    27.         {
    28.             smimg:"商品图片(50x50)",
    29.             bigimg:"商品图片(350x350)",
    30.             xbigimg:"商品图片(800x800)"
    31.         },
    32.         ...
    33.     ],
    34.     description:"商品描述",
    35.     aftersale:"售后",
    36.     stock:"库存量",
    37.     spec_list:[
    38.         {
    39.             id:"规格ID",
    40.             spec_name:"规格名称",
    41.             options:[
    42.                 {
    43.                     id:"选项ID",
    44.                     option_name:"选项名称"
    45.                 }
    46.                 ...
    47.             ]
    48.         }
    49.         ...
    50.     ],
    51.     spec_info:{
    52.             id_list:"规格ID:选项ID|规格ID:选项ID|...",
    53.             id_txt:"规格名称:规格选项|规格名称:规格选项|..."
    54.     },
    55.     sku_list:[
    56.         {
    57.             skuid:"SKUID",
    58.             id_list:"规格ID:选项ID|规格ID:选项ID|..."
    59.         },
    60.         ...
    61.     ]
    62. }

     

    ​​​​​​2.3​初始化数据

    1. insert into tb_sku_photo(sku_id,url) values(2600242,'http://img12.360buyimg.com/n1/s450x450_jfs/t1/100605/24/7603/222062/5dfc6d30Ec375bf0a/e29b6690731acb24.jpg');
    2. insert into tb_sku_photo(sku_id,url) values(2600242,'http://img12.360buyimg.com/n1/s450x450_jfs/t1/110371/2/1323/189888/5dfc6d30E073c3495/cb256ec2d3cf9ae2.jpg');
    3. insert into tb_sku_photo(sku_id,url) values(2600242,'http://img12.360buyimg.com/n1/s450x450_jfs/t1/95005/38/7465/139593/5dfc6d2fEd2317126/63b5253237353618.jpg');

    ​​​​​​2.4​后端实现：JavaBean

    SkuPhoto ： sku对应的所有图片

    OneSkuResult：用于封装sku详情

    步骤一：创建SkuPhoto，根据tb_sku_photo表编写内容

     

    1. package com.czxy.changgou4.pojo;
    2.  
    3. import com.baomidou.mybatisplus.annotation.IdType;
    4. import com.baomidou.mybatisplus.annotation.TableField;
    5. import com.baomidou.mybatisplus.annotation.TableId;
    6. import com.baomidou.mybatisplus.annotation.TableName;
    7. import com.fasterxml.jackson.annotation.JsonProperty;
    8. import lombok.Data;
    9.  
    10. /**
    11.  * Created by liangtong.
    12.  */
    13. @TableName("tb_sku_photo")
    14. @Data
    15. public class SkuPhoto {
    16.  
    17.     @TableId(type = IdType.AUTO)
    18.     private Integer id;
    19.     //外键
    20.     @TableField(value="sku_id")
    21.     @JsonProperty("sku_id")
    22.     private Integer skuId;
    23.     @TableField(exist = false)
    24.     private Sku sku;
    25.  
    26.     @TableField(value="url")
    27.     private String url;
    28.  
    29. }

    步骤二：创建OneSkuResult，根据接口返回结果编写内容

    1. package com.czxy.changgou4.vo;
    2.  
    3. import com.czxy.changgou4.pojo.Category;
    4. import com.czxy.changgou4.pojo.Specification;
    5. import com.fasterxml.jackson.annotation.JsonProperty;
    6. import lombok.Data;
    7.  
    8. import java.util.Date;
    9. import java.util.List;
    10. import java.util.Map;
    11.  
    12. /**
    13.  * @author 桐叔
    14.  * @email liangtong@itcast.cn
    15.  */
    16. @Data
    17. public class OneSkuResult {
    18.  
    19.     private Integer skuid;
    20.     private Integer spuid;
    21.     @JsonProperty("goods_name")
    22.     private String goodsName;
    23.     private Double price;
    24.     @JsonProperty("on_sale_date")
    25.     private Date onSaleDate;
    26.     @JsonProperty("comment_count")
    27.     private Integer commentCount;
    28.     @JsonProperty("comment_level")
    29.     private Integer commentLevel;
    30.     @JsonProperty("cat1_info")
    31.     private Category cat1Info;
    32.     @JsonProperty("cat2_info")
    33.     private Category cat2Info;
    34.     @JsonProperty("cat3_info")
    35.     private Category cat3Info;
    36.     private Map logo;
    37.     private List photos;
    38.     private String description;
    39.     private String aftersale;
    40.     private Integer stock;
    41.     @JsonProperty("spec_list")
    42.     private List specList;
    43.     // id_list:'规格ID:选项ID|规格ID:选项ID|...',
    44.     // id_txt:'规格名称:选项名称|规格名称:选项名称|...'
    45.     @JsonProperty("spec_info")
    46.     private Map specInfo;
    47.     @JsonProperty("sku_list")
    48.     private List> skuList;
    49.  
    50. }

    ​​​​​​​2.5后端实现：Mapper

    步骤一：修改skuCommentMapper，完成“评论级别”功能

    1.  /**
    2.      * 通过spu查询评论打分(星星)的平均数
    3.      * @param spuId
    4.      * @return
    5.      */
    6.     @Select("SELECT AVG(star) FROM tb_sku_comment WHERE spu_id = #{spuId}")
    7.     public Integer findAvgStarBySpuId(@Param("spuId") Integer spuId);

    步骤二：创建SkuPhotoMapper，完成“通过skuId查询对应的所有的图片”功能

    1. package com.czxy.changgou4.mapper;
    2.  
    3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    4. import com.czxy.changgou4.pojo.SkuPhoto;
    5. import org.apache.ibatis.annotations.Mapper;
    6. import org.apache.ibatis.annotations.Result;
    7. import org.apache.ibatis.annotations.Results;
    8. import org.apache.ibatis.annotations.Select;
    9.  
    10. import java.util.List;
    11.  
    12. /**
    13.  * Created by liangtong.
    14.  */
    15. @Mapper
    16. public interface SkuPhotoMapper extends BaseMapper {
    17.  
    18.     /**
    19.      * 通过skuId查询对应的所有的图片
    20.      * @param spuId
    21.      * @return
    22.      */
    23.     @Select("select * from tb_sku_photo where sku_id = #{spuId}")
    24.     @Results({
    25.             @Result(property="id", column="id"),
    26.             @Result(property="skuId", column="sku_id"),
    27.             @Result(property="url", column="url")
    28.     })
    29.     public List findSkuPhotoBySkuId(Integer spuId);
    30.  
    31. }

    步骤三：修改SkuMapper，添加“查询指定spuId的所有sku”功能

    1. /**
    2.  * 查询指定spuId的所有sku
    3.  * @param spuId
    4.  * @return
    5.  */
    6. @Select("select * from tb_sku where spu_id = #{spuId}")
    7. @ResultMap("skuResult")
    8. public  List findSkuBySpuId(Integer spuId);

     

    2.6后端实现

    步骤一：修改SkuService，添加findSkuById 方法

    1. /**
    2.  * 查询详情
    3.  * @param skuid
    4.  * @return
    5.  */
    6. public OneSkuResult findSkuById(Integer skuid);

    步骤二：修改SkuServiceImpl，完成“查询详情”功能

    1. package com.czxy.changgou4.service.impl;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    5. import com.czxy.changgou4.mapper.*;
    6. import com.czxy.changgou4.pojo.Sku;
    7. import com.czxy.changgou4.pojo.SkuPhoto;
    8. import com.czxy.changgou4.pojo.Specification;
    9. import com.czxy.changgou4.pojo.Spu;
    10. import com.czxy.changgou4.service.SkuService;
    11. import com.czxy.changgou4.vo.ESData;
    12. import com.czxy.changgou4.vo.OneSkuResult;
    13. import org.springframework.stereotype.Service;
    14. import org.springframework.transaction.annotation.Transactional;
    15.  
    16. import javax.annotation.Resource;
    17. import java.util.ArrayList;
    18. import java.util.HashMap;
    19. import java.util.List;
    20. import java.util.Map;
    21.  
    22. /**
    23.  * @author 桐叔
    24.  * @email liangtong@itcast.cn
    25.  */
    26. @Service
    27. @Transactional
    28. public class SkuServiceImpl extends ServiceImpl implements SkuService {
    29.  
    30.     @Resource
    31.     private SkuCommentMapper skuCommentMapper;
    32.  
    33.     @Resource
    34.     private SpuMapper spuMapper;
    35.  
    36.     @Resource
    37.     private CategoryMapper categoryMapper;
    38.  
    39.     @Resource
    40.     private SkuPhotoMapper skuPhotoMapper;
    41.  
    42.     @Resource
    43.     private SpecificationMapper specificationMapper;
    44.  
    45.     @Override
    46.     public List findESData() {
    47.         //1 查询所有详情sku
    48.         List skulist = baseMapper.findAllSkus();
    49.  
    50.         //2 将SKU 转换成 ESData
    51.         List esDataList = new ArrayList<>();
    52.  
    53.         for (Sku sku:skulist){
    54.             ESData esData = new ESData();
    55.             // id
    56.             esData.setId(sku.getId());
    57.             // 图片地址
    58.             esData.setLogo(sku.getSpu().getLogo());
    59.             // 商品名称
    60.             esData.setSkuName(sku.getSkuName());
    61.             // all  “华为xx {"机身颜色":"白色","内存":"3GB","机身存储":"16GB"} 荣耀 ”
    62.             esData.setAll(sku.getSkuName()+"   " + sku.getSpecInfoIdTxt() + "   " +sku.getSpu().getBrand().getBrandName());
    63.             // on_sale_time
    64.             esData.setOnSaleTime(sku.getSpu().getOnSaleTime());
    65.             // brand_id
    66.             esData.setBrandId(sku.getSpu().getBrandId());
    67.             // cat_id
    68.             esData.setCatId(sku.getSpu().getCat3Id());
    69.             //  Map specs;// 可搜索的规格参数，key是参数名，值是参数值
    70.             Map specs = JSON.parseObject(sku.getSpecInfoIdTxt(), Map.class);
    71. //            Map newSpecs = new HashMap();
    72. //            for(String key : specs.keySet()){
    73. //                newSpecs.put("spec" + key , specs.get(key));
    74. //            }
    75.  
    76.             esData.setSpecs(specs);
    77.             // price 价格
    78.             esData.setPrice(sku.getPrice());
    79.             // spu_name
    80.             esData.setSpuName(sku.getSpu().getSpuName());
    81.             // stock 库存
    82.             esData.setStock(sku.getStock());
    83.             // description
    84.             esData.setDescription(sku.getSpu().getDescription());
    85.             // packages;//规格与包装
    86.             esData.setPackages(sku.getSpu().getPackages());
    87.             // aftersale;//售后保障
    88.             esData.setAftersale(sku.getSpu().getAftersale());
    89.             // midlogo;
    90.             esData.setMidlogo(sku.getSpu().getLogo());
    91.             // comment_count; 评价数
    92.             Integer comment_count = skuCommentMapper.findNumBySpuId(sku.getSpu().getId());
    93.             esData.setCommentCount(comment_count);
    94.  
    95.             //销售量
    96.             esData.setSellerCount(10);
    97.  
    98.             esDataList.add(esData);
    99.         }
    100.  
    101.         return esDataList;
    102.  
    103.     }
    104.  
    105.     @Override
    106.     public OneSkuResult findSkuById(Integer skuid) {
    107.         OneSkuResult skuResult = new OneSkuResult();
    108.         // 1 查找sku基本信息
    109.         Sku sku = baseMapper.selectById(skuid);
    110.         // 2 根据sku查找spu信息
    111.         Spu spu = spuMapper.findSpuById(sku.getSpuId());
    112.  
    113.         // 3 赋值
    114.         // skuid;
    115.         skuResult.setSkuid(sku.getId());
    116.         // spuid;
    117.         skuResult.setSpuid(sku.getSpuId());
    118.         // 商品名称
    119.         skuResult.setGoodsName(sku.getSkuName());
    120.         // 价格
    121.         skuResult.setPrice(sku.getPrice());
    122.         // 上架时间
    123.         skuResult.setOnSaleDate(spu.getOnSaleTime());
    124.         // 评价数
    125.         Integer comment_count = skuCommentMapper.findNumBySpuId(spu.getId());
    126.         skuResult.setCommentCount(comment_count);
    127.         // 评论级别
    128.         skuResult.setCommentLevel(skuCommentMapper.findAvgStarBySkuId(sku.getId()));
    129.         // 一级分类
    130.         skuResult.setCat1Info(categoryMapper.selectById(spu.getCat1Id()));
    131.         // 二级分类
    132.         skuResult.setCat2Info(categoryMapper.selectById(spu.getCat2Id()));
    133.         // 三级分类
    134.         skuResult.setCat3Info(categoryMapper.selectById(spu.getCat3Id()));
    135.         // 第一张图片
    136.         Map logo = new HashMap();
    137.         logo.put("smlogo",spu.getLogo());
    138.         logo.put("biglogo",spu.getLogo());
    139.         logo.put("xbiglogo",spu.getLogo());
    140.         skuResult.setLogo(logo);
    141.         // 通过skuId查询对应的所有的图片
    142.         List skuPhotoList = skuPhotoMapper.findSkuPhotoBySkuId(sku.getId());
    143.         List photos = new ArrayList<>();
    144.         for(SkuPhoto sp:skuPhotoList){
    145.             Map map = new HashMap();
    146.             map.put("smimg",sp.getUrl());
    147.             map.put("bigimg",sp.getUrl());
    148.             map.put("xbigimg",sp.getUrl());
    149.             photos.add(map);
    150.         }
    151.         skuResult.setPhotos(photos);
    152.  
    153.         // 商品描述
    154.         skuResult.setDescription(spu.getDescription());
    155.         // 售后
    156.         skuResult.setAftersale(spu.getAftersale());
    157.         // 库存量
    158.         skuResult.setStock(sku.getStock());
    159.         // List spec_list; 根据分类查找规格和规格选项
    160.         List spec_list = specificationMapper.findSpecificationByCategoryId(spu.getCat3Id());
    161.         skuResult.setSpecList(spec_list);
    162.         // //id_list:'规格ID:选项ID|规格ID:选项ID|...',
    163.         //  //id_txt:'规格名称:选项名称|规格名称:选项名称|...'
    164.         // Map spec_info;
    165.         Map spec_info = new HashMap<>();
    166.         spec_info.put("id_list",sku.getSpecInfoIdList());
    167.         spec_info.put("id_txt",sku.getSpecInfoIdTxt());
    168.         skuResult.setSpecInfo(spec_info);
    169.         // List> sku_list;
    170.         List skuBySpuIdList = baseMapper.findSkuBySpuId(spu.getId());
    171.         List> sku_list = new ArrayList<>();
    172.         for(Sku s : skuBySpuIdList){
    173.             Map map = new HashMap<>();
    174.             map.put("skuid",s.getId().toString());
    175.             map.put("id_list",s.getSpecInfoIdList());
    176.             sku_list.add(map);
    177.         }
    178.         skuResult.setSkuList(sku_list);
    179.         // 返回结果
    180.         return skuResult;
    181.     }
    182.  
    183. }

    1. /**
    2.  * 查询详情
    3.  * @param skuid
    4.  * @return
    5.  */
    6. @GetMapping("/goods/{skuid}")
    7. public BaseResult findSkuById(@PathVariable("skuid") Integer skuid){
    8.     OneSkuResult sku = skuService.findSkuById(skuid);
    9.  
    10.     return BaseResult.ok("查询成功", sku);
    11. }

    2.7前端实现

    详情页面需要进行SSR

    步骤一：修改 “apiserver.js”，查询详情

    步骤二：修改 Goods.vue 页面，使用asyncData进行查询

    步骤三：修改 Goods.vue 页面，显示当前位置

     

    步骤四：修改 Goods.vue 页面，处理放大镜图片

            

    步骤五：修改 Goods.vue 页面，商品详情

    编写specOptionSelect方法

    1. methods: {
    2.     specOptionSelect(spec,option) {
    3.       // 拼接标记符，规格id:选项id
    4.       let flag = spec.id + ':' + option.id
    5.       // 判断id_list中是否有‘标记符’，如果没有返回-1
    6.       return this.goodsInfo.spec_info.id_list.indexOf(flag) != -1
    7.     }
    8.   },

    步骤六：修复bug，图片大小的原因，导致“放大镜”中等图太大，遮盖小图

    问题图示

    解决

    3.规格操作

    点击“规格”时，切换SKU的id

    步骤一：修改 Goods.vue 页面，给每一个规格选项绑定点击事件

     

    步骤二：修改 Goods.vue 页面，完成 selectSpec 函数

    ​​​​​​​

  • 相关阅读:
    Python学习记录 模块的发布和安装
    动态背景下目标跟踪算法的实现及源代码
    java计算机毕业设计水果商城设计源码+系统+mysql数据库+lw文档+部署
    【通关MySQL】Java的JDBC编程
    OpenCV_Mat类对象常用的构造方法及初始化方法
    TiDB系列之：认识TiDB数据库，使用TiUP部署TiDB集群，同时部署TiCDC的详细步骤
    Java 程序猿看完这些面试题，想斩获 BAT 的 offer 都很难！
    以太坊终于要合并了
    十五、Lua 协同程序(coroutine)的学习
    全球创见者共话企业韧性 金蝶“数字员工”惊艳亮相
  • 原文地址：https://blog.csdn.net/weixin_45481821/article/details/127870773