11. 爬虫训练场，学校数据分页呈现，Bootstrap5 媒体组件

上一篇博客，我们实现了分页逻辑的前后端打通，但是数据渲染还未完成，本篇博客继续补充这部分知识点。

本篇博客的目标是实现一种图片巨作，内容具有排列的效果，在 Bootstrap 5 中被称作媒体对象，首先看一下默认样式。

媒体对象默认样式

正式编写代码前，先看一下媒体对象基本组成。

1. 媒体对象的容易，用来容纳媒体对象所有内容，需要添加 .media 类；
2. 媒体对象的元素，一般包含图片，需要添加类 .media-object；
3. 媒体对象的主体内容，可以为任意元素，需要使用类 .media-body；
4. 媒体对象的标题，需要使用类 .media-heading。

但是上述知识点都是在 Bootstrap 4 中的实践，Bootstrap 5 已经删除了该部分组件，但是你可以使用更加灵活的形式进行布局。

新版布局核心用到的是 .d-flex 类，即将对象作为弹性伸缩盒，然后进行展示。

下面完成一个演示效果，在 app/templates/school/index.html 文件编写。

<div class="row mt-3">
  <div class="col">
    <div class="d-flex">
      <div class="flex-shrink-0">
        <a href="#">
          <img
            width="64"
            height="64"
            src="{{url_for('static',filename='images/sucai.png')}}"
            alt=""
          />
        </a>
      </div>
      <div class="flex-grow-1 ms-3">
        <h5>这是一所学校的名字</h5>
        <p>这是学校描述</p>
      </div>
    </div>
  </div>
</div>

运行代码之后，得到下图所示效果。

得到一个 Demo 之后，就可以通过遍历渲染完整数据了，示例代码如下。

{% for school in pagination.data_list %}
<div class="row mt-3">
  <div class="col">
    <div class="d-flex">
      <div class="flex-shrink-0">
        <a href="#">
          <img width="64" height="64" src="{{school.pic}}" alt="" />
        </a>
      </div>
      <div class="flex-grow-1 ms-3">
        <h5>{{school.name}}</h5>
        <p>这是学校描述</p>
      </div>
    </div>
  </div>
</div>
{% endfor %}

数据渲染

其中最需要学习的是增加了循环渲染，重点代码为两部分。

 {% for school in pagination.data_list %}
 {% endfor %}

除此之外，未来还要学习条件渲染，使用的都是 Python 模板引擎语法，前端使用 {%%} 实现，条件渲染代码如下。

{% if school is not None  %}
{% else %}
{% endif %}

上述循环渲染的结果如下所示，校徽和学校名已经出现。

继续补充细节，将数据库中的其它字段进行呈现。

{% for school in pagination.data_list %}
<div class="row mt-3">
  <div class="col">
    <div class="d-flex">
      <div class="flex-shrink-0">
        <a href="#">
          <img class="rounded-pill img-thumbnail" width="64" height="64" src="{{school.pic}}" alt=""/>
        </a>
      </div>
      <div class="flex-grow-1  ms-3">
        <h5 class="float-start pe-3">{{school.name}}</h5>
        <p class="ms-3">
          {% for fea in school.feature.split(',') %}
          <span class="badge rounded-pill bg-primary">{{fea}}</span>
          {% endfor %}
        </p>
        <p>
          <em>所在省市：<span class="text-black-50">{{school.province}} -- {{school.city}}</span></em>
        </p>
      </div>
    </div>
  </div>
</div>
{% endfor %}

此时再次运行项目，即可呈现出数据表所有内容。

本分页案例到此完成，下面修改一下首页案例描述。

首页再修改

回到 app/templates/index.html 文件，修改案例二描述信息。

<div class="card border-info rounded-5 shadow-sm" style="min-height:268px;min-width:300px;" >
  <div class="card-header text-center">
    <h4 class="card-title">分页爬虫</h4>
    <div class="bg-danger text-white rounded p-1" style="transform: rotate(20deg); position:absolute;right:0;top:0.5rem;">
      最新更新
    </div>
  </div>
  <div class="card-body">
    <p class="card-text">
      本案例是由 2760
      条数据组成的分页爬虫，数据为国内学校清单，主要用于练习分页数据采集。
    </p>
    <p class="card-text text-left">难度：⭐</p>
    <p class="card-text">
      案例：
      <a href="/ss/list" class="card-link text-success">学校分页数据</a>
    </p>
  </div>
  <div class="card-footer text-end">
    <a href="#" class="btn btn-primary card-link ">学习博客</a>
  </div>
</div>

新版首页入口效果图如下所示。

📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 807 篇原创博客