发布时间:2024-06-13 15:01
html { background: #efefef; }
p { position: relative;height: 1rem;width: 90%; margin: 0 auto;border-bottom: 1px solid lightgray; }
p input { outline: none;text-indent: 0.4rem;font-size: 0.3rem;height: 100%;width: 100%;background: rgba(0,0,0,0); }
p span { display: inline-block;font-size: 0.3rem;color: gray;position: absolute;top: 0.35rem;right: 0.3rem; }
.login { width: 80%;height: 1rem;line-height: 1rem;text-align: center;background: #D81E06;color: #fff;font-size: 0.3rem;margin: 0.5rem auto 0;border-radius: 0.1rem; }
i { width: 100%;text-align: center;display: inline-block;color: gray;margin-top: 0.4rem; }
i strong { color: blue; }
var vm = new Vue({
el:\"#app\",
data:{
phone:\'\',code:\'\',count:\'\',timer:null,show:true
},
methods:{
sendSms:function(){
const TIME_COUNT = 120;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
axios.get(\'http://localhost:8080/api/customer/sengCodeNum\',{
params:{
phoneNum:this.phone
}
}).then((res) => {
if (res.data.code == 0) {
alert(\"验证码已发送到手机\")
//这里写作业2
}else{
alert(\"发送失败\")
}
})
},
login:function(){
axios.post(\'http://localhost:8080/api/customer/customerLoginAxios\',{
phoneNum:this.phone,
codeNum:this.code
}).then((res) => {
console.log(res)
if (res.data.code == 0) {
alert(\"登录成功\")
}else{
alert(\"验证码不对\")
}
})
}
}
})
@RestController @CrossOrigin(origins = \"*\")//注意: *是来自于所有的域名请求 @RequestMapping(\"/api/customer\") public class CustomerController{ @Autowired(required = false) private CustomerService customerService; @Autowired private JedisPool jedisPool; //发送验证码 @RequestMapping(\"/sengCodeNum\") public Map sendCodeNum(String phoneNum) { Map map = new HashMap(); //1.在发送验证码之前,随机撞见一个6位数的验证码 int randomNum = new Random().nextInt(999999);//0-999999 if (randomNum < 100000) { randomNum = randomNum + 100000; } //1.1在发送验证码之前 需要向redis中查询该手机 有没有验证码存在,如果存在,就直接从redis中读取,而不从阿里云发送,可以节省成本 //查询pcode这个key在不在 Boolean b = jedisPool.getResource().exists(\"phoneNum\"); if (b) { map.put(\"code\", 0); map.put(\"msg\", \"验证啊已存在,情趣短信中查询\"); return map; } else { //2.接受到前端传过来的手机号:phoneNum 对其调用 阿里云的发送短信的工具类,去发送验证码 ALSMSUtil.sendMsg(phoneNum, randomNum); //3.再送之后,将手机号当做redis key,验证码当做redis value 存入到redis数据库中 String setex = jedisPool.getResource().setex(phoneNum, 120, String.valueOf(randomNum)); System.out.println(\"setex = \" + setex); jedisPool.getResource().persist(phoneNum);//注意:这里设置成-1 在线上环境测试要删除 //4.将验证码发送给前端 if (\"OK\".equals(setex)) { map.put(\"code\", 0); map.put(\"msg\", \"发送成功\"); //map.put(\"data\",randomNum);//线上不能把验证码发送前端,容易被人利用 return map; } else { map.put(\"code\", 500); map.put(\"msg\", \"发送失败\"); return map; } } } //校验手机号和验证码
@RequestMapping(\"/customerLoginAxios\") // /api/customer/customerLoginAxios public Map customerLoginAxios(@RequestBody Map map){ Map codemap = new HashMap(); //1.根据前端传来的手机号和验证码来和redis中的数据做对比 String redisCodeNum = jedisPool.getResource().get((String) map.get(\"phoneNum\"));//redis中的验证码 if(map.get(\"codeNum\").equals(redisCodeNum)){ codemap.put(\"code\",0); codemap.put(\"msg\",\"发送成功\"); return codemap; }else{ codemap.put(\"code\",500); codemap.put(\"msg\",\"发送失败\"); return codemap; } }
业务系统兼容数据库Oracle/PostgreSQL(openGauss)/MySQL的琐事
STM32 学习笔记1-智能小车-基于PWM 调速 的电机设置
mysql spring 事务_spring事务及声明式事务的使用方法
python中函数参数传递的三种方式_python中函数参数传递的几种方法
Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖
(二)docker使用——2 DockerFile和docker-compose.yml区别
<论文阅读>LVI-SAM: Tightly-coupled Lidar-Visual-Inertial Odometry via Smoothing and Mapping
翻译:对测试自动化来说,为什么说Python是非常好的(选择)WHY PYTHON IS GREAT FOR TEST AUTOMATION...
python数据分析——numpy,pandas,matplotlib
Typora 0.11.18免费版本安装使用教程(亲测可用)