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

﹏ヽ暗。殇╰゛Y 2024-04-01 18:59 172阅读 0赞

1.构建详情页

步骤0：确定访问路径

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

7ea16401d9d9412fbd10ce5e807dc824.png

6949d0fd089049279bdb82435a5dab70.png

步骤二：复制 ~/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.   },

步骤三：导入公共资源

  1. <script>
  2. import TopNav from '@/components/TopNav'
  3. import HeaderSearch from '@/components/HeaderSearch'
  4. import BottomNav from '@/components/BottomNav'
  5. import Footer from '@/components/Footer'
  7. export default {
  8.   components: {
  9.     TopNav,
  10.     HeaderSearch,
  11.     BottomNav,
  12.     Footer,
  13.   },
  14. }
  15. </script>

e8614301f8f543cdb65dbafa05217e25.png

9443b1bde55741ee891f6fbda2220d2b.png

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

8b95511f87c14b3aa0bd46774c5f0cb3.png

2.详情

2.1分析

e9c5079638334638b8021df2755489ca.png

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. }

5266552e6a564027b4c5bab1ea2b5de6.png

01ea49b5bed24fab8510e12da5ecac5c.png

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

5891b5e0c5984b4fa3a96bdfb7126c1d.png

SkuPhoto ： sku对应的所有图片

OneSkuResult：用于封装sku详情

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

  1. package com.czxy.changgou4.pojo;
  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;
  10. /**
  11.  * Created by liangtong.
  12.  */
  13. @TableName("tb_sku_photo")
  14. @Data
  15. public class SkuPhoto {
  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;
  26.     @TableField(value="url")
  27.     private String url;
  29. }

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

  1. package com.czxy.changgou4.vo;
  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;
  8. import java.util.Date;
  9. import java.util.List;
  10. import java.util.Map;
  12. /**
  13.  * @author 桐叔
  14.  * @email liangtong@itcast.cn
  15.  */
  16. @Data
  17. public class OneSkuResult {
  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<String, String> logo;
  37.     private List<Map> photos;
  38.     private String description;
  39.     private String aftersale;
  40.     private Integer stock;
  41.     @JsonProperty("spec_list")
  42.     private List<Specification> specList;
  43.     // id_list:'规格ID:选项ID|规格ID:选项ID|...',
  44.     // id_txt:'规格名称:选项名称|规格名称:选项名称|...'
  45.     @JsonProperty("spec_info")
  46.     private Map<String, String> specInfo;
  47.     @JsonProperty("sku_list")
  48.     private List<Map<String, String>> skuList;
  50. }

#

2.5后端实现：Mapper

dd909cdbf4984602bb6f6bb92f220206.png

步骤一：修改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;
  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;
  10. import java.util.List;
  12. /**
  13.  * Created by liangtong.
  14.  */
  15. @Mapper
  16. public interface SkuPhotoMapper extends BaseMapper<SkuPhoto> {
  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<SkuPhoto> findSkuPhotoBySkuId(Integer spuId);
  31. }

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

a6cace3debe74966bc90d0e6e630249f.png

  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<Sku> findSkuBySpuId(Integer spuId);

6493bc548ab9415db571065cf9ef8d7a.png

2.6后端实现

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

3084d192ae1c4450ac0f3c6e4ce4d43a.png

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

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

  1. package com.czxy.changgou4.service.impl;
  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;
  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;
  22. /**
  23.  * @author 桐叔
  24.  * @email liangtong@itcast.cn
  25.  */
  26. @Service
  27. @Transactional
  28. public class SkuServiceImpl extends ServiceImpl<SkuMapper, Sku> implements SkuService {
  30.     @Resource
  31.     private SkuCommentMapper skuCommentMapper;
  33.     @Resource
  34.     private SpuMapper spuMapper;
  36.     @Resource
  37.     private CategoryMapper categoryMapper;
  39.     @Resource
  40.     private SkuPhotoMapper skuPhotoMapper;
  42.     @Resource
  43.     private SpecificationMapper specificationMapper;
  45.     @Override
  46.     public List<ESData> findESData() {
  47.         //1 查询所有详情sku
  48.         List<Sku> skulist = baseMapper.findAllSkus();
  50.         //2 将SKU 转换成 ESData
  51.         List<ESData> esDataList = new ArrayList<>();
  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<String, Object> specs;// 可搜索的规格参数，key是参数名，值是参数值
  70.             Map<String,Object> 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. //            }
  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);
  95.             //销售量
  96.             esData.setSellerCount(10);
  98.             esDataList.add(esData);
  99.         }
  101.         return esDataList;
  103.     }
  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());
  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<String,String> 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<SkuPhoto> skuPhotoList = skuPhotoMapper.findSkuPhotoBySkuId(sku.getId());
  143.         List<Map> photos = new ArrayList<>();
  144.         for(SkuPhoto sp:skuPhotoList){
  145.             Map<String,String> 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);
  153.         // 商品描述
  154.         skuResult.setDescription(spu.getDescription());
  155.         // 售后
  156.         skuResult.setAftersale(spu.getAftersale());
  157.         // 库存量
  158.         skuResult.setStock(sku.getStock());
  159.         // List<SpecResult> spec_list; 根据分类查找规格和规格选项
  160.         List<Specification> spec_list = specificationMapper.findSpecificationByCategoryId(spu.getCat3Id());
  161.         skuResult.setSpecList(spec_list);
  162.         // //id_list:'规格ID:选项ID|规格ID:选项ID|...',
  163.         //  //id_txt:'规格名称:选项名称|规格名称:选项名称|...'
  164.         // Map<String, String> spec_info;
  165.         Map<String,String> 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<Map<String, String>> sku_list;
  170.         List<Sku> skuBySpuIdList = baseMapper.findSkuBySpuId(spu.getId());
  171.         List<Map<String, String>> sku_list = new ArrayList<>();
  172.         for(Sku s : skuBySpuIdList){
  173.             Map<String,String> 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.     }
  183. }

4aa5308222414952b2024bed68a72355.png

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

2.7前端实现

详情页面需要进行SSR

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

13076b19eb7f423fae46ad66a5416f02.png

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

b9fcb7556ea64bd1945b1c01460cba82.png

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

720a833ebd814ce8a51438b5726a630b.png

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

27aca095e73f42e9a3009999ba731ea5.png

35bef280a58f49adb003aaa613eefb9d.png

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

9a8da57916a04b79822c7dac807e0b3a.png

编写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，图片大小的原因，导致“放大镜”中等图太大，遮盖小图

问题图示

d2d2151141494160818cfbfe9d2d9e48.png

解决

  1. <style>
  2.   .midpic img {
  3.     width: 100%;
  4.   }
  5. </style>

3.规格操作

点击“规格”时，切换SKU的id28064b36bc5d4ceb9402e7a9de739a6f.png

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

820378e028e747c58d100b8b6f550547.png

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

20acd009286e46be9ca33686ba1991b3.png

发表评论

表情：
评论列表 （有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读