django高級之點贊、文章評論及上傳文件

時間 2019-12-06

標籤 django 高級文章評論上傳文件欄目 Python 简体版

原文原文鏈接

目錄：css

點贊
文章評論
上傳文件
保留頁面條件

1、點贊

一、所用技術：html

django model F查詢
js應用：$(function () {}); 爲文件加載完成執行ready() 方法。等同於on時間，多實例，使用。

　　　　定時器方法：setInterval(方法,間隔多長時間（毫秒）執行一次)前端

　　　　　　var obj = setInterval(function () {python

　　　　　　　　　　if(xxx <= 0){
　　　　　　　　　　　　clearInterval(obj); //結束執行
　　　　　　},100);jquery

　　　　ps.setTimeout(表達式,延時時間)在執行時,是在載入後延遲指定時間後,去執行一次表達式,記住,次數是一次 ajax

css應用：

　　　　position屬性django

值	描述
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。json 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。後端
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。瀏覽器元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

在Ajax操做時候，回調函數中的 $(this)已經不是原來的$(this)。需在外層函數聲明。

二、應用代碼：

前端：

 1 <div>
 2                 <div>{{ row.title }}</div>
 3                 <div>{{ row.user.username }}  評論：{{ row.comment_count }}
 4     <!--使用相對定位-->
 5                     <div style="display: inline-block;position: relative;">
 6                         贊：<a class="new-like" new-id="{{ row.id }}">{{ row.like_count }}</a>
 7                     </div>
 8                 </div>
 9             </div>
10 <script src="/static/jquery-3.2.1.js"></script>
11     <script>
12         $(function () {
13             bindLikeEvent();
14         });
15 
16         function bindLikeEvent() {
17             $('.new-like').click(function () {
18                 // 獲取當前新聞ID
19                 var newId = $(this).attr('new-id');
20                 var $this = $(this);
21                 $.ajax({
22                     url: '/do_like.html',
23                     type: "POST",
24                     data: {'newId': newId},
25                     dataType: 'JSON',
26                     success:function (arg) {
27                         if(arg.status){
28                             var origin = $this.text();
29                             var count = parseInt(origin);
30                             if(arg.code == 666){
31                                 $this.text(count - 1 );
32                                 showLikeCount($this,'-1');
33 
34                             }else if(arg.code == 999){
35                                 $this.text(count + 1 );
36                                 showLikeCount($this,'+1');
37 
38                             }
39                         }else{
40                             alert(arg.msg);
41                         }
42                     }
43 
44                 })
45             })
46         }
47         
48         function showLikeCount($this,text) {
49             var fontSize = 5;
50             var top = 0;
51             var right = 0;
52             var opacity = 1;
53 
54             var tag = document.createElement('span');
55             // var tag = document.getElementById()
56             tag.innerText = text;
57             tag.style.position = "absolute";
58             // 默認大小
59             tag.style.fontSize = fontSize + "px";
60             tag.style.top = top + 'px';
61             tag.style.right = right + 'px';
62             tag.style.opacity = opacity;
63             $this.after(tag);
64 
65             // 定時器，沒0.5s執行一次
66             var obj = setInterval(function () {
67                 fontSize += 5;
68                 top -= 5;
69                 right -= 5;
70                 opacity -= 0.1;
71 
72                 tag.style.fontSize = fontSize + "px";
73                 tag.style.top = top + 'px';
74                 tag.style.right = right + 'px';
75                 tag.style.opacity = opacity;
76                 if(opacity <= 0){
77                     clearInterval(obj);
78                     tag.remove();
79                 }
80             },100);
81 
82         }
83     </script>

View Code

後端：

 1 import json
 2 from django.db.models import F
 3 from django.db import transaction
 4 from utils.response import LikeResponse
 5 
 6 def do_like(request):
 7     """
 8     點贊
 9     :param request:
10     :return:
11     """
12     response = LikeResponse()
13     try:
14         new_id = request.POST.get('newId')
15         # 當前登陸用戶ID
16         # uid = request.session.get('uid')
17         uid = 1
18 
19         exist_like = models.Like.objects.filter(nnew_id=new_id,uuser_id=uid).count()
20         with transaction.atomic():
21             if exist_like:
22                 models.Like.objects.filter(nnew_id=new_id, uuser_id=uid).delete()
23                 models.News.objects.filter(id=new_id).update(like_count=F('like_count') - 1)
24                 response.code = 666
25             else:
26                 models.Like.objects.create(nnew_id=new_id,uuser_id=uid)
27                 models.News.objects.filter(id=new_id).update(like_count=F('like_count') + 1)
28                 response.code = 999
29     except Exception as e:
30         response.msg = str(e)
31     else:
32         response.status = True
33     return HttpResponse(json.dumps(response.get_dict()))

View Code

ps.response實例化

 1 class BaseResponse(object):
 2     def __init__(self):
 3         self.status = False
 4         self.data = None
 5         self.msg = None
 6 
 7     def get_dict(self):
 8         return self.__dict__
 9 
10 
11 class LikeResponse(BaseResponse):
12     def __init__(self):
13         self.code = 0
14         super(LikeResponse,self).__init__()
15 
16 # obj = LikeResponse()
17 # print(obj.__dict__)

View Code

2、文章評論

一、所用技術

python：

　　字典，列表，經過引用賦值，一個修改所有都改的特性

　　遞歸取值

二、應用

前端：

1 <h1>評論</h1>
2  {{ comment_html|safe }}

View Code

後端：

 1 def build_comment_data(li):
 2     dic = {}
 3     for item in li:
 4         item['children'] = []
 5         dic[item['id']] = item
 6 
 7     result = []
 8     for item in li:
 9         pid = item['parent_id']
10         if pid:
11             dic[pid]['children'].append(item)
12         else:
13             result.append(item)
14 
15     return result
16 
17 def build_comment_tree(com_list):
18     """
19     {'user': '銀秋良1', 'children': [],content:'xxx'],
20     {'user': '銀秋良2', 'children': [{'user': '型譜', 'children': [{'user': '銀秋良', 'children': [], 'parent_id': 3, 'content': '你是流氓', 'id': 5}], 'parent_id': 1, 'content': '你個文盲', 'id': 3}], 'parent_id': None, 'content': '灌我鳥事', 'id': 1}
21     {'user': '銀秋良3', 'children': [{'user': '詳解', 'children': [], 'parent_id': 2, 'content': '好羨慕大家這些沒臉的人呀', 'id': 4}], 'parent_id': None, 'content': '管我鳥事', 'id': 2}
22 
23     [
24         {'user': '銀秋良', 'children': [], 'parent_id': 3, 'content': '你是流氓', 'id': 5}
25     ]
26 
27     """
28     tpl = """
29     <div class="item">
30         <div class="title">{0}:{1}</div>
31         <div class="body">{2}</div>
32     </div>
33     """
34     html = ""
35     for item in com_list:
36         if not item['children']:
37             html +=tpl.format(item['user'],item['content'],"")
38         else:
39             html +=tpl.format(item['user'], item['content'], build_comment_tree(item['children']))
40     return html
41 
42 def comment_list(request):
43     """
44     獲取多級評論列表
45     :param request:
46     :return:
47     """
48     li = [
49         {'id': 1, 'user': '銀秋良', 'content': '灌我鳥事', 'parent_id': None},
50         {'id': 2, 'user': '銀秋良', 'content': '管我鳥事', 'parent_id': None},
51         {'id': 3, 'user': '型譜', 'content': '你個文盲', 'parent_id': 1},
52         {'id': 4, 'user': '詳解', 'content': '好羨慕大家這些沒臉的人呀', 'parent_id': 2},
53         {'id': 5, 'user': '銀秋良', 'content': '你是流氓', 'parent_id': 3},
54         {'id': 6, 'user': '銀秋良', 'content': '你冷庫無情', 'parent_id': 5},
55         {'id': 7, 'user': '銀秋良', 'content': '你才冷酷無情', 'parent_id': 4},
56         {'id': 8, 'user': '銀秋良', 'content': '你無理取鬧', 'parent_id': 4},
57     ]
58     com_list = build_comment_data(li)
59     """
60     {'user': '銀秋良', 'children': [{'user': '型譜', 'children': [{'user': '銀秋良', 'children': [], 'parent_id': 3, 'content': '你是流氓', 'id': 5}], 'parent_id': 1, 'content': '你個文盲', 'id': 3}], 'parent_id': None, 'content': '灌我鳥事', 'id': 1}
61     {'user': '銀秋良', 'children': [{'user': '詳解', 'children': [], 'parent_id': 2, 'content': '好羨慕大家這些沒臉的人呀', 'id': 4}], 'parent_id': None, 'content': '管我鳥事', 'id': 2}
62     """
63 
64     html = build_comment_tree(com_list)
65 
66     return render(request,'comment_list.html',{'comment_html':html})
67 
68 def fetch_comment(request):
69     li = [
70         {'id': 1, 'user': '銀秋良', 'content': '灌我鳥事', 'parent_id': None},
71         {'id': 2, 'user': '銀秋良', 'content': '管我鳥事', 'parent_id': None},
72         {'id': 3, 'user': '型譜', 'content': '你個文盲', 'parent_id': 1},
73         {'id': 4, 'user': '詳解', 'content': '好羨慕大家這些沒臉的人呀', 'parent_id': 2},
74         {'id': 5, 'user': '銀秋良', 'content': '你是流氓', 'parent_id': 3},
75         {'id': 6, 'user': '銀秋良', 'content': '你冷庫無情', 'parent_id': 5},
76         {'id': 7, 'user': '銀秋良', 'content': '你才冷酷無情', 'parent_id': 4},
77         {'id': 8, 'user': '銀秋良', 'content': '你無理取鬧', 'parent_id': 4},
78     ]
79     com_list = build_comment_data(li)
80     # 第一種選擇
81     html = build_comment_tree(com_list)
82     return HttpResponse(html)
83     # 第二種選擇，前端遞歸去生成
84     # return HttpResponse(json.dumps(com_list))

View Code

ps.使用方式：

返回給前端JavaScrip，由前端遞歸渲染。本例爲服務器直接渲染返回

3、上傳文件

一、所使用技術：

js：

　　- 基於FormData
　　　　- 缺點，兼容性很差
　　　　- 優勢，Ajax直接發送

　　- 僞Ajax，兼容性更好
　　　　- iframe，天生局部刷新
　　　　- form，天生整個頁面刷新

二、應用：

前端：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="text" placeholder="默認值看看刷新以後在不在" />
 9     <form method="POST" target="xxxxxx" action="/upload_img2/" enctype="multipart/form-data">
10         {% csrf_token %}
11         <input type="text" name="user" />
12         <a style="width: 60px;height: 30px;background-color: darkslateblue;color: white;display: inline-block;position: relative;">
13             上傳
14             <input type="file" name="avatar" style="opacity: 0;position: absolute;left: 0;top:0;right: 0;bottom: 0;" />
15         </a>
16         <input type="submit" value="提交" />
17     </form>
18     <iframe id="ifm" name="xxxxxx" onload="successCallback(this);" style="display: none;" ></iframe>
19     <div id="imgList"></div>
20     <script src="/static/jquery-3.2.1.js"></script>
21     <script>
22         function successCallback(ths){
23             var response = ths.contentWindow.document.body.innerHTML;
24             response = JSON.parse(response);
25             console.log(response);
26             var img = document.createElement('img');
27             img.src = "/" + response.data;
28 
29             $('#imgList').append(img);
30 
31         }
32     </script>
33 
34 </body>
35 </html>

View Code

後端：

 1 def upload_img2(request):
 2     response = BaseResponse()
 3     try:
 4         user = request.POST.get('user')
 5         obj = request.FILES.get('avatar')
 6         img_path = os.path.join('static', 'img', obj.name)
 7         with open(img_path,mode='wb') as f:
 8             for chunk in obj.chunks():
 9                 f.write(chunk)
10     except Exception as e:
11         response.msg = str(e)
12     else:
13         response.status = True
14         response.data = img_path
15     return HttpResponse(json.dumps(response.get_dict()))

View Code

4、保留頁面條件

一、所用技術：

　　django request.GET.urlencode() 獲取url.get方法

　　django from django.http.request import QueryDict 導入QueryDict方法

　　ps.POST，不要寫action

二、應用：

前端：

list

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <a href="/add_host.html?{{ url_param }}">添加</a>
 9     <ul>
10         {% for item in hosts %}
11             <li>{{ item }}</li>
12         {% endfor %}
13     </ul>
14 </body>
15 </html>

View Code

add

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form method="POST">
 9         {% csrf_token %}
10         <input type="text" name="hostname" />
11         <input type="submit" value="提交" />
12     </form>
13 </body>
14 </html>

View Code

後端：

 1 from django.http.request import QueryDict
 2 def host_list(request):
 3     print(request.GET,type(request.GET))
 4     # request.GET._mutable = True
 5     
 6     obj = QueryDict(mutable=True)
 7     obj['_zhaofengfeng'] = request.GET.urlencode() # page=10&id=1
 8     url_param = obj.urlencode()
 9 
10     hosts = ['c1.com','c2.com','c3.com']
11     return render(request,'host_list.html',{'hosts':hosts,'url_param':url_param})
12 
13 def add_host(request):
14     if request.method == "GET":
15         return render(request,'add.html')
16     else:
17         url_params = request.GET.get('_zhaofengfeng')
18         host = request.POST.get('hostname')
19         url ="/host_list.html?"+url_params
20         return redirect(url)