2021-01-06

返回主页
小の白菜
对知识保持敬畏
博客园
首页
新随笔
联系
订阅
管理
随笔 - 54
文章 - 0
评论 - 22
微信小程序–仿朋友圈Pro(内容发布、点赞、评论、回复评论)
微信小程序–仿微信小程序朋友圈Pro(内容发布、点赞、评论、回复评论)
项目开源地址M朋友圈Pro 求个Star

项目背景

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

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

项目分析

​ 这次项目完全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 commentPOList;
private List 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注解

@RestController
public class CirclePartService {
@Autowired
CircleDao circleDao;
@Autowired
CommentDao commentDao;
@Autowired
ThumbDao thumbDao;
@Transactional
@RequestMapping(value = “/circlepart”)
public List GetCircleByLimit(@RequestParam(“page”) Integer page){
Pageable pageable = PageRequest.of(page,3, Sort.by(Sort.Direction.DESC,“createtime”));
List circlePartDtoList = new ArrayList<>();
// stream 转化为 list
List 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 commentPOList = commentDao.findByCircleidOrderByCreatetime(id);
List thumbPOList = thumbDao.findByCircleid(id);
List 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;
}
}

组件和页面之间的通信问题

参考我的文章微信小程序–页面与组件之间如何进行信息传递和函数调用

源码地址

开源不易，求个Star

https://gitee.com/Kindear/CloudUI

参考文档

ThorUI样式组件库 - KeyBoard

ColorUI样式组件库 - Card Nav

标签: 微信小程序, Java
关注我
收藏该文
0 0
« 上一篇： PicGo RequestError: Error: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:36677
posted @ 2021-01-05 23:26 Kindear 阅读(138) 评论(1) 编辑 收藏

评论列表
#1楼2021-01-06 08:46
WebAssembly
感谢分享

支持(0) 反对(0)
登录后才能发表评论，立即 登录 或 注册， 访问 网站首页
公告
昵称： Kindear
园龄： 3年9个月
粉丝： 53
关注： 21
+加关注
< 2021年1月 >
日 一 二 三 四 五 六
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 1 2 3 4 5 6
我的标签
微信小程序(23)
JPA(8)
C++(7)
数学(4)
Linux(3)
数据结构(2)
Debug(2)
Java(2)
MATLAB(1)
NodeJS(1)
更多
积分与排名
积分 - 104130
排名 - 8562
阅读排行榜

1. 微信小程序http连接访问解决方案(27046)
2. 中标麒麟系统远程桌面连接(13749)
3. PTA 邻接矩阵存储图的深度优先遍历(11926)
4. 小程序云开发–云函数操作数据库(11483)
5. PTA 邻接表存储图的广度优先遍历（20 分）(9769)
   推荐排行榜
6. Linux (Debian) 安装MySQL 后如何获取登录密码(5)
7. Spring JPA 定义查询方法(3)
8. 中标麒麟系统远程桌面连接(2)
9. Express 配置HTML页面访问(1)
10. 微信小程序-基于高德地图API实现天气组件(动态效果)(1)
    Copyright © 2021 Kindear
    Powered by .NET 5.0 on Kubernetes