还是前两天的小程序,用户的个人主页需要有评论区,发布评论之后需要把评论写到数据库,同时动态更新评论区。
评论的数据库设计如下:
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,
});
效果如图:
今天的工作还有完善小程序登录,阻止封禁用户登录,没什么记录的价值,就不写了。