Laravel之评论系统(二)之添加表情

用Laravel框架开发一个简单的评论系统

image description

Laravel之评论系统(二)之添加表情

在上一篇,前端部分,只是简单的介绍了下,只做了一个form表单,我们现在将前端部分完善。

  1. 首先,先给form表单添加一个提交表单的方法,代码如下:

    $('.comment_btn').click(function(){
        var c = $.trim($('.comment_content').val());
        var a = "{{url('/blog/comment')}}";
        if(c=='' || c.length<10){
            layer.msg('您没有发表任何意见或者内容少于10个字符,不能评论哦!');
            return false;
        }else{
            $('#comment-form').attr('action',a);
            $('#comment-form').submit();
        }
    });
  1. 在上一篇中,我们提到了表情,现在我们将其完善,此处我们用的是新浪微博的表情插件。

    首先先下载几个必要的js及css,main.jssinaFaceAndEffec.jssinaFaceAndEffec.css

    下载好后,将其引入到前端文件中


    <link rel="stylesheet" type="text/css" href="{{asset('css/sinaFaceAndEffec.css')}}" />

    ...省略其他jQuery等必须引用的

    <script src="https://cdn.bootcss.com/layer/3.0.3/layer.min.js"></script>
    <script type="text/javascript" src="{{asset('js/main.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/sinaFaceAndEffec.js')}}"></script>

引入必要文件后,在script标签中填写以下代码,开始使用(如果样式有点问题,请自行修改下)


    // 绑定表情
    $('.face-icon').SinaEmotion($('.comment_content'));
    //表情解析
    window.onload = function(){
        $('li.am-comment').each(function(){
            var inputText = $(this).find('.am-comment-bd').html();
            $(this).find('.am-comment-bd').html(AnalyticEmotion(inputText));
        });
    }

一切完成后,效果图如下:

表情效果图

OK,前端关于提交评论部分已经完成,至于剩下的回复、点赞等功能,之后再讲。

END