【网站技术解读⑥】-- 验证码弹窗

www.python88.cn网站技术解读,本网站核心技术在验证码弹窗和资源查询，验证码弹窗可以按照上次讲的，前端布局动效方面复制粘贴我的前端代码即可，网站很多地方会弹出弹窗验证码

1、爬虫、数据挖掘、机器学习、深度学习、金融量化、MySQL、微信公众号教程这些点击会出现验证码

2、开始查询按钮点击次数超过3次会出现验证码

3、查询结果返回的网盘链接点击超过2次会出现验证码

4、点击每个教程下面的领取视频按钮会出现验证码

如果你的网站没有出现验证码弹窗，说明你的ip地址已经验证成功，在后端记录过了，这上面的很多技术，都涉及非常多的前端技术点，为了便于消化吸收，尽量说细致些，该系列教程学习在于学习一些思路，掌握大致思路逻辑，能大致知道我用到哪些知识即可，也不必抠很多细节逻辑，有时候我这边逻辑多了，自己也有点懵逼

1、页面加载向后端发送一个POST请求

是否弹出各类弹窗，主要根据后端返回的book_click_sign来判断（error/right）

// 教程
var img_num = 1;
$.post("/book_ip_sign/",{},function(data){
 var book_click_sign = data.book_click_sign;
 var find_ip_num = data.find_ip_num;
 var user_ip = data.user_ip;
 var img_num = data.img_num;
 console.log(user_ip);
 console.log(find_ip_num);
 console.log(book_click_sign);
 sessionStorage.setItem('book_click_sign', book_click_sign);
 sessionStorage.setItem('img_num', img_num);
});

2、后端代码我记录IP如何记录的

user_ip:获取用户ip

find_ip_num: 记录用户ip的表

ip_df : 利用pandas读取数据库，也可以用orm读取

current_num：用户点击开始查询的次数，如果小于3次则不出现弹窗二维码，超过3次则出现弹窗二维码

if user_ip not in ip_list: 如果ip没有在表里面，则保存一下，并返回context,如果ip在表里保存，则在根据current_num是否大于3判断book_click_sign返回error还是right

book_click_sign: book_click_sign为一个判断是否出现各类弹窗的标志error/right

def book_ip_sign(request):
  user_ip = request.META['REMOTE_ADDR']
  print("***********")
  print(user_ip)
  engine = get_local_engine()
  ip_df = pd.read_sql("find_ip_num", engine)
  ip_list = list(ip_df["ip"])
  if user_ip not in ip_list:
    print("新的用户IP")
   num = 0
    find_ip_num = FindIpNum()
    find_ip_num.num = num
    find_ip_num.ip = user_ip
    find_ip_num.time = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
    find_ip_num.save()
    context = {"user_ip": user_ip, "book_click_sign": "error","img_num": random.choice([1]),"find_ip_num":num}
    return JsonResponse(context, content_type="application/json", charset="utf-8")
  else:
    current_user = FindIpNum.objects.filter(ip=user_ip)
    current_num = current_user[0].num
    if current_num < 3:
      context = {"user_ip": user_ip, "book_click_sign": "error", "img_num": random.choice([1]),"find_ip_num":current_num}
      return JsonResponse(context, content_type="application/json", charset="utf-8")
    elif current_num >= 3:
      context = {"user_ip": user_ip, "book_click_sign": "right", "img_num": random.choice([1]),"find_ip_num":current_num}
      return JsonResponse(context, content_type="application/json", charset="utf-8")

3、爬虫、数据挖掘、机器学习、深度学习、金融量化、微信公众号教程这些点击会出现验证码

上面详细说了后端返回book_click_sign的详细思路，那么前端拿到这个信号后如何使用，则是本站的核心业务逻辑，弹出验证码的这个过程，html、css、js都在index.html中

对于后端返回的book_click_sign,我保存到了浏览器的sessionStorage中了，

sessionStorage.setItem('book_click_sign', book_click_sign);

取得时候则是通过sessionStorage.getItem来取

limit_index_list : 所有对应各个教程的索引，从0开始

索引号：1、爬虫   5、数据挖掘   6、机器学习7、深度学习    8、金融量化  11、MySQL    14、微信公众号开发

$(".book ul li").click：所有教程都绑定click事件

var index = $(this).index()：获取当前点击的教程的index索引

limit_index_list.indexOf(index)==1：判断当前点击的位置是不是1（爬虫），不过这种判断有点啰嗦，你可以直接用index来判断是否是1（爬虫）

window.open:如果是爬虫，并且book_click_sign是right，则打开爬虫网页,如果不是则将弹窗fadeIn()显示出来

后面5、6、7、8、11、14跟1类似，代码重复，只需要替换网址即可

$(".book ul li").click(function(){
 var index = $(this).index();
 var limit_index_list = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];
 if(limit_index_list.indexOf(index)==1){
   book_click_sign = sessionStorage.getItem("book_click_sign");
   console.log(book_click_sign);
   if(book_click_sign=="right"){
     window.open("http://www.python88.cn/book/spider/","_blank")
   }else{
     img_url = "/static/img/modal_img_" + 1 +".jpg";
     $(".bookDiv .qr_code").attr("src",img_url);
     $('.grayDiv,.bookDiv').stop().fadeIn();
   }
}}

python爬虫人工智能大数据公众号