微信小程序--仿朋友圈Pro(內容發佈、點贊、評論、回覆評論)

微信小程序--仿微信小程序朋友圈Pro(內容發佈、點贊、評論、回覆評論)

項目開源地址M朋友圈Pro 求個Star

項目背景

​ 基於原來的開源項目 微信小程序仿朋友圈功能開發（發佈、點贊、評論等功能）的基礎上，終於推陳出新了。

有一說一，這次界面好看多了。至於推陳出新的原因很簡單🧐，接了個定製的項目，做完之後就把項目前端開源了。後續會延續原項目基礎，保持前端和雲開發代碼的開源。

項目分析

​ 這次項目完全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,
           })
         })
   }
   

2. 如何簡短的表示分頁查詢條件規則

   wx.request({
      url: Config.SevDomain+'circlepart',
      method:'GET',
      data:{
          page:parseInt(skipstep/3) + parseInt(skipstep%3)
      },
      success:res=>{
             
      }
   })
   

3. 如何聯查數據庫中的三張表並封裝返回數據

   封裝返回數據

   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註解

   @RestController
   public 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;
       }
   }
   
   

4. 組件和頁面之間的通信問題

   參考我的文章微信小程序--頁面與組件之間如何進行信息傳遞和函數調用

源碼地址

開源不易，求個Star

https://gitee.com/Kindear/CloudUI

參考文檔

ThorUI樣式組件庫 - KeyBoard

ColorUI樣式組件庫 - Card Nav