分页爬虫案例完成

app/templates/index.html

@@ -12,7 +12,7 @@
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
     <div class="container-fluid">
         <a href="#" class="navbar-brand">
-            <img src="/static/images/sucai.png" style="width:2rem;" class="rounded-pill" alt=""/>爬虫训练场</a>
+            <img src="/static/images/sucai.png" style="width:2rem;" class="rounded-pill me-2" alt=""/>爬虫训练场</a>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
             <span class="navbar-toggler-icon"></span>
@@ -34,11 +34,11 @@
 </nav>
 
 <div class="container pt-5">
-    <h3>普通爬虫</h3>
+    <h3 class="text-success">普通爬虫</h3>
     <hr>
     <div class="row align-items-stretch">
         <div class="col mt-2">
-            <div class="card  border-secondary rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
+            <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>
@@ -60,24 +60,21 @@
             </div>
         </div>
         <div class="col mt-2">
-            <div class="card  border-secondary rounded-5 shadow-sm" style="min-height:268px;min-width:300px;">
+           <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>
+                    <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">目标数据呈现在单一页面中，使用最简单的爬虫库可以直接采集，一般用正则表达式即可完成数据提取。</p>
+                    <p class="card-text">本案例是由 2760 条数据组成的分页爬虫，数据为国内学校清单，主要用于练习分页数据采集。</p>
                     <p class="card-text text-left">难度：⭐</p>
                     <p class="card-text">
                         案例：
-                        <a href="/general/news" class="card-link text-success">新闻页</a>
-                        <a href="/general/imgs" class="card-link text-success">图片清单</a>
-                        <a href="/general/table" class="card-link text-success">表格</a>
+                        <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>
-
+                     <a href="#" class="btn btn-primary card-link ">学习博客</a>
                 </div>
             </div>
         </div>
@@ -126,62 +123,7 @@
             </div>
         </div>
     </div>
-    <div class="row">
-
-        <div class="col-sm-6 col-md-3 mt-2">
-            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
-                <div class="card-header">
-                    <h4 class="card-title">单页爬虫</h4>
-                </div>
-                <div class="card-body">
-                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>
 
-                </div>
-                <div class="card-footer">
-                    <a href="#" class="card-link text-decoration-none">学习博客</a>
-                    <a href="#" class="card-link text-decoration-none">案例详情</a>
-
-                </div>
-            </div>
-        </div>
-
-        <div class="col-sm-6 col-md-3 mt-2">
-
-            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
-                <div class="card-header">
-                    <h4 class="card-title">单页爬虫</h4>
-                </div>
-                <div class="card-body">
-                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>
-
-                </div>
-                <div class="card-footer">
-                    <a href="#" class="card-link text-decoration-none">学习博客</a>
-                    <a href="#" class="card-link text-decoration-none">案例详情</a>
-
-                </div>
-            </div>
-
-        </div>
-        <div class="col-sm-6 col-md-3 mt-2">
-
-            <div class="card text-center border-secondary rounded-5 shadow-sm" style="height:268px;">
-                <div class="card-header">
-                    <h4 class="card-title">单页爬虫</h4>
-                </div>
-                <div class="card-body">
-                    <p class="card-text">单独一个网页数据展示，可直接采集，单独一个网页数据展示，可直接采集</p>
-
-                </div>
-                <div class="card-footer">
-                    <a href="#" class="card-link text-decoration-none">学习博客</a>
-                    <a href="#" class="card-link text-decoration-none">案例详情</a>
-
-                </div>
-            </div>
-
-        </div>
-    </div>
 </div>
 <div class="container pt-5">
     <h3>普通爬虫</h3>
@@ -312,7 +254,7 @@
 
 <div class="container-fluid text-center text-muted ">
     <hr>
-    <p>爬虫训练场 Copyright © 梦想橡皮擦</p>
+    <p>爬虫训练场 Copyright © 梦想橡皮擦 冀ICP备2022009308号-1</p>
 
 </div>
 

app/templates/school/index.html

@@ -33,9 +33,34 @@
     </div>
 </nav>
 <div class="container">
+    {% 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 %}
+
+
     <div class="row">
         <div class="col">
-            <span class="text-dark float-end align-middle" style="line-height: 40px;">合计  {{pagination.total}} 条数据</span>
+            <span class="text-dark float-end align-middle"
+                  style="line-height: 40px;">合计  {{pagination.total}} 条数据</span>
             <ul class="pagination float-end">
                 <li class="page-item">
                     <a class="page-link" href="{{url_for('school.list_school')}}?page={{pagination.prev_page }}">上一页</a>