index.html 13.5 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 10
    <hr>
    <div class="row align-items-stretch">
梦想橡皮擦'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>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
29 30 31 32

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

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

梦想橡皮擦's avatar
梦想橡皮擦 已提交
58 59
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
60
                    <p class="card-text">本案例用于大家学习文件和视频文件内容采集,重点掌握 M3U8 格式视频下载,掌握二进制内容保存。</p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
61 62 63
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
梦想橡皮擦's avatar
梦想橡皮擦 已提交
64 65 66
                        <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
梦想橡皮擦 已提交
67
                    </p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
68
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
69
                <div class="card-footer text-end">
70 71
                    <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
梦想橡皮擦 已提交
72 73 74
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
75
        <div class="col mt-2">
76
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
77
                <div class="card-header text-center">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
78 79 80 81
                    <h4 class="card-title">AJAX 爬虫</h4>
                    <div class="bg-danger text-white rounded p-1"
                         style="transform: rotate(20deg); position:absolute;right:0;top:0.5rem;">最新更新
                    </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
82 83
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
84
                    <p class="card-text">本案例涉及的数据采用异步AJAX返回,编写爬虫时需要注意抓取接口相关信息。</p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
85 86 87
                    <p class="card-text text-left">难度:⭐</p>
                    <p class="card-text">
                        案例:
梦想橡皮擦's avatar
梦想橡皮擦 已提交
88
                        <a href="/ss/ajax_list" class="card-link text-success">AJAX学校数据</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
89
                    </p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
90
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
91
                <div class="card-footer text-end">
92 93
                    <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
梦想橡皮擦 已提交
94 95 96 97 98
                </div>
            </div>
        </div>
    </div>

梦想橡皮擦's avatar
梦想橡皮擦 已提交
99 100
    <div class="row align-items-stretch">
        <div class="col mt-2">
101
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
                <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="/slow/list" class="card-link text-success">香港电影</a>
                    </p>
                </div>
                <div class="card-footer text-end">
117 118
                    <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
梦想橡皮擦 已提交
119 120 121
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
122
        <div class="col mt-2">
123
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
                <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">
139 140
                    <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>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
141 142 143
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
144

梦想橡皮擦's avatar
梦想橡皮擦 已提交
145 146
    </div>

梦想橡皮擦's avatar
梦想橡皮擦 已提交
147
</div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
148
<div class="container pt-5">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
149
    <h3 class="text-danger">PC端反爬</h3>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
150 151
    <hr>
    <div class="row align-items-stretch">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
152
        <div class="col mt-2">
153
            <div class="card  border-danger rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
154 155
                <div class="card-header text-center">
                    <h4 class="card-title">UA 参数反爬</h4>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
156

梦想橡皮擦's avatar
梦想橡皮擦 已提交
157 158
                </div>
                <div class="card-body">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
159 160 161 162 163 164
                    <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
梦想橡皮擦 已提交
165
                </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
166
                <div class="card-footer text-end">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
167

168 169
                    <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
梦想橡皮擦 已提交
170 171 172 173

                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
174
        <div class="col mt-2">
175
            <div class="card  border-danger rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
176 177 178 179 180 181 182
                <div class="card-header text-center">
                    <h4 class="card-title">定值 Cookie 反爬</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">
183
                    <p class="card-text">本案例要求爬虫程序在采集时,必须在请求头中携带固定 Cookie 值,如果缺少无法访问。</p>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
184 185 186 187 188 189 190
                    <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
梦想橡皮擦 已提交
191
                    <a href="https://blog.csdn.net/hihell/article/details/128474849"
192 193
                       target="_blank" class=" card-link text-muted small">案例制作教程</a>
                    <a href="#" class="btn btn-success btn-sm card-link disabled" alt="暂未开放">学习博客</a>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
194

梦想橡皮擦's avatar
梦想橡皮擦 已提交
195 196 197
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
198
        <div class="col mt-2">
199
            <div class="card border-info rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
梦想橡皮擦's avatar
梦想橡皮擦 已提交
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
                <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/encry_list" class="card-link text-success">学校清单</a>
                    </p>
                </div>
                <div class="card-footer text-end">
215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
                    <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>
                </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>
                    <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">本案例每间隔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">
                    <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>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
239 240 241
                </div>
            </div>
        </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
242
    </div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
243

梦想橡皮擦's avatar
梦想橡皮擦 已提交
244
</div>
梦想橡皮擦's avatar
梦想橡皮擦 已提交
245 246


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