基本设置以及结果

功能描述

规划登录注册，以及submit提交按钮

将本地加载改为网页链接动态加载

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. {% extends 'base.html'%}
  4. {% block content %}
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>登录</title>
  8.     <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
  9. </head>
  10. <body>
  11. <h5>登录页面</h5>
  12. <div class="container">
  13.     <div class="row">
  14.         <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  15.             <form>  {# action不再定义，基于Ajax提交 #}
  16.                 <div>
  17.                     <label for="">用户名</label>
  18.                     <input type="text" id="user">  {# ID用于Ajax获取信息 #}
  19.                 </div>
  20.                 <div>
  21.                     <label for="">密码</label>
  22.                     <input type="password" id="pwd">
  23.                 </div>
  24.                 <input type="button" class="btn btn-default login_btn">  {# login_btn用于绑定事件 #}
  25.             </form>
  26.         </div>
  27.     </div>
  28. </div>
  29. </body>
  30. <% endblock%>
  31. </html>

实现效果

第一次新增

新增描述

预期实现页面居中显示

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录</title>
  6.     <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
  7. </head>
  8. <body>
  9. <h5>登录页面</h5>
  10. <div class="container">
  11.     <div class="row">
  12.         <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  13.             <form>  {# action不再定义，基于Ajax提交 #}
  14.                 <div>
  15.                     <label for="">用户名</label>
  16.                     <input type="text" id="user" class="form-control">  {# ID用于Ajax获取信息 #}
  17.                 </div>
  18.                 <div>
  19.                     <label for="">密码</label>
  20.                     <input type="password" id="pwd" class="form-control">
  21.                 </div>
  22.                 <input type="button" class="btn btn-default login_btn" value="submit">  {# login_btn用于绑定事件 #}
  23.             </form>
  24.         </div>
  25.     </div>
  26. </div>
  27. </body>
  28. </html>

第二次新增

设计功能： for与ID一致，可以在方框填入内容；设置submit提交按钮显示在右边

代码如下

代码

  1. <!DOCTYPE html>
  2. {% extends 'base.html' %}
  3. {% load static %}
  4. <html lang="en">
  5. {% block content %}
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <title>登录</title>
  9. </head>
  10.     <body>
  11.         <div class="container">
  12.     <div class="row">
  13.         <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  14.             <form>  {# action不再定义，基于Ajax提交 #}
  15.                 <div>
  16.                     <label for="user">用户名</label>
  17.                     <input type="text" id="user" class="form-control">  {# ID用于Ajax获取信息 #}
  18.                 </div>
  19.                 <div>
  20.                     <label for="pwd">密码</label>
  21.                     <input type="password" id="pwd" class="form-control">
  22.                 </div>
  23.                 <input type="button" class="btn btn-default login_btn pull-right" value="submit">  {# login_btn用于绑定事件 #}
  24.             </form>
  25.         </div>
  26.     </div>
  27. </div>
  28. </body>
  29. {% endblock %}
  30. </html>

第三次新增验证码

增加验证码区域，图片区域

代码

  1. <!DOCTYPE html>
  2. {% extends 'base.html' %}
  3. {% load static %}
  4. <html lang="en">
  5. {% block content %}
  6.     <head>
  7.         <meta charset="UTF-8">
  8.         <title>登录</title>
  9.     </head>
  10.     <body>
  11.     <h1>Welcome to Blog of Caesar Tylor</h1>
  12.     <div class="container">
  13.         <div class="row">
  14.             <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  15.                 <form>  {# action不再定义，基于Ajax提交 #}
  16.                     <div class="form-group">
  17.                         <label for="user">用户名</label>
  18.                         <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  19.                     </div>
  20.                     <div class="form-group">
  21.                         <label for="pwd">密码</label>
  22.                         <input type="password" id="pwd" class="form-control">
  23.                     </div>
  24.                     <div>
  25.                         <label for="pwd">验证码</label>
  26.                         <div class="row">
  27.                             <div class="col-md-6">
  28.                                 <input type="text" class="valid_code form-group">
  29.                             </div>
  30.                             <div class="col-md-6"></div>
  31.                         </div>
  32.                     </div>
  33.                     <input type="button" class="btn btn-default login_btn pull-right" value="submit">
  34.                     {# login_btn用于绑定事件 #}
  35.                 </form>
  36.             </div>
  37.         </div>
  38.     </div>
  39.     </body>
  40. {% endblock %}
  41. </html>

效果

第四次更改

静态生成验证码图片

代码

  1. <!DOCTYPE html>
  2. {% extends 'base.html' %}
  3. {% load static %}
  4. <html lang="en">
  5. {% block content %}
  6.     <head>
  7.         <meta charset="UTF-8">
  8.         <title>登录</title>
  9.     </head>
  10.     <body>
  11.     <h1>Welcome to Blog of Caesar Tylor</h1>
  12.     <div class="container">
  13.         <div class="row">
  14.             <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  15.                 <form>  {# action不再定义，基于Ajax提交 #}
  16.                     <div class="form-group">
  17.                         <label for="user">用户名</label>
  18.                         <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  19.                     </div>
  20.                     <div class="form-group">
  21.                         <label for="pwd">密码</label>
  22.                         <input type="password" id="pwd" class="form-control">
  23.                     </div>
  24.                     <div>
  25.                         <label for="pwd">验证码</label>
  26.                         <div class="row">
  27.                             <div class="col-md-6">
  28.                                 <input type="text" class="valid_code form-group">
  29.                             </div>
  30.                             <div class="col-md-6">
  31.                                 <img width="240" height="30" src="https://tenfei05.cfp.cn/creative/vcg/800/new/VCG41N1210205351.jpg">
  32.                             </div>
  33.                         </div>
  34.                     </div>
  35.                     <input type="button" class="pull-right btn btn-default login_btn " value="submit" >
  36.                     {# login_btn用于绑定事件 #}
  37.                 </form>
  38.             </div>
  39.         </div>
  40.     </div>
  41.     </body>
  42. {% endblock %}
  43. </html>

效果

第五次更改

逐步改进，直到动态加载验证码

import PIL

pillow 官方文档 [Pillow — Pillow (PIL Fork) 8.3.1 documentation]

好看的配色 (234,255,211)

  1. 1. 解决思路，前端页面使用本地连接获取图片；需要URL配置链接， 需要在view视图中负责生成相应的资源
  2. ### 版本1：静态生成一个本地主项目下的图片，主要需要新引入两个包
  3. from django.shortcuts import render, HttpResponse, redirect
  4.     def login(request):
  5.         return render(request, "blog/login.html")
  8.     def get_validCode_img(request):
  9.         with open("smooth.jpg", "rb") as f:
  10.             data = f.read()
  12.         return HttpResponse(data)
  13. ### 版本2：生成随机颜色[磁盘存储]
  14. def get_validCode_img(request):
  15.     # 第一种
  16.     # with open("smooth.jpg", "rb") as f:
  17.     #     data = f.read()
  18.     # 第二种方案
  19.     def get_random_color():
  20.         a = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
  21.         return a
  23.     img = Image.new("RGB", (240, 30), color=get_random_color())
  24.     with open("smooth.png", "wb") as f:
  25.         img.save(f, "png")
  26.     with open("smooth.png", "rb") as f:
  27.         data = f.read()
  30.     return HttpResponse(data)
  31. ### 版本3：将颜色存储在内存，并且从中读取
  32.     # 第三种方案
  33.     from io import BytesIO
  34.     def get_random_color():
  35.         a = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
  36.         return a
  38.     img = Image.new("RGB", (240,30), color=get_random_color())
  39.     f = BytesIO()
  40.     img.save(f,"png")
  41.     data=f.getvalue()
  44.     return HttpResponse(data)
  45. ### 版本4：生成可以验证码中的文字
  46. def get_validCode_img(request):
  49.     # 第三种方案
  50.     from io import BytesIO
  51.     from PIL import Image, ImageDraw, ImageFont
  52.     def get_random_color():
  53.         a = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
  54.         return a
  56.     img = Image.new("RGB", (240,30), color=get_random_color())
  57.     draw = ImageDraw.Draw(img)
  58.     kumo_font = ImageFont.truetype("static/font/kumo.ttf", 24)
  59.     draw.text((0,5), "python", get_random_color(), font=kumo_font)
  60.     # draw.line()
  61.     # draw.point()
  62.     f = BytesIO()
  63.     img.save(f,"png")
  64.     data=f.getvalue()
  67.     return HttpResponse(data)
  68. ### 版本6 ： 生成随机数字
  69. def get_validCode_img(request):
  72.     # 第三种方案
  73.     from io import BytesIO
  74.     from PIL import Image, ImageDraw, ImageFont
  75.     def get_random_color():
  76.         a = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
  77.         return a
  79.     img = Image.new("RGB", (240,30), color=get_random_color())
  80.     draw = ImageDraw.Draw(img)
  81.     kumo_font = ImageFont.truetype("static/font/FiraCode-Regular.ttf", size=24)
  82.     for i in range(5):
  83.         random_num = random.randint(0,9)
  84.         random_low_alpha = chr(random.randint(95, 122))  # ASCⅡ大小写字母范围
  85.         random_upper_alpha = chr(random.randint(65, 90))
  86.         random_char = random.choice([random_num,random_low_alpha,random_upper_alpha])
  87.         draw.text((i*50 + 20,5), str(random_char), get_random_color(), font=kumo_font) # 转换第二个参数的类型
  90.     f = BytesIO()
  91.     img.save(f,"png")
  92.     data=f.getvalue()
  95.     return HttpResponse(data)
  96. ### 版本7：增加噪点和噪线，增加机器识别难度
  97. def get_validCode_img(request):
  100.     from io import BytesIO
  101.     from PIL import Image, ImageDraw, ImageFont
  102.     def get_random_color():
  103.         a = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
  104.         return a
  106.     img = Image.new("RGB", (240,30), color=get_random_color())
  107.     draw = ImageDraw.Draw(img)
  108.     kumo_font = ImageFont.truetype("static/font/FiraCode-Regular.ttf", size=24)
  109.     for i in range(5):
  110.         random_num = random.randint(0,9)
  111.         random_low_alpha = chr(random.randint(95, 122))  # ASCⅡ大小写字母范围
  112.         random_upper_alpha = chr(random.randint(65, 90))
  113.         random_char = random.choice([random_num,random_low_alpha,random_upper_alpha])
  114.         draw.text((i*50 + 20,5), str(random_char), get_random_color(), font=kumo_font) # 转换第二个参数的类型
  117.     width = 250
  118.     height = 40
  119.     for i in range(10):
  120.         x1 = random.randint(0, width)
  121.         x2 = random.randint(0, width)
  122.         y1 = random.randint(0, height)
  123.         y2 = random.randint(0, height)
  124.         draw.line((x1, x2, y1, y2), fill=get_random_color())
  126.     for i in range(200):
  127.         draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
  128.         x = random.randint(0, width)
  129.         y = random.randint(0, height)
  130.         draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())
  132.     f = BytesIO()
  133.     img.save(f,"png")
  134.     data=f.getvalue()
  137.     return HttpResponse(data)

第六次设置点击自动刷新验证码

实现逻辑分析

  1. 1. 引入Jquery文件
  2. 2. 登录源码中绑定事件，实现点击自动刷新

关联配置信息

  1. ### H5中的配置，修改第32行代码，增加ID，末尾使用script标签加载Jquery
  2. <!DOCTYPE html>
  3. {% extends 'base.html' %}
  4. {% load static %}
  5. <html lang="en">
  6. {% block content %}
  7.     <head>
  8.         <meta charset="UTF-8">
  9.         <title>登录</title>
  10.     </head>
  11.     <body>
  12.     <h1>Welcome to Blog of Caesar Tylor</h1>
  13.     <div class="container">
  14.         <div class="row">
  15.             <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  16.                 <form>  {# action不再定义，基于Ajax提交 #}
  17.                     <div class="form-group">
  18.                         <label for="user">用户名</label>
  19.                         <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  20.                     </div>
  21.                     <div class="form-group">
  22.                         <label for="pwd">密码</label>
  23.                         <input type="password" id="pwd" class="form-control">
  24.                     </div>
  25.                     <div>
  26.                         <label for="pwd">验证码</label>
  27.                         <div class="row">
  28.                             <div class="col-md-6">
  29.                                 <input type="text" class="valid_code form-group">
  30.                             </div>
  31.                             <div class="col-md-6">
  32.                                 <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/" alt="">
  33.                             </div>
  34.                         </div>
  35.                     </div>
  36.                     <input type="button" class="pull-right btn btn-default login_btn " value="submit" >
  37.                     {# login_btn用于绑定事件 #}
  38.                 </form>
  39.             </div>
  40.         </div>
  41.     </div>
  42.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  43. {#    <script src="C:/Users/41999/Documents/projectmanagement/Test/Scripts/whereabouts/static/js/jquery-3.6.0.min.js"></script>#}
  44.     </body>
  45. {% endblock %}
  46. </html>
  47. ### browser调试代码
  48. $("#valid_code_img")[0]
  49. <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/" alt>
  50. $("#valid_code_img")[0].src+="?"
  51. "http://127.0.0.1:8001/get_validCode_img/?"
  52. $("#valid_code_img")[0].src+="??"
  53. "http://127.0.0.1:8001/get_validCode_img/???"
  54. $("#valid_code_img")[0].src+="??"
  55. "http://127.0.0.1:8001/get_validCode_img/?????"

网页调试过程

第七次 升级配置

保存原有配置

  1. <!DOCTYPE html>
  2. {% extends 'base.html' %}
  3. {% load static %}
  4. <html lang="en">
  5. {% block content %}
  6.     <head>
  7.         <meta charset="UTF-8">
  8.         <title>登录</title>
  9.     </head>
  10.     <body>
  11.     <h1>Welcome to Blog of Caesar Tylor</h1>
  12.     <div class="container">
  13.         <div class="row">
  14.             <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  15.                 <form>  {# action不再定义，基于Ajax提交 #}
  16.                     <div class="form-group">
  17.                         <label for="user">用户名</label>
  18.                         <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  19.                     </div>
  20.                     <div class="form-group">
  21.                         <label for="pwd">密码</label>
  22.                         <input type="password" id="pwd" class="form-control">
  23.                     </div>
  24.                     <div>
  25.                         <label for="pwd">验证码</label>
  26.                         <div class="row">
  27.                             <div class="col-md-6">
  28.                                 <input type="text" class="valid_code form-group">
  29.                             </div>
  30.                             <div class="col-md-6">
  31.                                 <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/" alt="">
  32.                             </div>
  33.                         </div>
  34.                     </div>
  35.                     <input type="button" class="pull-right btn btn-default login_btn " value="submit" >
  36.                     {# login_btn用于绑定事件 #}
  37.                 </form>
  38.             </div>
  39.         </div>
  40.     </div>
  41. {#    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>#}
  42.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  43.     <script>
  44.         // 验证码图片刷新
  45.         $("#valid_code_img").click(function(){
  46.           $("this")[0].src+="?"
  47.         })
  48.     </script>
  49.     </body>
  50. {% endblock %}
  51. </html>

升级后的配置

  1. <!DOCTYPE html>
  3. {% load static %}
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>登录</title>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9. </head>
  10. <body>
  11. <h1>Welcome to Blog of Caesar Tylor</h1>
  12. <div class="container">
  13.     <div class="row">
  14.         <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  15.             <form>  {# action不再定义，基于Ajax提交 #}
  16.                 <div class="form-group">
  17.                     <label for="user">用户名</label>
  18.                     <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  19.                 </div>
  20.                 <div class="form-group">
  21.                     <label for="pwd">密码</label>
  22.                     <input type="password" id="pwd" class="form-control">
  23.                 </div>
  24.                 <div>
  25.                     <label for="pwd">验证码</label>
  26.                     <div class="row">
  27.                         <div class="col-md-6">
  28.                             <input type="text" class="valid_code form-group">
  29.                         </div>
  30.                         <div class="col-md-6">
  31.                             <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/" alt="">
  32.                         </div>
  33.                     </div>
  34.                 </div>
  35.                 <input type="button" class="pull-right btn btn-default login_btn " value="submit" >
  36.                 {# login_btn用于绑定事件 #}
  37.             </form>
  38.         </div>
  39.     </div>
  40. </div>
  41. <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  42. <script>
  43.     $("#valid_code_img").click(function(){
  44.       $(this)[0].src+="?"
  45.     })
  46. </script>
  47. </body>
  48. </html>

二者区别

不再使用基文件和模板标签，直接使用资源引用中的静态文件模板标签，加载的内容减少了

第八次修改—-增加保存验证码的功能

后端支持代码

  1. from django.shortcuts import render, HttpResponse, redirect
  2. import PIL, random
  3. from django.http import JsonResponse
  4. from django.contrib import auth
  6. def login(request):
  7.     """
  8.     auth.login:在请求中保留用户id和后端。这样，用户就不必在每次请求时都重新验证。请注意，匿名会话期间的数据集在用户登录时保留。
  9.     auth.authenticate: 从client请求中提取数据，将数据与数据库进行匹配
  10.     response: 用一个字典作为message传递提示信息
  11.     """
  12.     if request.method=="POST":
  13.         response = {"user":None,"msg":None}
  14.         user = request.POST.get("user")
  15.         print(user)
  16.         pwd = request.POST.get("pwd")
  17.         valid_code_one = request.POST.get("valid_code")
  18.         valid_code = str(valid_code_one)
  20.         valid_code_str = request.session.get("valid_code_str")
  21.         # print(valid_code)  测试后端在提交前端显示之前保存的验证码
  22.         # print(valid_code_str) 测试前端POST请求提交时给出的验证码
  23.         if valid_code.upper() == valid_code_str.upper():
  24.             user=auth.authenticate(username=user,password=pwd)  # 将前端提交的密码与后端MySQL存储的用户名与密码匹配
  25.             if user:
  26.                 auth.login(request,user)  # 匹配成功后则将其注册request.user==当前登录对象,存储当前登录对象
  27.                 response["user"]=user.username
  28.             else:
  29.                 response["msg"]="username or password error!"
  30.         else:
  31.             response["msg"] = "valide code error!"
  32.         return JsonResponse(response)
  34.     return render(request, "blog/login.html")
  37. def get_validCode_img(request):
  40.     from io import BytesIO
  41.     from PIL import Image, ImageDraw, ImageFont
  42.     def get_random_color():
  43.         a = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
  44.         return a
  46.     img = Image.new("RGB", (240,30), color=get_random_color())
  47.     draw = ImageDraw.Draw(img)
  48.     kumo_font = ImageFont.truetype("static/font/FiraCode-Regular.ttf", size=24)
  49.     valid_code_str = ""
  50.     for i in range(5):
  51.         random_num = random.randint(0,9)
  52.         random_low_alpha = chr(random.randint(95, 122))  # ASCⅡ大小写字母范围
  53.         random_upper_alpha = chr(random.randint(65, 90))
  54.         random_char = random.choice([random_num,random_low_alpha,random_upper_alpha])
  55.         draw.text((i*50 + 20,5), str(random_char), get_random_color(), font=kumo_font) # 转换第二个参数的类型
  56.         # 保存验证码字符串
  57.         valid_code_str+=str(random_char)
  60.     width = 250
  61.     height = 40
  62.     for i in range(10):
  63.         x1 = random.randint(0, width)
  64.         x2 = random.randint(0, width)
  65.         y1 = random.randint(0, height)
  66.         y2 = random.randint(0, height)
  67.         draw.line((x1, x2, y1, y2), fill=get_random_color())
  69.     for i in range(200):
  70.         draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
  71.         x = random.randint(0, width)
  72.         y = random.randint(0, height)
  73.         draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())
  74.     # 打印保存的验证码
  75.     # print("valid_code_str", valid_code_str)
  77.     request.session["valid_code_str"]=valid_code_str
  79.     """
  80.     1. 生成随机字符串
  81.     2. 设置一个cookie{sessionid:随机字符串}
  82.     3. django——session存储session_key---随机字符串,session_data---验证码
  83.     """
  84.     f = BytesIO()
  85.     img.save(f,"png")
  86.     data=f.getvalue()
  87.     # print(type(data))
  90.     return HttpResponse(data)
  92. def index(request):
  93.     return render(request, "blog/index.html")

保存环境

  1. from django.shortcuts import render, HttpResponse, redirect
  2. import PIL, random
  4. def login(request):
  5.     return render(request, "blog/login.html")
  8. def get_validCode_img(request):
  11.     from io import BytesIO
  12.     from PIL import Image, ImageDraw, ImageFont
  13.     def get_random_color():
  14.         a = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
  15.         return a
  17.     img = Image.new("RGB", (240,30), color=get_random_color())
  18.     draw = ImageDraw.Draw(img)
  19.     kumo_font = ImageFont.truetype("static/font/FiraCode-Regular.ttf", size=24)
  20.     valid_code_str = ""
  21.     for i in range(5):
  22.         random_num = random.randint(0,9)
  23.         random_low_alpha = chr(random.randint(95, 122))  # ASCⅡ大小写字母范围
  24.         random_upper_alpha = chr(random.randint(65, 90))
  25.         random_char = random.choice([random_num,random_low_alpha,random_upper_alpha])
  26.         draw.text((i*50 + 20,5), str(random_char), get_random_color(), font=kumo_font) # 转换第二个参数的类型
  29.     width = 250
  30.     height = 40
  31.     for i in range(10):
  32.         x1 = random.randint(0, width)
  33.         x2 = random.randint(0, width)
  34.         y1 = random.randint(0, height)
  35.         y2 = random.randint(0, height)
  36.         draw.line((x1, x2, y1, y2), fill=get_random_color())
  38.     for i in range(200):
  39.         draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
  40.         x = random.randint(0, width)
  41.         y = random.randint(0, height)
  42.         draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())
  44.     f = BytesIO()
  45.     img.save(f,"png")
  46.     data=f.getvalue()
  49.     return HttpResponse(data)

修改后的代码

  1. <!DOCTYPE html>
  3. {% load static %}
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>登录</title>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9. </head>
  10. <body>
  11. <h1>Welcome to Blog of Caesar Tylor</h1>
  12. <div class="container">
  13.     <div class="row">
  14.         <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  15.             <form>  {# action不再定义，基于Ajax提交 #}
  16.                 {% csrf_token %}  {# 增加CSRF防护令牌 #}
  17.                 <div class="form-group">
  18.                     <label for="user">用户名</label>
  19.                     <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  20.                 </div>
  21.                 <div class="form-group">
  22.                     <label for="pwd">密码</label>
  23.                     <input type="password" id="pwd" class="form-control">
  24.                 </div>
  25.                 <div class="form-group">
  26.                     {# for写错了 #}
  27.                     <label for="pwd">验证码</label>
  28.                     <div class="row">
  29.                         <div class="col-md-6">
  30.                             {# ID和class写到一起了 #}
  31.                             <input type="text" class="form-control" id="valid_code">
  32.                         </div>
  33.                         <div class="col-md-6">
  34.                             <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/" alt="">
  35.                         </div>
  36.                     </div>
  37.                 </div>
  38.                 <input type="button" class="btn btn-default login_btn pull-right" value="submit" >
  39.                 {# login_btn用于绑定事件 #}
  40.             </form>
  41.         </div>
  42.     </div>
  43. </div>
  44. <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  45. <script>
  46.     // 点击刷新验证码
  47.     $("#valid_code_img").click(function(){
  48.       $(this)[0].src+="?"
  49.     });
  50.     // 登录验证
  51.     $(".login_btn").click(function(){
  52.         $.ajax({
  53.             url:"",
  54.             type:"post",
  55.             data:{
  56.                 user:$("#user").val(),
  57.                 pwd:$("#pwd").val(),
  58.                 valid_code:$("#valid_code").val(),
  59.                 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
  60.             },
  61.             success:function(data){
  62.                 console.log(data);
  63.             }
  64.         })
  65.     })
  66. </script>
  67. </body>
  68. </html>

修改过程

  1. 1. 构建Ajax事件，传递参数
  2.     1. 设计传递参数的内容，分别为用户，密码，验证码，csrf_token令牌
  3.     2. csrf_token令牌由模板标签产生，在浏览器前台源码中获得H5名称
  4. 2. 构建登录页面的重定向（在login.h5页面内）
  5.     1. 接收Ajax提交的数据，首先校验验证码[但不能将验证码改为全局变量直接校验，易在并发过程中被存储的其他用户的验证码覆盖]
  6.     2. 使用cookie和session会话技术
  7.     3. from django.http import JsonResponse，自动构建序列化，Ajax直接拿数据，无需反序列化
  8.     4. 逐次校验数据
  9. 3. 测试并且提交用户
  10.     1. 使用Ajax原地跳转并且提示错误信息
  11.     2. y

前台测试—验证码错误和验证码为空状态下的错误信息提示

MySQL中会话记录的查看

数据库表中存储的用户信息

测试用户信息提交

Ajax部分代码备份

  1. // 登录验证
  2. $(".login_btn").click(function(){
  3.     $.ajax({
  4.         url:"",
  5.         type:"post",
  6.         data:{
  7.             user:$("#user").val(),
  8.             pwd:$("#pwd").val(),
  9.             valid_code:$("#valid_code").val(),
  10.             csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
  11.         },
  12.         success:function(data){
  13.             console.log(data);
  15.             if(data.user){
  16.                 location.href="/index/"
  17.             }
  18.             else{
  19.                 $(".error").text(data.msg).css({"color":"red","margin-left":"10px"});
  20.             }
  21.         }
  22.     })
  23. })

第九次修改—验证码代码优化

增加提示语自动消失的功能

  2. <script>
  3.     // 点击刷新验证码
  4. $("#valid_code_img").click(function(){
  5.   $(this)[0].src+="?"
  6. });
  7. // 登录验证
  8. $(".login_btn").click(function(){
  9.     $.ajax({
  10.         url:"",
  11.         type:"post",
  12.         data:{
  13.             user:$("#user").val(),
  14.             pwd:$("#pwd").val(),
  15.             valid_code:$("#valid_code").val(),
  16.             csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
  17.         },
  18.         success:function(data){
  19.             // 将会在控制台打印log信息，据此可以判断获取信息是否全面准确
  20.             console.log(data);
  22.             if(data.user){
  23.                 location.href="/index/";
  24.                 {#window.location="index.html";#}
  25.             }
  26.             // 使得验证码错误的提示信息在一秒钟之后消失
  27.             else{
  28.                 $(".error").text(data.msg).css({"color":"red","margin-left":"10px"});
  29.                 setTimeout(function(){
  30.                   $(".error").text("")
  31.                 },1000)
  32.             }
  33.         }
  34.     })
  35. })
  36. </script>

极验滑动验证码的嵌入

  1. 1. 包准备
  2. social-auth-app-django==5.0.0
  3. social-auth-core==4.1.0

功能解耦

在blog下新建utlis文件夹，额外创建__init__.py文件夹

将随机数生成和验证码生成的功能独立解耦

view.py文件

  1. def get_validCode_img(request):
  2.     from blog.utils.validCode import get_valide_code_img
  3.     data = get_valide_code_img(request)
  5.     # print(type(data))
  8.     return HttpResponse(data)

前端login.html文件

  1. <!DOCTYPE html>
  3. {% load static %}
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>登录</title>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <link rel="shortcut icon" href="{% static 'static/blog/img/favicon.ico' %}" type="image/x-icon">
  10. </head>
  11. <body>
  12. <h3>Welcome to Blog of Caesar Tylor</h3>
  13. <div class="container">
  14.     <div class="row">
  15.         <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  16.             <form>  {# action不再定义，基于Ajax提交 #}
  17.                 {% csrf_token %}  {# 增加CSRF防护令牌 #}
  18.                 <div class="form-group">
  19.                     <label for="user">用户名</label>
  20.                     <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  21.                 </div>
  22.                 <div class="form-group">
  23.                     <label for="pwd">密码</label>
  24.                     <input type="password" id="pwd" class="form-control">
  25.                 </div>
  26.                 <div class="form-group">
  27.                     <label for="pwd">验证码</label>
  28.                     <div class="row">
  29.                         <div class="col-md-6">
  30.                             <input type="text" class="form-control" id="valid_code">
  31.                         </div>
  32.                         <div class="col-md-6">
  33.                             <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/" alt="">
  34.                         </div>
  35.                     </div>
  36.                 </div>
  37.                 <input type="button" class="btn btn-default login_btn" value="submit" ><span class="error"></span>
  38.                 {# login_btn用于绑定事件 #}
  39.                 <a href="/registry/" class="btn btn-success pull-right">注册</a>
  40.             </form>
  41.         </div>
  42.     </div>
  43. </div>
  44. <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  45. <script>
  46.     // 点击刷新验证码
  47. $("#valid_code_img").click(function(){
  48.   $(this)[0].src+="?"
  49. });
  50. // 登录验证
  51. $(".login_btn").click(function(){
  52.     $.ajax({
  53.         url:"",
  54.         type:"post",
  55.         data:{
  56.             user:$("#user").val(),
  57.             pwd:$("#pwd").val(),
  58.             valid_code:$("#valid_code").val(),
  59.             csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
  60.         },
  61.         success:function(data){
  62.             // 将会在控制台打印log信息，据此可以判断获取信息是否全面准确
  63.             console.log(data);
  65.             if(data.user){
  66.                 location.href="/index/";
  67.                 {#window.location="index.html";#}
  68.             }
  69.             // 使得验证码错误的提示信息在一秒钟之后消失
  70.             else{
  71.                 $(".error").text(data.msg).css({"color":"red","margin-left":"10px"});
  72.                 setTimeout(function(){
  73.                   $(".error").text("")
  74.                 },1000)
  75.             }
  76.         }
  77.     })
  78. })
  79. </script>
  80. </body>
  81. </html>

valideCode.py

  1. # -*- coding: utf-8 -*-
  2. # @Time : 2021/8/25 9:53
  3. # @Author : 41999
  4. # @Email : 419997284@qq.com
  5. # @File : validCode.py
  6. # @Project : whereabouts
  7. from io import BytesIO
  8. from PIL import Image, ImageDraw, ImageFont
  9. import random
  11. def get_random_color():
  12.     a = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
  13.     return a
  15. def get_valide_code_img(request):
  18.     img = Image.new("RGB", (240, 30), color=get_random_color())
  19.     draw = ImageDraw.Draw(img)
  20.     kumo_font = ImageFont.truetype("static/font/FiraCode-Regular.ttf", size=24)
  21.     valid_code_str = ""
  22.     for i in range(5):
  23.         random_num = random.randint(0, 9)
  24.         random_low_alpha = chr(random.randint(95, 122))  # ASCⅡ大小写字母范围
  25.         random_upper_alpha = chr(random.randint(65, 90))
  26.         random_char = random.choice([random_num, random_low_alpha, random_upper_alpha])
  27.         draw.text((i * 50 + 20, 5), str(random_char), get_random_color(), font=kumo_font)  # 转换第二个参数的类型
  28.         # 保存验证码字符串
  29.         valid_code_str += str(random_char)
  31.     width = 250
  32.     height = 40
  33.     for i in range(10):
  34.         x1 = random.randint(0, width)
  35.         x2 = random.randint(0, width)
  36.         y1 = random.randint(0, height)
  37.         y2 = random.randint(0, height)
  38.         draw.line((x1, x2, y1, y2), fill=get_random_color())
  40.     for i in range(200):
  41.         draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
  42.         x = random.randint(0, width)
  43.         y = random.randint(0, height)
  44.         draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())
  45.     # 打印保存的验证码
  46.     # print("valid_code_str", valid_code_str)
  48.     request.session["valid_code_str"] = valid_code_str
  50.     """
  51.     1. 生成随机字符串
  52.     2. 设置一个cookie{sessionid:随机字符串}
  53.     3. django——session存储session_key---随机字符串,session_data---验证码
  54.     """
  55.     f = BytesIO()
  56.     img.save(f, "png")
  57.     data = f.getvalue()
  59.     return data

文件目录结构