小程序评论区动态刷新

Posted 2020-12-02 boqianliu

还是前两天的小程序，用户的个人主页需要有评论区，发布评论之后需要把评论写到数据库，同时动态更新评论区。

评论的数据库设计如下：

POST请求将评论发送给后台

ownerID获得不太难，之前进入主页的时候已经把用户名给传进来了，那么commenterID要怎么获得呢？

可以在app.js里面定义全局数组，当用户成功登录后，把从数据库查询相关信息存储来记录用户的相关信息，需要的时候调取即可。

//app.js
App({
    ......    
    user:{
        userID:-1,
        userName:"",
        hometown:"",
        modelID:-1
    }
    ......    
}

至于time如何获得，可以借助微信提供的API获取时间然后再转换格式。

util.formatTime(new Date());

//pages/homepage/homepage.js
  comment:function(e){
    var that = this;
    var frmData={};
    frmData.commenterID = app.user.userID;
    //从全局data获取评论者ID
    frmData.text = e.detail.value.text;
    //从当前主页获取被评论者ID
    frmData.ownerID = this.data.owner.userID;
    //加入时间
    frmData.time = util.formatTime(new Date());
    console.log("评论内容：");
    console.log(JSON.stringify(frmData));
    wx.request({
      url: ‘http://localhost:8080/addComment‘,
      method: ‘POST‘,
      data: JSON.stringify(frmData),
      header: { ‘Content-Type‘: ‘application/json‘ },
      success: function (res) {
        if (res.data != null &&res.data != ‘‘) {
          wx.showToast({
            title: ‘发表成功‘,
            icon: ‘‘,
            duration: 2000
          })
          //动态更新评论区
        }
        else {
          wx.showToast({
            title: ‘发表失败‘,
            icon: ‘‘,
            duration: 2000
          })
        }
      },
      fail:res=>{
        console.log(res.data);
      }
    })
  }

 可以看到我是在comment函数里面定义的frmData数组来存储评论相关信息，这个地方我本来是想在页面里边定义一直使用，就不用每次临时获取commenterID了，但是一直报错frmData未定义，最后只能在comment函数

里面临时定义数组了，如果有朋友知道是哪里的问题，麻烦评论一下，感激不尽。

thirdScriptError
frmData is not defined;at pages/homepage/homepage page comment function
ReferenceError: frmData is not defined

动态更新评论区

评论成功写入数据库后，需要实时更新评论区，这里采用的是将frmData加到comment数组里面，配合wx:for动态更新评论区。

（comment数组在页面初始化的时候，就已经把查询到的数据放进去了）

<view class="title_text">
  <text>评论列表</text>
</view>

<!--显示评论区-->
<view wx:for="{{comment}}">
用户ID:{{item.commenterID}}  {{item.time}}
  <view>
  评论内容:{{item.text}}
  </view>
</view>

数组有个函数叫concat，用来连接和拓展数组，双方可以都是数组，也可以是数组和元素。

我刚开始想的是把frmData接到comment后面，但是comment初始化的时候，数据会不断往后顶，就跟堆栈似的。

就比如说数据库的数据是按07/01 07/02存放的，取出来comment会是07/02 07/01的顺序，但是我今天07/06的数据再跟到后面，数据就变成了07/02 07/01 07/06，是不是怪怪的。。

所以就换了个办法，先把frmData放到数组A里面，然后把comment接到A后面就好了，这样评论顺序就是倒序的，评论时间新的会在前面。

 

 　　　　　 //将comment数组添加到新评论frmData后面
          //实现时间倒序，评论时间最新的会被显示到最前面
          //wx:for将会实时更新评论列表
          var newComment=[frmData];
          that.data.comment = newComment.concat(that.data.comment);
          that.setData({
            comment: that.data.comment,
          });

 

效果如图：

今天的工作还有完善小程序登录，阻止封禁用户登录，没什么记录的价值，就不写了。