当前位置: 首页 > news >正文

django开发流程3(轮播图)

1.在models中创建一个模板

class Ads(models.Model):title = models.CharField(verbose_name="标题", max_length=30)image = models.ImageField(verbose_name="广告图", upload_to="ads")url = models.URLField(verbose_name="链接网址", default="http://www.baidu.com")def __str__(self):return self.titleclass Meta:verbose_name = "轮播图"verbose_name_plural = "轮播图"

2.安装一个图片处理模块 pip install  Pillow

3.生成迁移文件并迁移

python .\manage.py makemigrations

python .\manage.py migrate

4.修改媒体路径

首先在models中 upload_to="ads"

然后在settings中

当你运行添加轮播图时,照片会自动放入

5.预览图片

6.配置后台

7.配置轮播图

1.views里面添加Ads

2.在index.html中引入轮播图样式

{% extends 'base/base.html'  %}{% block title %}
<title>首页</title>
{% endblock %}{% block body %}{{ cs }}
<div class="row">
<div class="col-md-8 col-md-offset-2"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators">{% for ads in adss %}{% if forloop.first %}<li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}" class="active"></li>{% else %}<li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}"></li>{% endif %}{% endfor %}</ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox">{% for ads in adss %}{% if forloop.first %}<div class="item active">{% else %}<div class="item">{% endif %}{{ ads.image }}<img src="/media/{{ ads.image }}" alt="..."><div class="carousel-caption">{{ ads.title }}</div></div>{% endfor %}</div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div></div>
</div><div class="row"><div class="col-md-8 col-md-offset-2"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist">{% for c in cs %}{% if forloop.first %}<li role="presentation" class="active"><a href="#tab{{ c.id }}" aria-controls="{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>{% else %}<li role="presentation"><a href="#tab{{ c.id }}" aria-controls="{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>{% endif %}{% endfor %}</ul><!-- Tab panes --><div class="tab-content">{% for c in cs %}{% if forloop.first %}<div role="tabpanel" class="tab-pane active" id="tab{{ c.id }}">{% else %}<div role="tabpanel" class="tab-pane" id="tab{{ c.id }}">{% endif %}<ul class="list-group">{% for b in c.book_set.all %}<li class="list-group-item"><a href="/detail/{{ b.id }}">{{ b.title }}</a></li>{% endfor %}</ul></div>{% endfor %}</div></div></div></div>
{% endblock %}

http://www.lryc.cn/news/448486.html

相关文章:

  • MySQL的增删查改(基础)一
  • 深度学习(入门)03:监督学习
  • Django——admin创建和使用
  • 鸿蒙开发(NEXT/API 12)【硬件(取消注册智慧出行连接状态的监听)】车载系统
  • JVM中的GC流程与对象晋升机制详解
  • SQL:如果字段需要排除某个值但又有空值时,不能直接用“<>”或not in
  • 运放模块的选型参数
  • win10文件共享设置 - 开启局域网文件共享 - “您没有权限访问,请与网络管理员联系请求访问权限”解决方案
  • Go基础编程 - 16 - 方法
  • 接口报错500InvalidPropertyException: Invalid property ‘xxx[256]‘,@InitBinder的使用
  • Web 3.0 介绍
  • 一起搭WPF界面之界面切换绑定
  • css 数字比汉字要靠上
  • sentinel原理源码分析系列(三)-启动和初始化
  • 计算机网络(九) —— Tcp协议详解
  • 跨境支付专业术语
  • 多级目录SQL分层查询
  • VulnHub-SickOs1.1靶机笔记
  • 【Python】数据可视化之点线图
  • jupyter使用pytorch
  • Electron 安装以及搭建一个工程
  • 羽毛类型检测系统源码分享
  • Xiaojie雷达之路---doa估计(dbf、capon、music算法)
  • 十大排序算法总结
  • 大厂AI必备数据结构与算法——链表(三)详细文档
  • 一键自动化配置OpenHarmony编译环境
  • 不同领域的常见 OOD(Out-of-Distribution)数据集例子
  • gRPC协议简介
  • [dp+dfs]砝码称重
  • MYSQL-查看表中字段属性语法(三)