{% extends "base.html" %}
{% block content %}
<div class="alert alert-info alert-dismissible text-center">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>爬虫训练场项目</strong> 正在建设中~
</div>
<div class="container pt-5">
    <h3 class="text-success">普通爬虫</h3>
    <hr>
    <div class="row align-items-stretch mt-3">
        <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>
                <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="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>

                </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>
                <div class="card-body">
                    <p class="card-text">本案例是由 2760 条数据组成的分页爬虫，数据为国内学校清单，主要用于练习分页数据采集。</p>
                    <p class="card-text text-left">难度：⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/ss/list" class="card-link text-success">学校分页数据</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <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>
                </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>
                <div class="card-body">
                    <p class="card-text">本案例用于大家学习文件和视频文件内容采集，重点掌握 M3U8 格式视频下载，掌握二进制内容保存。</p>
                    <p class="card-text text-left">难度：⭐</p>
                    <p class="card-text">
                        案例：
                        <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>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <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>
                </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">AJAX 爬虫</h4>

                </div>
                <div class="card-body">
                    <p class="card-text">本案例涉及的数据采用异步AJAX返回，编写爬虫时需要注意抓取接口相关信息。</p>
                    <p class="card-text text-left">难度：⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/ss/ajax_list" class="card-link text-success">AJAX学校数据</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <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>
                </div>
            </div>
        </div>
    </div>

    <div class="row align-items-stretch mt-3">
        <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>
                <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">
                    <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>
                </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">本案例模拟的滚动加载数据，当使用鼠标滚轮下拉数据到底部时，会自动触发异步函数，调用后台数据。</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">
                    <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>
        <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>
    </div>

</div>
<div class="container pt-5">
    <h3 class="text-danger">PC端反爬</h3>
    <hr>
    <div class="row align-items-stretch mt-3">
        <div class="col mt-2">
            <div class="card  border-danger rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">UA 参数反爬</h4>

                </div>
                <div class="card-body">
                    <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>
                </div>
                <div class="card-footer text-end">

                    <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>

                </div>
            </div>
        </div>
        <div class="col mt-2">
            <div class="card  border-danger rounded-5 shadow-sm" style="min-height:306px;min-width:300px;">
                <div class="card-header text-center">
                    <h4 class="card-title">定值 Cookie 反爬</h4>
                </div>
                <div class="card-body">
                    <p class="card-text">本案例要求爬虫程序在采集时，必须在请求头中携带固定 Cookie 值，如果缺少无法访问。</p>
                    <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">
                    <a href="https://blog.csdn.net/hihell/article/details/128474849"
                       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>
                <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">
                    <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>
                <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/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>
    </div>
    <div class="row align-items-stretch mt-3">
        <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">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">
                    <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>

        <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="/u/i" class="card-link text-success">名片</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <a href="https://dream.blog.csdn.net/article/details/128550667" 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">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">
                    <p class="card-text">本案例使用CSS偏移技术实现反爬，涉及两种案例，一种采用定位实现，一种采用伪元素实现</p>
                    <p class="card-text text-left">难度：⭐⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/as/deviation" class="card-link text-success">旅游景点①</a>
                        <a href="/as/css_antispider" class="card-link text-success">博客清单</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <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"
                       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">SVG图片反爬</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">本案例热度数据调用SVG图片生成，采集时需先分析SVG图片构成，然后进行数据解析。</p>
                    <p class="card-text text-left">难度：⭐⭐</p>
                    <p class="card-text">
                        案例：
                        <a href="/as/rank" class="card-link text-success">游戏排行榜</a>
                    </p>
                </div>
                <div class="card-footer text-end">
                    <a href="https://dream.blog.csdn.net/article/details/128550751" 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>

</div>


{% endblock %}