博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
瀑布流方式一
阅读量:6177 次
发布时间:2019-06-21

本文共 1777 字,大约阅读时间需要 5 分钟。

这种方式,是后端先从数据库取出图片数据,将图片的地址,简介,抬头在后端整理成Queryset格式,然后直接发到前段,前段拿到数据直接for循环即可

 

url文件

from django.contrib import adminfrom django.urls import pathfrom app01 import viewsurlpatterns = [    path('admin/', admin.site.urls),    path('img.html/', views.img),]

 

 

models文件

class Img(models.Model):    src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload')    title = models.CharField(max_length=16,verbose_name='标题')    summary = models.CharField(max_length=128,verbose_name='简介')    class Meta:        verbose_name_plural = '图片表'    def __str__(self):        return self.title

 

 

views文件-----重点

def img(request):    img_list = models.Img.objects.all()  #获取数据库素有有对象,不过这个好像前段用不到    img_list_src = models.Img.objects.values('src','title')  #获取数据库的中数据    num = img_list.count()   #数据库中总的数据的条数    d1=img_list_src[0:num:4]  #运用字典切片取值,每从[0]位置开始取,每隔4个取一次    d2=img_list_src[1:num:4]    d3=img_list_src[2:num:4]    d4=img_list_src[3:num:4]    return render(request,'img.html',{
'img_list':img_list,"d1":d1,"d2":d2,'d3':d3,'d4':d4,"img_list_src": img_list_src})

 

 

 

html文件--前端

    
Title
风景图片
{% for item in d1 %}
{
{ item.title }}
{% endfor %}
{% for item in d2 %}
{
{ item.title }}
{% endfor %}
{% for item in d3 %}
{
{ item.title }}
{% endfor %}
{% for item in d4 %}
{
{ item.title }}
{% endfor %}

 

转载于:https://www.cnblogs.com/lhqlhq/p/9209798.html

你可能感兴趣的文章
判断 SQLServer 触发器类型,支持多行
查看>>
SQL表连接查询(inner join、full join、left join、right join)
查看>>
阿里云OTS(开放结构化数据服务)可视化管理工具的设计和功能介绍
查看>>
Github创建分支
查看>>
转换PHP脚本成为windows的执行程序
查看>>
Python组织文件 实践:将带有美国风格日期的文件改名为欧洲风格日期
查看>>
实现iOS7上tableView的切割线像iOS6中的效果
查看>>
使用阿里云接口进行银行卡四要素实名认证
查看>>
聊聊excel生成图片的几种方式
查看>>
20 万网络节点背后的数据创新应用
查看>>
理论 | 朴素贝叶斯模型算法研究与实例分析
查看>>
docker安装gitlab只需要3分钟
查看>>
Android菜鸟学习js笔记 一
查看>>
Java基础之SPI机制
查看>>
使用js控制滚动条的位置
查看>>
【Tornado源码阅读笔记】tornado.web.Application
查看>>
lsyncd搭建测试
查看>>
移动web开发之像素和DPR
查看>>
nginx+tomcat+redis实现session共享
查看>>
UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View(二)
查看>>