[springboot 开发单体web shop] 8. 商品详情&评价展示

上文回顾

上节 我们实现了根据搜索关键词查询商品列表和根据商品分类查询，并且使用到了mybatis-pagehelper插件，讲解了如何使用插件来帮助我们快速实现分页数据查询。本文我们将继续开发商品详情页面和商品留言功能的开发。

需求分析

关于商品详情页，和往常一样，我们先来看一看jd的示例：


从上面2张图，我们可以看出来，大体上需要展示给用户的信息。比如：商品图片，名称，价格，等等。在第二张图中，我们还可以看到有一个商品评价页签,这些都是我们本节要实现的内容。

商品详情

开发梳理

我们根据上图（权当是需求文档，很多需求文档写的比这个可能还差劲很多...）分析一下，我们的开发大致都要关注哪些points:

• 商品标题
• 商品图片集合
• 商品价格（原价以及优惠价）
• 配送地址（我们的实现不在此，我们后续直接实现在下单逻辑中）
• 商品规格
• 商品分类
• 商品销量
• 商品详情
• 商品参数（生产场地，日期等等）
• ...

根据我们梳理出来的信息，接下来开始编码就会很简单了，大家可以根据之前课程讲解的，先自行实现一波，请开始你们的表演～

编码实现

DTO实现

因为我们在实际的数据传输过程中，不可能直接把我们的数据库entity之间暴露到前端，而且我们商品相关的数据是存储在不同的数据表中，我们必须要封装一个ResponseDTO来对数据进行传递。

• ProductDetailResponseDTO包含了商品主表信息，以及图片列表、商品规格(不同SKU)以及商品具体参数（产地，生产日期等信息）

@Data
@ToString
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class ProductDetailResponseDTO {
    private Products products;
    private List<ProductsImg> productsImgList;
    private List<ProductsSpec> productsSpecList;
    private ProductsParam productsParam;
}

Custom Mapper实现

根据我们之前表的设计，这里使用生成的通用mapper就可以满足我们的需求。

Service实现

从我们封装的要传递到前端的ProductDetailResponseDTO就可以看出，我们可以根据商品id分别查询出商品的相关信息，在controller进行数据封装就可以了，来实现我们的查询接口。

• 查询商品主表信息（名称，内容等）

在com.liferunner.service.IProductService中添加接口方法：

      /**
       * 根据商品id查询商品
       *
       * @param pid 商品id
       * @return 商品主信息
       */
      Products findProductByPid(String pid);

接着，在com.liferunner.service.impl.ProductServiceImpl中添加实现方法：

      @Override
      @Transactional(propagation = Propagation.SUPPORTS)
      public Products findProductByPid(String pid) {
          return this.productsMapper.selectByPrimaryKey(pid);
      }

直接使用通用mapper根据主键查询就可以了。

同上，我们依次来实现图片、规格、以及商品参数相关的编码工作

• 查询商品图片信息列表

      /**
       * 根据商品id查询商品规格
       *
       * @param pid 商品id
       * @return 规格list
       */
      List<ProductsSpec> getProductSpecsByPid(String pid);
  
  ----------------------------------------------------------------
      
      @Override
      public List<ProductsSpec> getProductSpecsByPid(String pid) {
          Example example = new Example(ProductsSpec.class);
          val condition = example.createCriteria();
          condition.andEqualTo("productId", pid);
          return this.productsSpecMapper.selectByExample(example);
      }

• 查询商品规格列表

      /**
       * 根据商品id查询商品规格
       *
       * @param pid 商品id
       * @return 规格list
       */
      List<ProductsSpec> getProductSpecsByPid(String pid);
  
  ------------------------------------------------------------------
      
      @Override
      public List<ProductsSpec> getProductSpecsByPid(String pid) {
          Example example = new Example(ProductsSpec.class);
          val condition = example.createCriteria();
          condition.andEqualTo("productId", pid);
          return this.productsSpecMapper.selectByExample(example);
      }

• 查询商品参数信息

      /**
       * 根据商品id查询商品参数
       *
       * @param pid 商品id
       * @return 参数
       */
      ProductsParam findProductParamByPid(String pid);
  
  ------------------------------------------------------------------
      
      @Override
      public ProductsParam findProductParamByPid(String pid) {
          Example example = new Example(ProductsParam.class);
          val condition = example.createCriteria();
          condition.andEqualTo("productId", pid);
          return this.prod