【开发企业官网】6.幻灯片效果前端显示

接下来我们需要将数据库中的数据显示在前端页面上，也就是我们的前台。当前页面虽然已经存在，但是内容是静态的，我们需要替换掉这些写死的内容。首先，我们要找到对应的视图文件，它位于我们项目中的 mysite 文件夹下的 views.py 文件中。在这个视图文件中，我们渲染了这个页面。

现在，我们要从数据库中获取数据，因此需要使用 ORM。首先引入模型，然后获取 slide 表中的所有数据。代码如下：

from django.http import HttpResponse
from django.shortcuts import render
from slide.models import Slide

# Create your views here.
# 定义视图函数
def index(request):
    # 获取slide表数据
    slides = Slide.objects.all()
    # 渲染index.html模板，并传递slides数据到模板中
    return render(request, 'index.html', {'slides': slides, })

然后我们到模板文件中，找到对应的数据，并进行替换。在 index.html 中，我们找到了幻灯片的内容，每一张幻灯片都有相同的结构，它们都在一个 <div> 下，并且有一个glide_slides 类。我们保留一个作为模板，其余的删除掉，因为我们将使用 for 循环进行遍历。接着，我们使用模板标签 for 遍历传递过来的 slides，并将每个幻灯片的标题、内容和图片替换掉。替换代码如下：

<div class="glide__slides">
    <!-- 循环遍历幻灯片数据 -->
    {% for slide in slides %}
    <div class="glide__slide">
        <div class="slide-caption">
            <!-- 幻灯片标题 -->
            <h1>{{ slide.title }}</h1>
            <!-- 幻灯片内容 -->
            <h3>
                {{ slide.content }}
            </h3>
            <!-- 探索更多按钮 -->
            <button class="explore-btn">探索更多</button>
        </div>
        <!-- 遮罩层 -->
        <div class="backdrop"></div>
        <!-- 幻灯片图片 -->
        <img src="media/{{slide.image}}" alt="">
    </div>
    {% endfor %}
</div>

刷新浏览器页面，在替换图片的时候，我们发现图片没有显示，如下图所示：

经过检查发现问题与后台的配置有关。在后台选择图片后，无法显示，这是因为没有将 media 目录暴露出来，导致外部无法访问，会提示 page not found。如下图所示：

为了解决这个问题，我们需要在 URL 中配置一下。在config文件下 urls.py 配置文件中，我们将 media 目录暴露出来。在配置代码如下：

from django.contrib import admin
from django.urls import path, include
from mysite import views

# 定义 URL 路由列表
urlpatterns = [
    # 首页路由，指向 views.index 视图函数
    path('', views.index),
    # 后台管理路由
    path('admin/', admin.site.urls),
]

# 将媒体文件的 URL 路由配置添加到 urlpatterns 中
from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

经过这些配置后，我们再次刷新浏览器 页面，发现幻灯片已经可以正常显示了。现在我们已经成功地将数据库中的幻灯片数据显示在了前端页面上。