自动生成验证码方法

自动生成验证码方法

1. 前端显示html代码

 <div class="layui-form-item">
            <label class="layui-form-label">验证码：</label>

            <div class="layui-input-inline">
                <input type="text" name="code" class="layui-input" lay-verify="code" placeholder="验证码"/>
                
            </div>
        </div>
        
        
         <div class="layui-form-item">
            <label class="layui-form-label">刷新图片：</label>

            <div class="layui-input-inline">
                <img src="${pageContext.request.contextPath }/verify/regist.do" onClick="myRefersh(this)">                
            </div>
        </div>

2.前端代码js代码

 //点击图片刷新
function myRefersh( e ) {
	
	const source = e.src ; // 获得原来的 src 中的内容
	//console.log( "source : " + source  ) ;
	
	var index = source.indexOf( "?" ) ;  // 从 source 中寻找 ? 第一次出现的位置 (如果不存在则返回 -1 )
	//console.log( "index : " + index  ) ;
	
	if( index > -1 ) { // 如果找到了 ?  就进入内部
		var s = source.substring( 0 , index ) ; // 从 source 中截取 index 之前的内容 ( index 以及 index 之后的内容都被舍弃 )
		//console.log( "s : " + s  ) ;
		
		var date = new Date(); // 创建一个 Date 对象的 一个 实例
		var time = date.getTime() ; // 从 新创建的 Date 对象的实例中获得该时间对应毫秒值
		e.src = s + "?time=" + time ; // 将 加了 尾巴 的 地址 重新放入到 src 上
		
		//console.log( e.src ) ;
	} else {
		var date = new Date();
		e.src = source + "?time=" + date.getTime();
	}
	
}

3.后台java代码

//验证码验证
		@RequestMapping("/verify/regist.do")
		public void service(HttpServletRequest request,HttpSession session,HttpServletResponse response) {
			// 从请求中获得 URI ( 统一资源标识符 )
			String uri = request.getRequestURI();
			System.out.println("hello : " + uri);
		 
			final int width = 180; // 图片宽度
			final int height = 60; // 图片高度
			final String imgType = "jpeg"; // 指定图片格式 (不是指MIME类型)
			OutputStream output;
			try {
				output = response.getOutputStream();
				// 获得可以向客户端返回图片的输出流
				// (字节流)
				// 创建验证码图片并返回图片上的字符串
				String code = GraphicHelper.create(width, height, imgType, output);
				System.out.println("验证码内容: " + code);
				
				// 建立 uri 和 相应的 验证码 的关联 ( 存储到当前会话对象的属性中 )
				session.setAttribute("codeNumber", code);
				
				//System.out.println(session.getAttribute(uri));

			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} 
		}

4.感谢你的浏览访问

工作几年，略有心得，然很少整理成文，平常工作中浏览了不少道友的好文章，受益良多。
顾也开始写一些文章， 希望能与各位道友分享进步 ！！！！
如果有用，欢迎各位点赞评论，若有不足，亦可指正！！！