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

接口

分析

后端实现：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 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 {@Resourceprivate 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 {@Resourceprivate 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 -->