【项目】仿牛客网社区开发第2章 Spring Boot 实践开发社区登录模块 4 生成验证码

落日映苍穹つ 2024-03-22 10:57 7阅读 0赞

### 【项目】仿牛客网社区开发 ###

#### 文章目录 ####

*   *  【项目】仿牛客网社区开发
     *   *  第2章 Spring Boot 实践 开发社区登录模块
         *   *  4 生成验证码

![在这里插入图片描述][40e24a429b8d43358af777d07e5aaac9.png_pic_center]

#### 第2章 Spring Boot 实践 开发社区登录模块 ####

##### 4 生成验证码 #####

Kaptcha

*  导入 jar 包
 *  编写 Kaptcha 配置类
 *  生成随机字符、生成图片

[https://code.google.com/archive/p/kaptcha/][https_code.google.com_archive_p_kaptcha]

![在这里插入图片描述][ae67b4fbbbe645ac91f6fa386437df84.png_pic_center]

同样搜一下jar 先

![在这里插入图片描述][74c5cc09d6244205974c522259cca248.png_pic_center]

啧，15 年的东西了

![在这里插入图片描述][b7d816fd390e4ed7b668b7652298a1a8.png_pic_center]

就这一个版本

![在这里插入图片描述][09000dd484b14a54a08a2d564db04a53.png_pic_center]

记得刷一下

配置类：

package com.nowcoder.community.config;
    
    import com.google.code.kaptcha.Producer;
    import com.google.code.kaptcha.impl.DefaultKaptcha;
    import com.google.code.kaptcha.util.Config;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    import java.util.Properties;
    
    /**
     * @Projectname: community
     * @Classname: KaptchaConfig
     * @Author: Ding Jiaxiong
     * @Date:2023/4/18 9:30
     */
    
    @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", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ");
            properties.setProperty("kaptcha.textproducer.char.length", "4");
            properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
    
            DefaultKaptcha kaptcha = new DefaultKaptcha();
            Config config = new Config(properties);
            kaptcha.setConfig(config);
            return kaptcha;
        }
    
    }

![在这里插入图片描述][48739f2c6a3044e0a833020f0998bb12.png_pic_center]

在登录页面使用这个bean ，单独写一个请求，来向浏览器返回一个图片，然后登录页面模板去引用这个接口

private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
    
        @Autowired
        private Producer kaptchaProducer;
    
    
    	@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");
            try {
        
                OutputStream os = response.getOutputStream();
                ImageIO.write(image, "png", os);
            } catch (IOException e) {
        
                logger.error("响应验证码失败:" + e.getMessage());
            }
        }

![在这里插入图片描述][92fdee932b71496d80517dfc9d0f9ccb.png_pic_center]

运行测试一下接口

![在这里插入图片描述][17473a77690b4ea99009545f61ddcf1f.png_pic_center]

没问题。

将其应用到登录页面

![在这里插入图片描述][80b5e015470a4d28902bf269ad058c08.png_pic_center]

现在这玩意儿是写死的

![在这里插入图片描述][ef60e399054449c59233d21b5af9b31f.png_pic_center]

换成我们的接口请求路径

再次运行

![在这里插入图片描述][4e2ccde50e154ad095673ebc5aae6a0c.png_pic_center]

OK， 把“刷新验证码” 的JavaScript 改过来

![在这里插入图片描述][bf5db656d45c46edb7e64cabe228ad00.png_pic_center]

方法实现：

![在这里插入图片描述][7b39cf20f15147709f01bad4cb61c0af.png_pic_center]

![在这里插入图片描述][162d977e93ca40d2be3b7dabb17028eb.png_pic_center]

> 加个参数让请求路径变一下，欺骗浏览器，让它可以真正再次访问接口

重启服务器，测试

![在这里插入图片描述][1b74c58b875e4894b487964407538b60.gif_pic_center]

没问题

[40e24a429b8d43358af777d07e5aaac9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8dc0982b501449c5b747055a18165e44.png
[https_code.google.com_archive_p_kaptcha]: https://code.google.com/archive/p/kaptcha/
[ae67b4fbbbe645ac91f6fa386437df84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4ce5306d233e4fa1a0821483b380d42b.png
[74c5cc09d6244205974c522259cca248.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5cca9c09e05046d68438c87ba3c7cdb1.png
[b7d816fd390e4ed7b668b7652298a1a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/aff4f9bfe7fc469baa58ebf10bd669ce.png
[09000dd484b14a54a08a2d564db04a53.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/443a5ce109334a6882f9c96a776138d1.png
[48739f2c6a3044e0a833020f0998bb12.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c46593dc613a4ab8b4adfef1ff2a9ade.png
[92fdee932b71496d80517dfc9d0f9ccb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/69176aebf4524585a0b0c36924cdaf55.png
[17473a77690b4ea99009545f61ddcf1f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9e6ac801eb8e4c818ae0e7ee4b855c1a.png
[80b5e015470a4d28902bf269ad058c08.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/023de5913bd947f69fb9fb46495a7b65.png
[ef60e399054449c59233d21b5af9b31f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6c8bbbf6634548ecbcfd959aa9292437.png
[4e2ccde50e154ad095673ebc5aae6a0c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/83e8f043c4874e82a6a36ff758ed2003.png
[bf5db656d45c46edb7e64cabe228ad00.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/24a6e153df4747f6beec3971fc8657bb.png
[7b39cf20f15147709f01bad4cb61c0af.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b03bdc1c8573429cbcbec303f727655a.png
[162d977e93ca40d2be3b7dabb17028eb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ddb3a2143704423ebd7db7ca0e21322b.png
[1b74c58b875e4894b487964407538b60.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bb70adcfd584421fba3e1863cce41dcd.png