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、应用代码：

前端：

<div>
                <div>{{ row.title }}</div>
                <div>{{ row.user.username }}  评论：{{ row.comment_count }}
    <!--使用相对定位-->
                    <div style="display: inline-block;position: relative;">
                        赞：<a class="new-like" new-id="{{ row.id }}">{{ row.like_count }}</a>
                    </div>
                </div>
            </div>
<script src="/static/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            bindLikeEvent();
        });

        function bindLikeEvent() {
            $('.new-like').click(function () {
                // 获取当前新闻ID
                var newId = $(this).attr('new-id');
                var $this = $(this);
                $.ajax({
                    url: '/do_like.html',
                    type: "POST",
                    data: {'newId': newId},
                    dataType: 'JSON',
                    success:function (arg) {
                        if(arg.status){
                            var origin = $this.text();
                            var count = parseInt(origin);
                            if(arg.code == 666){
                                $this.text(count - 1 );
                                showLikeCount($this,'-1');

                            }else if(arg.code == 999){
                                $this.text(count + 1 );
                                showLikeCount($this,'+1');

                            }
                        }else{
                            alert(arg.msg);
                        }
                    }

                })
            })
        }
        
        function showLikeCount($this,text) {
            var fontSize = 5;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            // var tag = document.getElementById()
            tag.innerText = text;
            tag.style.position = "absolute";
            // 默认大小
            tag.style.fontSize = fontSize + "px";
            tag.style.top = top + 'px';
            tag.style.right = right + 'px';
            tag.style.opacity = opacity;
            $this.after(tag);

            // 定时器，没0.5s执行一次
            var obj = setInterval(function () {
                fontSize += 5;
                top -= 5;
                right -= 5;
                opacity -= 0.1;

                tag.style.fontSize = fontSize + "px";
                tag.style.top = top + 'px';
                tag.style.right = right + 'px';
                tag.style.opacity = opacity;
                if(opacity <= 0){
                    clearInterval(obj);
                    tag.remove();
                }
            },100);

        }
    </script>

后端：

import json
from django.db.models import F
from django.db import transaction
from utils.response import LikeResponse

def do_like(request):
    """
    点赞
    :param request:
    :return:
    """
    response = LikeResponse()
    try:
        new_id = request.POST.get('newId')
        # 当前登录用户ID
        # uid = request.session.get('uid')
        uid = 1

        exist_like = models.Like.objects.filter(nnew_id=new_id,uuser_id=uid).count()
        with transaction.atomic():
            if exist_like:
                models.Like.objects.filter(nnew_id=new_id, uuser_id=uid).delete()
                models.News.objects.filter(id=new_id).update(like_count=F('like_count') - 1)
                response.code = 666
            else:
                models.Like.objects.create(nnew_id=new_id,uuser_id=uid)
                models.News.objects.filter(id=new_id).update(like_count=F('like_count') + 1)
                response.code = 999
    except Exception as e:
        response.msg = str(e)
    else:
        response.status = True
    return HttpResponse(json.dumps(response.get_dict()))

ps.response实例化

class BaseResponse(object):
    def __init__(self):
        self.status = False
        self.data = None
        self.msg = None

    def get_dict(self):
        return self.__dict__


class LikeResponse(BaseResponse):
    def __init__(self):
        self.code = 0
        super(LikeResponse,self).__init__()

# obj = LikeResponse()
# print(obj.__dict__)

二、文章评论

1、所用技术

• python：

　　字典，列表，通过引用赋值，一个修改全部都改的特性

　　递归取值

2、应用

前端：

<h1>评论</h1>
 {{ comment_html|safe }}

后端：

def build_comment_data(li):
    dic = {}
    for item in li:
        item['children'] = []
        dic[item['id']] = item

    result = []
    for item in li:
        pid = item['parent_id']
        if pid:
            dic[pid]['children'].append(item)
        else:
            result.append(item)

    return result

def build_comment_tree(com_list):
    """
    {'user': '银秋良1', 'children': [],content:'xxx'],
    {'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}
    {'user': '银秋良3', 'children': [{'user': '详解', 'children': [], 'parent_id': 2, 'content': '好羡慕你们这些没脸的人呀', 'id': 4}], 'parent_id': None, 'content': '管我鸟事', 'id': 2}

    [
        {'user': '银秋良', 'children': [], 'parent_id': 3, 'content': '你是流氓', 'id': 5}
    ]

    """
    tpl = """
    <div class="item">
        <div class="title">{0}:{1}</div>
        <div class="body">{2}</div>
    </div>
    """
    html = ""
    for item in com_list:
        if not item['children']:
            html +=tpl.format(item['user'],item['content'],"")
        else:
            html +=tpl.format(item['user'], item['content'], build_comment_tree(item['children']))
    return html

def comment_list(request):
    """
    获取多级评论列表
    :param request:
    :return:
    """
    li = [
        {'id': 1, 'user': '银秋良', 'content': '灌我鸟事', 'parent_id': None},
        {'id': 2, 'user': '银秋良', 'content': '管我鸟事', 'parent_id': None},
        {'id': 3, 'user': '型谱', 'content': '你个文盲', 'parent_id': 1},
        {'id': 4, 'user': '详解', 'content': '好羡慕你们这些没脸的人呀', 'parent_id': 2},
        {'id': 5, 'user': '银秋良', 'content': '你是流氓', 'parent_id': 3},
        {'id': 6, 'user': '银秋良', 'content': '你冷库无情', 'parent_id': 5},
        {'id': 7, 'user': '银秋良', 'content': '你才冷酷无情', 'parent_id': 4},
        {'id': 8, 'user': '银秋良', 'content': '你无理取闹', 'parent_id': 4},
    ]
    com_list = build_comment_data(li)
    """
    {'user': '银秋良', 'children': [{'user': '型谱', 'children': [{'user': '银秋良', 'children': [], 'parent_id': 3, 'content': '你是流氓', 'id': 5}], 'parent_id': 1, 'content': '你个文盲', 'id': 3}], 'parent_id': None, 'content': '灌我鸟事', 'id': 1}
    {'user': '银秋良', 'children': [{'user': '详解', 'children': [], 'parent_id': 2, 'content': '好羡慕你们这些没脸的人呀', 'id': 4}], 'parent_id': None, 'content': '管我鸟事', 'id': 2}
    """

    html = build_comment_tree(com_list)

    return render(request,'comment_list.html',{'comment_html':html})

def fetch_comment(request):
    li = [
        {'id': 1, 'user': '银秋良', 'content': '灌我鸟事', 'parent_id': None},
        {'id': 2, 'user': '银秋良', 'content': '管我鸟事', 'parent_id': None},
        {'id': 3, 'user': '型谱', 'content': '你个文盲', 'parent_id': 1},
        {'id': 4, 'user': '详解', 'content': '好羡慕你们这些没脸的人呀', 'parent_id': 2},
        {'id': 5, 'user': '银秋良', 'content': '你是流氓', 'parent_id': 3},
        {'id': 6, 'user': '银秋良', 'content': '你冷库无情', 'parent_id': 5},
        {'id': 7, 'user': '银秋良', 'content': '你才冷酷无情', 'parent_id': 4},
        {'id': 8, 'user': '银秋良', 'content': '你无理取闹', 'parent_id': 4},
    ]
    com_list = build_comment_data(li)
    # 第一种选择
    html = build_comment_tree(com_list)
    return HttpResponse(html)
    # 第二种选择，前端递归去生成
    # return HttpResponse(json.dumps(com_list))

ps.使用方式：

返回给前端JavaScrip，由前端递归渲染。本例为服务器直接渲染返回

三、上传文件

1、所使用技术：

• js：

　　- 基于FormData
　　　　- 缺点，兼容性不好
　　　　- 优点，Ajax直接发送

　　- 伪Ajax，兼容性更好
　　　　- iframe，天生局部刷新
　　　　- form，天生整个页面刷新

2、应用：

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="默认值看看刷新之后在不在" />
    <form method="POST" target="xxxxxx" action="/upload_img2/" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="text" name="user" />
        <a style="width: 60px;height: 30px;background-color: darkslateblue;color: white;display: inline-block;position: relative;">
            上传
            <input type="file" name="avatar" style="opacity: 0;position: absolute;left: 0;top:0;right: 0;bottom: 0;" />
        </a>
        <input type="submit" value="提交" />
    </form>
    <iframe id="ifm" name="xxxxxx" onload="successCallback(this);" style="display: none;" ></iframe>
    <div id="imgList"></div>
    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        function successCallback(ths){
            var response = ths.contentWindow.document.body.innerHTML;
            response = JSON.parse(response);
            console.log(response);
            var img = document.createElement('img');
            img.src = "/" + response.data;

            $('#imgList').append(img);

        }
    </script>

</body>
</html>

后端：

def upload_img2(request):
    response = BaseResponse()
    try:
        user = request.POST.get('user')
        obj = request.FILES.get('avatar')
        img_path = os.path.join('static', 'img', obj.name)
        with open(img_path,mode='wb') as f:
            for chunk in obj.chunks():
                f.write(chunk)
    except Exception as e:
        response.msg = str(e)
    else:
        response.status = True
        response.data = img_path
    return HttpResponse(json.dumps(response.get_dict()))

四、保留页面条件

1、所用技术：

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

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

　　ps.POST，不要写action

2、应用：

前端：

list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="/add_host.html?{{ url_param }}">添加</a>
    <ul>
        {% for item in hosts %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

add

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="POST">
        {% csrf_token %}
        <input type="text" name="hostname" />
        <input type="submit" value="提交" />
    </form>
</body>
</html>

后端：

from django.http.request import QueryDict
def host_list(request):
    print(request.GET,type(request.GET))
    # request.GET._mutable = True
    
    obj = QueryDict(mutable=True)
    obj['_zhaofengfeng'] = request.GET.urlencode() # page=10&id=1
    url_param = obj.urlencode()

    hosts = ['c1.com','c2.com','c3.com']
    return render(request,'host_list.html',{'hosts':hosts,'url_param':url_param})

def add_host(request):
    if request.method == "GET":
        return render(request,'add.html')
    else:
        url_params = request.GET.get('_zhaofengfeng')
        host = request.POST.get('hostname')
        url ="/host_list.html?"+url_params
        return redirect(url)