【永不断档】Python 爬虫训练场项目第一讲，环境初始化

我正在参加「掘金·启航计划」

这套专栏的背景

写这套课的初衷依旧是为 Python 爬虫专栏做准备，原因是随着国内知识产权保护越来越严格，Python 爬虫写作面临了以下几个困境。

案例要不断更新，很多站点运行一段时间，就停止维护了，非常不友好
反爬手段要更新，技术在迭代，反爬技术相应的也在升级
版权官司，Python 爬虫是由灰色边缘存在的，即使为了学习，也很容易让自己陷到官司中

基于这些背景，橡皮擦在 2023 年会用 2 个月的时间，独立打造一个【爬虫训练场】项目，该项目具备以下特点。

网站源码开源，可以在 GitCode 获取；
网站服务器域名独立，均采用 pachong.vip
爬虫案例长期更新，并及时更新最新的反爬技术落地

除此之外，该项目制作过程也分为【文字稿】和【视频稿】，同步发布到梦想橡皮擦各平台博客账号，博客部分内容由（乔喻）编写，并独家授权橡皮擦发布，非常感谢。

本专栏体系大纲，将在项目第一阶段完成之后，整理发布，敬请期待。

项目背景技术栈

Python 爬虫训练场项目用一句话描述：

各爬虫目标案例的集成地

其核心分为 5 部分，分别如下：

普通爬虫案例
JS 反爬&逆向案例
字体反爬案例
验证码案例
APP 案例

技术栈实现采用 Python Flask + jQuery + Bootstrap 等较基础技术实现，部分案例会采用更加前沿的前端框架进行打包，实践过程会依据目标案例进行修改。

初始化环境

本篇博客要完成的事情，分为如下三点。

选择 Python Flask 版本，并配置基础环境；
集成 jQuery，集成 Bootstrap
上传源码到 gitcode 项目仓库。

实践时间 2 小时。

开发工具

PyCharm 2021.2.3 (Community Edition)
Python 3.6

使用 PyCharm 创建新项目

新项目名称为 python_spider_playground，同时使用 venv 工具包创建虚拟环境。

本次课程由于是项目实战，Python 语法部分仅进行简单串讲。

【永不断档】Python 爬虫训练场项目第一讲，环境初始化解析来配置一下 pycharm 的软件包源，为的是后续安装第三方模块效率得到提高。配置位置找到左下角 Python packages 卡片，然后点击设置完成基础配置。选择 pip 源的时候，尽量选择包全速度快的源即可，这里橡皮擦使用的是清华源。

https://pypi.tuna.tsinghua.edu.cn/simple/

在该在卡片中，你也可以看到已安装模块清单，后续本页面会偶发性的被打开，一定要掌握对其基本管理，例如安装 flask 模块。安装下述截图步骤进行操作即可。【永不断档】Python 爬虫训练场项目第一讲，环境初始化 flask 模块安装完毕，会自动安装其相关联的模块，最终得到的以安装模块如下所示。

编写 hello world 项目

在项目根目录创建一个 main.py 文件，并在其中输出 flask 的 hello world 代码，该步骤主要用于验证 Python 环境和 flask 是否都配置正常。 main.py 文件内容如下所示。

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello_world():
    return 'hello world'


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8888)

运行该 python 文件，控制台输出如下内容。【永不断档】Python 爬虫训练场项目第一讲，环境初始化打开本地浏览器，这里建议使用谷歌或者 edge 浏览器，在地址栏输入 localhost:8888，得到 hello world 输出，此时基础配置完毕。在开发的时候，使用该模式即可，未来项目部署到服务器端，一般叫做生产环境，需要使用 Gunicorn 或者 uWSGI 搭建，此时停止项目在控制台使用 ctrl+c 即可。

项目规整+jQuery 和 Bootstrap 导入

前文仅对环境进行了基础测试，作为一个合格的项目，必须要做好目录分配，便于后续进行多功能研发，接下来我们进行一下相关实践。

在项目根目录建立 app 目录 在该目录中依次建立两个文件，分别是 __init__.py，routes.py，后续用来编写项目初始化代码和主路由代码。

** __init__.py 代码如下**

from flask import Flask

app = Flask(__name__)

from app import routes

** routes.py 代码如下**

from app import app

@app.route('/')
@app.route('/index')
def index():
    return 'hello world'

接下来在 app 目录同级创建一个程序主入口文件，命名为 playground.py。

from app import app

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8888)

此时项目结构图如下所示。【永不断档】Python 爬虫训练场项目第一讲，环境初始化下面创建模板文件夹，并在 HTML 页面中导入 JS 模块。

在 app 目录中，建立 templates 文件夹，然后再其中建立 index.html 文件，输入如下代码内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{{title}} 爬虫训练场</title>
  </head>
  <body>
    <h1>这里是爬虫训练场项目</h1>
  </body>
</html>

其中 {{}} 是变量，可以从后台传递过来数据进行绑定，修改 routes.py 文件，增加模块文件调用和变量传参。

from flask import render_template
from app import app


@app.route('/')
@app.route('/index')
def index():
    item = {
        "msg": "后台传递信息"
    }
    return render_template('index.html', title="梦想橡皮擦", item=item)

再次运行代码，得到下述所示效果，可以看到标题中携带了【梦想橡皮擦】，该内容表示数据已经得到传输。

【永不断档】Python 爬虫训练场项目第一讲，环境初始化接下来在 HTML 文件头部加入 jQuery 文件和 Boostrap 文件的导入，这里橡皮擦选择是 jQuery 3.6.0 版本和 Bootstrap 5.2.3 版本，直接使用 CDN 模式导入。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>{{title}} 爬虫训练场</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>这里是爬虫训练场项目</h1>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

为了验证 Bootstrap 已经生效，我们实现一个最简单的布局效果，继续修改 HTML 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>{{title}} 爬虫训练场</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container-fluid p-5 bg-primary text-white text-center">
      <h1>这里是爬虫训练场项目</h1>
    </div>

    <div class="container mt-5">
      <div class="row">
        <div class="col-sm-4">
          <h3>橡皮擦</h3>
          <p>Python 实战博客1</p>
        </div>
        <div class="col-sm-4">
          <h3>橡皮擦</h3>
          <p>Python 实战博客2</p>
        </div>
        <div class="col-sm-4">
          <h3>橡皮擦</h3>
          <p>Python 实战博客3</p>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

重新运行代码，得到如下内容，未来页面布局也会基于该基础进行实现，主要会使用 Bootstrap 新组建，新样式表。

当然，这里可以暂时移除 jquery，因为 Bootstrap5 已经不再依赖 jquery ，而是使用原生 JS 实现了，后续有插件需要 jQuery 会再次引入。

【永不断档】Python 爬虫训练场项目第一讲，环境初始化

项目上传 gitcode

这一步骤非常简单了，学习阶段可以跳过，但进入公司实战是离不开本步骤的。

项目初始化

git init

建立忽略目录

touch .gitignore

.gitignore 文件内容

.idea/
venv/

接下来绑定远端 gitcode 项目仓库。

git remote add origin https://gitcode.net/hihell/spider_playground.git
git add .
git commit -m "Initial commit"

除此之外，还需要配置一下账号和邮箱。

git config --global user.name "梦想橡皮擦"
git config --global user.email "你的邮箱"

使用 git push 上传项目。

git push -u origin master

最终效果如下所示，可以打开 gitcode.net/hihell/spid… 进行源码同步学习。【永不断档】Python 爬虫训练场项目第一讲，环境初始化

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