CSS 偏移反爬+专栏数据排行榜

app/__init__.py

@@ -8,12 +8,13 @@ from flask_limiter import Limiter
 # from flask_limiter.util import get_remote_address, get_ipaddr
 
 # 导入过滤器
-from .filter_fun import datauri
+from .filter_fun import datauri,hide_middle
 
 app = Flask(__name__)
 
 app.config.from_object(BaseConfig)  # 启用配置
 app.jinja_env.filters['datauri'] = datauri
+app.jinja_env.filters['hide_middle'] = hide_middle
 app.secret_key = 'xiangpica'
 
 

app/antispider/index.py

 from flask import Blueprint, jsonify, request, redirect, url_for
 from flask import render_template
+import random
+import json
+
+from app import app
 
 antispider = Blueprint('antispider', __name__, url_prefix='/as')
 
@@ -32,3 +36,68 @@ def cookie_demo():
         return render_template("antispider/cookie_demo.html")
     else:
         return "没有权限", 403
+
+
+# CSS 偏移反爬实现
+@antispider.route('/deviation')
+def deviation():
+    # 假设原数字是 819
+    # 随机生成1~3位数字，该值表示替换几个数字
+    # 如果生成1，代表替换一个数字，然后在随机从三个索引位置取一个值，表示替换该值
+    # 例如随机索引 0，表示生成的数字要替换数字8，接下来生成一个数字，例如生成了 6
+    # 传递给前台 619，还有被替换的索引0位置的8
+    # 三个坐标正常生成，然后索引位置为8的数字进行CSS偏移替换。
+    json_data = None
+
+    with open(app.root_path+'/data/travel.json','r',encoding='utf-8') as f:
+        json_data = json.loads(f.read())
+
+    # 随机三位数和四位数，累计20个
+    num_list = list()
+    for i in range(20):
+        num_list.append(random.randint(100, 9999))
+
+    # 循环读取所有生成的数字
+    for ii,num in enumerate(num_list):
+        # 将数字转换为字符列表，便于进行切割
+        num_str = list(str(num))
+
+        # 随机获取替换几个数字，最大是数字长度，最小是1
+        replace_count = random.randint(1, len(num_str))
+        # 随机抽取要被替换的数字
+        wait_replace_num = random.sample(num_str, replace_count)
+
+        # 获取要被替换数字的索引位置
+        index_num = [num_str.index(wait_num) for wait_num in wait_replace_num]
+
+        # 随机生成数字，数量参考 replace_count
+        b = [random.choice(range(0, 9)) for _ in range(0, replace_count)]
+
+        # 生成新数字，然后替换前文生成的字符列表
+        for i, v in enumerate(index_num):
+            num_str[v] = b[i]
+
+        # 新数字已经生成 ，前台正常渲染即可
+        new_num = list(map(int, num_str))
+
+        """
+        <b style="width:48px;left:-48px;"><i style="width: 16px;">8</i><i style="width: 16px;">1</i><i style="width: 16px;">6</i></b>
+        <b style="width:16px;left:-16px">9</b>
+        """
+        # 原数字的对应关系
+        number_relation = list(zip(index_num, wait_replace_num))
+
+        # 获取数字长度，用于前台渲染DIV宽度
+        len_num = len(num_str)
+
+        json_data[ii]["new_num"] = new_num
+        json_data[ii]["len_num"] = len_num
+        json_data[ii]["number_relation"] = number_relation
+
+
+    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

app/apis/index.py

@@ -5,6 +5,7 @@ import random
 import unicodedata
 import os
 import io
+import json
 
 api = Blueprint('apis', __name__, url_prefix='/api')
 

app/csdn/index.py

@@ -102,3 +102,51 @@ def zong_star_list():
     """
 
     return render_template('csdn/blogstar_d.html', user=user, nav=nav)
+
+
+from datetime import date, timedelta
+
+
+@cs.route('/rank')
+def column():
+    yesterday = (date.today() + timedelta(days=-1)).strftime("%Y-%m-%d")
+
+    sql = text(f"""select * from (
+select zhuanlan_user,sum(price) as total,count(id) as ren from subscribe where subscribe_time like '{yesterday}%'
+GROUP BY zhuanlan_user
+ORDER BY total desc 
+limit 50
+) abc 
+LEFT JOIN zhuanlan z ON z.userName = abc.zhuanlan_user""")
+
+    result = db.engine.execute(sql)
+    data = result.fetchall()
+    nav['csdn'] = ''
+    nav['csdn_col'] = 'active'
+    return render_template('csdn/rank.html', data=data, nav=nav, yesterday=yesterday)
+
+
+@cs.route('/m_rank')
+def m_column():
+    yesterday = (date.today() + timedelta(days=-1)).strftime("%Y-%m")
+
+    sql = text(f"""select * from (
+select zhuanlan_user,sum(price) as total,count(id) as ren from subscribe where subscribe_time like '{yesterday}%'
+GROUP BY zhuanlan_user
+ORDER BY total desc 
+limit 50
+) abc 
+LEFT JOIN zhuanlan z ON z.userName = abc.zhuanlan_user""")
+
+    result = db.engine.execute(sql)
+    data = result.fetchall()
+
+    sql2 = text(f"""
+    select title,count(id) n from subscribe where subscribe_time like '{yesterday}%' GROUP BY title
+ORDER BY n desc limit 10 """)
+    result2 = db.engine.execute(sql2)
+    data2 = result2.fetchall()
+
+    nav['csdn'] = ''
+    nav['csdn_col'] = 'active'
+    return render_template('csdn/m_rank.html', data=data, nav=nav, yesterday=yesterday, hot_col=data2)

app/data/travel.json

+[{
+  "pic_alt": "江苏苏州2日1晚跟团游·深游拙政园&狮子林&虎丘『品世界文化遗产*江南园林』&『走进苏州博物馆』品读历史 行走在光影几何之间『跟随唐代诗人张继足迹』游寒山寺景区&逛『千年古街』平江路【纯玩无购物】",
+  "pic_src": "https://dimg04.c-ctrip.com/images/300w1f000001ghr3yEBA5_C_230_160_Q100.jpg",
+  "title": "江苏苏州2日1晚跟团游·深游拙政园&狮子林&虎丘『品世界文化遗产*江南园林』&『走进苏州博物馆』品读历史 行走在光影几何之间『跟随唐代诗人张继足迹』游寒山寺景区&逛『千年古街』平江路【纯玩无购物】"
+
+},
+{
+  "pic_alt": "浙江普陀山2日1晚跟团游·【祈福之旅·夜宿普陀岛上·多种住宿标准任选】海天佛国普陀山·祈福普济禅寺-法雨寺-佛顶山-紫竹林-33米高南海观音，经典朝圣，朝遍三大寺庙，带上您的虔诚之心，走起您的还愿之旅！",
+  "pic_src": "https://dimg04.c-ctrip.com/images/0302z1200094r7wo902BE_C_230_160_Q100.jpg",
+  "title": "浙江普陀山2日1晚跟团游·【祈福之旅·夜宿普陀岛上·多种住宿标准任选】海天佛国普陀山·祈福普济禅寺-法雨寺-佛顶山-紫竹林-33米高南海观音，经典朝圣，朝遍三大寺庙，带上您的虔诚之心，走起您的还愿之旅！"
+
+},
+{
+  "pic_alt": "上海迪士尼（Disney）3日2晚半自助游·精选酒店【住迪士尼旁 连住两晚 轻松不挪窝】接送无忧 免费班车【正规渠道 电子出票 畅行乐园】拒绝团队票/员工票『五星旅行社 安心选择』童趣乐园【7大园区+烟花秀】交通自选",
+  "pic_src": "https://dimg03.c-ctrip.com/images/100b0t000000irbtzA0FD_C_230_160_Q100.jpg",
+  "title": "上海迪士尼（Disney）3日2晚半自助游·精选酒店【住迪士尼旁 连住两晚 轻松不挪窝】接送无忧 免费班车【正规渠道 电子出票 畅行乐园】拒绝团队票/员工票『五星旅行社 安心选择』童趣乐园【7大园区+烟花秀】交通自选"
+
+},
+{
+  "pic_alt": "浙江普陀山2日1晚跟团游·【热卖·夜宿普陀岛上·多种住宿标准任选】海天佛国祈福游 求平安求健康求子求事业 登佛顶山看佛国全景 感受海风拂面 每天发班确保成团",
+  "pic_src": "https://dimg04.c-ctrip.com/images/300k12000000sht435367_C_230_160_Q100.png",
+  "title": "浙江普陀山2日1晚跟团游·【热卖·夜宿普陀岛上·多种住宿标准任选】海天佛国祈福游 求平安求健康求子求事业 登佛顶山看佛国全景 感受海风拂面 每天发班确保成团"
+
+},
+{
+  "pic_alt": "杭州+乌镇+西塘3日2晚跟团游·精品纯玩小团 1车到底 『宿乌镇品牌5钻+升杭州挂牌5星开元』赠200元双游船+汉服游园 门票价超600【经典5A3水乡 乌镇+南浔+西塘】享5星自助早&50元御茶宴 交通任选",
+  "pic_src": "https://dimg04.c-ctrip.com/images/300k0q000000gj411B3E4_C_230_160_Q100.jpg",
+  "title": "杭州+乌镇+西塘3日2晚跟团游·精品纯玩小团 1车到底 『宿乌镇品牌5钻+升杭州挂牌5星开元』赠200元双游船+汉服游园 门票价超600【经典5A3水乡 乌镇+南浔+西塘】享5星自助早&50元御茶宴 交通任选"
+
+},
+{
+  "pic_alt": "杭州+西塘+乌镇3日2晚跟团游·BOSS直播推荐+五星旅行社『游』5A三水乡『登』雷峰塔+全景西湖『吃』2顿正餐+高餐标50元『礼』除节假日赠西塘游船+汉服游园+提灯走桥『住』5钻酒店+五星自助早【多种交通方式任选】",
+  "pic_src": "https://dimg04.c-ctrip.com/images/0305y120009mwavby89A0_C_230_160_Q100.jpg",
+  "title": "杭州+西塘+乌镇3日2晚跟团游·BOSS直播推荐+五星旅行社『游』5A三水乡『登』雷峰塔+全景西湖『吃』2顿正餐+高餐标50元『礼』除节假日赠西塘游船+汉服游园+提灯走桥『住』5钻酒店+五星自助早【多种交通方式任选】"
+
+},
+{
+  "pic_alt": "南京2日1晚跟团游·【免费接送站·精致小团·赠南京攻略（土著精心编写）】 ，夜宿锦江之星 2天跟团 总统府+中山陵+夫子庙+雨花台+大报恩寺遗址公园+南京博物院",
+  "pic_src": "https://dimg04.c-ctrip.com/images/30090s000000i1c8u4B67_C_230_160_Q100.jpg",
+  "title": "南京2日1晚跟团游·【免费接送站·精致小团·赠南京攻略（土著精心编写）】 ，夜宿锦江之星 2天跟团 总统府+中山陵+夫子庙+雨花台+大报恩寺遗址公园+南京博物院"
+
+},
+{
+  "pic_alt": "安徽黄山+宏村3日2晚跟团游·FUN心去皖·20人小团·满2人立减100『1晚夜宿黄山山顶·看冬雪云海/雾凇冰挂+AB线宿市区商圈·自行吃喝玩乐/CD线宿宏村景区外酒店·亲近大自然』含景点门票+往返景交+免费接送站+1对1管家服务",
+  "pic_src": "https://dimg04.c-ctrip.com/images/300112000000ss9w496C6_C_230_160_Q100.jpg",
+  "title": "安徽黄山+宏村3日2晚跟团游·FUN心去皖·20人小团·满2人立减100『1晚夜宿黄山山顶·看冬雪云海/雾凇冰挂+AB线宿市区商圈·自行吃喝玩乐/CD线宿宏村景区外酒店·亲近大自然』含景点门票+往返景交+免费接送站+1对1管家服务"
+
+},
+{
+  "pic_alt": "苏州+周庄2日1晚跟团游·【纯玩无购物 园林&古镇】精选4钻品牌酒店 访原味水乡古镇周庄  私家园林代表 经典双园 拙政园·狮子林·寒山寺景区· 虎丘可自选",
+  "pic_src": "https://dimg03.c-ctrip.com/images/100213000000tlm18489A_C_230_160_Q100.jpg",
+  "title": "苏州+周庄2日1晚跟团游·【纯玩无购物 园林&古镇】精选4钻品牌酒店 访原味水乡古镇周庄  私家园林代表 经典双园 拙政园·狮子林·寒山寺景区· 虎丘可自选"
+
+},
+{
+  "pic_alt": "浙江普陀山4日3晚跟团游·【2人出行立减100】赠3早3正餐+含上行缆车【宿1晚普陀山岛上海边农家 纯玩 0购物】天天发班 33米南海观音露天佛像 登佛顶山俯瞰普陀山全景",
+  "pic_src": "https://dimg04.c-ctrip.com/images/300h0k000000bjb9t2507_C_230_160_Q100.jpg",
+  "title": "浙江普陀山4日3晚跟团游·【2人出行立减100】赠3早3正餐+含上行缆车【宿1晚普陀山岛上海边农家 纯玩 0购物】天天发班 33米南海观音露天佛像 登佛顶山俯瞰普陀山全景"
+
+},
+{
+  "pic_alt": "上海迪士尼（Disney）+苏州+杭州+乌镇5日4晚跟团游·梦幻乐园·私玩20人&提前2天免费退改 全程5钻+1晚乌镇 宿乌镇内/外可选【明星漫游·江南百景】配备车载消毒器 20%空座率『餐标50 龙井茶园宴&品茶赏茶园』火车游",
+  "pic_src": "https://dimg04.c-ctrip.com/images/0301s1200080o9vq7639C_C_230_160_Q100.jpg",
+  "title": "上海迪士尼（Disney）+苏州+杭州+乌镇5日4晚跟团游·梦幻乐园·私玩20人&提前2天免费退改 全程5钻+1晚乌镇 宿乌镇内/外可选【明星漫游·江南百景】配备车载消毒器 20%空座率『餐标50 龙井茶园宴&品茶赏茶园』火车游"
+
+},
+{
+  "pic_alt": "浙江普陀山+洛迦山+33米高南海观音4日3晚跟团游·【禅行普陀 祈福游】赠3早3正餐+含上行缆车+游海上卧佛洛迦山【宿1晚普陀山岛上海边客栈  可自行看日出日落  纯玩 0购物】登佛顶山 游慧济寺 法雨寺 俯瞰普陀山全景",
+  "pic_src": "https://dimg04.c-ctrip.com/images/03032120008oxjbyy95EF_C_230_160_Q100.jpg",
+  "title": "浙江普陀山+洛迦山+33米高南海观音4日3晚跟团游·【禅行普陀 祈福游】赠3早3正餐+含上行缆车+游海上卧佛洛迦山【宿1晚普陀山岛上海边客栈  可自行看日出日落  纯玩 0购物】登佛顶山 游慧济寺 法雨寺 俯瞰普陀山全景"
+
+},
+{
+  "pic_alt": "杭州+西塘+乌镇3日2晚跟团游·五星资质+20人小团+1车到底【2晚5钻酒店 享五星自助早】慢游杭城『二游西湖 5A双水乡』江南美食【含2早2正 高餐标50元】除节假日赠【西塘游船+汉服游园+提灯走桥】可选交通",
+  "pic_src": "https://dimg04.c-ctrip.com/images/0305e1200097sdtf99936_C_230_160_Q100.jpg",
+  "title": "杭州+西塘+乌镇3日2晚跟团游·五星资质+20人小团+1车到底【2晚5钻酒店 享五星自助早】慢游杭城『二游西湖 5A双水乡』江南美食【含2早2正 高餐标50元】除节假日赠【西塘游船+汉服游园+提灯走桥】可选交通"
+
+},
+{
+  "pic_alt": "杭州+乌镇+苏州+西塘4日3晚跟团游·【网红5A景区｜光影西栅&夜乌镇&西塘汉服】5A乌镇+5A西塘+5A拙政园+姑苏城外寒山寺 访山塘老街『乾隆御茶宴&西塘特色小吃』雷峰塔远眺西湖 大交通自选",
+  "pic_src": "https://dimg04.c-ctrip.com/images/03042120009k3gypw0BB7_C_230_160_Q100.jpg",
+  "title": "杭州+乌镇+苏州+西塘4日3晚跟团游·【网红5A景区｜光影西栅&夜乌镇&西塘汉服】5A乌镇+5A西塘+5A拙政园+姑苏城外寒山寺 访山塘老街『乾隆御茶宴&西塘特色小吃』雷峰塔远眺西湖 大交通自选"
+
+},
+{
+  "pic_alt": "南京2日1晚跟团游·【高铁&动车游·24小时免费接站】1天自由活动+1天跟团 『聆听六朝古都』总统府+中山陵+漫步夫子庙+『千年遗址』大报恩寺&宿快捷酒店·玩转金陵",
+  "pic_src": "https://dimg04.c-ctrip.com/images/300v0n000000ehva60F35_C_230_160_Q100.jpg",
+  "title": "南京2日1晚跟团游·【高铁&动车游·24小时免费接站】1天自由活动+1天跟团 『聆听六朝古都』总统府+中山陵+漫步夫子庙+『千年遗址』大报恩寺&宿快捷酒店·玩转金陵"
+
+},
+{
+  "pic_alt": "黄山+宏村4日3晚跟团游·【经典热卖·口碑优选】满2成人立减200元·20人小团『1晚夜宿1600米黄山山顶·观日出赏冬雪+2晚市区5钻·CBD商圈闹中取静·逛吃方便』目的地攻略榜排名前三景点·黄山+宏村&含门票+往返景交 ",
+  "pic_src": "https://dimg03.c-ctrip.com/images/10010p000000g1ipu47D7_C_230_160_Q100.jpg",
+  "title": "黄山+宏村4日3晚跟团游·【经典热卖·口碑优选】满2成人立减200元·20人小团『1晚夜宿1600米黄山山顶·观日出赏冬雪+2晚市区5钻·CBD商圈闹中取静·逛吃方便』目的地攻略榜排名前三景点·黄山+宏村&含门票+往返景交 "
+
+},
+{
+  "pic_alt": "苏州湾王焰温泉2日1晚私家团·东太湖一线湖景【温泉】&希尔顿旗下品牌酒店，【打卡】森林中的网红咖啡馆+【剁手】砂之船奥特莱斯奢牌云集+【5A景点】半小时可达同里古镇 | 可包车可自驾",
+  "pic_src": "https://dimg04.c-ctrip.com/images/030111200099j57ojD8E3_C_230_160_Q100.jpg",
+  "title": "苏州湾王焰温泉2日1晚私家团·东太湖一线湖景【温泉】&希尔顿旗下品牌酒店，【打卡】森林中的网红咖啡馆+【剁手】砂之船奥特莱斯奢牌云集+【5A景点】半小时可达同里古镇 | 可包车可自驾"
+
+},
+{
+  "pic_alt": "上海+苏州+杭州+乌镇5日4晚跟团游·私玩20人&提前2天免费退改 全程5钻+1晚乌镇 宿乌镇内/外可选【明星漫游·江南百景】配备车载消毒器 20%空座率『餐标50 龙井茶园宴&品茶赏茶园』火车游",
+  "pic_src": "https://dimg04.c-ctrip.com/images/0300m120008jvt11j585D_C_230_160_Q100.jpg",
+  "title": "上海+苏州+杭州+乌镇5日4晚跟团游·私玩20人&提前2天免费退改 全程5钻+1晚乌镇 宿乌镇内/外可选【明星漫游·江南百景】配备车载消毒器 20%空座率『餐标50 龙井茶园宴&品茶赏茶园』火车游"
+
+},
+{
+  "pic_alt": "普陀山3日2晚跟团游·【2人出行立减每单-100元】宿1晚岛上海边客栈+1晚宁波市区商务酒店【大小门票+往返船票+车费+住宿+景交+缆车】登佛顶山 俯瞰普陀山全景 许愿还愿  可自行观看佛国日出日落",
+  "pic_src": "https://dimg04.c-ctrip.com/images/030741200092i6a8b43FD_C_230_160_Q100.jpg",
+  "title": "普陀山3日2晚跟团游·【2人出行立减每单-100元】宿1晚岛上海边客栈+1晚宁波市区商务酒店【大小门票+往返船票+车费+住宿+景交+缆车】登佛顶山 俯瞰普陀山全景 许愿还愿  可自行观看佛国日出日落"
+
+},
+{
+  "pic_alt": "西塘+乌镇2日1晚跟团游·五星资质+精品小团 精华景区【5A三水乡+乌镇东栅+乌镇西栅+西塘古镇】江南美食【含1早1正 高餐标50元】除节假日赠【西塘游船+汉服游园+提灯走桥】品质酒店【可选4/5钻酒店】高铁自选",
+  "pic_src": "https://dimg04.c-ctrip.com/images/0301u1200097u7pth1502_C_230_160_Q100.jpg",
+  "title": "西塘+乌镇2日1晚跟团游·五星资质+精品小团 精华景区【5A三水乡+乌镇东栅+乌镇西栅+西塘古镇】江南美食【含1早1正 高餐标50元】除节假日赠【西塘游船+汉服游园+提灯走桥】品质酒店【可选4/5钻酒店】高铁自选"
+
+}]
\ No newline at end of file

app/filter_fun.py

 from jinja2 import Template
+
+
 def datauri(uri):
     return f'data:image/png;base64,{uri}'
+
+
+def hide_middle(str, count=4, fix='*'):
+    """
+       #隐藏/脱敏 中间几位
+       str 字符串
+       count 隐藏位数
+       fix 替换符号
+    """
+    if not str: return ''
+    count = int(count)
+    str_len = len(str)
+    ret_str = ''
+    if str_len == 1:
+        return str
+    elif str_len == 2:
+        ret_str = str[0] + '*'
+    elif count == 1:
+        mid_pos = int(str_len / 2)
+        ret_str = str[:mid_pos] + fix + str[mid_pos + 1:]
+    else:
+        if str_len - 2 > count:
+            if count % 2 == 0:
+                if str_len % 2 == 0:
+                    ret_str = str[:int(str_len / 2 - count / 2)] + " "+ fix+" " + str[int(str_len / 2 + count / 2):]
+                else:
+                    ret_str = str[:int((str_len + 1) / 2 - count / 2)] +  " "+ fix+" " + str[int((
+                                                                                                           str_len + 1) / 2 + count / 2):]
+            else:
+                if str_len % 2 == 0:
+                    ret_str = str[:int(str_len / 2 - (count - 1) / 2)] + " "+ fix+" " + str[int(str_len / 2 + (
+                                count + 1) / 2):]
+                else:
+                    ret_str = str[:int((str_len + 1) / 2 - (count + 1) / 2)] + " "+ fix+" " + str[
+                                                                                             int((str_len + 1) / 2 + (
+                                                                                                         count - 1) / 2):]
+        else:
+            ret_str = str[0] + " "+ fix+" "  + str[-1]
+
+    return ret_str

app/hw/index.py

@@ -13,13 +13,14 @@ nav['hw'] = 'active'
 
 
 @hw.route('/rank')
-def new_star_list():
+def hua_wei():
     sql = text("""select * from (
 select ydcomm_blog_author,blogs_author_info,count(id) as s from huawei 
 where blogs_create_time like "2023/01%"
 GROUP BY blogs_author_info
 ) b 
-ORDER BY b.s desc""")
+ORDER BY b.s desc
+limit 31""")
 
     result = db.engine.execute(sql)
     data = result.fetchall()

app/model.py

@@ -60,6 +60,8 @@ class Csdn(db.Model, EntityBase):
     ip = db.Column(db.String(255))
 
     url = db.Column(db.String(255))
+    is_jinji =  db.Column(db.Integer)
+    is_new = db.Column(db.Integer)
 
 
 class HuaWei(db.Model, EntityBase):

app/templates/antispider/deviation.html

+{% extends "base.html" %}
+{% block style %}
+<style>
+.prc_wp b{
+    position: absolute;
+    letter-spacing: 0;
+    word-spacing: 0;
+    display: inline-block;
+    top: 0;
+    background: #fff;
+    height: 30px;
+    line-height: 30px;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: baseline;
+    font-weight: normal;
+     font-style: normal;
+}
+.prc_wp b i{
+   font-style: normal;
+   font-weight: normal;
+   text-align: center;
+   display: inline-block;
+   overflow: hidden;
+   vertical-align: baseline;
+}
+
+
+.sale_list_box{
+    height: auto;
+    overflow: hidden;
+    zoom: 1;
+}
+
+.sale_list_mod {
+    float: left;
+    width: 224px;
+    margin: 18px 0 0 15px;
+    cursor: pointer;
+}
+
+.sale_list_mod .pic {
+    width: 224px;
+    height: 160px;
+    overflow: hidden;
+}
+.sale_list_mod .pic img {
+    width: 230px;
+    height: 160px;
+}
+.sale_list_mod .item_box {
+    border: 1px solid #e0e0e0;
+    padding: 10px;
+    border-top: none;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+}
+.sale_list_mod .item_box .tit {
+    font-size: 16px;
+    line-height: 24px;
+    height: 48px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+.sale_list_mod .item_box .tag_box {
+    height: 22px;
+    margin-top: 4px;
+    overflow: hidden;
+}
+.sale_list_mod .item_box .price_box {
+    height: 26px;
+}
+.sale_list_mod .item_box .price_box .h_price {
+    color: #ff5302;
+    font-size: 24px;
+    font-weight: 500;
+
+    letter-spacing: 0;
+    word-spacing: 0;
+    vertical-align: baseline;
+}
+.sale_list_mod .item_box .price_box .txt {
+    font-size: 12px;
+    color: #999;
+
+}
+
+.prc_wp{
+    margin-left: 4px;
+    padding-top: 2px;
+    height: 26px;display:inline-block;
+}
+
+
+
+
+</style>
+
+{% endblock style %}
+{% block content %}
+
+
+<div class="container">
+    <div class="sale_list_box">
+        {%for data in json_data %}
+        <div class="sale_list_mod">
+            <div class="pic"><img
+                    alt="{{data.pic_alt}}"
+                    src="{{data.pic_src}}"></div>
+            <div class="item_box"><h4 class="tit">{{data.title}}</h4>
+                <div class="tag_box"></div>
+                <div class="price_box"><span class="h_price"><dfn>¥</dfn><span class="prc_wp"
+                                                                               style="width:{{data.len_num*16}}px;height: 26px;display:inline-block;">
+                  <em style="position:relative;">
+                     <b style="width:{{data.len_num*16}}px;">{%for num in data.new_num%}<i
+                             style="width: 16px;">{{num}}</i>{%endfor%}</b>
+                    {%for i in data.number_relation%}<b style="width:16px;left:{{i[0]*16}}px">{{i[1]}}</b>{%endfor%}
+
+
+                  </em>
+
+   </span></span><span class="txt">起/份</span></div>
+            </div>
+        </div>
+        {%endfor%}
+
+    </div>
+
+
+</div>
+{% endblock %}
\ No newline at end of file

app/templates/antispider/deviation1.html

+{% extends "base.html" %}
+{% block style %}
+<style>
+.prc_wp b{
+    position: absolute;
+    letter-spacing: 0;
+    word-spacing: 0;
+    display: inline-block;
+    top: 0;
+    background: #fff;
+    height: 30px;
+    line-height: 30px;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: baseline;
+    font-weight: normal;
+     font-style: normal;
+}
+.prc_wp b i{
+   font-style: normal;
+   font-weight: normal;
+   text-align: center;
+   display: inline-block;
+   overflow: hidden;
+   vertical-align: baseline;
+}
+
+
+
+
+</style>
+
+{% endblock style %}
+{% block content %}
+
+<div class="container">
+   <span class="prc_wp" style="width:64px;height: 26px;display:inline-block;">
+      <em class="rel" style="position:relative;padding-left: 1px;"><b style="width:64px;left:-64px"><i title="1033"
+                                                                                                       style="width: 16px;">1</i><i
+              title="1033" style="width: 16px;">0</i><i title="1033" style="width: 16px;">7</i><i title="1033"
+                                                                                                  style="width: 16px;">6</i></b><b
+              title="1033" style="width: 16px;left:-16px">3</b><b title="1033"
+                                                                  style="width: 16px;left:-32px">3</b></em></span>
+
+</div>
+
+
+{% endblock %}
\ No newline at end of file

app/templates/common/nav.html

@@ -28,6 +28,9 @@
                 </li>
                 <li class="nav-item">
                     <a class="nav-link {{nav['csdn']}}" href="/csdn/blogstar">博客之星(临时)</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link {{nav['csdn_col']}}" href="/csdn/rank">专栏收益榜</a>
                 </li>
                  <li class="nav-item">
                     <a class="nav-link {{nav['hw']}}" href="/hw/rank">华为月更榜</a>

app/templates/csdn/blogstar.html

@@ -27,7 +27,7 @@
 
                 </p>
                 <p class="d-block d-sm-none text-center"><img width="30%"
-                                                              src="{{url_for('static',filename='images/qrcode.png')}}"
+                                                              src="{{url_for('static',filename='images/vx1.png')}}"
                                                               alt="">
                     <br><strong>【2023年博客之星预备群】 | 下一届继续战 </strong></p>
             </div>
@@ -75,8 +75,8 @@
 
 
             <td>{{loop.index}}</td>
-            <td>
-                {% if loop.index<=bg_green %}
+            <td>  {% if loop.index<=bg_green %}
+                {% if u.is_jinji == 1 %} {{🔥}} {% endif %}
                 <a href="{{u.url}}" target="_blank" style="color:white;">{{u.nickname}}</a>
                 {% else %}
 
@@ -128,7 +128,7 @@
             <p><a href="https://bbs.csdn.net/topics/611387187" target="_blank" class="btn btn-primary btn-block"
                   data-bs-toggle="tooltip" title="快点去，快点去！">为【橡皮擦】去打个5分</a></p>
             <p class="d-none d-sm-block text-center"><img width="40%"
-                                                          src="{{url_for('static',filename='images/qrcode.png')}}"
+                                                          src="{{url_for('static',filename='images/vx1.png')}}"
                                                           alt="">
                 <br><strong>【2023年博客之星预备群】 </strong><br>
                 <strong>下一届继续战 </strong></p>

app/templates/csdn/m_rank.html

+{% extends "base.html" %}
+{% block content %}
+
+<div class="container">
+
+    <table class="table table-hover table-bordered table-responsive table-striped">
+        <caption class="caption-top text-center">
+            <div class="alert alert-warning">
+                <p class="m-0">
+                    <strong>CSDN 专栏收益榜单</strong> 👉 民间统计，数据仅供参考 👈</p>
+
+                <p class="m-1"><small>创作内容可参考热销专栏，可认为是当下比较火的<kbd>写作点</kbd></small></a></p>
+                <p class="m-1"><small class="text-success">本统计未排除会员订购 | 且一人订购同一作者多个专栏，仅统计最后一次订阅</small></a></p>
+                <p class="text-danger mt-2"> 展示日期：{{yesterday}} </p>
+                <p class="d-block d-sm-none text-center"><img width="30%"
+                                                              src="{{url_for('static',filename='images/vx1.png')}}"
+                                                              alt="">
+                    <br><strong>【收益总榜|指定用户详单数据】 | 群里等你 </strong></p>
+            </div>
+            <div class="btn-group btn-group-sm">
+                <a class="btn btn-primary " href="/csdn/rank">昨日收益榜单</a>
+                <a class="btn btn-primary active" href="/csdn/m_rank">本月收益榜单</a>
+            </div>
+        </caption>
+        <thead>
+        <tr>
+            <th>排名</th>
+            <th>昵称</th>
+            <th>本月订阅人数</th>
+            <th>本月预估总收益</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for item in data %}
+        {% if item.userName in ['hihell']%}
+        {%else%}
+        <tr>
+            <td>{{loop.index}}</td>
+            <td>{{item.nickName | hide_middle}}</td>
+            <td>{{item.ren}}</td>
+            <td>{{item.total}}</td>
+        </tr>
+        {%endif%}
+        {%endfor%}
+        </tbody>
+    </table>
+    <div class="alert alert-danger">
+        <strong>民间统计数据</strong> 如有疑问，请入群开麦对线 | 数据仅展现 TOP 50 | 如不希望被展示，请联系橡皮擦（微：moshanba）进行删除
+    </div>
+</div>
+<div class="card text-center d-none d-sm-block" style="position:fixed;top: 20px;right: 0px;">
+    <div class="card-header ">CSDN 专栏收益榜单</div>
+    <div class="card-body">
+        <div class="alert alert-success">
+            <p><strong>数据仅依据订阅专栏时的售价统计</strong></p>
+            <p class="d-none d-sm-block text-center"><img width="50%"
+                                                          src="{{url_for('static',filename='images/vx1.png')}}"
+                                                          alt="">
+                <br><br><strong>【更多数据，这里来 >>>】 </strong></p>
+            <p>
+            <table class="table table-striped table-bordered" style="font-size:9px;">
+                <caption align="top">本月热销专栏</caption>
+                <tr>
+                    <th>专栏名</th>
+                    <th>本月销售人次</th>
+                </tr>
+                {% for i in hot_col %}
+                <tr>
+                    <td>{{i.title}}</td>
+                    <td>{{i.n}}</td>
+                </tr>
+                {% endfor %}
+            </table>
+            </p>
+        </div>
+    </div>
+
+</div>
+{% endblock %}

app/templates/csdn/newstar.html

@@ -47,7 +47,9 @@
             <tr>
                 {% endif %}
                 <td>{{loop.index}}</td>
-                <td> {% if loop.index<=bg_green %}
+                <td>
+                    {% if u.is_jinji == 1 %} {{🔥}} {% endif %}
+                    {% if loop.index<=bg_green %}
                     <a href="{{u.url}}" target="_blank" style="color:white;">{{u.nickname}}</a>
                     {% else %}
                     <a href="{{u.url}}" target="_blank" style="color:black;">{{u.nickname}}</a>

app/templates/csdn/rank.html

+{% extends "base.html" %}
+{% block content %}
+
+<div class="container">
+
+    <table class="table table-hover table-bordered table-responsive table-striped">
+        <caption class="caption-top text-center">
+            <div class="alert alert-warning">
+                <p class="m-0">
+                    <strong>CSDN 专栏收益榜单</strong> 👉 民间统计，数据仅供参考 👈</p>
+
+                <p class="m-1"><small>创作内容可参考热销专栏，可认为是当下比较火的<kbd>写作点</kbd></small></a></p>
+                <p class="m-1"><small class="text-success">本统计未排除会员订购 | 且一人订购同一作者多个专栏，仅统计最后一次订阅</small></a></p>
+                <p class="text-danger mt-2"> 展示日期：{{yesterday}} </p>
+                <p class="d-block d-sm-none text-center"><img width="30%"
+                                                              src="{{url_for('static',filename='images/vx1.png')}}"
+                                                              alt="">
+                    <br><strong>【收益总榜|指定用户详单数据】 | 群里等你 </strong></p>
+            </div>
+            <div class="btn-group btn-group-sm">
+                <a class="btn btn-primary active" href="/csdn/rank">昨日收益榜单</a>
+                <a class="btn btn-primary " href="/csdn/m_rank">本月收益榜单</a>
+            </div>
+
+        </caption>
+        <thead>
+        <tr>
+            <th>排名</th>
+            <th>昵称</th>
+            <th>昨日订阅人数</th>
+            <th>昨日预估总收益</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for item in data %}
+        {% if item.userName in ['hihell']%}
+        {%else%}
+        <tr>
+            <td>{{loop.index}}</td>
+            <td>{{item.nickName | hide_middle}}</td>
+            <td>{{item.ren}}</td>
+            <td>{{item.total}}</td>
+        </tr>
+        {%endif%}
+        {%endfor%}
+        </tbody>
+    </table>
+    <div class="alert alert-danger">
+        <strong>民间统计数据</strong> 如有疑问，请入群开麦对线 | 数据仅展现 TOP 50 | 如不希望被展示，请联系橡皮擦（微：moshanba）进行删除
+    </div>
+</div>
+<div class="card text-center d-none d-sm-block" style="position:fixed;top: 20px;right: 0px;">
+    <div class="card-header ">CSDN 专栏收益榜单</div>
+    <div class="card-body">
+        <div class="alert alert-success">
+            <p><strong>数据仅依据订阅专栏时的售价统计</strong></p>
+
+            <p class="d-none d-sm-block text-center"><img width="40%"
+                                                          src="{{url_for('static',filename='images/vx1.png')}}"
+                                                          alt="">
+                <br><br><strong>【更多数据，这里来 >>>】 </strong></p>
+        </div>
+    </div>
+
+</div>
+
+
+{% endblock %}

app/templates/hw/rank.html

@@ -66,7 +66,7 @@ padding:3px;}
         <tbody>
         {% for u in data %}
         <td>{{loop.index}}</td>
-        <td>{{u[0]}}</td>
+        <td>{{u[0]|hide_middle}}</td>
         <td>{{u[2]}}</td>
         </tr>
         {%endfor%}

app/templates/index.html

@@ -7,7 +7,7 @@
 <div class="container pt-5">
     <h3 class="text-success">普通爬虫</h3>
     <hr>
-    <div class="row align-items-stretch">
+    <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">
@@ -79,9 +79,7 @@
             <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 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">本案例涉及的数据采用异步AJAX返回，编写爬虫时需要注意抓取接口相关信息。</p>
@@ -100,7 +98,7 @@
         </div>
     </div>
 
-    <div class="row align-items-stretch">
+    <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">
@@ -174,7 +172,7 @@
 <div class="container pt-5">
     <h3 class="text-danger">PC端反爬</h3>
     <hr>
-    <div class="row align-items-stretch">
+    <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">
@@ -244,9 +242,7 @@
             <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>
@@ -264,7 +260,7 @@
             </div>
         </div>
     </div>
-    <div class="row align-items-stretch">
+    <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">
@@ -288,10 +284,11 @@
                 </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>
+                    <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>
@@ -311,6 +308,29 @@
                 </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>
+                    </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>
 
 </div>

app/templates/timeline.html

@@ -16,7 +16,24 @@
                 <span class="timeline-label">
                         <span class="label bg-success text-white p-1">正在更新中</span>
                     </span>
+                <div class="timeline-item">
+
+                    <div class="timeline-point timeline-point-success">
+                        <i class="fa fa-times"></i>
+                    </div>
+                    <div class="timeline-event">
+                        <div class="timeline-heading">
+                            <h4>爬虫训练场 V0.19.0 发布</h4>
+                        </div>
+                        <div class="timeline-body">
+                            <p>上线 CSS 偏移反爬案例</p>
 
+                        </div>
+                        <div class="timeline-footer">
+                            <p class="text-right">2023年01月12日</p>
+                        </div>
+                    </div>
+                </div>
                 <div class="timeline-item">
 
                     <div class="timeline-point timeline-point-success">