Java Web 项目学习（二）生成验证码

2021-11-24 02:02:18

Kaptcha导入jar包

编写Kaptcha配置类,在Config包下（配置图片长宽、字的个数、范围、颜色、干扰的点、线）

@Configuration
public class KaptchaConfig {

    @Bean
    public Producer kaptchaProducer (){ //实例化接口

        Properties properties = new Properties();
        properties.setProperty("kaptcha.image.width","100");
        properties.setProperty("kaptcha.image.height","40");
        properties.setProperty("kaptcha.textproducer.font.size","32");
        properties.setProperty("kaptcha.textproducer.font.color","0,0,0");
        properties.setProperty("kaptcha.textproducer.char.string","0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz");
        properties.setProperty("kaptcha.textproducer.char.length","4");
        //properties.setProperty("kaptcha.noise.impl","4");//设置干扰的噪声类
        properties.setProperty("kaptcha.noise.impl","com.google.code.kaptcha.impl.NoNoise");


        DefaultKaptcha kaptcha = new DefaultKaptcha();
        Config config = new Config(properties);
        //Config 需要传入Properties对象<k,V >类似Map.所有的对象都是config去配的， 但是config依赖Properties对象
        kaptcha.setConfig(config);
        return kaptcha;

    }
}

生成随机字符串、生成图片
Ctrl+Alt+T Surrond with （try-catch）

    private static final Logger logger =         LoggerFactory.getLogger(LoginController.class);
    @Autowired
    private UserService userService;
    @Autowired
    private Producer kaptchaProducer;
　　/**
     * 生成验证码的方法
     * 返回值是void 向浏览器输出的是一个图片，不是字符串也不是一个网页。
     * 需要自己手动的向浏览器输出。需要用Response。
     * 生成验证码后，服务端需要记住，对再次登录时，验证 验证码是否正确。
     * 不能存浏览器端，容易被盗取(敏感信息) 跨请求，Cookie或者Session————Session
     */
    @RequestMapping(path="/kaptcha", method = RequestMethod.GET)
    public void getKaptcha(HttpServletResponse response, HttpSession session){
        //生成验证码
        String text = kaptchaProducer.createText();
        BufferedImage image = kaptchaProducer.createImage(text);
        //将验证码存入Session ，便于以后使用
        session.setAttribute("kaptcha",text);
        //将图片输出给浏览器
        response.setContentType("image/png"); //声明给浏览器返回的是什么格式的数据
        //response获取输出流
        try {
            //response.getWriter();//获取字符流
            OutputStream stream =response.getOutputStream();//获取字节流,图片，比较好一点
            ImageIO.write(image,"png",stream);
            //可不用关闭，因为整个流都是由Response去维护的，会自动关
        } catch (IOException e) {
            logger.error("响应验证码失败："+e.getMessage());
        }
    }

这访问http://localhost:8080/community/kaptcha，就可以看到生成的图片。刷新会更新。 Java Web 项目学习（二）生成验证码

让其在页面显示，修改HTML文件

修改对应的src

刷新页面通过js实现的。指定id；定义javascript:refresh_kaptcha()函数，在尾部写。

<img th:src="@{/kaptcha}" id= "kaptcha" style="width:100px;height:40px;" class="mr-2"/>
<a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>

javascript:refresh_kaptcha()函数,(非原生JS)
```
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script>
        function  refresh_kaptcha(){
            var path= CONTEXT_PATH + "kaptcha?p="+Math.random();
            ${"#kaptcha"}.attr("src",path);
        }
</script>
```
- 直接采用 var path = "/communiy/kaptcha" 不利于以后修改，因此在global.js中的定义 var CONTEXT_PATH = "/community" 因为global在任何页面都引用了，因此可以直接用。
- "kaptcha?p="+Math.random(); 欺骗浏览器，认为变了。原始img 的src=/community/kaptcha ,更改后的src 同样不变的话，浏览器可能认为相同资源不进行刷新。因此定义随机参数不使用。只为了让浏览器刷新。
- ${"#kaptcha"}.attr("src",path); #是Id选择器,修改属性attr（属性名，值）

码农公寓

Kaptcha导入jar包

相关文章