WEB开发-动态验证码
1.基于Python实现,用到了django后台处理,刷新验证码功能,其他语言大同小异
2.登录界面
login.html
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content=""> <title>DevOPS v1.0</title> <!-- Bootstrap Core CSS -->
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- MetisMenu CSS -->
<link href="/static/vendor/metisMenu/metisMenu.min.css" rel="stylesheet"> <!-- Custom CSS -->
<link href="/static/dist/css/sb-admin-2.css" rel="stylesheet"> <!-- Custom Fonts -->
<link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> </head> <body> <div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" action="/index/login/" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" type="text"
autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password"
value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="验证码" name="yanzhengma" type="text" value="">
{# <span><img src={{ data }}></span>#}
{# <span>{{ data }}</span>#}
<img src="/index/yanzhengma/" onclick="ChangeCode(this);"/>
<div style="color: red;">{{ msg }}</div>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
{# <a href="/login/" class="btn btn-lg btn-success btn-block">Login</a>#}
<input type="submit" class="btn btn-lg btn-success btn-block" name="Login"/>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div> <!-- jQuery -->
<script src="/static/vendor/jquery/jquery.min.js"></script> <!-- Bootstrap Core JavaScript -->
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript -->
<script src="/static/vendor/metisMenu/metisMenu.min.js"></script> <!-- Custom Theme JavaScript -->
<script src="/static/dist/js/sb-admin-2.js"></script> <script type="text/javascript">
function ChangeCode(ths) {
var src_re = $(ths).attr('src');
$(ths).attr('src', src_re + '?');
}
</script> </body> </html>
里面涉及到2个后端视图函数login和get_yanzhengma
3.后端视图函数
helper.py
# -*- coding=utf-8 -*-
import random # 随机字母:
def rndChar():
return chr(random.randint(65, 90)) + chr(random.randint(65, 90)) + chr(random.randint(65, 90)) + chr(random.randint(65, 90))
Django的views.py
# -*- coding=utf-8 -*-
##############################
from django.shortcuts import render, HttpResponse, render_to_response,redirect
from app import models
from helper import rndChar
from PIL import Image, ImageFont, ImageDraw
import io # Create your views here. def index(request):
# return HttpResponse('123456')
return render_to_response('app/pages/index.html') def login(request):
if request.method == 'POST':
print request.POST
username = request.POST.get('username',None)
password = request.POST.get('password',None)
yanzhengma = request.POST.get('yanzhengma',None)
# print yanzhengma,request.session['yanzhengma']
if yanzhengma.upper() != request.session['yanzhengma'].upper():
return render_to_response('app/pages/login.html',{'msg':'验证码错误'})
count = models.AdminInfo.objects.filter(username=username,password=password).count()
if count > 0:
request.session['is_login'] = {'user':username}
return redirect('/index/')
# return render_to_response('app/pages/index.html')
else:
return render_to_response('app/pages/login.html',{'msg':'账户密码错误'})
else:
# print stream.getvalue()
# im.save("static/image/t.png")
# request.session['yanzhengma'] = text
return render_to_response('app/pages/login.html',{'msg':''}) def yanzhengma(request):
#text为产生的4位随机字符串
text = rndChar()
# print text
request.session['yanzhengma'] = text
#图片处理程序,将文本做成图片
im = Image.new("RGB", (130, 35), (255, 255, 255))
dr = ImageDraw.Draw(im)
font = ImageFont.truetype("arial", 24)
# simsunb.ttf 这个从windows fonts copy一个过来
dr.text((10, 5), text, font=font, fill="#000000")
# im.show()
#创建一个io对象
stream = io.BytesIO()
#将图片对象im保存到stream对象里
im.save(stream, "png")
#stream.getvalue()图片二级制内容,再通过HttpResponse封装,返回给前端页面
return HttpResponse(stream.getvalue())
4.效果图展示
5.备注:
(1)img标签的src属性,去这个/get_yanzhengma/去取图片
(2)get_yanzhengma函数执行
(3)通过random模块生成随机码,4个字母
(4)通过PIL模块将随机数字转换为图片对象im
(5)创建一个BytesIO对象,内存对象,可以存储二进制的东西
(6)将图片对象保存到BytesIO对象中,此处在内存里
#话说为什么要将图片对象保存到BytesIO对象中而不是直接写到硬盘里存为图片文件呢?因为这样就保证了在同一个时刻,不同用户访问到的验证码是不一样的,而且都是存储在内存中的。
#如果写成验证码图片文件到硬盘里,有可能B页面显示的验证码是ABCD,但是B用户还没提交,A用户这会访问,刷新了验证码,把验证码变更为DCBA了,B页面里看到的还是ABCD,导致一直输不对验证码;无法保证2个用户的验证码图片冲突问题
#后端验证码的随机值是存储在session中的,每次用户GET请求,服务器上生成随机验证码存储在session中,并给页面返回,如果用户提交的验证码和后端session中记录的一致通过,如果不一致,重新刷新验证码,用户重新进行提交
(7)BytesIO对象的getvalue()方法返回二进制内容
(8)django提供的HttpResponse封装二进制内容为识别的东西传递给前端
(7)前端img标签正常显示图片
(9)用户点击图片,js先获取到这个图片标签,取到当前的src属性值存为变量src_re,然后更改src的属性值为src_re + ?
#为什么要加?呢是因为GET请求,每最后加一个?代表一个新的url,但是效果呢是和/index/yanzhengma/是一致的,每点一次,后面加一个?。/index/yanzhengma/? /index/yanzhengma/??这个意思
#如果每次只更改src的属性值为/index/yanzhengma/的话,不会进行request请求,会直接浏览器缓存读取。达不到刷新验证码的目的
WEB开发-动态验证码的更多相关文章
- 在javaEE下学习web(在eclipse中开发动态的WEB工程,servlet的环境搭建,及servlet的一些方法)
一个简便的方法实现javaee版的eclipse开发动态的WEB工程(javaWEB项目)1.把开发选项切换到javaEE2. 可以在window->shou view 中找到package e ...
- 使用Java EE 在eclipse 开发动态的Web工程(Java web项目)
1.使用Java EE 在eclipse 开发动态的Web工程(Java web项目)1)开发开发选项切换到JavaEE2)可以在Windows->show view中找到package exp ...
- SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。
熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...
- Java Web开发技术教程入门-初识动态网页
这段时间学校搞了一个"阅战阅勇"的阅读活动,奖品还是挺丰富的~于是,奔着这些奖品,我去图书馆借了这本<Java Web开发技术教程>.一是为了那些丰富的奖品,二是为了回 ...
- Web 开发人员和设计师必读文章推荐【系列三十】
<Web 前端开发精华文章推荐>2014年第9期(总第30期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web开发人员不要错过的60款用户界面设计工具(中)
21. Dojo Dojo是一个用javascript语言实现的开源DHTML UI工具包,可实现高性能的桌面和移动应用程序开发,在国内亦有大量忠实用户. 22. Fivesecondtest Fiv ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- java WEB开发入门
WEB开发入门 1 进入web JAVASE:标准- standard JAVA桌面程序 GUI SOCKET JAVAEE:企业-浏览器控制 web 2 软件结构 C/S :client ...
随机推荐
- vim 实用配置
修改文件~/.vimrc 如下: set nu " 显示行号colorscheme torte " 设定配色方案set tabstop=4 " 设定 tab 长度为 4s ...
- js事件绑定函数
js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...
- 【转】shell学习笔记(六)——流程控制之for循环
基本语法格式: for 变量 in 列表 do 命令行(通常用到循环变量) done ********Linux Shell for循环写法总结******** for((i=1;i<</ ...
- mongodb监控常用方法
列举mongodb监控的常用命令 1.监控统计 mongostat 可用于查看当前QPS/内存使用/连接数,以及多个shard的压力分布 命令参考 ./mongostat --port 27071 - ...
- 【C++】bazel的使用
bazel的使用 bazel是google开源的构建工具,可以支持多种语言的构建.这里来尝试一下如何在C++项目中使用bazel构建. 安装就不介绍了,在官网很详细,输入bazel --help: U ...
- 19_Python元组总结
元组 1 元组:不可变的容器,一旦初始化就不能更改,有索引:可以查,不能增,改,删除单个元素:可遍历,不能排序 2 当元组元素,只有一个的时候,需要在元素后加",",否则回当()运 ...
- java之Servlet监听器Listener
常用应用场景:单点登录.统计在线人数 一.简介 (一)概述 1.Listener 用于监听 java web程序中的事件,例如创建.修改.删除Session.request.context等,并触发响 ...
- javascript中的BOM对象
1.window对象 所有的浏览器都支持window对象 概念上讲,一个html文档对应一个window对象 功能上讲,控制浏览器窗口 使用上讲,window对象不需要创建对象,直接使用 2.wind ...
- php动态编译mysqli扩展
在源PHP安装文件中进入注意是你下载的php源文件软件包cd ./php-5.5.4/ext/mysqli注意要先确保/server/php/bin/php-config存在/server/php/b ...
- BZOJ 3239: Discrete Logging [BGSG]
裸题 求\(ind_{n,a}b\),也就是\(a^x \equiv b \pmod n\) 注意这里开根不能直接下取整 这个题少了一些特判也可以过... #include <iostream& ...