完善点赞功能

一、新增评论和回复无法点赞

因为原先字符串没有点赞的功能，所以得加这个功能

因为js代码没有占位符或foramt函数，这里打算定义一个format函数，让他可以通过占位符给他加进去。实际是替换我们前面定义好的花括号加数字字符串的操作。

        String.prototype.format = function () {
            var str = this;
            for (var i = 0; i < arguments.length; i++){
                var str = str.replace(new RegExp('\\{' + i + '\\}', 'g'), arguments[i])
            };
            return str;
            }

$('#comment_form').submit(function () {
            //判断是否为空
            $('#comment_error').text('');
            if(CKEDITOR.instances["id_text"].document.getBody().getText().trim()==''){
                $('#comment_error').text('评论内容不能为空');
                return false
            }
            //更新数据到textarea里边
            CKEDITOR.instances["id_text"].updateElement();
            //异步提交，标签选择器选中form表单，当表单提交的时候会触发submit()方法，触发事件的时候回调一个function
            //这个function作为一个参数写到这里 return false 会阻止它点完按钮直接提交这个操作,这里我们需要一个异步提交
            $.ajax({
                url: "{% url 'update_comment' %}",
                type: 'POST',
                data: $(this).serialize(),
                cache: false,
                success: function (data) {
                    console.log(data);
                    //判断是否处理成功
                    if(data['status']=='SUCCESS'){
                        //插入数据


                        if($('#reply_comment_id').val()=='0'){
                            //插入评论
                            var comment_html = '<div id="root_{0}" class="comment">\n' +
                                '                                <span>{1}</span>\n' +
                                '                                <span>({2}):</span>\n' +
                                '                                <div id="comment_{0}">\n' +
                                '                                    {3}\n' +
                                '                                </div>\n' +
                                '                                <div class="like" onclick="likeChange(this,\'{4}\',{0})">\n' +
                                '                                    <span class="glyphicon glyphicon-thumbs-up"></span> \n' +
                                '                                    <span class="liked-num">0</span>\n' +
                                '                                </div>\n' +
                                '                                <a href="javascript:reply({0});">回复</a></div>';
                        comment_html = comment_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['text'], data['content_type']);
                        $('#comment_list').prepend(comment_html);
                        }else {
                            //插入回复
                            var reply_html = ' <div class="reply">\n' +
                                '                                        <span>{1}</span>\n' +
                                '                                        <span>({2})</span>\n' +
                                '                                        <span>回复</span>\n' +
                                '                                        <span>{3}:</span>\n' +
                                '                                        <div id="comment_{0}">\n' +
                                '                                            {4}\n' +
                                '                                        </div>\n' +
                                '                                        <div class="like" onclick="likeChange(this,\'{5}\',{0})">\n' +
                                '                                            <span class="glyphicon glyphicon-thumbs-up "></span> \n' +
                                '                                            <span class="liked-num">0</span>\n' +
                                '                                        </div>\n' +
                                '                                        <a href="javascript:reply({0});">回复</a>\n' +
                                '                                    </div>';
                            reply_html = reply_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['reply_to'], data['text'], data['content_type']);
                            $('#root_' + data['root_pk']).append(reply_html);
                        }

                        //清空编辑框的内容
                        CKEDITOR.instances['id_text'].setData('');
                        $('#reply_content_container').hide();
                        $('#reply_comment_id').val('0');
                        $('#no_comment').remove();
                        $('#comment_error').text('评论成功');
                    }else {
                        //显示错误信息
                        $('#comment_error').text(data['message']);
                    }

                },
                error: function (xhr) {
                    console.log(xhr);
                }
            });
            return false;
        });

content_type通过views传过来

data['content_type'] = ContentType.objects.get_for_model(comment).model

二、未登录情况下点赞

运用bootstrap的模态框登录解决这个问题。

<!-- Modal -->
        <div class="modal fade" id="login_modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <form id="login_modal_form" action="" method="POST">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">登录</h4>
                        </div>
                        <div class="modal-body">
                            {% csrf_token %}
                            {% for field in login_form %}
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                            {% endfor %}
                            <span id="login_modal_tip" class="text-danger"></span>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">登录</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

为了让它不刷新页面采用ajax提交

$('#login_modal_form').submit(function (event) {
            event.preventDefault();
           $.ajax({
               url: '{% url 'login_for_modal' %}',
               type: 'POST',
               data: $(this).serialize(),
               cache: false,
               success: function (data) {
                   if(data['status']=='SUCCESS'){
                       window.location.reload();
                   }else {
                       $('#login_modal_tip').text('用户名或密码不正确');
                   }
               }
           });
        });

因为是ajax，登录的处理方法需要重写一个

def login_for_modal(request):
    login_form = LoginForm(request.POST)
    data = {}
    if login_form.is_valid():  # 验证数据是否有效
        user = login_form.cleaned_data['user']
        auth.login(request, user)
        data['status'] = 'SUCCESS'
    else:
        data['status'] = 'ERROR'
    return JsonResponse(data)