搭建基于Django的博客系统增加广告轮播图（三）

上一篇：ChatGPT搭建博客Django的web网页添加用户系统（二）
下一篇：搭建基于Django的博客系统数据库迁移从Sqlite3到MySQL（四）

功能概述

  1. 增加轮播图显示广告信息。

需求详细描述

1. 增加轮播图显示广告信息

  • 描述： 在博客首页添加轮播图功能，显示广告信息或推荐内容。
  • 功能要求：
    • 轮播图位置：位于页面顶部。
    • 图片上传功能：管理员可以在后台上传和管理轮播图图片。
    • 支持多张图片轮播，每张图片可以包含链接。
    • 自动轮播和手动切换图片。
  • 用户故事：
    • 作为访客，我希望看到首页的轮播图以获取最新的广告或推荐内容。
    • 作为管理员，我希望能够上传和管理轮播图图片。

文件结构图

添加轮播图功能后的文件结构图，其中包含Django项目和应用的主要文件和目录。

myblog/
├── blog/
│   ├── migrations/
│   ├── static/
│   ├── templates/
│   │   ├── blog/
│   │   │   ├── post_list.html
│   │   ├── registration/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
│   ├── forms.py
├── myblog/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
├── media/
│   ├── carousel_images/
├── manage.py

在博客首页添加轮播图功能的具体实现

为了在Django博客首页添加轮播图功能，我们需要完成以下步骤：

  1. 设置模型 (Models)
    • 创建一个模型用于存储轮播图图片和相关信息。
  2. 创建视图 (Views)
    • 在视图中获取轮播图数据，并传递给模板。
  3. 更新模板 (Templates)
    • 修改首页模板，添加轮播图的HTML和CSS。
  4. 管理后台配置 (Admin)
    • 配置Django Admin管理轮播图内容。

1. 设置模型 (Models)

首先，创建一个新的模型 Carousel 来存储轮播图图片及其相关信息。

# blog/models.pyfrom django.db import modelsclass Carousel(models.Model):title = models.CharField(max_length=200)image = models.ImageField(upload_to='carousel_images/')link = models.URLField(blank=True, null=True)active = models.BooleanField(default=True)def __str__(self):return self.title

然后，运行 makemigrations 和 migrate 命令来创建数据库表。

bash复制代码python manage.py makemigrations
python manage.py migrate

2. 创建视图 (Views)

在视图中获取所有激活的轮播图数据，并传递给模板。

# blog/views.pyfrom django.shortcuts import render
from .models import Carousel, Postdef post_list(request):posts = Post.objects.all()carousels = Carousel.objects.filter(active=True)return render(request, 'blog/post_list.html', {'posts': posts, 'carousels': carousels})

3. 更新模板 (Templates)

在 post_list.html 中添加轮播图的HTML和CSS。

<!-- blog/templates/blog/post_list.html --><!DOCTYPE html>
<html>
<head><title>Blog</title><!-- 引入Bootstrap样式 --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body><div class="container mt-5"><!-- 轮播图开始 --><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators">{% for carousel in carousels %}<li data-target="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.first %}active{% endif %}"></li>{% endfor %}</ol><div class="carousel-inner">{% for carousel in carousels %}<div class="carousel-item {% if forloop.first %}active{% endif %}"><img src="{{ carousel.image.url }}" class="d-block w-100" alt="{{ carousel.title }}">{% if carousel.link %}<a href="{{ carousel.link }}" target="_blank"><div class="carousel-caption d-none d-md-block"><h5>{{ carousel.title }}</h5></div></a>{% else %}<div class="carousel-caption d-none d-md-block"><h5>{{ carousel.title }}</h5></div>{% endif %}</div>{% endfor %}</div><a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><!-- 轮播图结束 --><!-- 其他内容 --><div class="row mt-5"><div class="col-md-9"><h1>Blog Posts</h1><ul>{% for post in posts %}<li><h2><a href="{% url 'post_detail' post.pk %}">{{ post.title }}</a></h2><p>{{ post.content }}</p><p>Published by: {{ post.author.username }}</p>{% if user.is_authenticated and user == post.author %}<a href="{% url 'post_edit' post.pk %}">Edit</a><a href="{% url 'post_delete' post.pk %}">Delete</a>{% endif %}</li>{% endfor %}</ul>{% block content %}{% endblock %}</div></div></div><!-- 引入Bootstrap的JavaScript --><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

4. 管理后台配置 (Admin)

在Django Admin中配置管理轮播图内容。

# blog/admin.pyfrom django.contrib import admin
from .models import Post, Carousel@admin.register(Carousel)
class CarouselAdmin(admin.ModelAdmin):list_display = ('title', 'active')list_filter = ('active',)search_fields = ('title',)

在 settings.py 中确保已正确配置 MEDIA_URL 和 MEDIA_ROOT 以支持图片上传。

# settings.pyMEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

在主URL配置中添加对媒体文件的处理。

# myblog/urls.pyfrom django.conf import settings
from django.conf.urls.static import staticurlpatterns = [path('admin/', admin.site.urls),path('', include('blog.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

解决问题

报错<class 'blog.admin.CarouselAdmin'>: (admin.E108) The value of 'list_display[1]' refers to 'active', which is not a callable, an attribute of 'CarouselAdmin', or an attribute or method on 'blog.Carousel'.

在这里插入图片描述

在 Carousel 模型中没有定义 active 字段。你需要确保在 Carousel 模型中有 active 字段，然后在 admin.py 中正确地使用它。

1. 更新 Carousel 模型

如果你想要一个 active 字段来表示某个轮播图是否启用，你可以在模型中添加这个字段。

models.py
python复制代码from django.db import modelsclass Carousel(models.Model):image = models.ImageField(upload_to='carousel_images/')title = models.CharField(max_length=100, blank=True)description = models.CharField(max_length=255, blank=True)link = models.URLField(blank=True)active = models.BooleanField(default=True)  # 添加active字段def __str__(self):return self.title if self.title else "Carousel Image"

2. 迁移数据库

在添加字段后，需要运行迁移命令来更新数据库：

bash复制代码python manage.py makemigrations
python manage.py migrate

3. 更新 admin.py

现在你可以在 admin.py 中使用 active 字段。

admin.py
python复制代码from django.contrib import admin
from .models import Carouselclass CarouselAdmin(admin.ModelAdmin):list_display = ('title', 'active')  # 添加active字段到list_displaylist_filter = ('active',)           # 添加active字段到list_filteradmin.site.register(Carousel, CarouselAdmin)

4. 确认模板中的更新

确保你的模板和视图中也考虑了 active 字段。例如，在显示轮播图时只显示 active 为 True 的图片：

views.py
python复制代码from django.shortcuts import render
from .models import Carousel, Post, CustomUserdef post_list(request):posts = Post.objects.all()carousels = Carousel.objects.filter(active=True)  # 只获取active的轮播图users = CustomUser.objects.all()return render(request, 'blog/post_list.html', {'posts': posts, 'carousels': carousels, 'users': users})

这样，Carousel 模型现在包含 active 字段，admin.py 也正确配置了显示和过滤选项。请确保已经正确运行了数据库迁移命令来更新数据库结构。

报错 raise AlreadyRegistered(msg) django.contrib.admin.exceptions.AlreadyRegistered: The model Carousel is already registered with 'blog.CarouselAdmin'.

上传图片数据

打开控制台能看到Carousels，上传文件

在这里插入图片描述

在这里插入图片描述

上传完成5张图，在/media/carousel_images目录下看到上传的图片如下带后缀：

在这里插入图片描述

效果如下：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.tpcf.cn/web/20547.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32（九）：USART串口通信 （标准库函数）

STM32（九）：USART串口通信 （标准库函数）

前言 上一篇文章已经介绍了如何用STM32单片机中独立看门狗来实现检测按键点灯的程序。这篇文章我们来介绍一下如何用STM32单片机中USART通信协议来串口通信&#xff0c;并向XCOM发送信息。 一、实验原理 1.通信的介绍 首先&#xff0c;我们先介绍一下通信&#xff0c;何为通…
阅读更多...
嵌入式linux系统中图片处理详解

嵌入式linux系统中图片处理详解

大家好，今天给大家分享一下，嵌入式中如何进行图像处理，常见的处理方式有哪几种？这次将详细分析一下 第一：BMP图形处理方式 图形的基本特点，所有的图像文件，都是一种二进制格式文件，每一个图像文件，都可以通过解析文件中的每一组二进制数的含义来获得文件中的各种信息…
阅读更多...
DataCube 漏洞小结

DataCube 漏洞小结

在这里分享一下通过拖取 DataCube 代码审计后发现的一些漏洞&#xff0c;包括前台的文件上传&#xff0c;信息泄露出账号密码&#xff0c;后台的文件上传。当然还有部分 SQL 注入漏洞&#xff0c;因为 DataCube 采用的是 SQLite 的数据库&#xff0c;所以SQL 注入相对来说显得就…
阅读更多...
海外高清短视频：四川京之华锦信息技术公司

海外高清短视频：四川京之华锦信息技术公司

海外高清短视频&#xff1a;探索世界的新窗口 在数字化时代的浪潮下&#xff0c;海外高清短视频成为了人们探索世界、了解异国风情的新窗口。四川京之华锦信息技术公司这些短视频以其独特的视角、丰富的内容和高清的画质&#xff0c;吸引了无数观众的目光&#xff0c;让人们足…
阅读更多...
关于前端代码移动端的适配方案

关于前端代码移动端的适配方案

为什么需要适配&#xff1f; 由于PC端和移动端的分辨率不同&#xff0c;前端展示的页面在两端设备如果原模原样的搬运则会导致PC端或移动端看到的画面相对于其设备的分辨率及其的不合理。 最为常见的是PC端正常浏览的网页没有做移动端适配&#xff0c;由于移动端分辨率普遍低于…
阅读更多...
计算机基础之：平均负载与CPU使用率的关系

计算机基础之：平均负载与CPU使用率的关系

想象一下&#xff0c;你的厨房是一个操作系统&#xff0c;厨师是CPU&#xff0c;而菜谱上的任务就是进程。厨房的忙碌程度可以用“平均负载”来衡量&#xff0c;它反映了等待被处理的任务总数加上正在被厨师处理的任务数。而“CPU使用率”则相当于厨师实际在切菜、炒菜的时间比…
阅读更多...
ChaosBlade混沌测试实践

ChaosBlade混沌测试实践

ChaosBlade: 一个简单易用且功能强大的混沌实验实施工具 官方仓库&#xff1a;https://github.com/chaosblade-io/chaosblade 1. 项目介绍 ChaosBlade 是阿里巴巴开源的一款遵循混沌工程原理和混沌实验模型的实验注入工具&#xff0c;帮助企业提升分布式系统的容错能力&…
阅读更多...
【CVE-2021-3156】——漏洞复现、原理分析以及漏洞修复

【CVE-2021-3156】——漏洞复现、原理分析以及漏洞修复

文章目录 前言1、漏洞概述2、漏洞复现2.1、漏洞复现测试环境2.2、漏洞复现具体步骤 3、漏洞原理3.1、前置知识3.1.1、sudo3.1.2、sudoedit3.1.3、转义字符 3.2、漏洞分析 4、漏洞修复5、参考文献总结 前言 2021年01月27日&#xff0c;RedHat官方发布了Sudo缓冲区/栈溢出漏洞的风…
阅读更多...
基于SSM前后端分离版本的论坛系统-自动化测试

基于SSM前后端分离版本的论坛系统-自动化测试

目录 前言 一、测试环境 二、环境部署 三、测试用例 四、执行测试 4.1、公共类设计 创建浏览器驱动对象 测试套件 释放驱动类 4.2、功能测试 注册页面 登录页面 版块 帖子 用户个人中心页 站内信 4.3、界面测试 注册页面 登录页面 版块 帖子 用户个人中心页…
阅读更多...
浮点数二分查找的实现

浮点数二分查找的实现

这是C算法基础-基础算法专栏的第六篇文章&#xff0c;专栏详情请见此处。 引入 上次我们学习了整数二分查找的实现&#xff0c;这次我们要学习浮点数二分查找的实现。 定义 浮点数二分查找与整数二分查找的定义都是大致相同的&#xff0c;如果想了解具体内容&#xff0c;可以移…
阅读更多...
【Qt秘籍】[005]-Qt的首次邂逅-创建

【Qt秘籍】[005]-Qt的首次邂逅-创建

一、如何创建文件&#xff1f; 当我们打开Qt Creator&#xff0c;你会发现整个界面类目繁多。现在&#xff0c;让我们直接开始新建一个项目。 1.点击左上角的“文件”>点击“新建文件或项目” 2.如图&#xff0c;选择“Application”>“Qt Wifgets application”> “…
阅读更多...
机器学习笔记——SVM丝滑推导及代码实现，从硬间隔到软间隔再到核函数

机器学习笔记——SVM丝滑推导及代码实现，从硬间隔到软间隔再到核函数

前言 开始搓延期了一百年的机器学习实验&#xff0c;把SVM推导过程从定义到求解都刷了一遍&#xff0c;包括推导优化目标、提出对偶问题、利用KKT条件得到原问题的解以及SMO算法等。 注意&#xff1a;本文在某些地方比如KKT条件和SMO算法处不提供证明过程(太麻烦了喵)&#x…
阅读更多...
奇偶校验位

奇偶校验位

描述 题目描述&#xff1a; 现在需要对输入的32位数据进行奇偶校验,根据sel输出校验结果&#xff08;1输出奇校验&#xff0c;0输出偶校验&#xff09; 信号示意图&#xff1a; 波形示意图&#xff1a; 输入描述&#xff1a; 输入信号 bus sel 类型 wi…
阅读更多...
rust安装

rust安装

目录 一、安装1.1 在Windows上安装1.2 在Linux下安装 二、包管理工具三、Hello World3.1 安装IDE3.2 输出Hello World 一、安装 1.1 在Windows上安装 点击页面 安装 Rust - Rust 程序设计语言 (rust-lang.org)&#xff0c;选择"下载RUSTUP-INIT.EXE(64位&#xff09;&qu…
阅读更多...
2021JSP普及组第三题：插入排序

2021JSP普及组第三题：插入排序

2021JSP普及组第三题 题目&#xff1a; 思路&#xff1a; 题目要求排序后根据操作进行对应操作。 操作一需要显示某位置数据排序后的位置&#xff0c;所以需要定义结构体数组储存原数据的位置和数据本身排序后所得数据要根据原位置输出排序后的位置&#xff0c;所以建立一个新…
阅读更多...
MySQL之创建高性能的索引(十一)

MySQL之创建高性能的索引(十一)

创建高性能的索引 索引和锁 索引可以让查询锁定更少的行。如果你的查询从不访问那些不需要的行&#xff0c;那么就会锁定更少的行&#xff0c;从两个方面来看这对性能都有好处。首先&#xff0c;虽然InnoDB的行锁效率很高&#xff0c;内存使用也很少&#xff0c;但是锁定行的…
阅读更多...
富格林：解除欺诈危险可信秘诀

富格林：解除欺诈危险可信秘诀

富格林认为&#xff0c;在现货黄金中&#xff0c;盈利出金是建立在无被诱导欺诈风险的情况下实现的&#xff0c;投资者不仅要关注如何盈利&#xff0c;还需要掌握可信投资的技巧避免交易欺诈。对于新手投资者&#xff0c;要正确学习可信黄金投资基础知识&#xff0c;提升交易技…
阅读更多...
Linux网络编程：应用层协议|HTTPS

Linux网络编程：应用层协议|HTTPS

目录 1.预备知识 1.1.加密和解密 1.2.常见加密方式 1.2.1.对称加密 1.2.2.非对称加密 ​编辑 1.3.数据摘要&#xff08;数据指纹&#xff09;和数据签名 1.4.证书 1.4.1.CA认证 1.4.2.证书和数字签名 2.HTTPS协议 2.1.自行设计HTTPS加密方案 2.1.1.只使用对称加密 …
阅读更多...
构建企业级AI私有知识库

构建企业级AI私有知识库

一、引言 在当今竞争激烈的市场环境中&#xff0c;企业为了保持竞争优势&#xff0c;需要高效地管理和利用内部知识资源。构建一个企业级AI私有知识库&#xff0c;不仅可以集中存储和管理企业知识&#xff0c;还能通过人工智能技术实现知识的智能化处理和利用。本文将详细介绍…
阅读更多...
软考系统集成项目管理工程师第7章思维导图发布

软考系统集成项目管理工程师第7章思维导图发布

2024年开年&#xff0c;软考系统集成项目管理工程师官方教程&#xff0c;迎来了阔别7年的大改版&#xff0c;改版之后的软考中项考试&#xff0c;离同宗兄弟高项考试渐行渐远。 中项第3版教程&#xff0c;仅仅从教程来看&#xff0c;其难度已经不亚于高级的信息系统项目管理师&…
阅读更多...
最新文章

Copyright @ 2022~2023