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表创建，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>