第5章-商品详情-页面静态化

学习目标：

能够说出商品详情业务需求
梳理商品详情页面所需数据(Thymeleaf模板html页面)
掌握Feign调用最佳实践方式
完成商品详情页面渲染

1. 商品详情业务需求分析

1.1 详情渲染功能介绍

商品详情所需构建的数据如下：

1，Sku基本信息

2，Sku图片信息

3，Sku分类信息

4，Sku销售属性相关信息

5，Sku价格信息（平台可以单独修改价格，sku后续会放入缓存，为了回显最新价格，所以单独获取）

6，展示商品的海报

7，获取skuId 对应的商品规格参数

...

1.2 详情模块规划

模块规划思路：

1，service-item微服务模块封装详情页面所需数据接口；

2，service-item通过feign client调用其他微服务数据接口进行数据汇总；

3，pc端前台页面通过gmall-web调用service-item数据接口渲染页面；

4，service-item可以为pc端、H5、安卓与ios等前端应用提供数据接口，gmall-web为pc端页面渲染形式

5，service-item获取商品信息需要调用service-product服务sku信息等；

6，由于service各微服务可能会相互调用，调用方式都是通过feign client调用，所以我们把feign client api接口单独封装出来，需要时直接引用feign client api模块接口即可，即需创建service-client父模块，管理各service微服务feign client api接口；

http://item.gmall.com/25.html

2. 商品详情页面数据分析

首先我们一起来分析一下，在商品详情页面中需要哪些数据，通过web前端项目item/item.html模板页面中的Thymeleaf语法得知，例如有下面的部分：

面包屑分类数据

Sku商品信息以及商品图片列表

商品SKU价格

销售属性名称，属性值集合

切换SKU转换SKU商品Json字符串信息

商品海报图片集合

商品基本属性名称以及属性值集合

逐个查看，发现需要下面的变量：

skuInfo：当前商品SKU信息包含SKU图片列表
categoryView：当前商品所属的分类信息（包含三级）
price：当前商品最新价格
spuPosterList：当前商品海报图片集合
skuAttrList：当前商品平台属性及属性值集合--- 规格与参数
spuSaleAttrList：当前商品销售属性集合选中效果
valuesSkuJson：切换SKU转换SKU商品json字符串信息

因此接下来，我们需要在商品微服务补充RestFul接口实现并且提供远程调用Feign API接口给商品详情微服务来调用获取。

3. 服务提供方(商品微服务)

在service-product微服务提供restful接口实现以下接口均为微服务模块内部之间的调用。

3.1 获取sku基本信息与图片信息

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/587

3.1.1 编写控制器

在service-product模块中新建包：com.atguigu.gmall.product.api 这个包下提供服务内部调用的restful 接口实现

package com.atguigu.gmall.product.api;

import com.atguigu.gmall.common.result.Result;
import com.atguigu.gmall.product.model.SkuInfo;
import com.atguigu.gmall.product.service.SkuManageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * 商品模块所有的restful接口，包含/api请求地址都是微服务间内部接口调用
 */
@RestController
@RequestMapping("api/product")
public class ProductApiController {

    @Autowired
    private SkuManageService skuManageService;


    /**
     * 根据SkuID查询SKU商品信息包含图片列表
     * @param skuId
     * @return
     */
    @GetMapping("/inner/getSkuInfo/{skuId}")
    public SkuInfo getSkuInfo(@PathVariable("skuId") Long skuId){
        SkuInfo skuInfo = skuManageService.getSkuInfo(skuId);
        return skuInfo;
    }
}

3.1.2 业务接口与实现类

SkuManageService

/**
 * 根据SkuID查询SKU商品信息包含图片列表
 * @param skuId
 * @return
 */
SkuInfo getSkuInfo(Long skuId);

SkuManageServiceImpl

/**
 * 根据SkuID查询SKU商品信息包含图片列表
 * @param skuId
 * @return
 */
@Override
public SkuInfo getSkuInfo(Long skuId) {
    //1.根据商品SkuID（主键）查询sku_info表得到商品信息
    SkuInfo skuInfo = skuInfoService.getById(skuId);
    //2.根据skuId查询商品图片表sku_image得到商品图片列表
    if(skuInfo!=null){
        LambdaQueryWrapper<SkuImage> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(SkuImage::getSkuId, skuId);
        List<SkuImage> skuImages = skuImageService.list(queryWrapper);
        //封装商品图片列表
        skuInfo.setSkuImageList(skuImages);
        return skuInfo;
    }
    return null;
}

访问Knife4j接口文档进行测试：

3.2 获取分类信息

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/635

3.2.1 需求分析

sku是挂在三级分类下面的，我们的分类信息分别在base_category1、base_category2、base_category3这三张表里面，目前需要通过sku表的三级分类id获取一级分类名称、二级分类名称和三级分类名称

解决方案：

我们可以建立一个视图(view)，把三张表关联起来，视图id就是三级分类id，这样通过三级分类id就可以查询到相应数据，效果如下：

创建视图

CREATE 
	OR REPLACE VIEW base_category_view AS SELECT
	bc3.id,
	bc1.id category1_id,
	bc1.NAME category1_name,
	bc2.id category2_id,
	bc2.NAME category2_name,
	bc3.id category3_id,
	bc3.NAME category3_name 
FROM
	base_category1 bc1
	INNER JOIN base_category2 bc2 ON bc2.category1_id = bc1.id
	INNER JOIN base_category3 bc3 ON bc3.category2_id = bc2.id 
WHERE
	bc1.is_deleted = '0' 
	AND bc2.is_deleted = '0' 
	AND bc3.is_deleted = '0';

3.2.2 控制器

ProductApiController

@Autowired
private BaseCategoryViewService baseCategoryViewService;
/**
 * 根据商品SKU三级分类ID查询分类信息
 *
 * @param category3Id
 * @return
 */
@GetMapping("/inner/getCategoryView/{category3Id}")
public BaseCategoryView getCategoryView(@PathVariable("category3Id") Long category3Id) {
    return baseCategoryViewService.getById(category3Id);
}

3.2.3 业务接口与实现类

BaseCategory1Service接口

package com.atguigu.gmall.product.service;

import com.atguigu.gmall.product.model.BaseCategoryView;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * @author: atguigu
 * @create: 2023-02-25 10:14
 */
public interface BaseCategoryViewService extends IService<BaseCategoryView> {
}

BaseCategory1ServiceImpl

package com.atguigu.gmall.product.service.impl;

import com.atguigu.gmall.product.mapper.BaseCategoryViewMapper;
import com.atguigu.gmall.product.model.BaseCategoryView;
import com.atguigu.gmall.product.service.BaseCategoryViewService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

/**
 * @author: atguigu
 * @create: 2023-02-25 10:14
 */
@Service
public class BaseCategoryViewServiceServiceImpl extends ServiceImpl<BaseCategoryViewMapper, BaseCategoryView> implements BaseCategoryViewService {
}

3.2.4 持久层Mapper

package com.atguigu.gmall.product.mapper;

import com.atguigu.gmall.product.model.BaseCategoryView;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface BaseCategoryViewMapper extends BaseMapper<BaseCategoryView> {
}

测试：

3.3. 获取价格信息

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/563

3.3.1 编写控制器

ProductApiController

/**
 * 根据SKUID查询商品最新价格
 * @param skuId
 * @return
 */
@GetMapping("/inner/getSkuPrice/{skuId}")
public BigDecimal getSkuPrice(@PathVariable("skuId") Long skuId){
    return skuManageService.getSkuPrice(skuId);
}

3.3.2 业务接口与实现类

SkuManageService

/**
 * 根据SKUID查询商品最新价格
 * @param skuId
 * @return
 */
BigDecimal getSkuPrice(Long skuId);

SkuManageServiceImpl

/**
 * 根据SKUID查询商品最新价格
 *
 * @param skuId
 * @return
 */
@Override
public BigDecimal getSkuPrice(Long skuId) {
    LambdaQueryWrapper<SkuInfo> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(SkuInfo::getId, skuId);
    //指定查询字段
    queryWrapper.select(SkuInfo::getPrice);
    SkuInfo skuInfo = skuInfoService.getOne(queryWrapper);
    if (skuInfo != null) {
        return skuInfo.getPrice();
    }
    return null;
}

3.4 获取海报信息

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/603

3.4.1 编写控制器

ProductApiController

@Autowired
private SpuManageService spuManageService;

/**
 * 根据spuId 获取海报数据
 * @param spuId
 * @return
 */
@GetMapping("inner/findSpuPosterBySpuId/{spuId}")
public List<SpuPoster> getSpuPosterBySpuId(@PathVariable Long spuId){
    return spuManageService.getSpuPosterBySpuId(spuId);
}

3.4.2 业务接口与实现类

SpuManageService接口

/**
 * 根据spuid获取商品海报
 * @param spuId
 * @return
 */
List<SpuPoster> getSpuPosterBySpuId(Long spuId);

SpuManageServiceImpl实现类

@Override
public List<SpuPoster> getSpuPosterBySpuId(Long spuId) {
    LambdaQueryWrapper<SpuPoster> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(SpuPoster::getSpuId, spuId);
    List<SpuPoster> spuPosterList = spuPosterService.list(queryWrapper);
    return spuPosterList;
}

3.5 Sku对应的平台属性

需求：显示在商品详情规格处

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/555

3.5.1 编写控制器

ProductApiController

/**
 * 根据SkuID查询当前商品包含平台属性以及属性值
 * @param skuId
 * @return
 */
@GetMapping("/inner/getAttrList/{skuId}")
public List<BaseAttrInfo> getAttrList(@PathVariable("skuId") Long skuId){
    return skuManageService.getAttrList(skuId);
}

3.5.2 业务接口与实现类

SkuManageService接口

/**
 * 根据SkuID查询当前商品包含平台属性以及属性值
 * @param skuId
 * @return
 */
List<BaseAttrInfo> getAttrList(Long skuId);

SkuManageServiceImpl实现类

/**
 * 根据SkuID查询当前商品包含平台属性以及属性值
 *
 * @param skuId
 * @return
 */
@Override
public List<BaseAttrInfo> getAttrList(Long skuId) {
    SkuAttrValueMapper skuAttrValueMapper = (SkuAttrValueMapper) skuAttrValueService.getBaseMapper();
    List<BaseAttrInfo> attrList = skuAttrValueMapper.getAttrList(skuId);
    if (!CollectionUtils.isEmpty(attrList)) {
        for (BaseAttrInfo baseAttrInfo : attrList) {
			//要求在平台属性对象中包含 属性名称 以及 属性的值 todo 在BaseAttrInfo增加属性attrValue
            baseAttrInfo.setAttrValue(baseAttrInfo.getAttrValueList().get(0).getValueName());
        }
    }
    return attrList;
}

BaseAttrInfo实体类中增加属性值名称变量:attrValue

package com.atguigu.gmall.product.model;

import com.atguigu.gmall.base.model.BaseEntity;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.util.List;

/**
 * <p>
 * BaseAttrInfo
 * </p>
 *
 */
@Data
@ApiModel(description = "平台属性")
@TableName("base_attr_info")
public class BaseAttrInfo extends BaseEntity {

	private static final long serialVersionUID = 1L;

	@ApiModelProperty(value = "属性名称")
	@TableField("attr_name")
	private String attrName;

	@ApiModelProperty(value = "分类id")
	@TableField("category_id")
	private Long categoryId;

	@ApiModelProperty(value = "分类层级")
	@TableField("category_level")
	private Integer categoryLevel;

	//	平台属性值集合
	@TableField(exist = false)
	private List<BaseAttrValue> attrValueList;


    //todo 2023-2-25添加该字段 页面渲染平台属性值需要
	@ApiModelProperty(value = "平台属性值名称")
	@TableField(exist = false)
	private String attrValue;
}

3.5.3 持久层

BaseAttrInfoMapper

package com.atguigu.gmall.product.mapper;

import com.atguigu.gmall.product.model.BaseAttrInfo;
import com.atguigu.gmall.product.model.SkuAttrValue;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * sku平台属性值关联表 Mapper 接口
 *
 * @author atguigu
 * @since 2023-02-24
 */
public interface SkuAttrValueMapper extends BaseMapper<SkuAttrValue> {

    /**
     * 查询指定Sku商品平台属性以及属性值列表
     * @param skuId
     * @return
     */
    List<BaseAttrInfo> getAttrList(@Param("skuId") Long skuId);
}

SkuAttrValueMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.gmall.product.mapper.SkuAttrValueMapper">

    <!-- 自定义结果集:完成一对多配置 -->
    <resultMap id="baseAttrInfoMap" type="com.atguigu.gmall.product.model.BaseAttrInfo" autoMapping="true">
        <!--映射主键ID-->
        <id property="id" column="id"/>
        <!--其他普通字段-->
        <!--<result/>-->
        <!--配置一对多-封装多方类型-->
        <collection property="attrValueList" ofType="com.atguigu.gmall.product.model.BaseAttrValue" autoMapping="true">
            <id property="id" column="attr_value_id"></id>
        </collection>
    </resultMap>


    <select id="getAttrList" resultMap="baseAttrInfoMap">
        select
            bai.id,
            bai.attr_name,
            bai.category_id,
            bai.category_level,
            bav.id base_attr_value_id,
            bav.value_name
        from base_attr_info bai inner join base_attr_value bav on bav.attr_id = bai.id
        inner join sku_attr_value sav on sav.attr_id = bai.id and sav.value_id= bav.id
        where sav.sku_id = #{skuId}
    </select>
</mapper>

3.6 获取销售属性选中

思路：

1、查出该商品的spu的所有销售属性和属性值

2、标识出本商品对应的销售属性

3、点击其他销售属性值的组合，跳转到另外的sku页面

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/611

3.6.1 编写控制器

ProductApiController

/**
 * 查询当前商品所有的销售属性,判断为当前SKU拥有销售属性增加选中效果
 * @param skuId
 * @param spuId
 * @return
 */
@GetMapping("/inner/getSpuSaleAttrListCheckBySku/{skuId}/{spuId}")
public List<SpuSaleAttr> getSpuSaleAttrListCheckBySku(@PathVariable("skuId") Long skuId, @PathVariable("spuId") Long spuId){
    return spuManageService.getSpuSaleAttrListCheckBySku(skuId, spuId);
}

3.6.2 业务接口与实现类

SkuManageService接口

/**
 * 查询当前商品所有的销售属性,判断为当前SKU拥有销售属性增加选中效果
 * @param skuId
 * @param spuId
 * @return
 */
List<SpuSaleAttr> getSpuSaleAttrListCheckBySku(Long skuId, Long spuId);

SkuManageServiceImpl实现类

/**
 * 查询当前商品所有的销售属性,判断为当前SKU拥有销售属性增加选中效果
 *
 * @param skuId
 * @param spuId
 * @return
 */
@Override
public List<SpuSaleAttr> getSpuSaleAttrListCheckBySku(Long skuId, Long spuId) {
    SpuSaleAttrMapper spuSaleAttrMapper = (SpuSaleAttrMapper) spuSaleAttrService.getBaseMapper();
    return spuSaleAttrMapper.getSpuSaleAttrListCheckBySku(skuId, spuId);
}

3.6.3 查询出sku对应spu的销售属性

第1、2条通过此sql实现

select    
      ssa.id,
      ssa.spu_id,
      ssa.base_sale_attr_id,
      ssa.sale_attr_name,
      ssav.id spu_sale_attr_value_id, #销售属性值的ID
      ssav.sale_attr_value_name,
      #sv.sku_id,
      if(sv.sku_id is null,0,1)  is_checked #是否应该选中当前销售属性
from spu_sale_attr ssa inner join spu_sale_attr_value ssav on ssa.spu_id = ssav.spu_id and ssa.base_sale_attr_id = ssav.base_sale_attr_id
left join sku_sale_attr_value sv on sv.sale_attr_value_id = ssav.id and sv.sku_id=24

此sql列出所有该spu的销售属性和属性值，并关联某skuid如果能关联上is_check设为1，否则设为0。

在对应的实体类中【SpuSaleAttrValue】添加属性字段

@TableField(exist = false)
String isChecked;

3.6.4 在SpuSaleAttrMapper 接口中添加的方法

    /**
     * 查询当前商品所有的销售属性,判断为当前SKU拥有销售属性增加选中效果
     *
     * @param skuId
     * @param spuId
     * @return
     */
    List<SpuSaleAttr> getSpuSaleAttrListCheckBySku(@Param("skuId") Long skuId, @Param("spuId") Long spuId);

SpuSaleAttrMapper.xml

<!--销售属性跟销售属性值一对多配置-->
<resultMap id="spuSaleAttrMap" type="com.atguigu.gmall.product.model.SpuSaleAttr" autoMapping="true">
    <id column="id" property="id"/>
    <!--配置销售属性集合-->
    <collection property="spuSaleAttrValueList" ofType="com.atguigu.gmall.product.model.SpuSaleAttrValue" autoMapping="true">
        <id column="spu_sale_attr_value_id" property="id"/>
    </collection>
</resultMap>


<select id="getSpuSaleAttrListCheckBySku" resultMap="spuSaleAttrMap">
    select ssa.id,
           ssa.spu_id,
           ssa.base_sale_attr_id,
           ssa.sale_attr_name,
           ssav.id spu_sale_attr_value_id,
           ssav.sale_attr_value_name,
           if(sv.id is null, '0', '1') is_checked
    from spu_sale_attr ssa inner join
         spu_sale_attr_value ssav on ssav.spu_id = ssa.spu_id and ssav.base_sale_attr_id = ssa.base_sale_attr_id
        left join sku_sale_attr_value sv on sv.spu_id = ssa.spu_id and sv.sale_attr_value_id = ssav.id and sv.sku_id=#{skuId}
    where ssa.spu_id = #{spuId}
    order by ssav.base_sale_attr_id ,ssav.id;
</select>

3.7 实现商品切换

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/595

实现思路：

1 、从页面中获得得所有选中的销售属性进行组合比如：

“属性值1|属性值2” 用这个字符串匹配一个对照表，来获得skuId。并进行跳转，或者告知无货。

2、后台要生成一个“属性值1|属性值2：skuId”的一个json串以提供页面进行匹配。如

3、需要从后台数据库查询出该spu下的所有skuId和属性值关联关系。然后加工成如上的Json串，用该json串，跟前台匹配。

实现：

使用sql 语句来解决：

GROUP_CONCAT：group_concat( [distinct] 要连接的字段 [order by 排序字段 asc/desc ] [separator '分隔符'] )

3.7.1 编写控制器

ProductApiController

/**
 * 获取每一组销售属性对应SkuID组合 {"3736|3738":"24","3736|3739":"25",}
 * @param spuId
 * @return
 */
@GetMapping("/inner/getSkuValueIdsMap/{spuId}")
public String getSkuValueIdsMap(@PathVariable("spuId") Long spuId){
    return skuManageService.getSkuValueIdsMap(spuId);
}

3.7.2 编写接口与实现类

SkuManageService接口

/**
 * 获取每一组销售属性对应SkuID组合 {"3736|3738":"24","3736|3739":"25",}
 * @param spuId
 * @return
 */
String getSkuValueIdsMap(Long spuId);

SkuManageServiceImpl实现类

/**
 * 获取每一组销售属性对应SkuID组合 {"3736|3738":"24","3736|3739":"25",}
 *
 * @param spuId
 * @return
 */
@Override
public String getSkuValueIdsMap(Long spuId) {
    //声明封装所有销售属性跟SKUID对应Map
    HashMap<String, String> mapResult = new HashMap<>();
    //查询自定义SQL
    SkuSaleAttrValueMapper skuSaleAttrValueMapper = (SkuSaleAttrValueMapper) skuSaleAttrValueService.getBaseMapper();
    List<Map> list = skuSaleAttrValueMapper.getSkuValueIdsMap(spuId);
    if (!CollectionUtils.isEmpty(list)) {
        //遍历List获取销售属性以及SKUID
        list.stream().forEach(map -> {
            Long skuId = (Long) map.get("sku_id");
            String valueIds = (String) map.get("value_ids");
            mapResult.put(valueIds, skuId.toString());
        });
    }
    return JSON.toJSONString(mapResult);
}

3.7.3 在SkuSaleAttrValueMapper中添加接口

package com.atguigu.gmall.product.mapper;

import com.atguigu.gmall.product.model.SkuSaleAttrValue;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

import java.util.List;
import java.util.Map;

/**
 * sku销售属性值 Mapper 接口
 *
 * @author atguigu
 * @since 2023-02-24
 */
public interface SkuSaleAttrValueMapper extends BaseMapper<SkuSaleAttrValue> {

    List<Map> getSkuValueIdsMap(Long spuId);
}

SkuSaleAttrValueMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.gmall.product.mapper.SkuSaleAttrValueMapper">


    <resultMap id="spuValueIdsMap" type="java.util.Map" autoMapping="true">

    </resultMap>


    <select id="getSkuValueIdsMap" resultMap="spuValueIdsMap">
        select ssav.sku_id,group_concat(ssav.sale_attr_value_id order by ssav.sale_attr_value_id separator '|') value_ids
            from sku_sale_attr_value ssav
            where ssav.spu_id = #{spuId}
        group by ssav.sku_id
    </select>
</mapper>

说明：目前我们在service-product里面把数据模型已经封装好了，接下封装feign client api接口，提供给service-item微服务调用汇总数据模型

4. 服务调用方(详情微服务)

4.1 Feign远程调用模块

4.1.1 搭建gmall-client父模块

该模块管理所有微服务远程调用的feign client api模块。搭建方式如：gmall-common父模块

选中gmall-parent新增子模块

填写模块名称：gmall-client

当前模块为父工程，固删除src

提供pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <parent>
       <artifactId>gmall-parent</artifactId>
       <groupId>com.atguigu.gmall</groupId>
       <version>1.0</version>
   </parent>
   <modelVersion>4.0.0</modelVersion>
   
   <artifactId>gmall-client</artifactId>
       
	<packaging>pom</packaging>
       
   <dependencies>
       <dependency>
           <groupId>com.atguigu.gmall</groupId>
           <artifactId>common-util</artifactId>
           <version>1.0</version>
       </dependency>
   
       <dependency>
           <groupId>com.atguigu.gmall</groupId>
           <artifactId>gmall-model</artifactId>
           <version>1.0</version>
       </dependency>
   
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
       </dependency>
   
       <!-- 服务调用feign -->
       <dependency>
           <groupId>org.springframework.cloud</groupId>
           <artifactId>spring-cloud-starter-openfeign</artifactId>
           <scope>provided </scope>
       </dependency>
   </dependencies>
</project>

4.1.2 搭建service-product-client

4.1.2.1 构建模块

在gmall-client 模块下创建：service-product-client

4.1.2.2 封装service-product-client接口

在service-product-client模块新建包名：com.atguigu.gmall.product.client 包下创建Feign接口

package com.atguigu.gmall.product.client;
   
import com.atguigu.gmall.product.client.impl.ProductDegradeFeignClient;
import com.atguigu.gmall.product.model.*;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
   
import java.math.BigDecimal;
import java.util.List;
   
/**
* @author: atguigu
* @create: 2023-02-25 11:18
*/
@FeignClient(value = "service-product", fallback = ProductDegradeFeignClient.class)   //baseUrl:http://service-product
public interface ProductFeignClient {
   
   
   /**
    * 根据SkuID查询sku信息以及图片
    *
    * @param skuId
    * @return
    */
   @GetMapping("/api/product/inner/getSkuInfo/{skuId}")  // http://service-product//api/product/inner/getSkuInfo/{skuId}
   public SkuInfo getSkuInfoAndImages(@PathVariable("skuId") Long skuId);
   
   
   /**
    * 根据商品SKU三级分类ID查询分类信息
    *
    * @param category3Id
    * @return
    */
   @GetMapping("/api/product/inner/getCategoryView/{category3Id}")
   public BaseCategoryView getCategoryView(@PathVariable("category3Id") Long category3Id);
   
   
   /**
    * 根据SKUID查询商品最新价格
    * @param skuId
    * @return
    */
   @GetMapping("/api/product/inner/getSkuPrice/{skuId}")
   public BigDecimal getSkuPrice(@PathVariable("skuId") Long skuId);
   
   
   /**
    * 根据SPUID查询详情页海报图片列表
    * @param spuId
    * @return
    */
   @GetMapping("/api/product/inner/findSpuPosterBySpuId/{spuId}")
   public List<SpuPoster> getSpuPosterBySpuId(@PathVariable("spuId") Long spuId);
   
   
   /**
    * 根据SkuID查询当前商品包含平台属性以及属性值
    * @param skuId
    * @return
    */
   @GetMapping("/api/product/inner/getAttrList/{skuId}")
   public List<BaseAttrInfo> getAttrList(@PathVariable("skuId") Long skuId);
   
   
   /**
    * 查询当前商品所有的销售属性,判断为当前SKU拥有销售属性增加选中效果
    * @param skuId
    * @param spuId
    * @return
    */
   @GetMapping("/api/product/inner/getSpuSaleAttrListCheckBySku/{skuId}/{spuId}")
   public List<SpuSaleAttr> getSpuSaleAttrListCheckBySku(@PathVariable("skuId") Long skuId, @PathVariable("spuId") Long spuId);
   
   
   /**
    * 获取每一组销售属性对应SkuID组合 {"3736|3738":"24","3736|3739":"25",}
    * @param spuId
    * @return
    */
   @GetMapping("/api/product/inner/getSkuValueIdsMap/{spuId}")
   public String getSkuValueIdsMap(@PathVariable("spuId") Long spuId);
}

为了保护上游服务，进一步提供服务降级类

package com.atguigu.gmall.product.client.impl;
   
import com.atguigu.gmall.product.client.ProductFeignClient;
import com.atguigu.gmall.product.model.*;
import org.springframework.stereotype.Component;
   
import java.math.BigDecimal;
import java.util.List;
   
/**
* 服务降级作用:保护调用方
*   当目标服务无法访问(宕机,目标服务实例没有多余线程处理请求),进行服务降级
*   不再发起http请求,直接走本地方法实现.
* @author: atguigu
* @create: 2023-02-25 11:22
*/
@Component
public class ProductDegradeFeignClient implements ProductFeignClient {
   @Override
   public SkuInfo getSkuInfoAndImages(Long skuId) {
       return null;
   }
   
   @Override
   public BaseCategoryView getCategoryView(Long category3Id) {
       return null;
   }
   
   @Override
   public BigDecimal getSkuPrice(Long skuId) {
       return null;
   }
   
   @Override
   public List<SpuPoster> getSpuPosterBySpuId(Long spuId) {
       return null;
   }
   
   @Override
   public List<BaseAttrInfo> getAttrList(Long skuId) {
       return null;
   }
   
   @Override
   public List<SpuSaleAttr> getSpuSaleAttrListCheckBySku(Long skuId, Long spuId) {
       return null;
   }
   
   @Override
   public String getSkuValueIdsMap(Long spuId) {
       return null;
   }
}

说明：接下来service-item引用service-product-client模块，就可以调用相应接口

4.2 商品详情服务(service-item)

4.2.1 构建模块

点击gmall-service，新建子模块：service-item 。选择New–>Module,操作如下

下一步

完成，结构如下

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>gmall-service</artifactId>
        <groupId>com.atguigu.gmall</groupId>
        <version>1.0</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>service-item</artifactId>


</project>

添加配置文件：bootstrap.properties

spring.application.name=service-item
spring.profiles.active=dev
spring.cloud.nacos.discovery.server-addr=192.168.200.128:8848
spring.cloud.nacos.config.server-addr=192.168.200.128:8848
spring.cloud.nacos.config.prefix=${spring.application.name}
spring.cloud.nacos.config.file-extension=yaml
spring.cloud.nacos.config.shared-configs[0].data-id=common.yaml

添加启动类

exclude = DataSourceAutoConfiguration.class 排除数据库链接jar表示当前项目{service-item} 不参与数据库查询

package com.atguigu.gmall;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
import org.springframework.cloud.openfeign.EnableFeignClients;

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)//取消数据源自动配置
@EnableDiscoveryClient
@EnableFeignClients
public class ItemApp {
    public static void main(String[] args) {
        SpringApplication.run(ItemApp.class, args);
    }
}

4.2.2 item服务汇总数据

YAPI接口地址：http://192.168.200.128:3000/project/11/interface/api/699

在service-item模块pom.xml中引入service-product-client依赖

<dependencies>
   <dependency>
       <groupId>com.atguigu.gmall</groupId>
       <artifactId>service-product-client</artifactId>
       <version>1.0</version>
   </dependency>
</dependencies>

提供获取商品详情相关数据RestFul接口实现

package com.atguigu.gmall.item;
   
import com.atguigu.gmall.common.result.Result;
import com.atguigu.gmall.product.client.ProductFeignClient;
import com.atguigu.gmall.product.model.*;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.CollectionUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
   
import java.math.BigDecimal;
import java.util.HashMap;
import java.util.List;
   
/**
* @author: atguigu
* @create: 2023-02-25 11:44
*/
@RestController
@RequestMapping("/api/item")
@SuppressWarnings("all")
public class ItemController {
   
   @Autowired
   private ProductFeignClient productFeignClient;
   
   
   /**
    * 提供给前端服务调用RestFul接口实现,汇总商品详情页所需7项数据
    *
    * @param skuId - **skuInfo**：当前商品SKU信息包含SKU图片列表
    *              - **categoryView**：当前商品所属的分类信息（包含三级）
    *              - **price**：当前商品最新价格
    *              - **spuPosterList**：当前商品海报图片集合
    *              - **skuAttrList**：当前商品平台属性及属性值集合--- 规格与参数
    *              - **spuSaleAttrList**：当前商品销售属性集合选中效果
    *              - **valuesSkuJson**：切换SKU转换SKU商品json字符串信息
    * @return
    */
   @GetMapping("/{skuId}")
   public Result getItemAllData(@PathVariable("skuId") Long skuId) {
       HashMap<String, Object> data = new HashMap<>();
       //1.远程调用商品服务-根据skuID查询商品sku信息
       SkuInfo skuInfo = productFeignClient.getSkuInfoAndImages(skuId);
       if (skuInfo != null) {
           data.put("skuInfo", skuInfo);
       }
       //2.根据商品Sku三家分类ID查询分类信息
       BaseCategoryView categoryView = productFeignClient.getCategoryView(skuInfo.getCategory3Id());
       if (categoryView != null) {
           data.put("categoryView", categoryView);
       }
   
       //3.根据SKuID查询价格
       BigDecimal price = productFeignClient.getSkuPrice(skuId);
       if (price != null) {
           data.put("price", price);
       }
   
       //4.根据Sku所属的SpuID查询海报图片列表
       List<SpuPoster> spuPosterList = productFeignClient.getSpuPosterBySpuId(skuInfo.getSpuId());
       if (!CollectionUtils.isEmpty(spuPosterList)) {
           data.put("spuPosterList", spuPosterList);
       }
   
       //5.根据SkuID查询商品平台属性列表
       List<BaseAttrInfo> attrList = productFeignClient.getAttrList(skuId);
       if (!CollectionUtils.isEmpty(attrList)) {
           data.put("skuAttrList", attrList);
       }
   
       //6.根据spuId,skuId查询当前商品销售属性(带选中效果)
       List<SpuSaleAttr> listCheckBySku = productFeignClient.getSpuSaleAttrListCheckBySku(skuId, skuInfo.getSpuId());
       if (!CollectionUtils.isEmpty(listCheckBySku)) {
           data.put("spuSaleAttrList", listCheckBySku);
       }
   
       //7.切换SKU转换SKU商品json字符串信息
       String valuesSkuJson = productFeignClient.getSkuValueIdsMap(skuInfo.getSpuId());
       if(StringUtils.isNotBlank(valuesSkuJson)){
           data.put("valuesSkuJson", valuesSkuJson);
       }
       return Result.ok(data);
   }
}

5. 商品详情页面渲染

5.1 商品详情Feign模块

在gmall-client 父工程下创建：service-item-client 子模块。搭建方式同service-product-client

提供远程调用Feign API接口

package com.atguigu.gmall.item.client;

import com.atguigu.gmall.common.result.Result;
import com.atguigu.gmall.item.client.impl.ItemDegradeFeignClient;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import java.util.Map;

@FeignClient(value = "service-item", fallback = ItemDegradeFeignClient.class)
public interface ItemFeignClient {

    @GetMapping("/api/item/{skuId}")
    public Result<Map> getItemAllData(@PathVariable("skuId") Long skuId);
}

服务降级类

package com.atguigu.gmall.item.client.impl;

import com.atguigu.gmall.common.result.Result;
import com.atguigu.gmall.item.client.ItemFeignClient;
import org.springframework.stereotype.Component;

/**
 * @author: atguigu
 * @create: 2023-02-25 11:57
 */
@Component
public class ItemDegradeFeignClient  implements ItemFeignClient {
    @Override
    public Result getItemAllData(Long skuId) {
        return null;
    }
}

5.2. 搭建前端web服务

5.2.1 搭建web-util

选中gmall-common父工程新建子模块：web-util，搭建方式如service-util

配置：pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>gmall-common</artifactId>
        <groupId>com.atguigu.gmall</groupId>
        <version>1.0</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>web-util</artifactId>

    <dependencies>
        <dependency>
            <groupId>com.atguigu.gmall</groupId>
            <artifactId>common-util</artifactId>
            <version>1.0</version>
        </dependency>

        <!-- 服务调用feign -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <scope>provided </scope>
        </dependency>
    </dependencies>
</project>

导入工具类，将目录中工具类复制到web-util模块中：

5.2.1 构建gmall-web

选中gmall-parent父工程新建子模块：gmall-web

修改配置pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
    <artifactId>gmall-parent</artifactId>
    <groupId>com.atguigu.gmall</groupId>
    <version>1.0</version>
</parent>
<modelVersion>4.0.0</modelVersion>

<artifactId>gmall-web</artifactId>

<dependencies>
    <dependency>
        <groupId>com.atguigu.gmall</groupId>
        <artifactId>web-util</artifactId>
        <version>1.0</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <!-- 服务注册 -->
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>
    <!-- 服务配置-->
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
    </dependency>


    <!-- 服务调用feign -->
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-openfeign</artifactId>
    </dependency>

    <!-- 流量控制 -->
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>
    </dependency>
    <!--导入详情微服务feign模块-->
    <dependency>
        <groupId>com.atguigu.gmall</groupId>
        <artifactId>service-item-client</artifactId>
        <version>1.0</version>
    </dependency>
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
    </dependency>
</dependencies>
</project>

启动类

package com.atguigu.gmall;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
import org.springframework.cloud.openfeign.EnableFeignClients;

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)//取消数据源自动配置
@EnableDiscoveryClient
@EnableFeignClients
public class WebAll {

    public static void main(String[] args) {
        SpringApplication.run(WebAll.class, args);
    }
}

在 gmall-web 模块中resources目录下新建：bootstrap.properties 文件

spring.application.name=web-all
spring.profiles.active=dev
spring.cloud.nacos.discovery.server-addr=192.168.200.128:8848
spring.cloud.nacos.config.server-addr=192.168.200.128:8848
spring.cloud.nacos.config.prefix=${spring.application.name}
spring.cloud.nacos.config.file-extension=yaml
spring.cloud.nacos.config.shared-configs[0].data-id=common.yaml

5.2.2.2 导入静态资源

在配套资料中02 工具类中gmall-web 文件夹下有static,templates ,将这两个文件夹放入到resouces文件夹中。

导入之后，可能发生异常警告

解决方案：将JS规范版本设置为ECMAScript6版本

5.2.3 编写gmall-web中的控制器

在gmall-web的控制器中远程调用商品详情微服务（service-item）中汇总商品SKU方法

package com.atguigu.gmall.web.controller;

import com.alibaba.fastjson.JSON;
import com.atguigu.gmall.common.result.Result;
import com.atguigu.gmall.item.client.ItemFeignClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Map;

/**
 * @author: atguigu
 * @create: 2023-02-25 14:18
 */
@Controller
@SuppressWarnings("all")
public class ItemController {

    @Autowired
    private ItemFeignClient itemFeignClient;

    /**
     * 渲染商品详情页面
     *
     * @param skuId
     * @return
     */
    @GetMapping("/{skuId}.html")
    public String getItem(@PathVariable("skuId") Long skuId, Model model) {
        //调用详情微服务获取渲染详情页所有的数据
        Result<Map> result = itemFeignClient.getItemAllData(skuId);
        model.addAllAttributes(result.getData());
        return "item/item";
    }

}

5.3 联调测试

浏览器中直接方法前端gmall-web微服务测试：

通过网关域名映射访问测试：

第5章-商品详情-页面静态化.md 44 KB Permalink History Raw

第5章-商品详情-页面静态化

1. 商品详情业务需求分析

1.1 详情渲染功能介绍

1.2 详情模块规划

2. 商品详情页面数据分析

3. 服务提供方(商品微服务)

3.1 获取sku基本信息与图片信息

3.1.1 编写控制器

3.1.2 业务接口与实现类

3.2 获取分类信息

3.2.1 需求分析

3.2.2 控制器

3.2.3 业务接口与实现类

3.2.4 持久层Mapper

3.3. 获取价格信息

3.3.1 编写控制器

3.3.2 业务接口与实现类

3.4 获取海报信息

3.4.1 编写控制器

3.4.2 业务接口与实现类

3.5 Sku对应的平台属性

3.5.1 编写控制器

3.5.2 业务接口与实现类

3.5.3 持久层

3.6 获取销售属性选中

3.6.1 编写控制器

3.6.2 业务接口与实现类

3.6.3 查询出sku对应spu的销售属性

3.6.4 在SpuSaleAttrMapper 接口中添加的方法

3.7 实现商品切换

3.7.1 编写控制器

3.7.2 编写接口与实现类

3.7.3 在SkuSaleAttrValueMapper中添加接口

4. 服务调用方(详情微服务)

4.1 Feign远程调用模块

4.1.1 搭建gmall-client父模块

4.1.2 搭建service-product-client

4.1.2.1 构建模块

4.1.2.2 封装service-product-client接口

4.2 商品详情服务(service-item)

4.2.1 构建模块

4.2.2 item服务汇总数据

5. 商品详情页面渲染

5.1 商品详情Feign模块

5.2. 搭建前端web服务

5.2.1 搭建web-util

5.2.1 构建gmall-web

5.2.2.2 导入静态资源

5.2.3 编写gmall-web中的控制器

5.3 联调测试

第5章-商品详情-页面静态化.md 44 KB

Permalink History Raw