Djangoは画像検証コードを達成します

レンダリング：

アイデアの実現：

登録ページは、検証コードラベルを入力します。

<label>图形验证码:</label>
<input type="text" name="pic_code" id="pic_code" v-model="image_code"                 @blur="check_image_code">
<img :src="image_code_url" @click="generate_image_code">
<span v-show="error_image_code">[[ error_image_code_message ]]</span>

name="pic_code"以下のように、受信するための機能の観点から：

pic_code = request.POST.get('pic_code')

v-model="image_code"これは、双方向のように、VUEでの結合の値を取得するために使用されます。

data:{image_code:''}

@blur="check_image_code"以下のような、で呼び出すために使用さVueの確認方法：

methods:{//校验图形验证码
        check_image_code: function () {
            // 校验非空
            if (this.image_code == "") {
                this.error_image_code_message = "图形验证码不能为空";
                this.error_image_code = false;
            }
        }}

:src="image_code_url"：Vueのsrc属性は、フォームに記入し、速記を拘束されv-bind:src="image_code_url"、このように書かれないように注意してください：src="{{ image_code_url }}"/。

バインディングプロパティのCAPTCHAイメージが動的に生成されるので、これはsrcが動的に割り当てられるので、各新しい画像パスは、異なっている、です。

中のSO VUE dataこの文のフィールド：

data:{
    image_code_url: ''
}

@click="generate_image_code">マウスクリックは、ある「画像を変更」することで、次のように対応する方法があるJS：

methods:{
    generateUUID: function () {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        },
        // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
        generate_image_code: function () {
            // 生成一个编号 : 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
            this.image_code_id = this.generateUUID();
            // 设置页面中图片验证码img标签的src属性
            this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
            console.log(this.image_code_url);
        }
}

ページのロードには、メソッド要求検証画像は、デフォルト（すなわちによってロードされなければならないときgenerate_image_codeの方法）、実装は次のとおりです。

mounted: function () {
        // 向服务器获取图片验证码
        this.generate_image_code();
}

ときgenerate_image_code：メソッドが終了すると、それが読み込まれ、URLを返します主机名+/image_code/+图片唯一uuidURLをSRCタグが自動的にロードされた場合、すなわち、サーバは画像を要求します。

背景tはそれに名前を付け、画像表示機能検証コードを生成するために提供されるべきImageCodeView次のように：

class ImagecodeView(View):
    def get(self, request, uuid):
        # 生成图形验证码数据:字符code,图片image,得到验证码字符以及图片
        text, code, image = captcha.generate_captcha()
        # 获取redis连接对象
        redis_cli = get_redis_connection('verify_code')
        # 向redis中写数据
        redis_cli.setex(uuid, constants.IMAGE_CODE_EXPIRES, code)

        return http.HttpResponse(image, content_type='image/png')

Captcha検証画像は、グラフィックツールを生成しています

コードを生成した後、フィールドピクチャがブラウザに返された後のRedisを配置する必要があります、ページが画像確認コードを表示します。

ソース