用Django實現Video頁面分類查詢

時間 2019-11-13

原文原文鏈接

Model表建立，Url映射，Views函數處理，Html生成

根據上圖，視頻方向與視頻分類是多對多的關係，視頻分類與視頻信息是一對多的關係，難度級別是單一的查詢條件(與以前倆者並沒有關係)html

Models.py以下：前端

from django.db import models

class Direction(models.Model):
    """
    方向：自動化，測試，運維，前端
    """
    name = models.CharField(verbose_name='名稱', max_length=32)

    classification = models.ManyToManyField('Classification')

    class Meta:
        db_table = 'Direction'
        verbose_name_plural = '方向（視頻方向）'

    def __str__(self):
        return self.name


class Classification(models.Model):
    """
    分類：Python Linux JavaScript OpenStack Node.js
    """
    name = models.CharField(verbose_name='名稱', max_length=32)

    class Meta:
        db_table = 'Classification'
        verbose_name_plural = '分類（視頻分類）'

    def __str__(self):
        return self.name


class Level(models.Model):
    title = models.CharField(max_length=32)

    class Meta:
        verbose_name_plural = '難度級別'

    def __str__(self):
        return self.title


class Video(models.Model):
    status_choice = (
        (0, '下線'),
        (1, '上線'),
    )

    status = models.IntegerField(verbose_name='狀態', choices=status_choice, default=1)
    level = models.ForeignKey(Level)
    classification = models.ForeignKey('Classification', null=True, blank=True)

    weight = models.IntegerField(verbose_name='權重（按從大到小排列）', default=0)

    title = models.CharField(verbose_name='標題', max_length=32)
    summary = models.CharField(verbose_name='簡介', max_length=32)
    # img = models.ImageField(verbose_name='圖片', upload_to='static/images/Video')
    img = models.CharField(verbose_name='圖片',max_length=32)
    href = models.CharField(verbose_name='視頻地址', max_length=256)

    create_date = models.DateTimeField(auto_now_add=True)

    class Meta:
        db_table = 'Video'
        verbose_name_plural = '視頻'

    def __str__(self):
        return self.title

Model表建立

Model表建立，Url映射，Views函數處理，Html生成

根據上圖，視頻方向與視頻分類是多對多的關係，視頻分類與視頻信息是一對多的關係，難度級別是單一的查詢條件(與以前倆者並沒有關係)jquery

from django.shortcuts import render
from app01 import models
# Create your views here.
def video(request,*args,**kwargs):
    condition={}
    for k,v in kwargs.items():
        condition[k]=int(v)
        kwargs[k]=int(v)#從新以字典的方式賦值

    class_list=models.Classification.objects.all()
    level_list=models.Level.objects.all()
    video_list=models.Video.objects.filter(**condition)#篩選的地方
    return render(request,"video.html",{"class_list":class_list,
                                        "level_list":level_list,
                                        "kwargs":kwargs,
                                        "video_list":video_list})

html頁面web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .condition a{
            border: solid 1px black;
            padding: 5px 8px;
            display: inline-block;
        }
        .condition a.active{
            background-color: #dd77b4;
            color: white;
        }
    </style>
</head>
<body>
    <div class="condition">
    <h2>篩選</h2>

    <div>
    {% if kwargs_id == 0 %}
        <a href="video-0-{{ kwargs.level_id }}.html" class="active">所有</a>
        {% else %}
        <a href="video-0-{{ kwargs.level_id }}.html">所有</a>
    {% endif %}
    {% for item in class_list %}
        {% if item.id == kwargs.classification_id %}
            <a href="video-{{ item.id }}-{{ kwargs.level_id }}.html" class="active">{{ item.name }}</a>
        {% else %}
            <a href="video-{{ item.id }}-{{ kwargs.level_id }}.html">{{ item.name }}</a>
        {% endif %}
    {% endfor %}
    </div>
    <div>
        {% if kwargs.level_id == 0 %}
        <a href="video-{{ kwargs.classification_id }}-0.html" class="active">所有</a>
        {% else %}
        <a href="video-{{ kwargs.classification_id }}-0.html">所有</a>
        {% endif %}
    {% for item in level_list %}
        {% if item.id == kwargs.level_id %}
        <a class="active" href="video-{{ kwargs.classification_id }}-{{ item.id }}.html">{{ item.title }}</a>
        {% else %}
            <a href="video-{{ kwargs.classification_id }}-{{ item.id }}.html">{{ item.title }}</a>
        {% endif %}
    {% endfor %}
    </div>
    <h2>視屏</h2>
    {% for item in video_list %}
        <p>{{ item.title }}</p>
    {% endfor %}
</div>
</body>
</html>

urlajax

from django.conf.urls import url
from django.contrib import admin
from web_manage import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),

url(r'^video-(?P<classification_id>(\d+))-(?P<level_id>(\d+)).html$', views.video),

---------------------------------------------------------------------django

多對多關係

　若是指定了視頻方向，視頻分類簡單分爲倆種狀況json

視頻分類選項爲所有（所有對應ID爲0）
視頻分類沒有的話則變動爲所有

視頻分類變動爲沒有的外鍵是則要先清零

def video2(request,*args,**kwargs):
    condition = {}

    for k, v in kwargs.items():
        temp = int(v)
        kwargs[k] = temp
    print(kwargs) #　(?P<direction_id>(\d+))-(?P<classification_id>(\d+))-(?P<level_id>(\d+))
    # 構造查詢字典
    direction_id = kwargs.get('direction_id')
    classification_id = kwargs.get('classification_id')
    level_id = kwargs.get('level_id')

    direction_list = models.Direction.objects.all()

    if direction_id == 0:
        class_list = models.Classification.objects.all()
        if classification_id == 0:
            pass
        else:
            condition['classification_id'] = classification_id#把方向ID傳進去
    else:
        direction_obj = models.Direction.objects.filter(id=direction_id).first()#取到一個方向
        class_list = direction_obj.classification.all()#取到一個方向對應分類的對象

        vlist = direction_obj.classification.all().values_list('id')#取到全部方向的ID的元組
        if not vlist:#取到ID但沒有值的時候
            classification_id_list = []#拿到一個空列表
        else:
            classification_id_list = list(zip(*vlist))[0]#取到全部分類的ID列表

        if classification_id == 0:
            condition['classification_id__in'] = classification_id_list
        else:
            if classification_id in classification_id_list:
                condition['classification_id'] = classification_id
            else:
                 condition["classification_id"]=0
                #################指定方向：[1,2,3]   分類：5
                condition['classification_id__in'] = classification_id_list

    if level_id == 0:
        pass
    else:
        condition['level_id'] = level_id

    　　level_list = models.Level.objects.all()

    　　video_list = models.Video.objects.filter(**condition)

    return render(
        request,
        'video2.html',
        {
            'direction_list':direction_list,
            'class_list':class_list,
            'level_list':level_list,
            'video_list':video_list

        }
    )
    """
    若是：direction_id 0
        *列出全部的分類
        若是 classification_id = 0：
            pass
        else:
            condition['classification_id'] = classification_id

    不然：direction_id != 0
        *列表當前方向下的全部分類
         若是 classification_id = 0：
            獲取當前方向下的全部分類 [1,2,3,4]
            condition['classification_id__in'] = [1,2,3,4]
         else:
            classification_id != 0
            獲取當前方向下的全部分類 [1,2,3,4]
            classification_id 是否在 [1,2,3,4]  :
                condition['classification_id'] = classification_id
            else:
                condition['classification_id__in'] = [1,2,3,4]


    """

htmlapp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
        a{
            border: solid 1px black;
            padding: 5px 8px;
            display: inline-block;
        }
       a.active{
            background-color: #dd77b4;
            color: white;
        }
    </style>
</head>
<body>

<h2>篩選</h2>
<div>
    {% if kwargs.direction_id == 0 %}
        <a class="active" href="video2-0-0-{{ kwargs.level_id }}.html">所有</a>
        {% else %}
                <a href="video2-0-0-{{ kwargs.level_id }}.html">所有</a>
    {% endif %}
    {% for item in direction_list %}
        {% if item.id == kwargs.direction_id %}
                <a class="active" href="video2-{{ item.id }}-{{ kwargs.classification_id }}-{{ kwargs.level_id }}.html">{{ item.name }}</a>
            {% else %}
                <a href="video2-{{ item.id }}-{{ kwargs.classification_id }}-{{ kwargs.level_id }}.html">{{ item.name }}</a>
        {% endif %}
    {% endfor %}
</div>

<div>

    {% if kwargs.classification_id == 0 %}
        <a class="active" href="video2-{{ kwargs.direction_id }}-0-{{ kwargs.level_id }}.html">所有</a>
        {% else %}
                <a href="video2-{{ kwargs.direction_id }}-0-{{ kwargs.level_id }}.html">所有</a>
    {% endif %}
    {% for item in classification_list %}
        {% if item.id == kwargs.classification_id %}
                <a class="active" href="video2-{{ kwargs.direction_id }}-{{ item.id }}-{{ kwargs.level_id }}.html">{{ item.name }}</a>
            {% else %}
                <a href="video2-{{ kwargs.direction_id }}-{{ item.id }}-{{ kwargs.level_id }}.html">{{ item.name }}</a>
        {% endif %}
    {% endfor %}

</div>

<div>
    {% if kwargs.level_id == 0 %}
        <a class="active" href="video2-{{ kwargs.direction_id }}-{{ kwargs.classification_id }}-0.html">所有</a>
        {% else %}
                <a href="video2-{{ kwargs.direction_id }}-{{ kwargs.classification_id }}-0.html">所有</a>
    {% endif %}
    {% for item in level_list %}
        {% if item.id == kwargs.level_id %}
                <a class="active" href="video2-{{ kwargs.direction_id }}-{{ kwargs.classification_id }}-{{ item.id }}.html">{{ item.title }}</a>
            {% else %}
                <a href="video2-{{ kwargs.direction_id }}-{{ kwargs.classification_id }}-{{ item.id }}.html">{{ item.title }}</a>
        {% endif %}
    {% endfor %}

</div>
<h2>視頻</h2>
{% for video in video_list %}
    <span>{{ video.title }}</span>
{% endfor %}


</body>
</html>

瀑布流運維

viewside

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse#至關於json
from app01 import models

def imgs3(request):
    return render(request,"imgs3.html")

def get_imgs3(request):
    result={"status":True,"data":None}
    imgs_list=models.Imgs.objects.all().values("id","title","src")
    result["data"]=list(imgs_list)#轉成列表
    return JsonResponse(result)

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #img3{
            width: 1000px;
            margin: 0 auto;
        }
        #img3 div{
            width: 25%;
            float: left;
        }
        #img3 img{
            width: 100%;
        }
    </style>
</head>
<body>

    <div id="img3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

<script src="/static/js/jquery-3.1.1.js"></script>
<script>
    $(function () {
        var obj=new Tcrollimg();//定義一個類
        obj.imgs();
        obj.scrollEvent();
    });


    function Tcrollimg() {
        this.num=0;
        this.laststate=3;//加一個屬性
        this.imgs=function () {
            var that=this;
            $.ajax({
                url:"/get_imgs3.html",
                type:"GET",
                data:{"num":that.num},
                dataType:"JSON",
                success:function (arg) {
                    var img_list=arg.data;
                    $(arg.data).each(function (index,v) {//index是索引，v是值
                        var tag=document.createElement("img");
                            tag.src=v.src;
                        var tag2=document.createElement("span");
                            tag2.innerText=v.title;
                        var eqv=(index+that.laststate+1)%4;//加 1 是指下次從插圖片的時候從上一個位置插入
                        $("#img3").children().eq(eqv).append(tag,tag2);
                        if(index+1==img_list.length){}//索引加一等於數據的長度
                            that.laststate=eqv//當所有加載完以後賦值給eqv

                    })
                }

            })
        };


    this.scrollEvent=function () {
        var that=this;
        $(window).scroll(function () {//監聽滾動事件
            var scrollTop=$(window).scrollTop();//滾輪的高度
            var winHight=$(window).height();//屏幕的高度
            var docHight=$(document).height();//html的高度，也就是body的高度
            if(scrollTop+winHight==docHight){//當滾輪到底的時候觸發
                that.imgs()//執行下一個函數
            }
        })
    }

    }



</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。