【畅购商城】详情页模块之评论

小灰灰 2024-04-01 19:00 48阅读 0赞

**目录**

接口

分析

后端实现：JavaBean

后端实现

前端实现

## 接口 ##

> GET http://localhost:10010/web-service/comments/spu/2?current=1&size=2

> \{ 
> 
>  "code": 20000,
> 
>  "message": "查询成功",
> 
>  "data": \{ 
> 
>  "impressions": \[
> 
>  \{ 
> 
>  "id": 1,
> 
>  "title": "口感不错",
> 
>  "count": 15326,
> 
>  "spu\_id": 2,
> 
>  "sku\_id": 2600242
> 
>  \}
> 
>  \],
> 
>  "ratio": \{ 
> 
>  "common": "33.33",
> 
>  "bad": "33.33",
> 
>  "goods": "33.33"
> 
>  \},
> 
>  "comment\_count": 3,
> 
>  "comments": \[
> 
>  \{ 
> 
>  "id": 3,
> 
>  "userId": 1,
> 
>  "user": \{ 
> 
>  "face": "images/user3.jpg",
> 
>  \},
> 
>  "spuId": 2,
> 
>  "skuId": 2600248,
> 
>  "ratio": "2",
> 
>  "content": "差",
> 
>  \}
> 
>  \]
> 
>  \},
> 
>  "other": \{\}
> 
> \}

## 分析 ##

![2b1c0196785948b892f9fb9d3c624f80.png][]

## 后端实现：JavaBean ##

![074c584e331c40b7b358bf57efcbf7ad.png][]

步骤一：创建 Impression ，用于封装印象表中的数据

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;
    
    /** 印象
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @TableName("tb_impression")
    @Data
    public class Impression {
    
        @TableId(type = IdType.AUTO)
        private Integer id;
    
        private String title;
        private Integer count;
    
        @TableField("spu_id")
        @JsonProperty("spu_id")
        private Integer spuId;
    
        @TableField("sku_id")
        @JsonProperty("sku_id")
        private Integer skuId;
    
    }

步骤二：创建 CommentResult，用于封装评论相关的信息

package com.czxy.changgou4.pojo;
    
    import lombok.Data;
    
    import java.util.List;
    import java.util.Map;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @Data
    public class CommentResult {
        private List<Impression> impressions;       //印象
        private Map<String,Object> ratio;           //好评度
        private Integer comment_count;              //评论数
        private List<SkuComment> comments;          //评论
    
    }

## 后端实现 ##

步骤一：创建 ImpressionMapper，完成 “查询指定SpuId的所有印象”

![27d4644f23c44c3c9d5bef85a3472cd1.png][]

package com.czxy.changgou4.mapper;
    
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.czxy.changgou4.pojo.Impression;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Param;
    import org.apache.ibatis.annotations.Select;
    
    import java.util.List;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @Mapper
    public interface ImpressionMapper extends BaseMapper<Impression> {
    
        /**
         * 查询指定SpuId的所有印象
         * @param spuid
         * @return
         */
        @Select("select * from tb_impression where spu_id = #{spuid}")
        public List<Impression> findImpressionsBySpuid(@Param("spuid") Integer spuid);
    
    }

步骤二：修改 SkuCommentMapper，完成“查询指定好评度的评论数”

![a1fc95398815422abd503835cfcec6c4.png][]

/**
     * 查询指定好评度的评论数
     * @param spuid
     * @param ratio  0好评、1中评、2差评
     * @return
     */
    @Select("select count(*) from tb_sku_comment where spu_id = #{spuid} and ratio = #{ratio}")
    public Integer findCommentCountByRatio(@Param("spuid")Integer spuid,@Param("ratio")Integer ratio);

步骤三：修改 SkuCommentMapper，完成“查询SpuId的评论数”

![3a6789fba9c04fc0816b620e313fbe4d.png][]

/**
     * 查询SpuId的评论数
     * @param spuid
     * @return
     */
    @Select("select count(*) from tb_sku_comment where spu_id = #{spuid}")
    public Integer findTotalCommentBySpuid(@Param("spuid") Integer spuid);

步骤四：修改 skuCommentMapper，完成“查询指定spu的所有评论”

![da781f98d437469faecc243be4666625.png][]

/**
     * 查询指定spu的所有评论
     * @param spuid
     * @return
     */
    @Select("select * from tb_sku_comment where spu_id = #{spuid} limit #{startIndex},#{size}")
    @Results({
            @Result(property = "createdAt" , column = "created_at"),
            @Result(property = "updatedAt" , column = "updated_at"),
            @Result(property = "userId" , column = "user_id"),
            @Result(property = "skuId" , column = "sku_id"),
            @Result(property = "specList" , column = "spec_list"),
            @Result(property = "user" , one = @One(select = "com.czxy.changgou4.mapper.UserMapper.selectById"), column = "user_id"),
    })
    public List<SkuComment> findCommentsBySpuid(@Param("spuid") Integer spuid, @Param("startIndex") Integer startIndex, @Param("size") Integer size);

步骤五：创建 SkuCommentService接口，定义“查询指定spu的所有评论”方法

package com.czxy.changgou4.service;
    
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.czxy.changgou4.pojo.SkuComment;
    import com.czxy.changgou4.vo.CommentResult;
    import com.czxy.changgou4.vo.PageRequest;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    public interface SkuCommentService extends IService<SkuComment> {
        /**
         *
         * @param spuid
         * @param pageRequest
         * @return
         */
        public CommentResult findComments(Integer spuid, PageRequest pageRequest);
    }

步骤六：创建 SkuCommentServiceImpl实现类

package com.czxy.changgou4.service.impl;
    
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.czxy.changgou4.mapper.ImpressionMapper;
    import com.czxy.changgou4.mapper.SkuCommentMapper;
    import com.czxy.changgou4.mapper.SkuMapper;
    import com.czxy.changgou4.pojo.Impression;
    import com.czxy.changgou4.pojo.SkuComment;
    import com.czxy.changgou4.service.SkuCommentService;
    import com.czxy.changgou4.vo.CommentResult;
    import com.czxy.changgou4.vo.PageRequest;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    import org.springframework.transaction.annotation.Transactional;
    
    import javax.annotation.Resource;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @Service
    @Transactional
    public class SkuCommentServiceImpl extends ServiceImpl<SkuCommentMapper, SkuComment> implements SkuCommentService {
    
        @Resource
        private ImpressionMapper impressionMapper;
    
        public CommentResult findComments(Integer spuid, PageRequest pageRequest){
    
            CommentResult commentResult = new CommentResult();
    
            //查询所有印象
            List<Impression> impressionList = impressionMapper.findImpressionsBySpuid(spuid);
            commentResult.setImpressions(impressionList);
    
            //好评度
            Integer goodCount = baseMapper.findCommentCountByRatio(spuid,0);// 好评
            Integer commonCount = baseMapper.findCommentCountByRatio(spuid,1);// 中评
            Integer badCount = baseMapper.findCommentCountByRatio(spuid,2);// 差评
            Integer totalCount = baseMapper.findTotalCommentBySpuid(spuid);//
    
            Map<String,Object> ratio = new HashMap<>();
            ratio.put("goods", String.format("%.2f" , goodCount * 100.0 / totalCount ));
            ratio.put("common",String.format("%.2f" , commonCount * 100.0 / totalCount ));
            ratio.put("bad",String.format("%.2f" , badCount * 100.0 / totalCount ));
            commentResult.setRatio( ratio );
    
            //总评论数
            Integer comment_count = baseMapper.findNumBySpuId(spuid);
            commentResult.setComment_count(comment_count);
    
    
            //查询所有
            int startIndex = (pageRequest.getCurrent() - 1) * pageRequest.getSize();
            List<SkuComment> comments = baseMapper.findCommentsBySpuid(spuid, startIndex ,pageRequest.getSize());
            commentResult.setComments(comments);
    
    
            return commentResult;
        }
    
    }

步骤七：创建 SkuCommentController，完成“查询指定spu的所有评论”

package com.czxy.changgou4.controller;
    
    import com.czxy.changgou4.service.SkuCommentService;
    import com.czxy.changgou4.vo.BaseResult;
    import com.czxy.changgou4.vo.CommentResult;
    import com.czxy.changgou4.vo.PageRequest;
    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;
    
    import javax.annotation.Resource;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @RestController
    @RequestMapping("/comments")
    
    public class SkuCommentController {
    
        @Resource
        private SkuCommentService skuCommentService;
    
    
        @GetMapping("/spu/{spuid}")
        public BaseResult findCommentsByPage(@PathVariable("spuid") Integer spuid, PageRequest pageRequest){
            CommentResult comments = skuCommentService.findComments(spuid, pageRequest);
            return BaseResult.ok("查询成功", comments);
        }
    
    }

## 前端实现 ##

步骤一：修改 apiclient.js，添加 getComments 函数，完成查询评论操作

![94e45d687b34405daede23c1d3cc3d89.png][]

//评论
      getComments : (spuid , size, current) => {
        return axios.get(`/web-service/comments/spu/${spuid}`,{
          params: {
            size: size,
            current: current
          }
        })
      },

步骤二：修改 Goods.vue ，编写查询评论函数，用于支持分页

![512b63b327b94aef9f0bb72d94c0fe6e.png][]

data() {
        return {
          commentVo: {
            size: 2,
            current: 1,
          },
          commentResult: {
            ratio: {}
          }
        }
      },

async pageChanged (num) {
          this.commentVo.current = num
          // ajax 查询
          let { data } = await this.$request.getComments( this.goodsInfo.spuid, this.commentVo.current, this.commentVo.size)
          // 处理结果
          this.commentResult = data.data
        }

步骤三：修改 Goods.vue ，页面加载成功后，查询评论（第一页）

![49348bb7f69141b3b43c7706cce42b7a.png][]

//评论
         this.pageChanged(1)

步骤四：修改 Goods.vue ，展示“好评度”

![9df8bd3c0e3c4de6aae45245989d2c58.png][]

![d8dccbcaa78e4064bf674ba68cebe5a5.png][]

<div class="rate fl">
             <strong><em>{
       { commentResult.ratio.goods}}</em>%</strong> <br />
             <span>好评度</span>
        </div>
        <div class="percent fl">
            <dl>
                 <dt>好评（{
       { commentResult.ratio.goods}}%）</dt>
                 <dd><div :style="{'width': comments.ratio.goods + 'px'}"></div></dd>
             </dl>
             <dl>
                 <dt>中评（{
       { commentResult.ratio.common}}%）</dt>
                 <dd><div :style="{'width':comments.ratio.common + 'px'}"></div></dd>
             </dl>
             <dl>
                 <dt>差评（{
       { commentResult.ratio.bad}}%）</dt>
                 <dd><div :style="{'width': commentResult.ratio.bad + 'px'}" ></div></dd>
             </dl>
       </div>

步骤五：修改 Goods.vue ，展示“买家印象”

![28899cd06dee44889c1ee2061f4aab77.png][]

<dl>
         <dt>买家印象：</dt>
         <dd v-for="(ci,cii) in commentResult.impressions" :key="cii">
    		<span>{
       {ci.title}}</span><em>({
       {ci.count}})</em>
    	</dd>
    </dl>

步骤六：修改 Goods.vue ，展示“评论”

![a10fef97408d495faee9c1263c404057.png][]

<div v-for="(cc,cci) in commentResult.comments" :key="cci" class="comment_items mt10">
                    <div class="user_pic">
                      <dl>
                        <dt><a href=""><img :src="cc.user.face" alt="" /></a></dt>
                        <dd><a href="">{
       {cc.user.name}}</a></dd>
                      </dl>
                    </div>
                    <div class="item">
                      <div class="title">
                        <span>{
       {cc.created_at}}</span>
                        <strong class="star" :class="'star' + cc.star"></strong> 
                      </div>
                      <div class="comment_content">
                        {
       {cc.content}}
                      </div>
                      <div class="btns">
                        <a href="" class="reply">回复(0)</a>
                        <a href="" class="useful">有用(0)</a>
                      </div>
                    </div>
                    <div class="cornor"></div>
                  </div>

步骤七：修改 Goods.vue ，展示“分页条”

![a7a94b4ff83040b8857d0a2c823af467.png][]

import Pagination from '../components/Pagination'

![0f6e8cb17d714c19b0d6af9fcb8ade5f.png][]

<pagination :total="commentResult.comment_count"
                        :page_size="commentVo.size"
                        @page_changed="pageChanged" ></pagination>

[2b1c0196785948b892f9fb9d3c624f80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/372c4a0541294fafaea98267cbe71ccc.png
[074c584e331c40b7b358bf57efcbf7ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b989aa5a8499447b8bcc6dbe0e1c7765.png
[27d4644f23c44c3c9d5bef85a3472cd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/de7408539f6c498eafecbc1d681b1bb1.png
[a1fc95398815422abd503835cfcec6c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3f1136f8dc06406c8674f9184e088c8b.png
[3a6789fba9c04fc0816b620e313fbe4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4ac890083076400a8107bd0d988b0396.png
[da781f98d437469faecc243be4666625.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6962e532967847efb51fd2d16d316a54.png
[94e45d687b34405daede23c1d3cc3d89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c6a5ad5fc8e04217a6982a35f3885147.png
[512b63b327b94aef9f0bb72d94c0fe6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5550b7cd8bcd494d99074679b8b75558.png
[49348bb7f69141b3b43c7706cce42b7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/487ed5d3c5c14310a0508019dae5f1c2.png
[9df8bd3c0e3c4de6aae45245989d2c58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/00728b0bb1f74d95b07a8c88c60ac677.png
[d8dccbcaa78e4064bf674ba68cebe5a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f59293a709c844abbc9c37dc9f98b0f0.png
[28899cd06dee44889c1ee2061f4aab77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a0a520b635254bb8a9dd2064064e29b1.png
[a10fef97408d495faee9c1263c404057.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6af81b9945f84f619cc59ecbdc61860e.png
[a7a94b4ff83040b8857d0a2c823af467.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b9cf7a34241044fe8f70f0ae7ba54a70.png
[0f6e8cb17d714c19b0d6af9fcb8ade5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9ed124c26ced42dc86e8f0373e3e1d8c.png