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));
            }
        });
        

    };