蓝鲸Django:用户发出评论功能的实现

编写评论接口

moments.views.py:

@login_required
def comment(request):
    user = request.user.username
    status_id = request.POST.get("status_id")
    at_person = request.POST.get("at_person","")
    text = request.POST.get("text")

    Reply.objects.create(author=user,status=Status.objects.get(id=status_id),typ
e="1",text=text,at_person=at_person)
    return JsonResponse({"result":True})

在urls.py中增加地址：

。。。
from moments.views import like,comment
。。。
urlpatterns = [
    。。。
    path('comment',comment)
]

弹出评论框

a)可参考 bootstrap 模态框文档：https://v3.bootcss.com/javascript/#modals

b)拷贝示例代码到 status.html： https://v3.bootcss.com/javascript/#modals-examples

c)修改弹出框的代码

将弹出框的代码放在status.html最后一个div标签下面，

内容做如下调整：

    <!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
	        <h4 class="modal-title" id="myModalLabel">评论</h4>
	      </div>
	      <div class="modal-body">
	           <textarea class="form-control" rows="5" id="text"> </textarea>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary">发送</button>
	      </div>
	    </div>
	  </div>
	</div>

d)在浏览器控制台中进行检查：

输入：$("#myModal").modal()

绑定弹出框

控制台中试验：

$("#myModal").attr("x",3)
Object { 0: div#myModal.modal.fade.in
, length: 1, context: HTMLDocument http://10.0.0.30:8000/status, selector: "#myModal" }

$("#myModal").attr("x")
"3"

status.html中js 添加：

function show_dialog(status_id) {
        	$("#myModal").modal()
        	$("#myModal").attr("status_id",status_id)
        }

此方法作用是调出弹出框 ，同时绑定status_id

将此方法绑定在评论按钮上：

传递评论值

在 status.html 编写 comment 函数

function comment() {
        	var status_id = $("#myModal").attr("status_id")
        	var text = $("#myModal").find("#text").val()
        	$.ajax({
        		url: "/comment",
        		type: "post",
        		data :{
        			"status_id":status_id,
        			"text":text,
        			"comment_at": $("#myModal").attr("comment_at"),
        			"csrfmiddlewaretoken": "{{ csrf_token }}",
        		},
        		success: function(){
        			location.reload()
        		}
        	})
        }

绑定函数

页面测试