js 刷新验证码_第39章 Django调用验证码

在保持不修改Django框架源代码的基准下，只好通过ajax调用captcha库返回验证码了。可惜vue.js不支持ajax功能，但好在有axios等第3方插件助力。

39.1 安装axios

要想使用axios插件，可以通过npm指令进行安装或直接引入cdn地址。注意：大部分操作系统本身是不支持npm指令，它可通过安装node.js获得。

使用 npm:

npm install axios

使用 cdn:

39.2 应用axios

不懂偷懒的程序猿不是好工程师，我喜欢偷懒，喜欢用cdn的方式。打开templates/ admin/login.html文件，在引入login.js的上一行，加入引入axios的代码。另外在表单(form.errors)错误提示信息的下方，加入验证码错误提示的代码；在输入密码框的下方，加入输入验证码的的代码，还有一个隐藏hashkey的hiddle,自己找找看。

{% load i18n static simpletags %}{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}    {{ site_title }}-{% trans 'Log in' %}    {% if "SIMPLEUI_STATIC_OFFLINE"|get_config %}            {% else %}            {% endif %}        {% block head %}        {# You can add code here. #}    {% endblock %}

{% block logo %}

{% if "SIMPLEUI_LOGO"|get_config %} {% else %} {% endif %}

{% endblock %} {% block header %}

{{ site_header }}

{% endblock %} {% block errors %} {% if form.non_field_errors %} {% for error in form.non_field_errors %} {% endfor %} {% endif %} {% if form.errors and not form.non_field_errors %}

{% if form.errors.items|length == 1 %} {% else %} {% endif %}

{% endif %} {% endblock %} {% block form %} {% csrf_token %}

{% trans 'Log in' %}

{% endblock %}

{% if "SIMPLEUI_STATIC_OFFLINE"|get_config %} {% else %} {% endif %} {% if 'SIMPLEUI_LOGIN_PARTICLES'|get_config != False %}

39.3 调用验证码

在模板文件上的添油加醋，只是对验证码进行一番造势而已，如果没有真材实料，最终火不过3天，活不到第二集。我说的是什么，你懂得。打开static/simpleui-x/js/login.js,调整内容如下。

if (parent.callback) {    //如果是在子框架内就把首页刷新    parent.callback();}new Vue({    el: '.login-main',    data: {        username: '',        password: '',        captcha:'',        hashkey:'',        img_url:'',        show_error: false,        loading: false    },    created: function () {        this.get_captcha();    },methods: {refresh:function () {       this.get_captcha();    },        login: function () {            hash_key = this.hashkey;            captcha_str = this.captcha;            this.loading = true;            this.show_error = false;            var that = this;            axios.get('/special/check_captcha/', {                    params: {                        hash_key: hash_key,                        captcha_str: captcha_str                    }                }            ).then(function (response) {                    var json = JSON.parse(JSON.stringify(response.data));                    var result =  json['result'];                    if (result) {                        document.getElementById('login-form').submit();                    }                    else {                        that.loading = false;                        that.show_error = true;                    }                })        },       get_captcha: function () {            var that=this;            axios.get('/special/captcha/')            .then(function (response) {                var result = JSON.parse(JSON.stringify(response.data));                that.hashkey = result['hashkey'];                that.img_url = result['image_url'];            })        } ,    }})

辛苦了好久，我也想早点见到效果(图)，有效果才有成就，有效果，才有说服力。