8. 爬虫训练场,第一个爬虫目标页设计,单页爬虫案例

Posted 梦想橡皮擦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了8. 爬虫训练场,第一个爬虫目标页设计,单页爬虫案例相关的知识,希望对你有一定的参考价值。

单页爬虫

在初学爬虫采集时,很多人都是从一个单页采集需求开始的,单页案例也分为三种,分别如下:

  1. 单篇新闻
  2. 一些图片合集
  3. 单页表格

本篇博客就在爬虫训练场中依次实现上述三个案例。

首先修改一下上一篇博客设计的卡片。

<div class="card-footer text-center ">
  <a href="#" class="card-link text-decoration-none ">学习博客</a>
  <a href="/general/news" class="card-link text-decoration-none text-success">新闻页</a>
  <a href="/general/imgs" class="card-link text-decoration-none text-success">图片清单</a>
  <a href="/general/table" class="card-link text-decoration-none text-success">表格</a>
</div>

新增加三个案例入口。

配置案例相关文件

由于爬虫训练场涉及的目标案例非常多,所以需要进行统筹管理,接下来先在 app 目录建立 general.py 文件,然后在 templates 目录中建立 general 文件夹,在依次新增 news.htmlimgs.htmltable.html 三个文件。此时得到的项目结构如下所示。

接下来在 general.py 文件中建立三个路由函数,代码如下。

from flask import render_template
from app import app

"""
普通爬虫,控制器相关配置
"""


@app.route('/general/news')
def news():
    return render_template('general/news.html')


@app.route('/general/imgs')
def news():
    return render_template('general/imgs.html')


@app.route('/general/table')
def news():
    return render_template('general/table.html')

为了让该控制器文件生效,还需要再 app/__init__.py 文件中,导入 general.py 模块。

from flask import Flask

app = Flask(__name__)

from app import routes
from app import general

重启项目,再浏览器访问 http://192.168.0.11:8888/general/news (具体看你的项目地址),得到下图内容,上述配置完毕。

news.html 文件中导入 Bootstrap 包所以文件,然后编写一篇新闻内容,具体代码请去 gitcode 或者 pachong.vip 查阅,这里仅展示最终效果。

第二个图片案例

第二个单页爬虫案例为图片列表,首先整理一些免费图片素材,将其转存到 app/static/images/faces 目录中。

然后在 imgs.html 页面依次调用。示例代码如下所示,最终得到的效果在代码后。

<div class="row">
  <div class="col-sm-6 col-md-3 col-lg-2 p-2">
    <img src="url_for('static',filename='images/faces/3-220P21A447-lp.jpg')" alt=""/>
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 p-2">
    <img src="url_for('static',filename='images/faces/3-220P41F009-lp.jpg')" alt="" />
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 p-2">
    <img src="url_for('static',filename='images/faces/3-220P2155220-50-lp.jpg')" alt="" />
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 p-2">
    <img src="url_for('static',filename='images/faces/3-220P2160142-lp (1).jpg')" alt="" />
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 p-2">
    <img src="url_for('static',filename='images/faces/3-220P5151547-lp.jpg')" alt="" />
  </div>
  <div class="col-sm-6 col-md-3 col-lg-2 p-2">
    <img src="url_for('static',filename='images/faces/7-220I1094505-lp.jpg')" alt="" />
  </div>
</div>

单页表格

网页中仅包含一个表格实现起来比较容易,效果如下。

<table class="table table-striped table-hover" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width:10%;">序号</td>
      <td style="width:35%;">学校</td>
      <td style="width:15%;">本/专</td>
      <td style="width:15%;">公/民</td>
      <td style="width:25%;">查看详情</td>
    </tr>
    <tr>
      <td>1</td>
      <td>北京大学</td>
      <td>本科</td>
      <td>公办</td>
      <td><a href="/school/北京大学.html" target="_blank">进入主页</a></td>
    </tr>
  </tbody>
</table>

三个最简单的案例都已经完成,下面针对实践过程中,首页样式 BUG,进行完善。

首页完善

在本篇博客案例编写的过程中,发现首页切换到小屏幕时,会出现下图所示样式 BUG。


该问题出现的原因是由于固定了卡片高度,所以接下来针对该问题进行修复。

去掉页面固定高度

删除卡片标签的 style="height:268px;" 这一配置即可,但是又出现了卡片高度不一致问题。

增加最小高度,最小宽度样式,并且页面栅格布局修改为自动适配,代码如下。

<div class="col mt-2">
  <div class="card  border-secondary rounded-5 shadow-sm" style="min-height:268px;min-width:300px;" >
    <div class="card-header text-center">
      <h4 class="card-title">单页爬虫</h4>
    </div>
    <div class="card-body">
      <p class="card-text">
        目标数据呈现在单一页面中,使用最简单的爬虫库可以直接采集,一般用正则表达式即可完成数据提取。
      </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>
      </p>
    </div>
    <div class="card-footer text-end">
      <a href="#" class="btn btn-primary card-link ">学习博客</a>
    </div>
  </div>
</div>

此时实现的效果如下所示。

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

从订购之日起,案例 5 年内保证更新

以上是关于8. 爬虫训练场,第一个爬虫目标页设计,单页爬虫案例的主要内容,如果未能解决你的问题,请参考以下文章

9. 爬虫训练场,分页爬虫案例设计Demo,打通 Python Flask 和 MySQL

10. 爬虫训练场,分页爬虫案例前端页面制作

10. 爬虫训练场,分页爬虫案例前端页面制作

小白写爬虫

爬虫训练场项目,1小时掌握 Bootstrap 网格系统

Python-爬虫-猫眼T100