評論功能和render渲染
阿新 • • 發佈：2018-06-03
val counter isp TP 遇到 url request IV 登錄 
1.render渲染
1.js代碼放在HTML中
render返回頁面，並將返回的數據渲染到而面上。即頁面上只要有{{}}就渲染，
但是在js代碼中，使用{{}},得不到渲染的值，原因是{{}}未定義，js時一種語言，所有的變量都需要定義才能使用。
比如在python中輸入a，運行報錯，輸入’a‘ 運行，就沒問題。因此，在js中更需要為{{}}定義類型
var article_id="{{ article.pk }}"; 加入引號，定義為str
2.js變為靜態文件(即放到單獨的文件中）
var article_id="{{ article.pk }}";失效，會渲染不了。將js代碼放到這個文件中，在HTML中引入<script src="/static/myarticle.js"></script>
由於render遇到{{}}才會渲染，而在當前HTML中<script src="/static/myarticle.js"></script>中並沒有{{}}
因此js代碼中數據渲染不了
解決方法：在HTML中新建標簽，將js代碼中需要的數據，添加到HTML中，這樣js通過找到HTML中這個標簽進行取值
在HTNL中添加標簽：屬性設置為需要的屬性
<div class="info" article_id="{{ article.pk }}" username="{{ request.user.username }}"></div>
js中取值：
var article_id = $(".info").attr("article_id");
2.評論功能
1.在頁面上顯示出所有評論。即在處理article_detail函數時，從數據庫中取得對應文章的評論表
渲染到頁面
2.用戶評論：
1.在文章處理頁面，制作評論區，在評論框中顯示出用戶的昵稱
2.判斷用戶是否登陸，如果未登陸，就去登陸，已登陸就做評論操作
3.用戶評論分為根評論(直接輸入評論）和子評論（回復別人），在子評論點擊回復時，光標移到評論框內。設置一個屬性區分是子評論還是跟評論。設置pid=""
4.如果是回復，就為其添加@用戶名的功能
5.提交評論，判斷是根評論還是子評論，如果是子評論，就將@用戶名給去掉，通過索引進行切片
6.向後臺發送數據，後臺取到傳遞過來的文章id，pid和內容，並取到評論人的id，判斷pid
7.如果是根評論，就將評論信息寫到評論表中，如果是子評論，需將額外的付評論用戶ip寫進去
8.將評論內容，創建時間，用戶名傳給ajax
9.ajax接收到數據後，在評論例表中加入新拼接的標簽
//拼接使用++
var comment_li= ‘<li class="list-group-item"><div><span style="color: gray">‘ + create_time + ‘</span> <a href=""><span>‘ + username + ‘</span></a></div> <div class="con"> <p> ‘ + content + ‘ </p> </div> </li>‘;
$(".comment_list").append(comment_li);
10.清空文本框並將pid重新設置為空
3.評論樹
‘‘‘ def comment_tree(request,article_id): ret=list(models.Comment.objects.filter(article_id=article_id).values("pk","content","parent_comment_id")) print(ret) return JsonResponse(ret,safe=False) // 獲取評論數據，展示評論樹結構 $.ajax({ url: "/blog/comment_tree/" + ‘{{ article.pk }}/‘, success: function (data) { console.log(data); $.each(data, function (index, comment_dict) { var s = ‘<div class="comment_item" comment_id=‘ + comment_dict.pk + ‘> <span class="content">‘ + comment_dict.content + ‘</span> </div>‘ if (comment_dict.parent_comment_id) { // 子評論 pid=comment_dict.parent_comment_id; $("[comment_id="+pid+"]").append(s); } else { // 根評論 $(".comment_tree").append(s); } }) } }); ‘‘‘View Code
4.評論功能代碼
‘‘‘ {% block page-main %} <div class="article-detail"> <h1>{{ article.title }}</h1> {# <h3>{{ article.desc }}</h3>#} <p>{{ article.articledetail.content|safe }}</p> </div> <div class="poll clearfix"> <div id="div_digg"> <div class="diggit action"> <span class="diggnum" id="digg_count">{{ article.up_count }}</span> </div> <div class="buryit action"> <span class="burynum" id="bury_count">{{ article.down_count }}</span> </div> <div class="clear"></div> <div class="diggword" id="digg_tips" style="color: red;"></div> </div> </div> <p>評論列表</p> <ul class="comment_list"> {% for comment in comment_list %} <li class="list-group-item"> <div> <a href="">#{{ forloop.counter }}樓</a> <span style="color: gray">{{ comment.create_time|date:"Y-m-d H:i" }}</span> <a href=""><span>{{ comment.user.username }}</span></a> <a class="pull-right reply_btn" username="{{ comment.user.username }}" comment_pk="{{ comment.pk }}"><span>回復</span></a> </div> {# 父評論 #} {% if comment.parent_comment_id %} <div class="pid_info well"> <p> {{ comment.parent_comment.user.username }}: {{ comment.parent_comment.content }} </p> </div> {% endif %} <div class="con"> <p> {{ comment.content }} </p> </div> </li> {% endfor %} </ul> //評論功能 {% if request.user.username %} <div class="div_comment"> <p>昵稱：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p> <p>評論內容</p> <textarea name="" id="comment_content" cols="60" rows="10"></textarea> <p> <button id="comment_btn" style="margin-top: 20px">提交評論</button> </p> </div> {% else %} <a href="/login/">登錄</a> {% endif %} {#自定義一個屬性標簽，便用後續使用屬性值，並且當js設置為靜態文件時，時必須要用到的 #} <div class="info" article_id="{{ article.pk }}" username="{{ request.user.username }}"></div> {% endblock %} {% block page_js %} {% csrf_token %} <script> $("#div_digg .action").on("click",function () { //判斷是點贊還是踩滅,註意不能是diggnum if($(".info").attr("username")){ var is_up=$(this).hasClass("diggit"); console.log(is_up); //獲取到文章id 在js中需要加引號 var article_id="{{ article.pk }}"; $.ajax({ url:"/blog/up_down/", type:"post", data:{ "is_up":is_up, "article_id":article_id, "csrfmiddlewaretoken":$("[name=‘csrfmiddlewaretoken‘]").val(), }, success:function(data){ alert(data); //如果為真，說明是第一次操作 //console.log(data.state); 都可以使用 console.log(data["state"]); if(data.state){ if(is_up){ var val=$("#digg_count").text(); //點贊加1 val=parseInt(val)+1; console.log(val); $("#digg_count").text(val); }else{ var val=$("#bury_count").text(); val=parseInt(val)+1; $("#bury_count").text(val); //踩加1 } }else{ var val=66; console.log(val); if(data.first_action){ $("#digg_tips").html("您已經推薦過"); }else { $("#digg_tips").html("您已經反對過"); } } } } ) }else{ location.href = "/login/" } }); //提交評論 pid為空就是根評論，不為空就是子評論 var pid=""; $("#comment_btn").on("click",function () { var article_id=‘{{ article.pk }}‘; var content=$("#comment_content").val(); console.log(article_id,content); if(pid) { //子評論時，要有@父評論用戶，然後再填評論，在存評論時只存評論內容，因此用到切割 var index=content.indexOf("\n"); content=content.slice(index+1) } $.ajax({ url:"/blog/comment/", type:"post", data:{ article_id:article_id, content:content, pid:pid, csrfmiddlewaretoken: $("[name=‘csrfmiddlewaretoken‘]").val(), }, success:function (data) { alert(data) var create_time=data.create_time; var content=data.content; var username=data.username; //拼接使用++ var comment_li= ‘<li class="list-group-item"><div><span style="color: gray">‘ + create_time + ‘</span> <a href=""><span>‘ + username + ‘</span></a></div> <div class="con"> <p> ‘ + content + ‘ </p> </div> </li>‘; $(".comment_list").append(comment_li); // 清空文本框 $("#comment_content").val(‘‘); // 清空pid pid = "" } }) }); //回復功能 $(".list-group-item .reply_btn").on("click",function () { //點擊回復的時候，光標移到評論框 $("#comment_content").focus(); //得到屬性為username的值 var v="@"+$(this).attr("username")+"\n"; $("#comment_content").val(v) //pid賦值 pid = $(this).attr("comment_pk") }) </script> {% endblock %} ‘‘‘HTML
‘‘‘ def article_detail(request, username, pk): """ :param username: 被訪問的blog的用戶名 :param pk: 訪問的文章的主鍵id值 :return: """ user = models.UserInfo.objects.filter(username=username).first() if not user: return HttpResponse("404") blog = user.blog # 找到當前的文章 article_obj = models.Article.objects.filter(pk=pk).first() # 所有評論列表 comment_list = models.Comment.objects.filter(article_id=pk) return render( request, "article_detail.html", { "username": username, "article": article_obj, "blog": blog, "comment_list": comment_list } ) def comment(request): if request.method==‘POST‘: article_id=request.POST.get("article_id") pid=request.POST.get("pid") content=request.POST.get("content") user_pk=request.user.pk response = {} if not pid: #此時是根評論 comment_obj=models.Comment.objects.create(article_id=article_id,user_id=user_pk,content=content) else: #此時是子評論，要添加父評論的id comment_obj=models.Comment.objects.create(article_id=article_id, user_id=user_pk, content=content,parent_comment_id=pid) response["create_time"]=comment_obj.create_time.strftime("%Y-%m-%d") #comment_obj.create_time是個日期對象，需要轉換 response["content"]= content response["username"] = comment_obj.user.username return JsonResponse(response) ‘‘‘View
評論功能和render渲染