微信小程序仿朋友圈Pro(内容发布、点赞、评论、回复评论)源码案例
zhuxiaoqiang · 522浏览量 · 发布于2021-01-06
作者Kindear,源码CloudUI,
项目背景
基于原来的开源项目 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)的基础上,终于推陈出新了。
有一说一,这次界面好看多了。至于推陈出新的原因很简单,接了个定制的项目,做完之后就把项目前端开源了。后续会延续原项目基础,保持前端和云开发代码的开源。
项目分析
这次项目完全1:1高仿微信小程序朋友圈,但是额外加了个发帖权限校验(可以去掉),项目小程序端的整体思想如下所示。
数据库设计
1.发帖记录表m_circle_list
2.评论记录表m_comment_list
3.点赞记录表m_thumb_list
4.统一身份校验表uims
项目效果预览
项目关键问题
如何即时刷新点赞和评论页面(即如何给对象数组中的元素赋值)
ilike(e) { let cid = e.currentTarget.dataset.idx; let index = e.currentTarget.dataset.index; let nickname = app.globalData.userInfo.nickName; let thumblist = `list[${index}].thumbPOList`; let likelist = `list[${index}].thumblist`; Router.UpThumbInfo(cid).then(res => { this.setData({ [likelist]: this.data.list[index].thumblist + nickname, }) }) }
如何简短的表示分页查询条件规则
wx.request({ url: Config.SevDomain+'circlepart', method:'GET', data:{ page:parseInt(skipstep/3) + parseInt(skipstep%3) }, success:res=>{ } })
如何联查数据库中的三张表并封装返回数据
封装返回数据
public class CirclePartDto { private CirclePO circlePO; private List<CommentPO> commentPOList; private List<String> thumbPOList; public CirclePO getCirclePO() { return circlePO; } public void setCirclePO(CirclePO circlePO) { this.circlePO = circlePO; } public List<CommentPO> getCommentPOList() { return commentPOList; } public void setCommentPOList(List<CommentPO> commentPOList) { this.commentPOList = commentPOList; } public List<String> getThumbPOList() { return thumbPOList; } public void setThumbPOList(List<String> thumbPOList) { this.thumbPOList = thumbPOList; } }
事务多表联查 JPA 核心@Transactional注解
@RestControllerpublic class CirclePartService { @Autowired CircleDao circleDao; @Autowired CommentDao commentDao; @Autowired ThumbDao thumbDao; @Transactional @RequestMapping(value = "/circlepart") public List<CirclePartDto> GetCircleByLimit(@RequestParam("page") Integer page){ Pageable pageable = PageRequest.of(page,3, Sort.by(Sort.Direction.DESC,"createtime")); List<CirclePartDto> circlePartDtoList = new ArrayList<>(); // stream 转化为 list List<CirclePO> circlePOList = circleDao.findAll(pageable).get().collect(Collectors.toList()); // 查询 for (int i=0;i<circlePOList.size();i++){ CirclePO circlePO = circlePOList.get(i); Integer id = circlePO.getId(); CirclePartDto circlePartDto = new CirclePartDto(); circlePartDto.setCirclePO(circlePO); List<CommentPO> commentPOList = commentDao.findByCircleidOrderByCreatetime(id); List<ThumbPO> thumbPOList = thumbDao.findByCircleid(id); List<String> nicknameList = new ArrayList<>(); for(int j=0;j<thumbPOList.size();j++){ nicknameList.add(thumbPOList.get(j).getNickname()); } circlePartDto.setThumbPOList(nicknameList); circlePartDto.setCommentPOList(commentPOList); circlePartDtoList.add(circlePartDto); } return circlePartDtoList; } }
源码使用过程中,如无法搭建或有增加其他功能需求,可联系QQ:236-0248-666 ,付费搭建安装修改服务!
温馨提示:网站源码只作为学习或研究使用,如需商业使用请购买正版!
温馨提示:网站源码只作为学习或研究使用,如需商业使用请购买正版!
相关推荐
仿拼多多拼团倒计时微信小程序源码
相关信息
无间道 · 338浏览 · 2022-02-09 17:25:50
切换城市功能微信小程序代码
相关信息
sz199511 · 297浏览 · 2022-02-09 17:20:28
滑动选型卡微信小程序代码
相关信息
zhuxiaoqiang · 282浏览 · 2022-02-09 10:14:35
微信小程序中的股票分时图K线图源码
相关信息
sz199511 · 512浏览 · 2021-03-04 16:49:42
微信小程序自定义导航栏组件源码案例
相关信息
sz199511 · 498浏览 · 2021-01-04 21:18:36
滚动播放视频微信小程序特效源码
相关信息
xiaomei1994 · 823浏览 · 2020-12-04 17:29:34
微信小程序实现蓝牙控制音乐小车
相关信息
it老王 · 884浏览 · 2020-11-29 11:12:55
小程序拾色器(颜色选择器)组件mini-color-picker
相关信息
it老王 · 534浏览 · 2020-11-29 10:59:14
我爱编程,我爱工作,更爱生活
分类专栏
最新发布
源码排行榜
0评论