17. 老板让我手动控制网页渲染速度，说这能反爬虫？我信了。 |
您所在的位置：网站首页 › ajax数据渲染到页面 › 17. 老板让我手动控制网页渲染速度，说这能反爬虫？我信了。 |
17. 老板让我手动控制网页渲染速度，说这能反爬虫？我信了。
|
手动数据延迟加载，真的可以反爬虫 爬虫训练场项目，加速更新中，专栏清单参考 pachong.vip 本次案例需要的代码量特别小，所以咱们再 Nginx 中也进行一下相关配置 页面逻辑实现这篇博客主要实现一个慢响应爬虫，即模拟网速缓慢时，该如何处理采集程序。 正式实现前，依旧是实现基础页面，本次案例前端使用 Bootstrap5 构建，案例采用 9 部香港经典电影作为数据储备。 快速搭建出视图函数和视图页面，清单如下。 app/slow/index.py：用户编写视图相关函数。 app/templates/slow/index.html：视图相关代码。其中 index.html 文件用于实现电影列表，我们可以用可以使用 Bootstrap 的网格系统来创建电影列表。例如，你可以使用 .col-4 类创建一个 3 列的电影列表： Movie 1 Movie 1 description …… ……在上述代码的基础上，完善卡片信息，补齐电影资料。 无间道 作为香港警探电影系列的巅峰之作，无间道由刘德华、梁朝伟、黄秋生等实力影帝主演，它作为刘德华十大经典电影之一，主要讲述了黑社会的卧底故事，情节反转再反转，非常值得重复观看。 详细图片素材，可以去 GitCode 获取，除此之外，给 注意上述代码我们使用了一个【详细按钮】，该按钮可以唤醒一个模态弹窗，对应的JS代码如下所示。 $('.show_movie').on('click',function(){ showModal(); }); function showModal() { $('#movieModal').modal('show'); }其中 $('#movieModal') 调用的 DIV 对象内容如下所示。 加载中…… 加载中…… 关闭基础内容增加完毕，实现页面请求部分代码，我们采用 jQuery 的 $.get() 方法发送 HTTP get 请求获取数据，基本格式如下所示。 $.get(url, data, callback, dataType);其参数说明如下所示。 url是请求的 URL； data 是要发送到服务器的数据； callback 是服务器响应后执行的回调函数； dataType 是服务器响应的数据类型，可以是 “html”, “xml”, “json”, “jsonp” 等。下面是一个示例，用 $.get方法从服务器获取 JSON 格式的数据： $.get('/data.json', function(data) { console.log(data); }, 'json');简写格式如下所示： $.get('/data.json', function(data) { console.log(data); });这样，数据类型就默认为 "text"，不需要手动指定。 data 参数是要发送到服务器的数据。它可以是以下几种类型之一： 字符串：表示查询字符串，例如"name=xiangpica&age=20"； 对象：表示查询字符串的键/值对，例如{ name: "xiangpica", age: 20 }； 函数：表示返回查询字符串的函数，例如 function() { return "name=xiangpica&age=20"; }。当 data 是字符串或对象时，会将其转换为查询字符串并附加到 URL 的末尾。例如，对于以下代码： $.get('/data', { name: "xiangpica", age: 20 }, function(data) { console.log(data); });实际发送的请求如下所示。 GET /data?name=xiangpica&age=20如果 data 是函数，则会执行函数并使用其返回值作为查询字符串。例如，对于以下代码： $.get('/data', function() { return "name=xiangpica&age=20"; }, function(data) { console.log(data); });实际发送的请求如下所示。 GET /data?name=xiangpica&age=20当然，你也可以不使用 data 参数，直接发送空的 GET 请求。例如： $.get('/data', function(data) { console.log(data); }); 接口逻辑实现前端页面构建完毕，就需要将API部分补齐，本次修改的文件是 slow/index.py 文件，其代码如下所示。 slow = Blueprint('slow', __name__, url_prefix='/slow') movies = [{ "name": "无间道", "release_time": "2002年12月12日", "company": "寰亚电影发行公司", "movie_type": "剧情、犯罪、警匪" }, { "name": "青蛇", "release_time": "1993年11月4日", "company": "香港思远影业公司", "movie_type": "奇幻" }, { "name": "喜剧之王", "release_time": "1999年02月13日", "company": "星辉海外有限公司", "movie_type": "剧情、喜剧、爱情" }, { "name": "重庆森林", "release_time": "1994年07月14日", "company": "泽东电影有限公司", "movie_type": "剧情、悬疑、爱情" }, { "name": "英雄本色", "release_time": "1986年8月2日", "company": "新艺城影业有限公司", "movie_type": "剧情、动作、犯罪、惊悚" }, { "name": "倩女幽魂", "release_time": "1987年7月18日", "company": "新艺城影业有限公司", "movie_type": "爱情、奇幻、武侠、古装" }, { "name": "花样年华", "release_time": "2000年9月29日", "company": "泽东电影公司", "movie_type": "剧情、文艺、爱情" }, { "name": "大话西游系列", "release_time": "1995年2月4日", "company": "彩星电影公司", "movie_type": "喜剧、爱情、动作、奇幻、冒险" }, { "name": "东成西就", "release_time": "1993年2月5日", "company": "泽东电影公司", "movie_type": "喜剧" }] @slow.route('/list') def list_slow(): return render_template('slow/index.html') @slow.route('/detail') def detail(): movie_id = int(request.args.get("movie_id", 1)) movie = movies[movie_id - 1] return jsonify(movie)其中涉及两个路由配置，list 是列表页面，detail 是详情页面，后面主要控制该页面响应速度。 整体代码完成之后的效果如下所示。
前端弹窗接口调用部分JS代码如下所示，核心逻辑是请求 API，然后拼接响应数据。 $(function(){ function showModal(movie_id) { var data = { movie_id: movie_id } $.get('/slow/detail',data,function(res){ $('.spinner-border').addClass('d-none'); $('.movie_title').text(res.name); $('.movie_body').html('上映时间: '+res.release_time+' 类型: '+res.movie_type+' 出品公司: '+res.company+' ') }) $('#movieModal').modal('show'); } $('.show_movie').on('click',function(){ var movie_id = $(this).attr('movieid'); $('.movie_title').text('加载中……'); $('.movie_body').text('加载中……'); $('.spinner-border').removeClass('d-none'); showModal(movie_id); }); }); 延迟实现，time.sleep() 和 Nginx 配置在延迟处理这一块，最简单的办法是调用 time 模块的 sleep() 函数，代码如下： time.sleep(5) # 延迟 5 秒第二种配置是采用 Nginx 控制请求次数，首先在服务器端的 Nginx 上找到配置文件 nginx.conf，然后在 http 或 server 块中添加如下配置。 limit_req_zone $binary_remote_addr zone=mylimit:10m rate=1r/s;在这里，$binary_remote_addr 是 Nginx 变量，表示客户端的 IP 地址，zone=mylimit:10m 表示将限制存储在名为 mylimit 的区域中，并且每个区域可以存储 10MB 的数据，rate=1r/s 表示请求速率为每秒 1 个请求。 接下来回到 Nginx 的通用配置文件 location 块中，添加如下内容。 location /slow/detail { proxy_pass http://127.0.0.1:8787; proxy_set_header Host $host; limit_req zone=mylimit burst=1 nodelay; }这里最重要的配置为 limit_req zone=mylimit burst=1 nodelay;，其中 limit_req 指令是 Nginx 中的一个请求限制功能，用于限制对某个区域的请求的速率。 limit_req 指令有多个参数可以设置，常用的参数有： zone：表示限制请求速率的区域名称。需要使用 limit_req_zone 指令先定义区域； burst：表示请求速率的最大值（每秒请求数）。如果请求速率超过了这个值，则会被拒绝； nodelay：表示请求速率的最小值（每秒请求数）。如果请求速率低于了这个值，则会被延迟响应。在回过头来看一下刚刚的配置，zone=mylimit 表示使用名为 mylimit 的区域来限制请求速率，burst=1 表示请求速率的最大值是每秒 1 个请求，nodelay 表示请求速率的最小值是每秒 1 个请求。 本案例到此结束，已更新到 爬虫训练场 欢迎大家访问学习。 项目同步到代码仓库 https://gitcode.net/hihell/spider_playground 📢📢📢📢📢📢 💗 你正在阅读 【梦想橡皮擦】 的博客 👍 阅读完毕，可以点点小手赞一下 🌻 发现错误，直接评论区中指正吧 📆 橡皮擦的第 814 篇原创博客 |
【本文地址】
今日新闻 |
推荐新闻 |