查看“蓝鲸Django:用户发出评论功能的实现”的源代码
←
蓝鲸Django:用户发出评论功能的实现
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==编写评论接口== moments.views.py: <nowiki>@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})</nowiki> 在urls.py中增加地址: <nowiki>。。。 from moments.views import like,comment 。。。 urlpatterns = [ 。。。 path('comment',comment) ] </nowiki> ==弹出评论框== a)可参考 bootstrap 模态框文档:https://v3.bootcss.com/javascript/#modals [[文件:bd20-5-52.png]] b)拷贝示例代码到 status.html: https://v3.bootcss.com/javascript/#modals-examples [[文件:bd20-5-53.png]] c)修改弹出框的代码 将弹出框的代码放在status.html最后一个div标签下面, 内容做如下调整: <nowiki> <!-- 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></nowiki> d)在浏览器控制台中进行检查: 输入:$("#myModal").modal() [[文件:bd20-5-54.png|600px]] ==绑定弹出框== 控制台中试验: <nowiki>$("#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"</nowiki> status.html中js 添加: <nowiki> function show_dialog(status_id) { $("#myModal").modal() $("#myModal").attr("status_id",status_id) }</nowiki> 此方法作用是调出弹出框 ,同时绑定status_id 将此方法绑定在评论按钮上: [[文件:bd20-5-55.png|600px]] [[文件:bd20-5-56.png|600px]] ==传递评论值== ===在 status.html 编写 comment 函数=== <nowiki> 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() } }) }</nowiki> ===绑定函数=== [[文件:bd20-5-57.png|600px]] ===页面测试=== [[文件:bd20-5-58.png|600px]]
返回至
蓝鲸Django:用户发出评论功能的实现
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息