社交项目（六）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情 java环境搭建

验证码插件使用

1.pom引入依赖

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2.applicationContext.xml配置

<bean id="katpchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
    <property name="config">
        <bean class="com.google.code.kaptcha.util.Config">
            <constructor-arg>
                <props>
                    <!--验证码图片不生成边框-->
                    <prop key="kaptcha.border">no</prop>
                    <!-- 验证码图片宽度为120像素 -->
                    <prop key="kaptcha.image.width">120</prop>
                    <!-- 验证码图片字体颜色为蓝色 -->
                    <prop key="kaptcha.textproducer.font.color">blue</prop>
                    <!-- 每个字符最大占用40像素 -->
                    <prop key="kaptcha.textproducer.font.size">40</prop>
                    <!-- 验证码包含4个字符 -->
                    <prop key="kaptcha.textproducer.char.length">4</prop>
                </props>
            </constructor-arg>
        </bean>
    </property>
</bean>

3.验证码控制器

@Resource
private Producer kaptchaProducer;
@GetMapping("/verify_code")
public void createVerifyCode(HttpServletRequest request, HttpServletResponse response){
    response.setDateHeader("Expires",0);
    response.setHeader("Cache-Control","no-store,no-cache,must-revalidate");
    response.setHeader("Cache-Control","post-check=0,pre-check=0");
    response.setHeader("Pragma","no-cache");
    response.setContentType("image/png");
    String verifyCode = kaptchaProducer.createText();
    request.getSession().setAttribute("kaptchaVerifyCode",verifyCode);
    System.out.println(request.getSession().getAttribute("kaptchaVerifyCode"));
    BufferedImage image = kaptchaProducer.createImage(verifyCode);
    try {
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(image,"png",out);
        out.flush();
        out.close();
    } catch (IOException e) {
        throw new RuntimeException(e);
    }

}

代码说明：

• response.setHeader:设置返回头部缓存信息
• response.setContentType:设置返回头部内容类型
• kaptchaProducer.createText():生成验证码
• request.getSession().setAttribute():验证码存入session
• BufferedImage image = kaptchaProducer.createImage(verifyCode):验证码生成图片
• ServletOutputStream out = response.getOutputStream():获取输出流
• ImageIO.write(image,"png",out):输出到图片
• out.flush():清空输出流
• out.close():关闭输出流

4.资源引入

5.重启项目

访问:http://localhost:8080/verify_code

6.验证码页面开发

点击图片刷新验证码

function reloadVerifyCode(){
    //请在这里实现刷新验证码
    $("#imgVerifyCode").attr("src","/verify_code?ts="+new Date().getTime());
}

代码说明:

• $("#imgVerifyCode").attr():设置src属性

7.设置member控制器

@Controller
public class MemberController {
    @GetMapping("/register.html")
    public ModelAndView showRegister(){
        return new ModelAndView("/register");
    }
    @PostMapping("/registe")
    @ResponseBody
    public Map registe(String vc, String userName, String password, String nickName, HttpServletRequest request){
        Map result = new HashMap<>();
        String verifyCode = (String) request.getSession().getAttribute("kaptchaVerifyCode");
        if(vc==null || verifyCode==null || !verifyCode.equalsIgnoreCase(vc)){
            result.put("code","vc01");
            result.put("msg","验证码错误");
        }else {
            result.put("code",0);
            result.put("msg","注册成功");
        }
        return  result;
    }
}

8.重启项目