Servlet之 验证码(初级)

需求:

　　　　使用Servlet向页面响应验证码,并且点击验证码或者"看不清楚,换一张"可以刷新验证码

需求分析:

Servlet中需要完成的需求:

  • 验证码的本质:就是一张图片
  • 使用Servlet向页面响应验证码和现实中使用画板绘画一样:
  1. 设置画布的尺寸:宽度(width),高度(height)
  2. 有了画布之外还需要画笔
  3. 设置画笔的颜色,使用RGB颜色,red,green,blue三种颜色随机组合
  4. 要组合颜色就需要使用Random随机生成器对象
  5. 画布的背景颜色默认为black,我们需要随机更改画布的背景色
  • 画布准备就绪以后,就需要准备验证码的素材了

　　　　准备一串字符串,包含26个大写字母、26个小写字母、0-9数字字母

  • 一般验证码的位数为4位,我们在验证码素材字符串中随机选择4位即可
  • 将随机选择的字符写入画布中;写入画布的验证码的颜色也是随机的
  • 画干扰线(在画布上使用不同的颜色画上几条干扰线)
  • 将完成的画布响应到页面即可

 HTML页面中需要完成的需求:

    简单显示几个标签即可(本需求重点不在HTML页面)
    使用JavaScript实现点击验证码和点击"看不清楚,换一张"刷新验证码的需求

HTML页面代码实现:

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>login</title>

 6

 7 </head>

 8 <body>

 9

10 <form action="/day28_response/checkcodeServlet" method="post">

11     <table>

12         <tr>

13             <td>用户名</td>

14             <td><input type="text" name="username"/></td>

15         </tr>

16         <tr>

17             <td>密码</td>

18             <td><input type="password" name="password"/></td>

19         </tr>

20         <tr>

21             <td>验证码：</td>

22             <td><input type="password" name="checkcode"/></td>

23         </tr>

24         <tr>

25             <td></td>

26             <td><img id="img" src="/day28_response/checkcodeServlet"/></td>

27             <td><a href="javascript:void(0)" id="change">看不清楚,换一张</a></span></td>

28         </tr>

29

30         <tr>

31             <td></td>

32             <td><input type="submit" value="登录"/></td>

33         </tr>

34     </table>

35 </form>

36

37 </body>

38 </html>

39

40 <script>

41

42     //给验证码和"看不清楚,换一张"绑定单机事件

43     window.onload = function () {

44

45         var img = document.getElementById("img");

46         img.onclick=function () {

47             img.src="/day28_response/checkcodeServlet?r="+new Date().getTime();

48         };

49         var change = document.getElementById("change");

50         change.onclick = function () {

51             img.src="/day28_response/checkcodeServlet?r="+new Date().getTime();

52         }

53     }

54

55 </script>

Servlet中代码实现:

 1 package servlet;

 2

 3 import javax.imageio.ImageIO;

 4 import javax.servlet.ServletException;

 5 import javax.servlet.annotation.WebServlet;

 6 import javax.servlet.http.HttpServlet;

 7 import javax.servlet.http.HttpServletRequest;

 8 import javax.servlet.http.HttpServletResponse;

 9 import java.awt.*;

10 import java.awt.image.BufferedImage;

11 import java.io.IOException;

12 import java.util.Random;

13

14 @WebServlet("/checkcodeServlet")

15 public class CheckcodeServlet extends HttpServlet {

16     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

17         this.doGet(request, response);

18     }

19

20     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

21         //创建画布

22         //画布的宽,高

23         int width = 120;

24         int height = 40;

25         BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

26

27         //获得画笔

28         Graphics graphics = bufferedImage.getGraphics();

29

30         //获取随机对象

31         Random random = new Random();

32

33         //设置画笔颜色随机生成

34         //graphics.setColor(Color.gray);//固定颜色

35         graphics.setColor(new Color(random.nextInt(255),random.nextInt(255),random.nextInt(255)));

36         //填充背景颜色

37         graphics.fillRect(0, 0, width, height);

38

39         //生成随机字符

40         //准备数据

41         String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";

42

43         //声明变量存储生成的验证码

44         String code = "";

45

46         //随机生成4个字符

47         for (int i = 1; i <= 4; i++) {

48             //设置字体

49             graphics.setFont(new Font("宋体", Font.HANGING_BASELINE, 30));

50             //随机生成颜色

51             graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));

52             //随机生成字符索引

53             int index = random.nextInt(str.length());

54             String cha = str.charAt(index) + "";

55             //将随机生成的字符写入画布

56             graphics.drawString(cha, 120 / 5 * i, random.nextInt(height / 2) + height / 2);

57             code += cha;

58         }

59

60

61         //画干扰线:

62         for (int i = 0; i < 10; i++) {

63             //随机生成画笔颜色

64             graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));

65             //画干扰线到画布中

66             graphics.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));

67         }

68

69

70

71         //将画布写到浏览器中

72         ImageIO.write(bufferedImage, "png", response.getOutputStream());

73     }

74 }

实现效果:

  • 打开HTML页面显示效果:

  • 刷新HTML页面,验证码也随即刷新:

  • 点击验证码图片,验证码也随即刷新:

  • 单击"看不清楚,换一张"也可以实现刷新验证码的需求:

Servlet-随机生成验证码(初级版本)的更多相关文章

  1. Python随机生成验证码的两种方法

    Python随机生成验证码的方法有很多,今天给大家列举两种,大家也可以在这个基础上进行改造,设计出适合自己的验证码方法方法一:利用range Python随机生成验证码的方法有很多,今天给大家列举两种 ...

  2. Android锁定EditText内容和随机生成验证码

    昨天写了个小Demo,实现了随机生成验证码,和锁定EditText两个小功能,先看一下效果图: 锁定EditText在我们不须要用户编辑EditText内容的时候能够用到,实现还是非常easy的,一行 ...

  3. servlet中生成验证码

    在servlet中生成验证码 package login; import java.awt.Color; import java.awt.Graphics; import java.awt.image ...

  4. 随机生成验证码及python中的事务

    1.随机生成验证码 # import random # print(random.random()) #-1的小数 # print(random.randint(,)) #包括1和3 # print( ...

  5. js随机生成验证码以及随机颜色

    Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...

  6. 随机生成验证码（JS）

    效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所 ...

  7. 使用Servlet动态生成验证码

    最近在重新看了一遍servlert,看到篇优质博客推荐给大家:https://www.cnblogs.com/xdp-gacl/p/3798190.html 顺便把学习过程中的知识记录下来. 今天是如 ...

  8. php随机生成验证码代码

    <?php session_start(); //产生一个随机的字符串验证码 $checkcode=""; for ($i=0;$i<4;$i++){ $checkco ...

  9. JavaWeb学习记录（五）——Servlet随机产生验证码

    随机产生验证码的工具类: import java.awt.Color;import java.awt.Graphics;import java.awt.image.BufferedImage;impo ...

  10. .Net (MVC) 随机生成验证码

    以前一直对C#的GDI画图部分知识点不怎么用所以忘得差不多了,这两天正好公司要做一个博客系统,其中一个需求就是留言时为了防止恶意攻击必须填写验证码,正好借着这个机会复习了一下,以下是实现代码,写的比较 ...

随机推荐

  1. MassTransit | 基于StateMachine实现Saga编排式分布式事务

    什么是状态机 状态机作为一种程序开发范例,在实际的应用开发中有很多的应用场景,其中.NET 中的async/await 的核心底层实现就是基于状态机机制.状态机分为两种:有限状态机和无限状态机,本文介 ...

  2. 巧用视觉障眼法，还原 3D 文字特效

    最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特别好实现,但是,如果仅仅只 ...

  3. [python]《Python编程快速上手:让繁琐工作自动化》学习笔记7

    1. 用GUI 自动化控制键盘和鼠标第18章 (代码下载) pyautogui模块可以向Windows.OS X 和Linux 发送虚拟按键和鼠标点击.根据使用的操作系统,在安装pyautogui之前 ...

  4. Apache Kafka 的基本概念

    基本概念 主题 Topic topic 是 Kafka 最基础的组织单位,类似于关系数据库中的数据表.做为使用 kafka 的开发者,你最应该考虑的是和 topoc 相关的抽象.创建不同的 topic ...

  5. [C++Primer] 第二章 变量和基本类型

    第二章 变量和基本类型 引用 引用定义的时候必须初始化. 引用初始化之后无法重新绑定到其它对象上. 引用本身并不是对象,所以没有指向引用的引用(不管如何多层引用,引用的还是源对象) 下面用一个简单的例 ...

  6. [C++]C++11：Function与Bind

    std::function 它是函数.函数对象.函数指针.和成员函数的包装器,可以容纳任何类型的函数对象,函数指针,引用函数,成员函数的指针. 以统一的方式处理函数.函数对象.函数指针.和成员函数. ...

  7. 【总结笔记】全志平台 Linux ASOC 框架浅析

    ASOC 各部分框图示意 Platform 一般由 SOC 芯片原厂负责编写,主要涉及到 SOC 内部数字音频接口DAI(I2S)和 DMA 的寄存器配置. Codec 一般由硬件方案的驱动工程师或者 ...

  8. 通过一个示例形象地理解C# async await 非并行异步、并行异步、并行异步的并发量控制

    前言 接上一篇 通过一个示例形象地理解C# async await异步 我在 .NET与大数据 中吐槽前同事在双层循环体中(肯定是单线程了)频繁请求es,导致接口的总耗时很长.这不能怪前同事,确实难写 ...

  9. Opengl ES之踩坑记

    前因 最近在尝试使用Opengl ES实现一些LUT滤镜效果,在实现这些滤镜效果的时候遇到一些兼容性的坑,踩过这些坑后我希望把这几个坑分享给读者朋友们, 希望同在学习Opengl ES的朋友们能少走弯 ...

  10. python_变量类型

    列表:用[]标识,可以用下标进行访问,可以更改值 List = [123,'book'] print List 元组:用()标识,可以用下标进行访问,但是不能更改元素值,相当于只读 tuple = ( ...