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. 使用腾讯云部署war包

    目录 1.前期准备 2.springboot打war包 3.部署war包 4.导入数据库 5.修改Tomcat启动端口 6.启动服务器 7.设置腾讯云服务器防火墙规则 8.从外部访问 9.总结 10. ...

  2. [cocos2d-x]TextureCache和spriteFramecache

    SpriteFrameCache 主要服务于多张碎图合并出来的纹理图片.这种纹理在一张大图中包含了多张小图,直接通过TextureCache引用会有诸多不便,因而衍生出来精灵框帧的处理方式,即把截取好 ...

  3. 在Ubuntu上安装OpenShift并使用

    服务器信息 在阿里云买了个抢占式的服务器,地区为华南广州,系统为Ubuntu 20.04,8核16GB. 安装Docker 命令如下: $ apt-get update -y $ apt-get up ...

  4. 使用Zolom内存解析运行python脚本（不落地）

    在目标机器运行python工具 好多工具都是python写的,如果目标机器是linux的话自带python环境可以很方便的运行这些工具,但是windows下是不自带python环境的,所以一种办法是直 ...

  5. 我居然不知道Vue3可以使用hooks函数实现代码复用？

    每天都要开心(▽)哇: 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:M ...

  6. 读Java8函数式编程笔记04_类库

    1. 默认方法 1.1. 接口中定义的包含方法体的方法,方法名有default关键字做前缀 1.1.1. 在任何接口中,无论函数接口还是非函数接口,都可以使用该方法 1.2. Collection接口 ...

  7. eosio.cdt发布带来的变化

    change of version 1.3.x+,EOSIO.CDT After eos version 1.3.x, generation of cdt tools, Smart Contracts ...

  8. 【学习笔记】开源库之 - sigslot （提供该库存在对象拷贝崩溃问题的解决方案）

    介绍说明 学习 QT 的时候,觉得 QT 提供的信号槽机制非常有用,这种机制可以解决对象与对象之间通信中的耦合问题,原本想从网络上了解一下具体的实现思路用于项目中,意外的发现了用 C++ 实现的信号槽 ...

  9. 开源分布式支持超大规模数据分析型数据仓库Apache Kylin实践-上

    @ 目录 概述 定义 特性 术语 技术概念 架构和组件 生态圈 部署 Docker部署 基于hadoop环境安装 前置条件 安装 使用步骤 官方样例Cube说明 示例演示 准备演示数据 创建项目 选择 ...

  10. docker-01基本介绍

    1.docker出现的背景原因 一款产品从开发到上线,从操作系统,到运行环境,再到应用配置.作为开发+运维之间的协作我们需要关心很多东西,这也是很多互联网公司都不得不面对的问题,特别是各种版本的迭代后 ...