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开发-动态验证码的更多相关文章

  1. 在javaEE下学习web（在eclipse中开发动态的WEB工程，servlet的环境搭建，及servlet的一些方法）

    一个简便的方法实现javaee版的eclipse开发动态的WEB工程(javaWEB项目)1.把开发选项切换到javaEE2. 可以在window->shou view 中找到package e ...

  2. 使用Java EE 在eclipse 开发动态的Web工程（Java web项目）

    1.使用Java EE 在eclipse 开发动态的Web工程(Java web项目)1)开发开发选项切换到JavaEE2)可以在Windows->show view中找到package exp ...

  3. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

  4. Java Web开发技术教程入门-初识动态网页

    这段时间学校搞了一个"阅战阅勇"的阅读活动,奖品还是挺丰富的~于是,奔着这些奖品,我去图书馆借了这本<Java Web开发技术教程>.一是为了那些丰富的奖品,二是为了回 ...

  5. Web 开发人员和设计师必读文章推荐【系列三十】

    <Web 前端开发精华文章推荐>2014年第9期(总第30期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. Web开发人员不要错过的60款用户界面设计工具（中）

    21. Dojo Dojo是一个用javascript语言实现的开源DHTML UI工具包,可实现高性能的桌面和移动应用程序开发,在国内亦有大量忠实用户. 22. Fivesecondtest Fiv ...

  7. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  8. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  9. java WEB开发入门

    WEB开发入门 1 进入web JAVASE:标准- standard   JAVA桌面程序 GUI    SOCKET JAVAEE:企业-浏览器控制  web 2 软件结构 C/S :client ...

随机推荐

  1. 关于oracle视图小结

    关于oracle的视图小记:一. 视图:就是对SQL语句的封装,使用起来更方便.不易出错 优点: 1.简化数据操作:视图可以简化用户处理数据的方式 2.着重于特定数据:不必要的数据或敏感的数据可以 不 ...

  2. ClearCase config_spec

    1.使用分支前要在vob创建branch  type,Config_Spec不能自动创建branch type: 2.如果可能,最好在以前确定的label上进行新的工作,避免维护复杂的config_s ...

  3. Android5.0新控件

    谷歌在推出Android5.0的同时推出了一些新控件,Android5.0中最常用的新控件有下面5种.  1. CardView(卡片视图) CardView顾名思义是卡片视图,它继承FrameLay ...

  4. thinkphp5学习(一)——thinkphp5的目录结构与开发规范

    开发规范: 目录和文件 目录使用小写+下划线: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致: 类文件采用驼峰法命名(首字母大写),其它文 ...

  5. ASP.NET控件GridView的使用& Xml操作注意事项

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢!   原文链接:http://www.cnblogs.com/zishi/p/6729478.html 文章主要内容 ...

  6. POJ 2065 SETI [高斯消元同余]

    题意自己看,反正是裸题... 普通高斯消元全换成模意义下行了 模模模! #include <iostream> #include <cstdio> #include <c ...

  7. POJ1509 Glass Beads [后缀自动机]

    题意: 给一个字符串S,每次可以将它的第一个字符移到最后面,求这样能得到的字典序最小的字符串.输出开始下标 练习SAM第一题! SS构造SAM,然后从开始尽量走最小走n步就可以啦 什么?开始位置?!R ...

  8. Python tutorial阅读之使用 Python 解释器

    配置环境变量后,一般可以直接通过Python或指定Python版本号来调用Python. Python 解释器有些操作类似 Unix shell:当使用终端设备(tty)作为标准输入调用时,它交互的解 ...

  9. 汽车之家店铺数据抓取 DotnetSpider实战[一]

    一.背景 春节也不能闲着,一直想学一下爬虫怎么玩,网上搜了一大堆,大多都是Python的,大家也比较活跃,文章也比较多,找了一圈,发现园子里面有个大神开发了一个DotNetSpider的开源库,很值得 ...

  10. 极大似然估计（MLE)

    基本思想 模型已定,参数未知 根据已存在的样本,挑选(求出)能让样本以最大概率发生的参数 极大似然估计和最小二乘法最大区别之一 极大似然需要知道概率密度函数(离散型叫分布律) 若总体X属离散型,其分布 ...