1.配置redis依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
2.配置yaml文件
redis:
port: 6379
host: localhost
3.创建redisConfig配置类
@Configuration
public class RedisConfig {
@Bean
//绑定yaml配置
@ConfigurationProperties(prefix = "redis")
public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
//创建RedisTemplate模板
RedisTemplate<String, Object> template = new RedisTemplate<>();
//关联redisConnectionFactory
template.setConnectionFactory(redisConnectionFactory);
//创建序列化类
GenericToStringSerializer genericToStringSerializer = new GenericToStringSerializer(Object.class);
//序列化类,对象映射设置
//设置value的转化格式和key的转化格式
template.setValueSerializer(genericToStringSerializer);
template.setKeySerializer(new StringRedisSerializer());
template.afterPropertiesSet();
return template;
}
}
4.前端部分,一个简单的测试表单
<form id="code_form" class="navbar-expand-sm">
<input type="text" placeholder="请输入手机号" th:name="phone_no">
<button type="button" id="sendCode">发送验证码</button><br>
<font id="countdown" color="red"></font>
<br><input type="text" placeholder="请填写验证码" th:name="verify_code">
<button type="button" id="verifyCode">确定</button><br>
<font id="result" color="green"></font>
<font id="error" color="red"></font>
</form>
<script type="text/javascript">
//verifyCode
var t = 120;//设置倒计时时间
var interval;
function refer(){
$("#countdown").text("请于"+t+"秒内填写验证码");//显示倒计时
t--;//计时器递减
if(t<=0){
clearInterval(interval);
$("#countdown").text("验证码已失效请重新发送!");
}
}
$(function (){
$("#sendCode").click(function (){
$.post("/sendCode",$("#code_form").serialize(),function (data){
if (data == "true"){
t = 120;
clearInterval(interval);
interval = setInterval("refer()",1000);//启动一秒定时
}else if (data == "limit"){
clearInterval(interval);
$("#countdown").text("单日发送超过次数");
$("#sendCode").attr('disabled',true);
}
})
})
})
$("#verifyCode").click(function (){
$.post("/verifyCode",$("#code_form").serialize(),function (data){
if (data == "true"){
$("#result").attr("color","green");
$("#result").text("验证成功!");
clearInterval(interval);
$("countdown").text("");
}else {
$("#result").attr("color","red");
$("#result").text("验证失败!");
}
})
})
5.控制层
//注入redis配置类
@Autowired
private RedisTemplate redisTemplate;
@RequestMapping("/sendCode")
@ResponseBody
public String sendCode(String phone_no){
//获取随机验证码
String code = getCode(6);
//拼接 验证码的 key
String codeKey = "verifyCode:" + phone_no + ":code";
//拼接 发送次数的 key
String countKey = "verifyCode" + phone_no + ":count";
String count = (String) redisTemplate.boundValueOps(countKey).get();
//获取key的自增后的值
RedisAtomicLong redisAtomicLong = new RedisAtomicLong(countKey, redisTemplate.getConnectionFactory());
long countLong = redisAtomicLong.incrementAndGet();
System.out.println(countLong);
//判断时候是第一次
if (countLong == 0) {
redisTemplate.boundValueOps(countKey).set(1);
}else if (countLong >3){
return "limit";
}
//向redis中存储,以手机号为键
redisTemplate.boundSetOps(codeKey).add(code);
System.out.println(redisTemplate.boundSetOps(codeKey).members());
//设置过期时间
redisTemplate.expire(codeKey,2, TimeUnit.MINUTES);
return "true";
}
@RequestMapping("/verifyCode")
@ResponseBody
public String verifyCode(String phone_no,String verify_code){
String codeKey = "verifyCode:" + phone_no + ":code";
String countKey = "verifyCode:" + phone_no + ":count";
Set<String> members = redisTemplate.boundSetOps(codeKey).members();
//判断存储的验证码是否包含输入的验证码
if (members.contains(verify_code)){
return "true";
}
return "false";
}
//设置一个随机生成验证码的工具类
public String getCode(int length){
String code = "" ;
Random random = new Random();
for (int i = 0; i < length; i++) {
int rand = random.nextInt(10);
code += rand;
}
return code;
}
6.思路
同时后台显示的是发送次数和验证码
在120秒内输入正确的验证码