接口
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 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的所有印象”
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，完成“查询指定好评度的评论数”
/** * 查询指定好评度的评论数 * @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 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 函数，完成查询评论操作
//评论 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 -->
