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

lwx12525 发布于2019-08-20 14:49 / 3370人阅读

摘要：上一篇文章中我们已经实现了评论的发布功能，现在要实现回复评论的功能，，首先呢，要知道你回复的是哪一条评论，所以我们这里要或得评论的，当点击评论的时候实现评论的回复，这里用到，把该方法放到中，这里叫做，然后在里面的里面定义一个参数，把赋给的值

上一篇文章中我们已经实现了评论的发布功能，现在要实现回复评论的功能，，首先呢，要知道你回复的是哪一条评论，所以我们这里要或得评论的id，当点击评论的时候实现评论的回复，这里用到@click="reply(item)"，把该方法放到methods中，这里叫做item.id，然后在new vue里面的data里面定义一个参数，把item.id赋给comment_id,comment_id的值一开始为空,然后在UIChatBox.open里的ret函数参数里面调用comment_id: vm.comment_id

data:{
    comment_id: null
}
methods: {
                reply: function (item) {
                    this.comment_id = item.id
                }
            }

这里已经获取了comment_id的值，当回复时应该让手机默认键盘弹出，输入框或得焦点，，这里用到了UIChatBox.popupKeyboard();然后当你回复时，一般常见的会有回复：“某某”的评论或者“@”发表评论人的评论，所以呢，这里要或得发表评论的用户信息，，在data里面设置一个user额变量，再将item的用户id赋给user，所以综上所述，代码如下

data:{
                user: JSON.parse(localStorage.getItem("user")),
                comment_id: null,
                comments: []
            }，
methods: {
                reply: function (item) {
                    this.comment_id = item.id
                    UIChatBox.popupKeyboard();
                    UIChatBox.value({
                        msg: "@" + item.user.username + " "
                    });            //设置输入框的值
                }
            }

到这里，我们回复的功能就已经基本实现了，以下是完整代码

html

        
            
                
                    
                        
                    
                    
                        {{item.user.username}} 角色 {{item.id}}
                        {{item.user.created_at}}
                    
                
                
                    {{item.content}}
                
            
        
  
    
js
apiready = function(){
        var id=api.pageParam.id;
        var UIChatBox = api.require("UIChatBox");

        var vm=new Vue({
            el:"#app",
            data:{
                user: JSON.parse(localStorage.getItem("user")),
                comment_id: null,
                comments: []
            },
            methods: {
                reply: function (item) {
                    this.comment_id = item.id
                    UIChatBox.popupKeyboard();
                    UIChatBox.value({
                        msg: "@" + item.user.username + " "
                    });
                }
            },
            created:function(){
                var that=this;
                app.get("news/"+id + "/comments",function(data){
                    that.comments=data.data;
                    // console.log(data)
                },function(err){

                })
            }
        });


        // app.alert(localStorage.getItem("token"))
        
        UIChatBox.open({
            style:{
                indicator:{
                    target:"both"
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.eventType == "send") {
                    //post到服务端接口
                    app.post("news/" + id + "/comments", {
                        comment_id: vm.comment_id,
                        content: ret.msg
                    }, function (data) {
                        vm.comments.push(data)
                        api.toast({
                            msg: "发送成功"
                        });
                        UIChatBox.closeKeyboard();
                        vm.comment_id = null
                    }, function (xhr) {
                        switch (xhr.status) {
                            case 422:
                                api.toast({
                                    msg: xhr.responseJSON.content[0]
                                });
                                break;
                        }
                    })
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
        

    };

补充说明，当我们回复别人的评论时，别人发表的评论用户头像在左边，本人发布的回复或者评论头像在右边，这里有点像qq、微信的聊天界面，大家可以想象以下，，所以这里我们要判断以下让列表中的头像靠左或靠右，如果评论item.user_id 等于user.id时，说明是作者本人发布，在这里就出现了以下代码

:class="item.user_id == user.id ? "aui-pull-right" : """

当符合item.user_id == user.id时添加aui框架中的aui-pull-right样式，否则不添加。

混合云云服务器评论回复 java评论回复代码网站制作及发布 java实现文章评论

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81948.html

【Laravel+Apicloud+Vue开发混合式App系列】第0集

摘要：关于作者程序开发人员，不拘泥于语言与技术，目前主要从事和前端开发，使用和，端使用混合式开发。个人网站最近刚写了一个手机在线播放的电影站开发混合式系列第集技术选型是一套简洁优雅的开发框架。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://...

Corwien 2019-06-27 15:29 评论0 收藏0
【Laravel+Apicloud+Vue开发混合式App系列】第0集

摘要：关于作者程序开发人员，不拘泥于语言与技术，目前主要从事和前端开发，使用和，端使用混合式开发。个人网站最近刚写了一个手机在线播放的电影站开发混合式系列第集技术选型是一套简洁优雅的开发框架。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://...

adie 2019-08-20 14:25 评论0 收藏0
评论模块 - 后端数据库设计及功能实现

摘要：以上就是对评论模块的设计与功能实现，欢迎各位大佬提出代码优化建议，共同成长代码出自开源项目，致力于打造全平台型全栈精品开源项目。评论模块在很多系统中都有，CodeRiver河码作为类似程序员客栈的沟通协作平台自然也不会少。前端界面是参考了简书的评论模块，专门写了一篇文章介绍实现步骤： vue + element-ui + scss 仿简书评论模块感兴趣的可以看看。项目地...

Alliot 2019-08-06 14:23 评论0 收藏0
评论模块 - 后端数据库设计及功能实现

摘要：以上就是对评论模块的设计与功能实现，欢迎各位大佬提出代码优化建议，共同成长代码出自开源项目，致力于打造全平台型全栈精品开源项目。评论模块在很多系统中都有，CodeRiver河码作为类似程序员客栈的沟通协作平台自然也不会少。前端界面是参考了简书的评论模块，专门写了一篇文章介绍实现步骤： vue + element-ui + scss 仿简书评论模块感兴趣的可以看看。项目地...

Wuv1Up 2019-06-25 18:55 评论0 收藏0
apicloud+jquery+vue遇到的问题

摘要：所以，我们运用这个函数，也可以理解为将异步的代码转换为同步执行更简单的说就是，上面的代码执行完之后，里面的代码才能运行，以下是代码这段时间再用apicloud的混合开发，其中在运用swiper插件这一块遇到了一些问题，多亏了我们老大经验丰富，让我们这些后辈少采一些坑，，在这里做一下总结，主要是Vue.nextTick()函数的用法坑：当时在运用swiper插件的时候，没用用vue进...

琛ｈ。 2019-08-20 14:33 评论0 收藏0