html頁面裏

{#  驗證碼   #}
 <div class="form-group " id="v-code-wrapper">
      <label for="v_code_input">驗證碼</label>
      <input type="text" class="form-control" id="v_code_input" name="v_code_input">
      <img src="/get_v_code/" class="" id="v_code">
 </div>

js裏

{#當圖片的src改變時，瀏覽器會自動訪問該地址，所以此處點擊驗證碼圖片，觸發事件改變src地址內容，用以改變驗證碼圖片#}
$(‘#v_code‘).click(function () {
   if (this.src == ‘/get_v_code/‘) {
       this.src += ‘?‘;
   } else {
       this.src = ‘/get_v_code/‘;
   }
});

views.py文件裏

# 因為頁面控制每次點擊圖片在連接後加？ 或減去？，url一直都是這兩個，Django會自動將這兩個url的執行加入緩存，所以每次會獲得一樣的驗證圖片
 

# 該語法糖 告訴系統不要對該方法進行緩存操作
@never_cache
def get_v_code(request):
    from PIL import Image, ImageDraw, ImageFont
    import random

    # 定義生成一個隨機顏色代碼的內部函數
    def get_color():
        return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

    # 生成一個圖片對象
    img_obj = Image.new(
        
 
‘RGB‘,  # 圖片格式
        (166, 37),  # 圖片大小
        color=get_color()
    )

    # 在圖片中加文字

    # 生成一個畫筆對象
    draw_obj = ImageDraw.Draw(img_obj)

    # 加載字體文件
    font_obj = ImageFont.truetype(‘static/font/kumo.ttf‘, size=28)

    # 循環5次，每次往圖片上寫入一個隨機字符
    tmp_list = []
    for i in range(5):
        n = str(random.randint(0, 9))
        l = chr(random.randint(97, 122))
        u = chr(random.randint(65, 90))

        r = random.choice([n, l, u])
        tmp_list.append(r)
        draw_obj.text(
            (i * 30 + 10, 0),  # 位置
            r,  # 內容
            get_color(),  # 顏色
            font=font_obj,
        )
    # 得到隨機驗證碼
    v_code = ‘‘.join(tmp_list)

    request.session[‘v_code‘] = v_code.upper()

    # 第一種，將圖片保存到文件（硬盤），然後再返回到頁面
    # with open(‘vv.png‘, ‘wb‘)as f:
    #     img_obj.save(f, ‘png‘)
    # with open(‘vv.png‘, ‘rb‘)as f:
    #     return HttpResponse(f.read(), content_type=‘imge/png‘)

    # 第二種，直接將圖片放在內存中，返回回去
    from io import BytesIO
    tmp = BytesIO()  # 生成一個IO對象
    img_obj.save(tmp, ‘png‘)

    data = tmp.getvalue()
    return HttpResponse(data, content_type=‘imge/png‘)

7月2日 Django 生成驗證碼、