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

目录

​​接口​​

​​分析​​

​​后端实现：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": {}

}

分析

后端实现：JavaBean

步骤一：创建 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 [email protected]
 */
@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 [email protected]
 */
@Data
public class CommentResult {
    private List<Impression> impressions;       //印象
    private Map<String,Object> ratio;           //好评度
    private Integer comment_count;              //评论数
    private List<SkuComment> comments;          //评论

}

后端实现

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

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 [email protected]
 */
@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，完成“查询指定好评度的评论数”

/**
 * 查询指定好评度的评论数
 * @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的评论数”

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

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

/**
 * 查询指定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 [email protected]
 */
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 [email protected]
 */
@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 [email protected]
 */
@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 函数，完成查询评论操作

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

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

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 ，页面加载成功后，查询评论（第一页）

//评论
     this.pageChanged(1)

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

<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 ，展示“买家印象”

<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 ，展示“评论”

<!-- 评论开始 -->
              <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> <!-- star5表示5星级 start4表示4星级，以此类推 -->
                  </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 ，展示“分页条”

import Pagination from '../components/Pagination'

<!-- 分页信息 start -->
              <pagination :total="commentResult.comment_count"
                    :page_size="commentVo.size"
                    @page_changed="pageChanged" ></pagination>
              <!-- 分页信息 end -->