django中簡單圖形驗證碼實現

要實現django圖形驗證碼择膝，可以使用簡單的captcha

一浊伙、安裝captcha

在Pycharm的terminal中晌缘，使用pip安裝第三方庫：
執(zhí)行命令：

pip install django-simple-captcha

二、注冊captcha

在settings中亿鲜，將‘captcha’注冊到app列表里：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'login',
    'captcha',
]

三允蜈、captcha需要在數據庫中建立自己的數據表，所以需要執(zhí)行migrate命令生成數據表：

migrate

四、添加路由,在urls.py中增加這一行

path('captcha/', include('captcha.urls'))

五饶套、表單中添加對應代碼漩蟆。

from captcha.fields import CaptchaField #添加這里

class UserForm(forms.Form):
    username =forms.CharField(label='用戶名',max_length=128,widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': "Username",'autofocus': ''}))
    password = forms.CharField(label='密碼',max_length=256,widget=forms.PasswordInput(attrs={'class': 'form-control','placeholder': "Password"}))
    captcha = CaptchaField(label="驗證碼") #添加這里

六、登錄目標login.html中代碼

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 上述meta標簽*必須*放在最前面妓蛮，任何其他內容都*必須*跟隨其后怠李！ -->
    <!-- Bootstrap CSS -->
    <link  rel="stylesheet">
    <link rel="stylesheet" href="{% static 'login/css/login.css' %}" >
    <title>登錄</title>
</head>
<body>
    <div class="container">
        <div class="col">

           <form class="form-login" action="" method="post">

                {% if myform.captcha.errors %}
                    <div class="alert alert-warning">{{ myform.captcha.errors }}</div>
                {% elif message %}
                    <div class="alert alert-warning">{{ message }}</div>
                {% endif %}
               {% csrf_token %}
               <h3 class="text-center">歡迎登錄！</h3>

                <div class="form-group">
                    {{ myform.username.label_tag }}
                    {{ myform.username }}
                </div>
                <div class="form-group">
                    {{ myform.password.label_tag }}
                    {{ myform.password }}
                </div>
                <div class="form-group">
                    {{ myform.captcha.label_tag}}
                    {{ myform.captcha}}
                </div>
               <div>
                   <a href="{% url 'login:register' %}" class="text-success"><ins>新用戶注冊：</ins></a>
                   <button type="submit" class="btn btn-primary float-right">登錄</button>
               </div>

            </form>
        </div>
    </div>
{#    以下三者的引用順序是固定的#}
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

其中圖形驗證碼關鍵代碼為：

 {{ myform.captcha.label_tag}}
  {{ myform.captcha}}

?著作權歸作者所有,轉載或內容合作請聯系作者