驗證碼功能

標籤：go import   路由   c中   重設   site   就是   pip   apply   package   

驗證碼功能1.安裝captcha外掛程式

(dj_login) D:\dj\dj_login>pip install django-simple-captchaCollecting django-simple-captcha  Using cached https://files.pythonhosted.org/packages/d7/f4/ea95b04ed3abc7bf225716f17e35c5a185f6100db4d7541a46696ce40351/django-simple-captcha-0.5.9.zipRequirement already satisfied: six>=1.2.0 in e:\venv\dj_login\lib\site-packages (from django-simple-captcha)(1.11.0)Requirement already satisfied: Django>=1.8 in e:\venv\dj_login\lib\site-packages (from django-simple-captcha) (1.11.12)Collecting Pillow!=5.1.0,>=2.2.2 (from django-simple-captcha)  Using cached https://files.pythonhosted.org/packages/1b/50/869910cd7110157fbefd0fed3db3656c1951f1bceecdd00e3716aa269609/Pillow-5.2.0-cp36-cp36m-win_amd64.whlCollecting django-ranged-response==0.2.0 (from django-simple-captcha)  Using cached https://files.pythonhosted.org/packages/70/e3/9372fcdca8e9c3205e7979528ccd1a14354a9a24d38efff11c1846ff8bf1/django-ranged-response-0.2.0.tar.gzRequirement already satisfied: pytz in e:\venv\dj_login\lib\site-packages (from Django>=1.8->django-simple-captcha) (2018.5)Installing collected packages: Pillow, django-ranged-response, django-simple-captcha  Running setup.py install for django-ranged-response ... done  Running setup.py install for django-simple-captcha ... doneSuccessfully installed Pillow-5.2.0 django-ranged-response-0.2.0 django-simple-captcha-0.5.9

2.註冊captcha並建立表

INSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    'app_login',    'xadmin',    'crispy_forms',    'captcha'](dj_login) D:\dj\dj_login>python manage.py migrateOperations to perform:  Apply all migrations: admin, app_login, auth, captcha, contenttypes, sessions, xadminRunning migrations:  Applying captcha.0001_initial... OK

3.添加路由

from django.conf.urls import urlfrom django.conf.urls import includeimport xadminurlpatterns = [    # path('admin/', admin.site.urls),    url('xadmin/',xadmin.site.urls),    url(r'',include('app_login.urls')),    url(r'^captcha',include('captcha.urls'))]

4.修改forms.py表單

from django import forms   #匯入forms模組from captcha.fields import CaptchaField   #匯入驗證碼功能模組class UserForm(forms.Form):   #所有表單類都需要繼承forms.Form    '''定義form子標籤<input>子項目的name屬性變數，這裡定義的是name=username和name=password的變數label就是label標籤，max_length為設定該變數可以輸入的最大字元widget為設定input的類型，這裡的passwordinput為type='password',添加屬性使用attrs={}以字典索引值對的形式，這裡增加了class和placeholder屬性'''    username=forms.CharField(label='使用者名稱',max_length=128,widget=forms.TextInput(attrs={'class':'form-control','placeholder':'使用者名稱'}))    password=forms.CharField(label='密碼',max_length=512,widget=forms.PasswordInput(attrs={'class':'form-control','placeholder':'密碼'}))    captcha=CaptchaField(label='驗證碼')   #添加驗證碼表單欄位

5.修改login.html檔案

{% extends 'base.html' %}  <!--繼承base網頁模板內容,可以瀏覽網頁查看效果-->{% load staticfiles %}   <!--載入靜態方法，用於載入static中的檔案-->{% block title %}登陸{%  endblock %}  <!--設定title，預設使用base模板中的-->{% block css %}<link href="{% static 'css/login.css'%}" rel="stylesheet" />{% endblock %} <!--使用自訂的css登陸樣式，不用base中的-->{% block content %}   <!--該範本語言用於定義主體內容，和模板中的結合使用-->    <div class="container">        <div class="col-md-4 col-md-offset-4">          <form class='form-login' action="/login/" method="POST">              {% if message %}      <!--類似if語句-->                  <div class="alert alert-warning">{{ message }}</div>  <!--使用bootstrap的警示傳遞message資訊-->              {% 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 }}  <!--用於表示label的頁面顯示-->                    {{ login_form.captcha }}            <!--用於captcha的input標籤顯示-->                </div>{#              <div class="form-group">#}{#                <label for="id_username">使用者名稱：</label>#}{#                <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>#}{#              </div>#}{#              <div class="form-group">#}{#                <label for="id_password">密碼：</label>#}{#                <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>#}{#              </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 %}

6.查看效果

驗證碼功能