Django前端頁面驗證碼功能的實現(xiàn)，使用最廣的是django-simple-captcha模塊，該模塊入門簡單，只需要如下幾步就可開始使用
基礎環(huán)境：CentOS7.2、python3.5、Django2.07
1、安裝Pillow和django-simple-captcha?:?pip install Pillow ，?pip install django-simple-captcha
2、在project的settings.py中注冊captcha
INSTALLED_APPS = [
? ? .....
? ? 'captcha',
? ? .....
]
3、運行 python3 manager.py migrations 和 python3 manage.py migrate，生成captcha需要的數(shù)據(jù)庫表。
其中captcha_captchastore這張表保存的是圖形驗證碼內容
4、配置URL路由，在url.py文件中加入如下這行：
urlpatterns = [
? ? .....
? ? path('captcha', include('captcha.urls')),
? ? .....
]
5、在forms.py表單加入驗證碼模塊（CaptchaField），例如：
from django import forms
from captcha.fields import CaptchaField
class UserForm(forms.Form):
? ? username = forms.CharField(label="用戶名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control'}))
? ? password = forms.CharField(label="密碼", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'}))
? ? captcha = CaptchaField(label='驗證碼')
6、views.py文件代碼如下：
from django.shortcuts import render,redirect
from . import forms
from . import models
.....
def login(request):
? ? if request.method == "POST":
? ? ? ? login_form = forms.UserForm(request.POST)
? ? ? ? message = "請檢查填寫的內容！"
? ? ? ? if login_form.is_valid():
? ? ? ? ? ? username = login_form.cleaned_data['username']
? ? ? ? ? ? password = login_form.cleaned_data['password']
? ? ? ? ? ? try:
? ? ? ? ? ? ? ? user = models.User.objects.get(name=username)
? ? ? ? ? ? ? ? if user.password == password:
? ? ? ? ? ? ? ? ? ? return redirect('/index/')? ####redirect中的URL前面不加'/'，返回的URL是當前URL+redirect中的URL；要使返回的URL是redirect中的URL，redirect中的URL前面加'/'。
? ? ? ? ? ? ? ? else:
? ? ? ? ? ? ? ? ? ? message = "密碼不正確！"
? ? ? ? ? ? except:
? ? ? ? ? ? ? ? message = "用戶名不存在！"
? ? ? ? return render(request, 'login.html', locals())
? ? login_form = forms.UserForm()
? ? return render(request, 'login.html', locals())
.....
7、前端頁面base.html和login.html
base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
? <head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
? ? <title>{% block title %}base{% endblock %}</title>
? ? <!-- Bootstrap -->
? ? <link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">
? ? <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
? ? <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
? ? <!--[if lt IE 9]>
? ? ? <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
? ? ? <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
? ? <![endif]-->
? ? {% block css %}{% endblock %}
? </head>
? <body>
? ? <nav class="navbar navbar-default">
? ? ? <div class="container-fluid">
? ? ? ? <!-- Brand and toggle get grouped for better mobile display -->
? ? ? ? <div class="navbar-header">
? ? ? ? ? <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav" aria-expanded="false">
? ? ? ? ? ? <span class="sr-only">切換導航條</span>
? ? ? ? ? ? <span class="icon-bar"></span>
? ? ? ? ? ? <span class="icon-bar"></span>
? ? ? ? ? ? <span class="icon-bar"></span>
? ? ? ? ? </button>
? ? ? ? ? <a class="navbar-brand" href="#">Mysite</a>
? ? ? ? </div>
? ? ? ? <!-- Collect the nav links, forms, and other content for toggling -->
? ? ? ? <div class="collapse navbar-collapse" id="my-nav">
? ? ? ? ? <ul class="nav navbar-nav">
? ? ? ? ? ? <li class="active"><a href="/logintest/index/">主頁</a></li>
? ? ? ? ? </ul>
? ? ? ? ? <ul class="nav navbar-nav navbar-right">
? ? ? ? ? ? <li><a href="/logintest/login/">登錄</a></li>
? ? ? ? ? ? <li><a href="/logintest/register/">注冊</a></li>
? ? ? ? ? </ul>
? ? ? ? </div><!-- /.navbar-collapse -->
? ? ? </div><!-- /.container-fluid -->
? ? </nav>
? ? {% block content %}{% endblock %}
? ? <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
? ? <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
? ? <!-- Include all compiled plugins (below), or include individual files as needed -->
? ? <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
? ? {% block script %}{% endblock %}
? </body>
</html>
login.html
{% extends 'login/base.html' %}
{% load staticfiles %}
{% block title %}登錄{% endblock %}
{% block css %}
<link href="{% static 'bootstrap-3.3.7-dist/css/login.css' %}" rel="stylesheet"/>
{% endblock %}
{% block content %}
<div class="container">
? ? <div class="col-md-4 col-md-offset-4">
? ? ? ? <form class='form-login' action="/logintest/login/" method="post">
? ? ? ? ? ? {% if message %}
? ? ? ? ? ? <div class="alert alert-warning">{{ message }}</div>
? ? ? ? ? ? {% endif %}
? ? ? ? ? ? {% csrf_token %}
? ? ? ? ? ? <h2 class="text-center">歡迎登錄</h2>
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? ? {{ login_form.username.label_tag }}
? ? ? ? ? ? ? ? {{ login_form.username}}
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? ? {{ login_form.password.label_tag }}
? ? ? ? ? ? ? ? {{ login_form.password }}
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? ? {{ login_form.captcha.errors }}
? ? ? ? ? ? ? ? {{ login_form.captcha.label_tag }}
? ? ? ? ? ? ? ? {{ login_form.captcha }}
? ? ? ? ? ? </div>
? ? ? ? ? ? <button type="reset" class="btn btn-default pull-left">重置</button>
? ? ? ? ? ? <button type="submit" class="btn btn-primary pull-right">提交</button>
? ? ? ? </form>
? ? </div>
</div> <!-- /container -->
{% endblock %}
8、更新文件重啟Django server
9、動態(tài)更新驗證碼
前面的示例都很簡單，復制黏貼就可以直接使用。
但是驗證碼部分有一個問題，如果看不清當前的驗證碼，想要換一個，需要刷新整個頁面。一刷新，前面輸入的賬號密碼信息就都沒有了，這并不是一個友好的處理方式。
所以我們還需要對他進行優(yōu)化，讓他能只更新驗證碼圖片，而不動我們已經填好的賬號密碼信息。
優(yōu)化使用ajax方式來實現(xiàn)，在前面的login.html文件最下方中增加如下一段內容，便可實現(xiàn)點擊驗證碼圖片更新驗證碼信息功能。
{% block script %}
<script>
? ? $(function () {
? ? ? ? $('.captcha').css({
? ? ? ? ? ? 'cursor': 'pointer'
? ? ? ? });
? ? ? ? $('.captcha').click(function () {
? ? ? ? ? ? $.getJSON("/captcha/refresh/",
? ? ? ? ? ? ? ? function (result) {
? ? ? ? ? ? ? ? ? ? $('.captcha').attr('src', result['image_url']);
? ? ? ? ? ? ? ? ? ? $('#id_captcha_0').val(result['key'])
? ? ? ? ? ? ? ? });
? ? ? ? });
? ? })
</script>
{% endblock %}
