django高级之点赞、文章评论及上传文件

点赞
文章评论
上传文件
保留页面条件

一、点赞

1、所用技术：

django model F查询
js应用：$(function () {}); 为文件加载完成执行ready() 方法。等同于on时间，多实例，使用。

　　　　定时器方法：setInterval(方法,间隔多长时间（毫秒）执行一次)

　　　　　　var obj = setInterval(function () {

　　　　　　　　　　if(xxx <= 0){
　　　　　　　　　　　　clearInterval(obj); //结束执行
　　　　　　},100);

　　　　ps.setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次

css应用：

　　　　position属性

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "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)。需在外层函数声明。

2、应用代码：

前端：

 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