Skip to content

爬
爬虫训练场

梦想橡皮擦 / 爬虫训练场

通知 64
Star 7
Fork 1
爬
爬虫训练场
提交 8b5f6e2c 编写于 作者: 梦想橡皮擦's avatar 梦想橡皮擦 💬
浏览文件
操作

CSS 伪元素反爬

上级 fead3b1a
隐藏空白更改
内联 并排
Showing with 247 addition and 9 deletion
app/antispider/index.py
浏览文件 @ 8b5f6e2c
from flask import Blueprint, jsonify, request, redirect, url_for
from flask import render_template
from csscompressor import compress
import random
import json
......@@ -49,7 +50,7 @@ def deviation():
# 三个坐标正常生成，然后索引位置为8的数字进行CSS偏移替换。
json_data = None
with open(app.root_path+'/data/travel.json','r',encoding='utf-8') as f:
with open(app.root_path + '/data/travel.json', 'r', encoding='utf-8') as f:
json_data = json.loads(f.read())
# 随机三位数和四位数，累计20个
......@@ -58,7 +59,7 @@ def deviation():
num_list.append(random.randint(100, 9999))
# 循环读取所有生成的数字
for ii,num in enumerate(num_list):
for ii, num in enumerate(num_list):
# 将数字转换为字符列表，便于进行切割
num_str = list(str(num))
......@@ -94,10 +95,34 @@ def deviation():
json_data[ii]["len_num"] = len_num
json_data[ii]["number_relation"] = number_relation
return render_template("antispider/deviation.html", json_data=json_data)
return render_template("antispider/deviation.html",json_data=json_data)
# CSS 偏移反爬实现
@antispider.route('/deviation1')
def deviation1():
return render_template("antispider/deviation1.html")
\ No newline at end of file
# @antispider.route('/deviation1')
# def deviation1():
# return render_template("antispider/deviation1.html")
# CSS 伪类实现反爬
@antispider.route('/css_antispider')
def css_antispider():
with open(app.root_path + '/data/blogs.json', 'r', encoding='utf-8') as f:
json_data = json.loads(f.read())
# 将数据生成到 CSS 中
css_str = ""
for index, item in enumerate(json_data):
browse = item["browse"]
comment = item["comment"]
collection = item["collection"]
css_str += f""".browse{index+1}::after{{content:'{browse}';font-size:14px;}}.comment{index+1}::after{{content:'{comment}';font-size:14px;}}.collection{index+1}::after{{content:'{collection}';font-size:14px;}}\n"""
compressed_css = compress(css_str)
with open(app.static_folder + '/css/blog_antispider.min.css', 'w') as f:
f.write(compressed_css)
return render_template("antispider/css.html",data=json_data)
app/data/blogs.json 0 → 100644
浏览文件 @ 8b5f6e2c
[
{
"background": "c4fecc10ca36417f80bc4fd441f437dc.png",
"title": "【C++】打开C++的大门",
"browse": "5950",
"comment": "49",
"collection": "206"
},
{
"background": "801922b26169dd269be29abc282b1ce8.png",
"title": "ChatGPT通俗笔记：从GPT-N、RL之PPO算法到instructGPT、ChatGPT",
"browse": "2463",
"comment": "8",
"collection": "23"
},
{
"background": "18bf0a7942eb44bebd6ccc46794bc7cd.png",
"title": "一次线上事故，我顿悟了MongoDB的精髓",
"browse": "1493",
"comment": "28",
"collection": "38"
},
{
"background": "55d9c85babc749d884eafa25e21644b4.png",
"title": "Docker——网络配置",
"browse": "2195",
"comment": "5",
"collection": "20"
},
{
"background": "05ea82ba554e4fdfa5e9db2e32597d7c.png",
"title": "Windows server——部署DNS服务",
"browse": "1010",
"comment": "115",
"collection": "67"
},
{
"background": "0219aa4abd7141a8b270b47be966c111.png",
"title": "大数据分案例-基于随机森林算法构建返乡人群预测模型",
"browse": "262",
"comment": "86",
"collection": "40"
},
{
"background": "",
"title": "Elasticsearch连续剧之分词器",
"browse": "159",
"comment": "24",
"collection": "19"
},
{
"background": "",
"title": "MySQL基本运维命令",
"browse": "4260",
"comment": "8",
"collection": "120"
},
{
"background": "67af9bb3805b422f8a76f0ee24d0ac2d.png",
"title": "【云原生kubernetes】k8s中pod使用详解",
"browse": "1014",
"comment": "88",
"collection": "38"
},
{
"background": "f6d54e20b818800706cd996544915d37.png",
"title": "YOLO家族系列模型的演变：从v1到v8（下）",
"browse": "2242",
"comment": "5",
"collection": "6"
},
{
"background": "2bff757304a34af9930a2590e58e1407.png",
"title": "什么样的故障让阿里云换了总裁？",
"browse": "1294",
"comment": "15",
"collection": "18"
},
{
"background": "2857a3cc85efea924a2afc34a55b00ce.png",
"title": "【Linux】理解文件系统——软硬链接",
"browse": "622",
"comment": "60",
"collection": "56"
}
]
\ No newline at end of file
app/static/css/blog_antispider.css 0 → 100644
浏览文件 @ 8b5f6e2c
.browse1::after{content:'5950';font-size:14px}.comment1::after{content:'49';font-size:14px}.collection1::after{content:'206';font-size:14px}.browse2::after{content:'2463';font-size:14px}.comment2::after{content:'8';font-size:14px}.collection2::after{content:'23';font-size:14px}.browse3::after{content:'1493';font-size:14px}.comment3::after{content:'28';font-size:14px}.collection3::after{content:'38';font-size:14px}.browse4::after{content:'2195';font-size:14px}.comment4::after{content:'5';font-size:14px}.collection4::after{content:'20';font-size:14px}.browse5::after{content:'1010';font-size:14px}.comment5::after{content:'115';font-size:14px}.collection5::after{content:'67';font-size:14px}.browse6::after{content:'262';font-size:14px}.comment6::after{content:'86';font-size:14px}.collection6::after{content:'40';font-size:14px}.browse7::after{content:'159';font-size:14px}.comment7::after{content:'24';font-size:14px}.collection7::after{content:'19';font-size:14px}.browse8::after{content:'4260';font-size:14px}.comment8::after{content:'8';font-size:14px}.collection8::after{content:'120';font-size:14px}.browse9::after{content:'1014';font-size:14px}.comment9::after{content:'88';font-size:14px}.collection9::after{content:'38';font-size:14px}.browse10::after{content:'2242';font-size:14px}.comment10::after{content:'5';font-size:14px}.collection10::after{content:'6';font-size:14px}.browse11::after{content:'1294';font-size:14px}.comment11::after{content:'15';font-size:14px}.collection11::after{content:'18';font-size:14px}.browse12::after{content:'622';font-size:14px}.comment12::after{content:'60';font-size:14px}.collection12::after{content:'56';font-size:14px}
\ No newline at end of file
app/static/css/blog_antispider.min.css 0 → 100644
浏览文件 @ 8b5f6e2c
.browse1::after{content:'5950';font-size:14px}.comment1::after{content:'49';font-size:14px}.collection1::after{content:'206';font-size:14px}.browse2::after{content:'2463';font-size:14px}.comment2::after{content:'8';font-size:14px}.collection2::after{content:'23';font-size:14px}.browse3::after{content:'1493';font-size:14px}.comment3::after{content:'28';font-size:14px}.collection3::after{content:'38';font-size:14px}.browse4::after{content:'2195';font-size:14px}.comment4::after{content:'5';font-size:14px}.collection4::after{content:'20';font-size:14px}.browse5::after{content:'1010';font-size:14px}.comment5::after{content:'115';font-size:14px}.collection5::after{content:'67';font-size:14px}.browse6::after{content:'262';font-size:14px}.comment6::after{content:'86';font-size:14px}.collection6::after{content:'40';font-size:14px}.browse7::after{content:'159';font-size:14px}.comment7::after{content:'24';font-size:14px}.collection7::after{content:'19';font-size:14px}.browse8::after{content:'4260';font-size:14px}.comment8::after{content:'8';font-size:14px}.collection8::after{content:'120';font-size:14px}.browse9::after{content:'1014';font-size:14px}.comment9::after{content:'88';font-size:14px}.collection9::after{content:'38';font-size:14px}.browse10::after{content:'2242';font-size:14px}.comment10::after{content:'5';font-size:14px}.collection10::after{content:'6';font-size:14px}.browse11::after{content:'1294';font-size:14px}.comment11::after{content:'15';font-size:14px}.collection11::after{content:'18';font-size:14px}.browse12::after{content:'622';font-size:14px}.comment12::after{content:'60';font-size:14px}.collection12::after{content:'56';font-size:14px}
\ No newline at end of file
app/static/css/blog_base.css 0 → 100644
浏览文件 @ 8b5f6e2c
a {
text-decoration: none;
}
floor-rank-item .hostitem.floor {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.floor-rank-item .hostitem {
border-bottom: 1px solid #e9e9e9;
color: #222226;
padding: 24px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.floor-rank-item .hostitem>div.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.floor-rank-item .hostitem-item-left .number {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 20px;
font-weight: 400;
color: #999aaa;
}
.floor-rank-item .hostitem .hostitem-item-middle {
width: 100%;
margin-left: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.floor-rank-item .hostitem .hostitem-item-img-host {
display: block;
width: 107px;
height: 60px;
background-position: 50%;
background-size: cover;
margin-right: 16px;
border-radius: 4px;
}
.floor-rank-item .hostitem .hosetitem-title .title {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 16px;
font-weight: 600;
line-height: 22px;
color: #222226;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
cursor: pointer;
}
.floor-rank-item .hostitem .hosetitem-dec {
font-size: 14px;
color: #777888;
line-height: 20px;
margin-top: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.floor-rank-item .hostitem .hosetitem-dec .hosetitem-circle {
display: inline-block;
width: 3px;
height: 3px;
background: #555666;
border-radius: 50%;
margin-left: 8px;
margin-right: 8px;
vertical-align: middle;
}
app/templates/antispider/css.html 0 → 100644
浏览文件 @ 8b5f6e2c
{% extends "base.html" %}
{% block link %}
<link rel="stylesheet" href="{{url_for('static',filename='css/blog_base.css')}}">
<link rel="stylesheet" href="{{url_for('static',filename='css/blog_antispider.min.css')}}">
{% endblock link %}
{% block content %}
<div class="container">
<div class="blog-rank-right-content">
{% for item in data%}
<div class="floor-rank-item">
<div class="hostitem floor">
<div class="box">
<div class="hostitem-item-left"><span class="number">{{loop.index}}</span></div>
<div class="hostitem-item-middle">
{% if item.background != "" %}
<div class="hostitem-item-img-box"><a href="#" class="hostitem-item-img-host" style="background: url(&quot;{{url_for('static',filename='images/blog_imgs/')}}{{item.background}}&quot;) center center / cover;"></a>
</div>
{%else%}
{% endif %}
<div class="hostitem-item-content">
<div class="hosetitem-title"><a href="#" class="title">{{item.title}}</a></div>
<div class="hosetitem-dec"><span class="browse{{loop.index}}" style="margin-right: 4px;"></span>浏览
<span class="hosetitem-circle"></span> <span class="comment{{loop.index}}" style="margin-right: 4px;"></span>评论
<span class="hosetitem-circle"></span> <span class="collection{{loop.index}}" style="margin-right: 4px;"></span>收藏
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor%}
</div>
</div>
{% endblock %}
\ No newline at end of file
app/templates/common/nav.html
浏览文件 @ 8b5f6e2c
......@@ -24,10 +24,10 @@
<a class="nav-link" href="https://blog.csdn.net/hihell/category_9280209.html" target="_blank">《爬虫100例》</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.csdn.net/hihell/category_9280209.html" target="_blank">《Python爬虫120》</a>
<a class="nav-link" href="https://blog.csdn.net/hihell/category_11079529.html" target="_blank">《Python爬虫120》</a>
</li>
<li class="nav-item">
<a class="nav-link {{nav['csdn']}}" href="/csdn/blogstar">博客之星(临时)</a>
<a class="nav-link {{nav['csdn']}}" href="/csdn/blogstar">博客之星(100->10)</a>
</li>
<li class="nav-item">
<a class="nav-link {{nav['csdn_col']}}" href="/csdn/rank">专栏收益榜</a>
......
app/templates/index.html
浏览文件 @ 8b5f6e2c
......@@ -317,11 +317,12 @@
</div>
</div>
<div class="card-body">
<p class="card-text">本案例使用CSS偏移技术实现反爬，涉及两种案例，一种采用定位实现，一种采用伪类实现</p>
<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">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或