apicloud+vue+jquery实现评论发布及回复（一）

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

    };