做一个用户评论页面,首先要写好静态的页面样式,再运用vue渲染数据,从而或得用户评论的数据,这里主要运用了v-for,以下是简单的示例代码
html
<div id="app">
<ul class="comment-list">
<li v-for="item in comments">
<div >
<div >
<img src="../image/demo1.png" >
</div>
<div>
<p>{{item.user.username}} <span>角色 {{item.id}}</span></p>
<p>{{item.user.created_at}}</p>
</div>
</div>
<div>
{{item.content}}
</div>
</li>
</ul>
</div>
js
var vm=new Vue({
el:'#app',
data:{
comments:[]
},
created:function(){
var that=this;
app.get('news/'+id+'/comment',function(data){
that.comments=data.data
})
}
})
注意:上文使用的app.get方法,是自己定义的ajax请求数据的方法,原方法为
$.ajax({
url: '接口根目录' + url,
type: 'get',
dataType: 'json',
headers:{'Authorization': 'Bearer ' + localStorage.getItem('token')},
success: success,
error: error
});
这里的接口连接也可以为本地,当前端做测试用时可以创建一个本地的json文件,自定义数据
然后我们的评论功能就要开始了,,
首先呢,要先一下思路,,我们做评论功能呢,,是不是要先有一个输入框输入评论的内容,,恩恩,,对哒,,我们要写一个固定在界面底部的输入框,当输入框或得焦点时,弹出手机默认的输入键盘,因为我们这里运用的是apicloud进行开发,它本身就有一个UIChatBox的功能,是原生开发,所以我们这里直接调用他们就好了,,
是不是又get到一个知识点呢???
首先呢,要调用这一个功能,在页面里面我们调用apicloud的功能都需要将js代码写在apiready=function(){};
var UIChatBox = api.require('UIChatBox');
UIChatBox.open({
},function(ret,err){
if (ret) {
alert(JSON.stringify(ret));
如果引入成功,alert输入框里面输入的内容
注意:ret对象里面的eventType有三种状态show、send、clickExtras,我们操作的一般是send这个状态,这里下面可以用到
} else {
alert(JSON.stringify(err));
报错提示,当内容为空时,进行err提示
}
});
现在所有的界面都已完成,,现在我们开始发布评论啦,现在想想,我们发布一条评论应该是先把数据传给数据库,然后再从数据库读取数据再进行渲染,,这里就用到的post传值,因为只有或得输入框内的数据才能传值,所以我们把这个传值的方法写到UIChatBox.open的回掉函数ret里面,又因为我们执行的是发送这个按钮才进行的post,所以要加判断ret.eventType是否为send
if (ret.eventType == 'send') {
//post到服务端接口
app.post('news/' + id + '/comments', {
content: ret.msg
}, function (data) {
api.toast({
msg: '发送成功'
});
}, function (xhr) {
})
}
}
这里的app.post和上文提到的app.get都是我们自己定义的,有兴趣的同学可以去查一下ajax传递数据的方法,,
到目前为止,,评论的数据提交已经完成了,,下面我们进行评论数据提交后的读取,,大家都知道获取数据用到get方法,传数据用到post方法,,所以呢我们这里又用到了app.get,这里的评论接口获取在上文中已经实现了,说十一我们只需在UIChatBox.open的回掉函数ret里面给comments的这个数组里面追加一个新的对象,让它显示在评论列表下面,这个就so easy啦
vm.comments.push(data)
因为这里的UIChatBox.open函数跟上文的open行数不是同一个函数,所以这里用把上面的new Vue定义为vm,这里调用vm即可
到这里,,发布评论已经成功了,,
虽然功能是实现啦,,但是好像用户体验方面做的还不是很好,当你发布成功之后,手机上的输入键盘还依然显示在那里,,是不是不大符合用户体验呢,所以我们要让它发送成功后将输入键盘隐藏,这里就要用的UIChatBox.open的参数了
收起键盘
closeKeyboard()
UIChatBox.open详细用法请参考链接描述
下面是该例子的完整代码
apiready = function(){
var id=api.pageParam.id;
var UIChatBox = api.require('UIChatBox');
var vm=new Vue({
el:'#app',
data:{
comments: []
},
created:function(){
var that=this;
app.get('news/'+id + '/comments',function(data){
that.comments=data.data;
// console.log(data)
},function(err){
})
}
});
UIChatBox.open({
style:{
indicator:{
target:'both'
}
}
}, function(ret, err) {
if (ret) {
if (ret.eventType == 'send') {
//post到服务端接口
app.post('news/' + id + '/comments', {
content: ret.msg
}, function (data) {
vm.comments.push(data)
api.toast({
msg: '发送成功'
});
UIChatBox.closeKeyboard();
}, function (xhr) {
switch (xhr.status) {
case 422:
api.toast({
msg: xhr.responseJSON.content[0]
});
break;
}
})
}
} else {
alert(JSON.stringify(err));
}
});
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。