商品评价-实现评价等级数据查询

1.直接上图

2.数据库设计

3.设计商品评价数量等级VO

/**
 * 用来展示商品的评价数量的VO
 */
public class CommentLevelCountsVO {
    public Integer totalCounts;
    public Integer goodCounts;
    public Integer normalCounts;
    public Integer badCounts;
    省略get和set方法......
 }

4.编写Service
ItemService

	/**
     *  根据商品id查询商品评价等级数量
     * @param itemId
     */
    public CommentLevelCountsVO queryCommentCounts(String itemId);

5.编写Service实现类
ItemServiceImpl

	@Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public CommentLevelCountsVO queryCommentCounts(String itemId) {
        Integer goodCounts = getCommentCounts(itemId, CommentLevel.GOOD.type);
        Integer normalCounts = getCommentCounts(itemId, CommentLevel.NORMAL.type);
        Integer badCounts = getCommentCounts(itemId, CommentLevel.BAD.type);
        Integer totalCounts = goodCounts+normalCounts+badCounts;

        CommentLevelCountsVO commentLevelCountsVO = new CommentLevelCountsVO();
        commentLevelCountsVO.setTotalCounts(totalCounts);
        commentLevelCountsVO.setGoodCounts(goodCounts);
        commentLevelCountsVO.setGoodCounts(normalCounts);
        commentLevelCountsVO.setGoodCounts(badCounts);
        return commentLevelCountsVO;
    }
    @Transactional(propagation = Propagation.SUPPORTS)
    Integer  getCommentCounts(String itemId,Integer Level){
        ItemsComments condition = new ItemsComments();
        condition.setItemId(itemId);
        if (Level != null) {
            condition.setCommentLevel(Level);
        }
        return itemsCommentsMapper.selectCount(condition);
    }

6.编写Controller
ItemController
注意此时的参数不是路径参数了而是请求参数了
路径参数和请求参数的区别

 @ApiOperation(value = "查询商品评价等级",notes = "查询商品评价等级",httpMethod = "GET")
    @GetMapping("/commentLevel")
    public JSONResult commentLevel(
            @ApiParam(name = "itemId",value ="商品Id",required = true)
            @RequestParam String itemId){
        if (StringUtils.isBlank(itemId)) {
            return JSONResult.errorMsg(null);
        }
        CommentLevelCountsVO countsVO = itemService.queryCommentCounts(itemId);

        return JSONResult.ok(countsVO);
    }

7.部分前端代码

		<div class="rate">
			<div v-if="countsVO.totalCounts == 0">
				<strong>100<span>%</span></strong>
			</div>
			<div v-if="countsVO.totalCounts > 0">
				<strong>{{Math.round(countsVO.goodCounts / countsVO.totalCounts * 100)}}<span>%</span></strong>
			</div>
				<br /><span>好评度</span>
		</div>
		<div class="comment-counts">
			<div class="counts-words" @click="renderCommentsByLevel('')">全部评价（{{countsVO.totalCounts}}）</div>
			<div class="counts-words" @click="renderCommentsByLevel(1)" style="margin-left: 20px;">好评（{{countsVO.goodCounts}}）</div>
			<div class="counts-words" @click="renderCommentsByLevel(2)" style="margin-left: 20px;">中评（{{countsVO.normalCounts}}）</div>
			<div class="counts-words" @click="renderCommentsByLevel(3)" style="margin-left: 20px;">差评（{{countsVO.badCounts}}）</div>
		</div>

// 渲染商品评价等级数量
				renderCommentLevelCounts(itemId) {

					var serverUrl = app.serverUrl;
					axios.defaults.withCredentials = true;
					axios.get(
							serverUrl + '/items/commentLevel?itemId=' + itemId, {})
						.then(res => {
							if (res.data.status == 200) {
								var countsVO = res.data.data;
								this.countsVO = countsVO;
								// console.log(countsVO);

							} else if (res.data.status == 500) {
								alert(res.data.msg);
							}
						});
				},