验证码-简单实现-低调大师

验证码-简单实现

2019-07-17 471

验证码:

创建缓存图片：指定宽width=90,height=30
获取画笔对象
设置画笔颜色
填充矩形区域
从字符数组中随机得到字符 char[] arr = { ‘A’, ‘B’, ‘C’, ‘D’, ‘N’, ‘E’, ‘W’, ‘b’, ‘o’, ‘y’, ‘1’, ‘2’, ‘3’, ‘4’,‘5’,‘6’ };
循环4次，画4个字符
设置字的颜色为随机
设置字体，大小为18，
将每个字符画到图片，x增加，y不变。10+(i*20), 20
线的位置是随机的，x范围在width之中，y的范围在height之中。
画8条干扰线，每条线的颜色不同
将缓存的图片输出到响应输出流中
验证码Servlet代码
@WebServlet(name = "PicCodeServlet", urlPatterns = "/code")
public class PicCodeServlet extends HttpServlet {

//创建一个随机类
private Random ran = new Random();

//写一个方法随机生成一种颜色
private Color getRandomColor() {
    //随机生成0~255之间的数
    int red = ran.nextInt(256);
    int green = ran.nextInt(256);
    int blue = ran.nextInt(256);
    //红，绿，蓝
    return new Color(red, green, blue);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1. 创建缓存图片
    int width = 90, height = 30;
    //参数：宽，高，图片模式
    BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    //2. 获取画笔对象
    Graphics graphics = img.getGraphics();
    //3. 设置画笔颜色
    graphics.setColor(Color.WHITE);
    //4. 填充矩形区域
    graphics.fillRect(0, 0, width, height);
    //5. 从字符数组中随机得到字符
    char[] arr = { 'A', 'B', 'C', 'D', 'N', 'E', 'W', 'b', 'o', 'y', '1', '2', '3', '4','5','6' };
    //6. 循环4次，画4个字符
    for (int i = 0; i < 4; i++) {
        //7. 设置字的颜色为随机
        graphics.setColor(getRandomColor());
        //8. 设置字体，大小为18
        graphics.setFont(new Font(Font.SANS_SERIF,Font.BOLD+Font.ITALIC,19));
        //随机得到下标
        int index = ran.nextInt(arr.length);
        char c = arr[index];  //随机得到一个字符
        //9. 将每个字符画到图片，x增加，y不变。
        graphics.drawString(String.valueOf(c),10+(i*20), 20);
    }
    //11. 画8条干扰线，每条线的颜色不同
    for (int i = 0; i < 8; i++) {
        //10. 线的位置是随机的，x范围在width之中，y的范围在height之中。
        int x1 = ran.nextInt(width);
        int y1 = ran.nextInt(height);
        int x2 = ran.nextInt(width);
        int y2 = ran.nextInt(height);
        graphics.setColor(getRandomColor());
        graphics.drawLine(x1,y1,x2,y2);
    }
    //12. 将缓存的图片输出到响应输出流中
    //参数：图片对象,图片格式，输出流
    ImageIO.write(img,"jpg",response.getOutputStream());
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    this.doPost(request, response);
}

}
登录是用来校验效果怎么样，你们也可以直接拿到自己的项目里试试效果，这个登录页面随便找的一个校验的，页面效果比较丑，还有些样式没有导进来。


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录页面</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container" style="max-width:400px">
        <h3 style="text-align: center">用户登录</h3>
        <form action="login" method="post" >
            <div class="form-group">
                <label for="name">用户名：</label>
                <input type="text" name="name" class="form-control" id="name" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
            </div>
            <div class="form-inline">
                <label for="vcode">验证码：</label>
                <input type="text" name="vcode" class="form-control" id="vcode" placeholder="验证码" style="width: 70px" maxlength="4"/>&nbsp;
                <!--验证码-->
                <img id="imgCode" src="code" style="width: 90px; height: 30px; cursor: pointer;" title="看不清，点击刷新">
                <script type="text/javascript">
                    //图片点击事件
                    document.getElementById("imgCode").onclick = function () {
                         this.src = "code?t=" + new Date().getTime();
                    };
                </script>
            </div>
            <div style="text-align: center; padding-top: 20px;">
                <input type="submit" value=" 登 录 " class="btn btn-primary"/>
            </div>
        </form>
        </div>
  </body>
</html>

微信关注我们

原文链接：https://yq.aliyun.com/articles/709687

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Python3入门（十四）正则表达式

正则表达式是一个特殊的字符序列，它能帮助你方便的检查一个字符串是否与某种模式匹配。Python自1.5版本起增加了re模块，它提供Perl风格的正则表达式模式。re模块使Python语言拥有全部的正则表达式功能。compile函数根据一个模式字符串和可选的标志参数生成一个正则表达式对象。该对象拥有一系列方法用于正则表达式匹配和替换。re模块也提供了与这些方法功能完全一致的函数，这些函数使用一个模式字符串做为它们的第一个参数。本文将给大家介绍Python中常用的正则表达式处理函数一、正则表达式修饰符-可选标志正则表达式可以包含一些可选标志修饰符来控制匹配的模式。修饰符被指定为一个可选的标志。多个标志可以通过按位OR(|)它们来指定。如re.I | re.M被设置成I和M标志修饰符描述 re.I 使匹配对大小写不敏感 re.L 做本地

2019-07-18

744

一、为什么要使用Session共享？稍大一些的网站，通常都会有好几个服务器，每个服务器运行着不同功能的模块，使用不同的二级域名，而一个整体性强的网站，用户系统是统一的，即一套用户名、密码在整个网站的各个模块中都是可以登录使用的。各个服务器共享用户数据是比较容易实现的，只需要在后端放个数据库服务器，各个服务器通过统一接口对用户数据进行访问即可。但还存在一个问题，就是用户在这个服务器登录之后，进入另一个服务器的别的模块时，仍然需要重新登录，这就是一次登录，全部通行的问题，映射到技术上，其实就是各个服务器之间如何实现共享 SESSION 数据的问题。二、了解session工作原理在解决问题之前，先来了解一下 PHP SESSION 的工作原理。在客户端（如浏览器）登录网站时，被访问的 PHP 页面可以使用 session_start()

2019-07-18

611

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。