[企业官网]:幻灯片前端实现

接下来我们需要将数据库中的数据显示在前端页面上，也就是我们的前台。当前页面虽然已经存在，但是内容是静态的，我们需要替换掉这些写死的内容。首先，我们要找到对应的视图文件，它位于我们项目中的 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，并将每个幻灯片的标题、内容和图片替换掉。替换代码如下：

🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情