2

做一个用户评论页面,首先要写好静态的页面样式,再运用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));
            }
        });
        

    };

bellezhu
75 声望5 粉丝