【项目】点赞评论功能-后端接口数据重要性
2019-04-07 11:55
190 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/89059759
前言
小编最近在项目中,需要实现点赞、评论的功能,关于点赞、评论的状态、数字等,需要从数据库中查取出来,如何查取,是通过一个后端接口返回所有的信息,还是使用两个后端接口去查询对应的点赞、评论信息呢?
效果图展示
第一种方案-两个接口调用
一、实现思路
1.一个接口查询作答列表
2.第二个接口查询点赞、评论状态
3.第二个接口的查询是在第一个查询接口返回结果后,循环遍历结果集,每条记录去插入对应的点赞、评论信息
二、弊端
1. 前端请求后端的http协议是异步执行的,导致数据不对应,出现错乱数据
2. 不能够实现作答列表的灵活排序,排序后,数据无法对应。
第二种方案--一个接口调用
一、实现思路
1.后端处理
一个接口查询出所有需要的信息
[code] 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.前端处理
直接使用接口返回的数据,渲染前端即可
[code]<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集合方便多了,而且出来的数据也比较准确,实践出真知,积累经验,降低走弯路的成本。
感谢您的访问!
相关文章推荐
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- 项目A 第一天 抓接口 测试数据
- 数据接收接口项目(c#接收方接收url传来的数据)
- java后端发布的接口数据是如何加密传输
- APP后端数据接口注意事项
- iOS开发小技巧--适当的清空模型中的某个数据,达到自己的需求,记得最后将数据还原(百思项目评论页面处理最热评论)
- 数据访问接口功能及含义
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
- discuz论坛apache日志hadoop大数据分析项目:清洗数据核心功能解说及代码实现
- 数据统计对IT服务管理的重要性——服务台语音系统之报表功能 推荐
- Winform项目调用asp.net数据接口
- APP后端数据接口注意事项
- 项目开发实战 jQuery+php+mysql实现数据上传功能
- GrideVlew提供点击按钮添加新数据,单击项目修改,长按删除功能
- Java 加解密类的功能用法介绍及实际项目中数据加密解密的解决办法
- javaWed项目中用过滤器实现转码功能,敏感词汇过滤更能,处理Get和Post接收数据中的中文乱码问题以及敏感词汇的处理
- 我的博客网站开发3——博客首页功能实现之各排行版(阅读数,评论数,推荐数)的数据绑定
- PHP后端android项目(一)安卓端请求SAE云端json数据
- HTTP接口不同项目网页之间数据交互跨域以及打开的窗口无法跳出关掉的问题
- 博客项目实现文章评论功能(重点是评论回复)