2.登录退出，登录状态检查，验证码

一：验证码

Kaptcha是一个非常实用的验证码生成工具，可以通过配置生成多样化的验证码。以图片的形式显示，从而无法进行复制粘贴。

服务器利用Kaptcha验证码生成器，先生成随机的文本，再将文本创建为图片，将文本text存到session中，将图片输出给浏览器

UUID：Universally Unique Identifier，通用唯一识别码，目的是让分布式系统中的所有元素都能有唯一的识别信息。

验证码模块kaptcha插件：先生成text，再将text封装成image，将图片输出给浏览器，生成一个随机的UUID，作为当前验证码的归属kaptchaOwner，附在cookie中。以该UUID为key，text为value，存在Redis中，过期时间设为60s。

验证时，通过@CookieValue（“/kaptchaOwner”获得kaptchaOwner），去Redis里查text是否和用户输入的一致，若一致，再去校验用户名和密码；

导入依赖：

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

1.新建config包，在该包下新建类：KaptchaConfig。配置验证码的字体大小颜色

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;
//做@configuration 配置注解标注
//@Bean 让其被spring 容器管理
 

@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","com.google.code.kaptcha.impl.NoNoise");
 
        DefaultKaptcha kaptcha = new DefaultKaptcha();
        Config config = new Config(properties);
        kaptcha.setConfig(config);
 
        return kaptcha;
    }
}

2.LoginController里单独写一个方法，向浏览器返回生成的验证码图片

@Autowired
@Qualifier("kaptchaProducer")
private Producer kaptchaProducer;

@GetMapping("/kaptcha")
public void getKaptcha(HttpServletResponse response, HttpSession session){
    //生成验证码
    String text = kaptchaProducer.createText();
    BufferedImage image = kaptchaProducer.createImage(text);
 
    //将验证码存入Session
    session.setAttribute("kaptcha",text);
 
    //将图片输出给浏览器
    response.setContentType("image/jpg");
    try {
        OutputStream stream = response.getOutputStream();
        ImageIO.write(image,"jpg",stream);
    } catch (IOException e) {
        logger.error("响应验证码失败："+e.getMessage());
    }

}

3.将动态生成的验证码的图片配置到login.html中

4.用js实现，点击超链接就可以实现动态刷新功能

刷新验证码按钮：
<div class="col-sm-4">
	<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>
</div>

刷新按钮对应的方法：
<script>
		function refresh_kaptcha(){
			var path = CONTEXT_PATH + "/kaptcha?p="+Math.random();
			$("#kaptcha").attr("src", path);
		}
</script>

二：登录、退出

1.点击顶部区域的链接，打开登录页面。

 2.验证账号、密码、验证码；

成功时：生成登录凭证，发送给客户端；

失败时：跳转回登录页。

登录凭证对应的表：login_ticket

字段：id、user_id、ticket字符串凭证（也就是登录口令，UUID生成）、status当前是否过期（0有效1无效）、expired过期时间

具体操作：

①在entity目录下新建LoginTicket类

	private int id;
    private int userId;
    private String ticket;
    private int status;
    private Date expired;

②在dao下新建接口LoginTickerMapper用来对表进行增删改查的操作（写完测试方法后最好先测试一波）

 //这里的SQL语句没有写mapper对应的xml文件，而是采用了注解的方式
>首先还是@Mapper注解定义接口
>按照之前的方法写好抽象方法，插入登录口令
>在方法上加@Insert注解，对应insert方法，可以将sql语句拆分成多个字符串，同样#{}从变量中取值
>@Options使用主键自增

@Mapper
public interface LoginTicketMapper {
    //插入数据
    @Insert({
            "insert into login_ticket (user_id, ticket, status, expired) ",
            "values (#{u