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

我心飞翔 分类:vue

目录

接口

分析

后端实现: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 {

    @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 -->

回复

我来回复
  • 暂无回复内容