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);
}
});
},