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

• 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，就可以看到生成的图片。刷新会更新。

• 让其在页面显示，修改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>
            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（属性名，值）.  $（）注意是小括号（），不是大括号{}