day04.图片验证码

生成图片验证码

1、前端调用Controller类中 验证码方法 的路径

<div class="row">
    <label>验证码</label>
    <span>
        <input type="text" name="captcha" >
        <img src="/teacher/captcha" id="captcha">
    </span>
</div>

2、验证码方法 实现

• 获得当前的响应对象(HttpServletResponse)
• 获得可以输出验证码图片的字节流 response.getOutputStream()

    @RequestMapping( path = "/captcha" )
    public void captcha( HttpSession session ){
        System.out.println( "= = = = = captcha = = = = =" );
        // 获得当前的响应对象(HttpServletResponse)
        HttpServletResponse response = ResponseHolder.getCurrentResponse();
        try {
            // 获得可以输出验证码图片的字节流
            OutputStream output = response.getOutputStream();
            // 调用 GraphicHelper 类中的 create方法生成验证码图片并通过 output 输出该图片
            // 同时将 验证码图片上的内容 记录到一个 String 变量中
            String code = GraphicHelper.create( 6 , false , 180 , 40 , output , 50 );
            System.out.println( "生成的图片验证码内容是: " + code );
            // 将生成的验证码图片的内容保存到当前会话对象中
            session.setAttribute( "CAPTCHA" , code );// code 所对应的字符串就是需要保存的内容
        } catch ( IOException e ) {
            e.printStackTrace();
        }
    }

3、通过js实现“img验证码的点击切换照片”

（）（）立即执行的函数表达式，自执行函数表达式（IFE）

<script type="text/javascript">
    // 立即执行的函数表达式 ( IIFE )
    ( function(){
        // 注意 let 之后的 image 只是一个变量名称而已
        let image = document.querySelector( "#captcha" ); // 根据CSS选择器选择匹配的首个元素
        if( image ) { // 若 image 存在则为 true，否则就是 false
            image.setAttribute( "title" , "点击刷新验证码" ); // 为 img 元素设置 title 属性
            // 将一个函数作为取值赋值 给一个局部变量（以后该变量即可当做函数来使用）
            let action = function(){ // function 和 () 之间没有名称的函数就是 匿名函数
                let path = "/teacher/captcha?time=" + Date.now() ;
                console.log( path );
                // 当 img 元素的 src 属性变化时，浏览器认为图片发生改变就会重新加载新的图片
                image.setAttribute( "src" , path ); // 重新设置 img 元素的 src 属性
            }
            // 为 img 元素 绑定 点击事件 ( click ) 对应的处理函数 ( action )
            image.addEventListener( "click" , action , false );
        }
    } )();
</script>