1.构建详情页
步骤0：确定访问路径
http://localhost:3000/Goods?id=1
步骤二：复制 ~/static/goods.html 内容，导入第三方资源（css、js）
head: {title: '列表页面',link: [{rel:'stylesheet',href: '/style/goods.css'},{rel:'stylesheet',href: '/style/common.css'},{rel:'stylesheet',href: '/style/bottomnav.css'},{rel:'stylesheet',href: '/style/jqzoom.css'},],script: [{ type: 'text/javascript', src: '/js/header.js' },{ type: 'text/javascript', src: '/js/goods.js' },{ type: 'text/javascript', src: '/js/jqzoom-core.js' },]},步骤三：导入公共资源
<script>
import TopNav from '@/components/TopNav'
import HeaderSearch from '@/components/HeaderSearch'
import BottomNav from '@/components/BottomNav'
import Footer from '@/components/Footer'export default {components: {TopNav,HeaderSearch,BottomNav,Footer,},
}
</script>
步骤四：添加原页面js特效
2.详情
2.1分析
2.2接口
GET http://localhost:10010/web-service/sku/goods/2600242
返回值
{skuid:"商品ID，skuid",spuid:"商品ID，skuid",goods_name:"商品名称",price:"价格",on_sale_date:"上架时间",comment_count:"评论数量",comment_level:"评论级别(1-5)",cat1_info:{id:"分类ID",cat_name:"分类名称"},cat2_info:{id:"分类ID",cat_name:"分类名称"},cat3_info:{id:"分类ID",cat_name:"分类名称"},logo:{smlogo:"小LOGO(50x50)",biglogo:"大LOGO(350x350)",xbiglogo:"超大LOGO(800x800)"},photos:[{smimg:"商品图片(50x50)",bigimg:"商品图片(350x350)",xbigimg:"商品图片(800x800)"},...],description:"商品描述",aftersale:"售后",stock:"库存量",spec_list:[{id:"规格ID",spec_name:"规格名称",options:[{id:"选项ID",option_name:"选项名称"}...]}...],spec_info:{id_list:"规格ID:选项ID|规格ID:选项ID|...",id_txt:"规格名称:规格选项|规格名称:规格选项|..."},sku_list:[{skuid:"SKUID",id_list:"规格ID:选项ID|规格ID:选项ID|..."},...]
}
2.3初始化数据
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');
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');
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表编写内容
package com.czxy.changgou4.pojo;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;/*** Created by liangtong.*/
@TableName("tb_sku_photo")
@Data
public class SkuPhoto {@TableId(type = IdType.AUTO)private Integer id;//外键@TableField(value="sku_id")@JsonProperty("sku_id")private Integer skuId;@TableField(exist = false)private Sku sku;@TableField(value="url")private String url;}步骤二：创建OneSkuResult，根据接口返回结果编写内容
package com.czxy.changgou4.vo;import com.czxy.changgou4.pojo.Category;
import com.czxy.changgou4.pojo.Specification;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;import java.util.Date;
import java.util.List;
import java.util.Map;/*** @author 桐叔* @email liangtong@itcast.cn*/
@Data
public class OneSkuResult {private Integer skuid;private Integer spuid;@JsonProperty("goods_name")private String goodsName;private Double price;@JsonProperty("on_sale_date")private Date onSaleDate;@JsonProperty("comment_count")private Integer commentCount;@JsonProperty("comment_level")private Integer commentLevel;@JsonProperty("cat1_info")private Category cat1Info;@JsonProperty("cat2_info")private Category cat2Info;@JsonProperty("cat3_info")private Category cat3Info;private Map<String, String> logo;private List<Map> photos;private String description;private String aftersale;private Integer stock;@JsonProperty("spec_list")private List<Specification> specList;// id_list:'规格ID:选项ID|规格ID:选项ID|...',// id_txt:'规格名称:选项名称|规格名称:选项名称|...'@JsonProperty("spec_info")private Map<String, String> specInfo;@JsonProperty("sku_list")private List<Map<String, String>> skuList;}
2.5后端实现：Mapper
步骤一：修改skuCommentMapper，完成“评论级别”功能
/*** 通过spu查询评论打分(星星)的平均数* @param spuId* @return*/@Select("SELECT AVG(star) FROM tb_sku_comment WHERE spu_id = #{spuId}")public Integer findAvgStarBySpuId(@Param("spuId") Integer spuId);步骤二：创建SkuPhotoMapper，完成“通过skuId查询对应的所有的图片”功能
package com.czxy.changgou4.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.czxy.changgou4.pojo.SkuPhoto;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;import java.util.List;/*** Created by liangtong.*/
@Mapper
public interface SkuPhotoMapper extends BaseMapper<SkuPhoto> {/*** 通过skuId查询对应的所有的图片* @param spuId* @return*/@Select("select * from tb_sku_photo where sku_id = #{spuId}")@Results({@Result(property="id", column="id"),@Result(property="skuId", column="sku_id"),@Result(property="url", column="url")})public List<SkuPhoto> findSkuPhotoBySkuId(Integer spuId);}步骤三：修改SkuMapper，添加“查询指定spuId的所有sku”功能
/*** 查询指定spuId的所有sku* @param spuId* @return*/
@Select("select * from tb_sku where spu_id = #{spuId}")
@ResultMap("skuResult")
public List<Sku> findSkuBySpuId(Integer spuId); 
2.6后端实现
步骤一：修改SkuService，添加findSkuById 方法
/*** 查询详情* @param skuid* @return*/
public OneSkuResult findSkuById(Integer skuid);步骤二：修改SkuServiceImpl，完成“查询详情”功能
package com.czxy.changgou4.service.impl;import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.czxy.changgou4.mapper.*;
import com.czxy.changgou4.pojo.Sku;
import com.czxy.changgou4.pojo.SkuPhoto;
import com.czxy.changgou4.pojo.Specification;
import com.czxy.changgou4.pojo.Spu;
import com.czxy.changgou4.service.SkuService;
import com.czxy.changgou4.vo.ESData;
import com.czxy.changgou4.vo.OneSkuResult;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** @author 桐叔* @email liangtong@itcast.cn*/
@Service
@Transactional
public class SkuServiceImpl extends ServiceImpl<SkuMapper, Sku> implements SkuService {@Resourceprivate SkuCommentMapper skuCommentMapper;@Resourceprivate SpuMapper spuMapper;@Resourceprivate CategoryMapper categoryMapper;@Resourceprivate SkuPhotoMapper skuPhotoMapper;@Resourceprivate SpecificationMapper specificationMapper;@Overridepublic List<ESData> findESData() {//1 查询所有详情skuList<Sku> skulist = baseMapper.findAllSkus();//2 将SKU 转换成 ESDataList<ESData> esDataList = new ArrayList<>();for (Sku sku:skulist){ESData esData = new ESData();// idesData.setId(sku.getId());// 图片地址esData.setLogo(sku.getSpu().getLogo());// 商品名称esData.setSkuName(sku.getSkuName());// all “华为xx {"机身颜色":"白色","内存":"3GB","机身存储":"16GB"} 荣耀 ”esData.setAll(sku.getSkuName()+" " + sku.getSpecInfoIdTxt() + " " +sku.getSpu().getBrand().getBrandName());// on_sale_timeesData.setOnSaleTime(sku.getSpu().getOnSaleTime());// brand_idesData.setBrandId(sku.getSpu().getBrandId());// cat_idesData.setCatId(sku.getSpu().getCat3Id());// Map<String, Object> specs;// 可搜索的规格参数，key是参数名，值是参数值Map<String,Object> specs = JSON.parseObject(sku.getSpecInfoIdTxt(), Map.class);
// Map newSpecs = new HashMap();
// for(String key : specs.keySet()){
// newSpecs.put("spec" + key , specs.get(key));
// }esData.setSpecs(specs);// price 价格esData.setPrice(sku.getPrice());// spu_nameesData.setSpuName(sku.getSpu().getSpuName());// stock 库存esData.setStock(sku.getStock());// descriptionesData.setDescription(sku.getSpu().getDescription());// packages;//规格与包装esData.setPackages(sku.getSpu().getPackages());// aftersale;//售后保障esData.setAftersale(sku.getSpu().getAftersale());// midlogo;esData.setMidlogo(sku.getSpu().getLogo());// comment_count; 评价数Integer comment_count = skuCommentMapper.findNumBySpuId(sku.getSpu().getId());esData.setCommentCount(comment_count);//销售量esData.setSellerCount(10);esDataList.add(esData);}return esDataList;}@Overridepublic OneSkuResult findSkuById(Integer skuid) {OneSkuResult skuResult = new OneSkuResult();// 1 查找sku基本信息Sku sku = baseMapper.selectById(skuid);// 2 根据sku查找spu信息Spu spu = spuMapper.findSpuById(sku.getSpuId());// 3 赋值// skuid;skuResult.setSkuid(sku.getId());// spuid;skuResult.setSpuid(sku.getSpuId());// 商品名称skuResult.setGoodsName(sku.getSkuName());// 价格skuResult.setPrice(sku.getPrice());// 上架时间skuResult.setOnSaleDate(spu.getOnSaleTime());// 评价数Integer comment_count = skuCommentMapper.findNumBySpuId(spu.getId());skuResult.setCommentCount(comment_count);// 评论级别skuResult.setCommentLevel(skuCommentMapper.findAvgStarBySkuId(sku.getId()));// 一级分类skuResult.setCat1Info(categoryMapper.selectById(spu.getCat1Id()));// 二级分类skuResult.setCat2Info(categoryMapper.selectById(spu.getCat2Id()));// 三级分类skuResult.setCat3Info(categoryMapper.selectById(spu.getCat3Id()));// 第一张图片Map<String,String> logo = new HashMap();logo.put("smlogo",spu.getLogo());logo.put("biglogo",spu.getLogo());logo.put("xbiglogo",spu.getLogo());skuResult.setLogo(logo);// 通过skuId查询对应的所有的图片List<SkuPhoto> skuPhotoList = skuPhotoMapper.findSkuPhotoBySkuId(sku.getId());List<Map> photos = new ArrayList<>();for(SkuPhoto sp:skuPhotoList){Map<String,String> map = new HashMap();map.put("smimg",sp.getUrl());map.put("bigimg",sp.getUrl());map.put("xbigimg",sp.getUrl());photos.add(map);}skuResult.setPhotos(photos);// 商品描述skuResult.setDescription(spu.getDescription());// 售后skuResult.setAftersale(spu.getAftersale());// 库存量skuResult.setStock(sku.getStock());// List<SpecResult> spec_list; 根据分类查找规格和规格选项List<Specification> spec_list = specificationMapper.findSpecificationByCategoryId(spu.getCat3Id());skuResult.setSpecList(spec_list);// //id_list:'规格ID:选项ID|规格ID:选项ID|...',// //id_txt:'规格名称:选项名称|规格名称:选项名称|...'// Map<String, String> spec_info;Map<String,String> spec_info = new HashMap<>();spec_info.put("id_list",sku.getSpecInfoIdList());spec_info.put("id_txt",sku.getSpecInfoIdTxt());skuResult.setSpecInfo(spec_info);// List<Map<String, String>> sku_list;List<Sku> skuBySpuIdList = baseMapper.findSkuBySpuId(spu.getId());List<Map<String, String>> sku_list = new ArrayList<>();for(Sku s : skuBySpuIdList){Map<String,String> map = new HashMap<>();map.put("skuid",s.getId().toString());map.put("id_list",s.getSpecInfoIdList());sku_list.add(map);}skuResult.setSkuList(sku_list);// 返回结果return skuResult;}}
/*** 查询详情* @param skuid* @return*/
@GetMapping("/goods/{skuid}")
public BaseResult<OneSkuResult> findSkuById(@PathVariable("skuid") Integer skuid){OneSkuResult sku = skuService.findSkuById(skuid);return BaseResult.ok("查询成功", sku);
}2.7前端实现
详情页面需要进行SSR
步骤一：修改 “apiserver.js”，查询详情
步骤二：修改 Goods.vue 页面，使用asyncData进行查询
步骤三：修改 Goods.vue 页面，显示当前位置
步骤四：修改 Goods.vue 页面，处理放大镜图片
步骤五：修改 Goods.vue 页面，商品详情
编写specOptionSelect方法
methods: {specOptionSelect(spec,option) {// 拼接标记符，规格id:选项idlet flag = spec.id + ':' + option.id// 判断id_list中是否有‘标记符’，如果没有返回-1return this.goodsInfo.spec_info.id_list.indexOf(flag) != -1}},步骤六：修复bug，图片大小的原因，导致“放大镜”中等图太大，遮盖小图
问题图示
解决
<style>.midpic img {width: 100%;}
</style>3.规格操作
点击“规格”时，切换SKU的id
步骤一：修改 Goods.vue 页面，给每一个规格选项绑定点击事件
步骤二：修改 Goods.vue 页面，完成 selectSpec 函数
