版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/89059759
前言
小编最近在项目中，需要实现点赞、评论的功能，关于点赞、评论的状态、数字等，需要从数据库中查取出来，如何查取，是通过一个后端接口返回所有的信息，还是使用两个后端接口去查询对应的点赞、评论信息呢？
效果图展示
第一种方案-两个接口调用
一、实现思路
1.一个接口查询作答列表
2.第二个接口查询点赞、评论状态
3.第二个接口的查询是在第一个查询接口返回结果后，循环遍历结果集，每条记录去插入对应的点赞、评论信息
二、弊端
1. 前端请求后端的http协议是异步执行的，导致数据不对应，出现错乱数据
2. 不能够实现作答列表的灵活排序，排序后，数据无法对应。
第二种方案--一个接口调用
一、实现思路
1.后端处理
一个接口查询出所有需要的信息
public PageInfo<RespondenceModel> queryAllAnswer(String id, String givingUserId, int pageNum, int pageSize, String sort) {
String userId = null;
String brainStormingId = null;
boolean isThumb = false;
PageHelper.startPage(pageNum, pageSize);
// 按排序规则 查找出答案内容
List<RespondenceModel> respondenceModelList = respondenceDao.queryAllAnswer(id, sort);
if (CollectionUtils.isEmpty(respondenceModelList)) {
return new PageInfo<>();
} else {
// 判断当前登录用户givingUserId是否给此作答记录点赞
for (RespondenceModel respondenceModel : respondenceModelList) {
userId = respondenceModel.getUserId();
brainStormingId = respondenceModel.getBrainStormingId();
// 根据头脑风暴id，作答人id，点赞人id判断是否点赞该作答记录
isThumb = this.queryIsThumbByUserId(brainStormingId, userId, givingUserId);
respondenceModel.setThumb(isThumb);
// 根据头脑风暴id，作答人id，获取该作答人的所有评论
List<CommentEntity> commentEntityList = commentService.queryCommentByBrainIdAndUserId(brainStormingId, userId);
respondenceModel.setCommentEntityList(commentEntityList);
}
PageInfo<RespondenceModel> pageInfo = new PageInfo(respondenceModelList);
return pageInfo;
}
}2.前端处理
直接使用接口返回的数据，渲染前端即可
<ion-content padding class="contentback">
<ion-slides [options]="slideOpts">
<ion-slide *ngFor="let list of lists; let j = index">
<ion-col>
<!-- 所有作答信息 -->
<ion-row>
<span style="text-align:center">{{j+1}}/{{lists.length}}</span>
</ion-row>
<!-- 作答人 -->
<ion-row>
<span style="font-size: 15px;margin-left: -20%;margin-top: 15%;">
<img src="assets/imgs/recordPerson.png" alt="为他点赞吧" style="width: 10%;">
{{list.userName}}
</span>
</ion-row>
<!-- 作答内容 -->
<ion-row style="margin-top: 15%;">
<div style="font-size:24px;margin-top: -10%;width: 100%">
{{list.content}}
</div>
</ion-row>
<!-- 作答时间 -->
<ion-row>
<span style="font-size: 15px;margin-top: 12%;"
*ngIf="list.updateTime==undefined">{{list.createTime}}</span>
<span style="font-size: 15px;margin-top: 12%;"
*ngIf="list.updateTime!==undefined">{{list.updateTime}}
</span>
</ion-row>
<hr style="height:1px;border:none;border-top:1px solid black;" />
<!-- 点赞 -->
<ion-row>
<ion-col>
<span style="font-size: 15px;float: right;">{{list.laudCount}}</span>
<span *ngIf='!list.thumb' (click)="thumbUp(list)">
<img src="assets/imgs/smallThumb.png" alt="为他点赞吧"
style="width: 10%;float: right;padding-bottom: 15%;">
</span>
<span *ngIf='list.thumb' (click)="thumbUp(list)">
<img src="assets/imgs/smallThumbUp.png" alt="想取消赞吗？"
style="width: 10%;float: right;padding-bottom: 15%;">
</span>
</ion-col>
</ion-row>
<!-- 评论条数 -->
<ion-row>
<span>对
<span style="color:brown">{{list.userName}}</span>
的所有评论
<span style="color:brown">{{list.commentCount}}</span>
条
</span>
</ion-row>
<!-- 该作答人的所有评论 -->
<ion-row *ngIf='list.commentEntityList!=[]'>
<ion-row *ngFor="let comment of list.commentEntityList; let j = index" style="margin-top:2%;">
<!-- 评论人、头像 -->
<div style="font-size: 10px;color: gray;">
<span *ngIf='j/2==0' style="
margin-left: -48%;
font-size: 15px;
color: gray;">
<img src="assets/imgs/commentMan.png" alt="为他评论吧" style="width: 15%;">
{{comment.creator}}
</span>
<span *ngIf='j/2!=0' style="
margin-left: -48%;
font-size: 15px;
color: gray;">
<img src="assets/imgs/commentWoman.png" alt="为他评论吧" style="width: 15%;">
{{comment.creator}}
</span>
</div>
<!-- 评论内容 -->
<div style="font-size:15px;width:100%;margin-top: 4%;margin-bottom: 4%;">
{{comment.comment}}
</div>
<!-- 评论时间 -->
<div style="
font-size: 10px;
color: gray;
margin-left: 3%;
">{{comment.createTime}}
</div>
</ion-row>
</ion-row>
</ion-col>
</ion-slide>
</ion-slides>
</ion-content>
小结
通后端处理数据比前端push集合方便多了，而且出来的数据也比较准确，实践出真知，积累经验，降低走弯路的成本。
感谢您的访问！