微信小程式--仿朋友圈Pro(內容釋出、點贊、評論、回覆評論)

Kindear發表於2021-01-05
微信小程式

微信小程式--仿微信小程式朋友圈Pro(內容釋出、點贊、評論、回覆評論)

專案開源地址M朋友圈Pro 求個Star

專案背景

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

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

專案分析

​ 這次專案完全1:1高仿微信小程式朋友圈，但是額外加了個發帖許可權校驗(可以去掉)，專案小程式端的整體思想如下所示。

資料庫設計

1.發帖記錄表m_circle_list

2.評論記錄表m_comment_list

3.點贊記錄表m_thumb_list

4.統一身份校驗表uims

專案效果預覽

微信小程式--仿朋友圈Pro(內容釋出、點贊、評論、回覆評論) 微信小程式--仿朋友圈Pro(內容釋出、點贊、評論、回覆評論)

專案關鍵問題

  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

相關文章