微信小程序仿朋友圈Pro(内容发布、点赞、评论、回复评论)源码案例
zhuxiaoqiang · 96浏览量 · 发布于2021-01-06 +关注

作者Kindear,源码CloudUI,

项目背景

基于原来的开源项目 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)的基础上,终于推陈出新了。

有一说一,这次界面好看多了。至于推陈出新的原因很简单,接了个定制的项目,做完之后就把项目前端开源了。后续会延续原项目基础,保持前端和云开发代码的开源。

项目分析

这次项目完全1:1高仿微信小程序朋友圈,但是额外加了个发帖权限校验(可以去掉),项目小程序端的整体思想如下所示。

数据库设计

1.发帖记录表m_circle_list

2.评论记录表m_comment_list

3.点赞记录表m_thumb_list

4.统一身份校验表uims

项目效果预览



项目关键问题

  1. 如何即时刷新点赞和评论页面(即如何给对象数组中的元素赋值)


  • 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;
        }
    }


相关推荐

微信小程序自定义导航栏组件源码案例

相关信息 sz199511 · 78浏览 · 2021-01-04 21:18:36
滚动播放视频微信小程序特效源码

相关信息 xiaomei1994 · 103浏览 · 2020-12-04 17:29:34
微信小程序实现蓝牙控制音乐小车

相关信息 it老王 · 139浏览 · 2020-11-29 11:12:55
微信小程序车牌组件代码

相关信息 我是陈晓 · 353浏览 · 2020-11-27 16:00:05
加载中

0评论

评论
我爱编程,我爱工作,更爱生活
  • 源码信息
  • 所需 1 点数
  • 源码作者:匿名作者
  • 源码大小:58.066 KB
  • 源码类型:组件
  • 运行环境:未知
小鸟云服务器
扫码进入手机网页