用Django实现Video页面分类查询

时间：2023-03-08 22:14:22

用Django实现Video页面分类查询

Model表创建，Url映射，Views函数处理，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生成

根据上图，视频方向与视频分类是多对多的关系，视频分类与视频信息是一对多的关系，难度级别是单一的查询条件(与之前俩者并无关系)

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页面

<!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>

url

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),
 ]

---------------------------------------------------------------------

多对多关系

　如果指定了视频方向，视频分类简单分为俩种情况

  • 视频分类选项为全部（全部对应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]

    """

    html

    <!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>

瀑布流

views

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>

相关文章