index.html 19.7 KB
Newer Older
梦想橡皮擦's avatar
梦想橡皮擦 已提交
1 2
{% extends "base.html" %}
{% block content %}
3
<div class="alert alert-info alert-dismissible text-center">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
4 5
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>爬虫训练场项目</strong> 正在建设中~
梦想橡皮擦's avatar
梦想橡皮擦 已提交
6
</div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
7
<div class="container pt-5">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
8
    <h3 class="text-success">普通爬虫</h3>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
9
    <hr>
10
    <div class="row align-items-stretch mt-3">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
11
        <div class="col mt-2">
12
            <div class="card  border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
13
                <div class="card-header text-center">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
14 15 16
                    <h4 class="card-title">单页爬虫</h4>
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
17 18 19 20 21 22 23 24
                    <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>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
25
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
26
                <div class="card-footer text-end">
27 28
                    <a href="https://blog.csdn.net/hihell/article/details/128420246" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
29
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
30 31 32 33

                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
34
        <div class="col mt-2">
35
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
36
                <div class="card-header text-center">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
37
                    <h4 class="card-title">分页爬虫</h4>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
38

梦想橡皮擦's avatar
梦想橡皮擦 已提交
39 40
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
41
                    <p class="card-text">本案例是由 2760 条数据组成的分页爬虫,数据为国内学校清单,主要用于练习分页数据采集。</p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
42 43 44
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
梦想橡皮擦's avatar
梦想橡皮擦 已提交
45
                        <a href="/ss/list" class="card-link text-success">学校分页数据</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
46
                    </p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
47
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
48
                <div class="card-footer text-end">
49 50
                    <a href="https://blog.csdn.net/hihell/article/details/128429345" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
51
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
52 53 54
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
55
        <div class="col mt-2">
56
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
57
                <div class="card-header text-center">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
58
                    <h4 class="card-title">二进制文件采集</h4>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
59

梦想橡皮擦's avatar
梦想橡皮擦 已提交
60 61
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
62
                    <p class="card-text">本案例用于大家学习文件和视频文件内容采集,重点掌握 M3U8 格式视频下载,掌握二进制内容保存。</p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
63 64 65
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
梦想橡皮擦's avatar
梦想橡皮擦 已提交
66 67 68
                        <a href="/file/c" class="card-link text-success">普通</a>
                        <a href="/file/mp4" class="card-link text-success">MP4文件</a>
                        <a href="/file/m3u8" class="card-link text-success">M3U8文件</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
69
                    </p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
70
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
71
                <div class="card-footer text-end">
72 73 74
                    <a href="https://blog.csdn.net/hihell/article/details/128465888" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
75 76 77
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
78
        <div class="col mt-2">
79
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
80
                <div class="card-header text-center">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
81
                    <h4 class="card-title">AJAX 爬虫</h4>
82

梦想橡皮擦's avatar
梦想橡皮擦 已提交
83 84
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
85
                    <p class="card-text">本案例涉及的数据采用异步AJAX返回,编写爬虫时需要注意抓取接口相关信息。</p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
86 87 88
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
梦想橡皮擦's avatar
梦想橡皮擦 已提交
89
                        <a href="/ss/ajax_list" class="card-link text-success">AJAX学校数据</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
90
                    </p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
91
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
92
                <div class="card-footer text-end">
93 94 95
                    <a href="https://blog.csdn.net/hihell/article/details/128474866" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
96 97 98 99 100
                </div>
            </div>
        </div>
    </div>

101
    <div class="row align-items-stretch mt-3">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
102
        <div class="col mt-2">
103
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
104 105
                <div class="card-header text-center">
                    <h4 class="card-title">慢速爬虫</h4>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
106

梦想橡皮擦's avatar
梦想橡皮擦 已提交
107 108 109 110 111 112 113 114 115 116
                </div>
                <div class="card-body">
                    <p class="card-text">本案例通过控制请求响应速度,来实现慢速爬虫,编写采集程序,需要控制请求和响应时间。</p>
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/slow/list" class="card-link text-success">香港电影</a>
                    </p>
                </div>
                <div class="card-footer text-end">
117 118 119
                    <a href="https://blog.csdn.net/hihell/article/details/128474887" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
120 121 122
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
123
        <div class="col mt-2">
124
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
                <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">本案例模拟的滚动加载数据,当使用鼠标滚轮下拉数据到底部时,会自动触发异步函数,调用后台数据。</p>
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/ss/pr" class="card-link text-success">学校清单</a>
                    </p>
                </div>
                <div class="card-footer text-end">
140 141
                    <a href="https://blog.csdn.net/hihell/article/details/128474916" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
142
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
143 144 145
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
        <div class="col mt-2">
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;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">本案例需模拟登录,然后才可采集数据,实践中可分析登录之后系统在客户端存储的用户状态信息。</p>
                    <p class="card-text text-left">难度:⭐⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/ss/login_list" class="card-link text-success">学校清单</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <a href="https://blog.csdn.net/hihell/article/details/128474916" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
169 170
    </div>

梦想橡皮擦's avatar
梦想橡皮擦 已提交
171
</div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
172
<div class="container pt-5">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
173
    <h3 class="text-danger">PC端反爬</h3>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
174
    <hr>
175
    <div class="row align-items-stretch mt-3">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
176
        <div class="col mt-2">
177
            <div class="card  border-danger rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
178 179
                <div class="card-header text-center">
                    <h4 class="card-title">UA 参数反爬</h4>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
180

梦想橡皮擦's avatar
梦想橡皮擦 已提交
181 182
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
183 184 185 186 187 188
                    <p class="card-text">该案例要求爬虫程序构造请求头的时候,必须携带 User-Agent 参数,否则会返回403错误。</p>
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/as/show" class="card-link text-success">预言故事</a>
                    </p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
189
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
190
                <div class="card-footer text-end">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
191

192 193 194
                    <a href="https://blog.csdn.net/hihell/article/details/128473575" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
195 196 197 198

                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
199
        <div class="col mt-2">
200
            <div class="card  border-danger rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
201 202 203 204
                <div class="card-header text-center">
                    <h4 class="card-title">定值 Cookie 反爬</h4>
                </div>
                <div class="card-body">
205
                    <p class="card-text">本案例要求爬虫程序在采集时,必须在请求头中携带固定 Cookie 值,如果缺少无法访问。</p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
206 207 208 209 210 211 212
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/as/cookie_demo" class="card-link text-success">边界故事</a>
                    </p>
                </div>
                <div class="card-footer text-end">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
213
                    <a href="https://blog.csdn.net/hihell/article/details/128474849"
214 215
                       target="_blank" class=" card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
216

梦想橡皮擦's avatar
梦想橡皮擦 已提交
217 218 219
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
220
        <div class="col mt-2">
221
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
222 223
                <div class="card-header text-center">
                    <h4 class="card-title">简易响应加密</h4>
224

梦想橡皮擦's avatar
梦想橡皮擦 已提交
225 226 227 228 229 230 231 232 233 234
                </div>
                <div class="card-body">
                    <p class="card-text">本案例请求数据接口之后,会返回加密值,在前台需要对加密串进行解密,然后在渲染数据。</p>
                    <p class="card-text text-left">难度:⭐⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/ss/encry_list" class="card-link text-success">学校清单</a>
                    </p>
                </div>
                <div class="card-footer text-end">
235 236 237
                    <a href="https://dream.blog.csdn.net/article/details/128474924" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
238 239 240 241 242 243 244
                </div>
            </div>
        </div>
        <div class="col mt-2">
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">动态token反爬</h4>
245

246 247 248 249 250 251 252 253 254 255
                </div>
                <div class="card-body">
                    <p class="card-text">本案例每间隔10秒通过时间戳生成一token值,后台解析该值和同步传递的时间戳进行匹配,确定是否返回数据。</p>
                    <p class="card-text text-left">难度:⭐⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/ss/ajax_list2" class="card-link text-success">学校清单</a>
                    </p>
                </div>
                <div class="card-footer text-end">
256 257
                    <a href="https://dream.blog.csdn.net/article/details/128474930" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
258 259 260 261
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
                </div>
            </div>
        </div>
262
    </div>
263
    <div class="row align-items-stretch mt-3">
264
        <div class="col mt-2">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">IP 限制爬虫</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">本案例限制单IP每秒仅能访问3次API,学习时,需要用到代理IP池,或者间隔时间采集。</p>
                    <p class="card-text text-left">难度:⭐⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/ss/ajax_list3" class="card-link text-success">学校清单</a>
                    </p>
                </div>
                <div class="card-footer text-end">
281 282 283 284 285 286
                    <a href="https://dream.blog.csdn.net/article/details/128474930" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
                </div>
            </div>
        </div>
287

288 289 290
        <div class="col mt-2">
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
                <div class="card-header text-center">
291
                    <h4 class="card-title">文字图片反爬</h4>
292 293 294 295 296 297 298 299 300 301 302 303 304
                    <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 text-left">难度:⭐⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/u/i" class="card-link text-success">名片</a>
                    </p>
                </div>
                <div class="card-footer text-end">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
305
                    <a href="https://dream.blog.csdn.net/article/details/128550667" target="_blank"
306
                       class="card-link text-muted small">案例制作教程</a>
307
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
308 309 310
                </div>
            </div>
        </div>
311 312 313 314 315 316 317 318 319
        <div class="col mt-2">
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">CSS偏移反爬</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">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
320
                    <p class="card-text">本案例使用CSS偏移技术实现反爬,涉及两种案例,一种采用定位实现,一种采用伪元素实现</p>
321 322 323 324
                    <p class="card-text text-left">难度:⭐⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/as/deviation" class="card-link text-success">旅游景点①</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
325
                        <a href="/as/css_antispider" class="card-link text-success">博客清单</a>
326 327 328
                    </p>
                </div>
                <div class="card-footer text-end">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352
                    <a href="https://dream.blog.csdn.net/article/details/128550707" target="_blank"
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
                </div>
            </div>
        </div>
         <div class="col mt-2">
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;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">爬虫工程师在调试Web站点的时候,离不开开发者工具,实战中我们可以对开发者工具进行限制,达到反爬目的</p>
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
                        <a href="/ss/debugg" class="card-link text-success">限制开发者工具</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <a href="https://dream.blog.csdn.net/article/details/128666768" target="_blank"
353 354 355 356 357
                       class="card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
358
    </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
359

梦想橡皮擦's avatar
梦想橡皮擦 已提交
360
</div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
361 362


梦想橡皮擦's avatar
梦想橡皮擦 已提交
363
{% endblock %}