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

举报
梦想橡皮擦 发表于 2023/02/22 16:58:54 2023/02/22
【摘要】 在初学爬虫采集时,很多人都是从一个单页采集需求开始的,单页案例也分为三种,分别如下:单篇新闻一些图片合集单页表格本篇博客就在爬虫训练场中依次实现上述三个案例。首先修改一下上一篇博客设计的卡片。<div class="card-footer text-center "> <a href="#" class="card-link text-decoration-none ">学习博客</a> ...

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

  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>

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

image.png

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200