网站首页 > 编程文章 正文
在保持不修改Django框架源代码的基准下，只好通过ajax调用captcha库返回验证码了。可惜vue.js不支持ajax功能，但好在有axios等第3方插件助力。
39.1 安装axios
要想使用axios插件，可以通过npm指令进行安装或直接引入cdn地址。注意：大部分操作系统本身是不支持npm指令，它可通过安装node.js获得。
使用 npm:
npm install axios使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>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 %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>{{ site_title }}-{% trans 'Log in' %}</title>
<link rel="icon" href="{% static '/admin/simpleui-x/img/favicon.png' %}">
{% if "SIMPLEUI_STATIC_OFFLINE"|get_config %}
<link rel="stylesheet" href="{% static '/admin/simpleui-x/elementui/theme-chalk/index.css' %}">
<link rel="stylesheet" href="{% static '/admin/simpleui-x/fontawesome-free-5.8.1-web/css/all.min.css' %}">
{% else %}
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.min.css">
{% endif %}
<link rel="stylesheet" href="{% static '/admin/simpleui-x/css/login.css' %}?_=2.1">
<style type="text/css">
.bg {
background: #f0f2f5;
background-image: url('{% static '/admin/simpleui-x/img/bg.svg' %}');
min-height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
padding: 20px 0;
position: relative;
}
</style>
{% block head %}
{# You can add code here. #}
{% endblock %}
</head>
<body class="bg">
<div class="login-main">
{% block logo %}
<div class="logo">
{% if "SIMPLEUI_LOGO"|get_config %}
<img src="{{ "SIMPLEUI_LOGO"|get_config |safe }}">
{% else %}
<img src="{% static '/admin/simpleui-x/img/logo.png' %}">
{% endif %}
</div>
{% endblock %}
{% block header %}
<div class="header">{{ site_header }}</div>
{% endblock %}
{% block errors %}
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<el-alert
title="{{ error }}"
type="error">
</el-alert>
{% endfor %}
{% endif %}
{% if form.errors and not form.non_field_errors %}
<p class="errornote">
{% if form.errors.items|length == 1 %}
<el-alert title="{% trans "Please correct the error below." %}" type="error"></el-alert>
{% else %}
<el-alert title="{% trans "Please correct the errors below." %}" type="error"></el-alert>
{% endif %}
</p>
{% endif %}
<el-alert v-if="show_error" title="验证码错误" type="error"></el-alert>
{% endblock %}
{% block form %}
<form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">
{% csrf_token %}
<div class="simpleui-input-inline">
<el-input prefix-icon="fas fa-user" v-model="username" name="username"
placeholder="{% trans 'username' %}"></el-input>
</div>
<div class="simpleui-input-inline">
<el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
placeholder="{% trans 'password' %}" show-password></el-input>
</div>
<div class="simpleui-input-inline">
<el-input prefix-icon="fas el-icon-s-help" v-model="captcha" name="captcha"
placeholder="验证码">
<img slot="append" :src="img_url" @click="refresh()"/>
</el-input>
</div>
<div class="simpleui-input-inline login-btn">
<el-button :icon="loading?'el-icon-loading':''" @click="login()" type="primary">{% trans 'Log in' %}</el-button>
</div>
<input id="hashkey" type="hidden" v-model="hashkey" name="hashkey"/>
<input type="hidden" name="next" value="{{ next }}"/>
</form>
{% endblock %}
</div>
{% if "SIMPLEUI_STATIC_OFFLINE"|get_config %}
<script type="text/javascript" src="{% static '/admin/simpleui-x/js/vue.min.js' %}"></script>
<script type="text/javascript" src="{% static '/admin/simpleui-x/elementui/index.js' %}"></script>
{% else %}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
{% endif %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="{% static '/admin/simpleui-x/js/login.js' %}?_=2.3"></script>
{% if 'SIMPLEUI_LOGIN_PARTICLES'|get_config != False %}
<style type="text/css">
#particles-js{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
}
</style>
<!-- particles.js container -->
<div id="particles-js"></div>
<script type="text/javascript" src="{% static '/admin/simpleui-x/particles/particles.js' %}"></script>
<script type="text/javascript" src="{% static '/admin/simpleui-x/particles/app.js' %}"></script>
{% endif %}
</body>
</html>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'];
})
} ,
}
})辛苦了好久，我也想早点见到效果(图)，有效果才有成就，有效果，才有说服力。
- 上一篇： 第6章 Vue组件高级（vue组件用法）
- 下一篇： STM32F769评测软件之USB_HOST初步
猜你喜欢
- 2024-09-11 第6章 Vue组件高级（vue组件用法）
- 2024-09-11 【JavaScript】ES6之Promise用法详解及其应用
- 2024-09-11 前后端分离 Vue + Springboot 实现用户列表单页面开发(建议收藏)
- 2024-09-11 在 JS 中如何使用 Ajax 来进行请求
- 2024-09-11 express框架开发开始篇 方便以后写项目时候可拿过来直接使用
- 2024-09-11 Spring Cloud Alibaba 之 Gateway 服务网关跨域问题
- 2024-09-11 SpringBoot+Vue+Flowable，模拟一个请假审批流程
- 2024-09-11 Vue基础(2)（vue基础笔试题）
- 2024-09-11 vue.js快速入门（vue.js入门教程）
- 2024-09-11 每日优鲜供应链前端团队微前端改造
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- spire.doc (59)
- system.data.oracleclient (61)
- 按键小精灵源码提取 (66)
- pyqt5designer教程 (65)
- 联想刷bios工具 (66)
- c#源码 (64)
- graphics.h头文件 (62)
- mysqldump下载 (66)
- sqljdbc4.jar下载 (56)
- libmp3lame (60)
- maven3.3.9 (63)
- 二调符号库 (57)
- 苹果ios字体下载 (56)
- git.exe下载 (68)
- diskgenius_winpe (72)
- pythoncrc16 (57)
- solidworks宏文件下载 (59)
- qt帮助文档中文版 (73)
- satacontroller (66)
- hgcad (64)
- bootimg.exe (69)
- android-gif-drawable (62)
- axure9元件库免费下载 (57)
- libmysqlclient.so.18 (58)
- springbootdemo (64)
本文暂时没有评论，来添加一个吧(●'◡'●)