day132-商城业务-认证服务-登录注册路径映射+好玩的验证码倒计时前端实现

最新推荐文章于 2022-04-27 07:00:00 发布

我才是真的封不觉

最新推荐文章于 2022-04-27 07:00:00 发布

阅读量243

点赞数 1

分类专栏：谷粒商城 JS 文章标签：认证服务验证码倒计时前端实现登录注册路径映射 js定时

本文链接：https://blog.csdn.net/JavaCoder_juejue/article/details/115604101

版权

谷粒商城同时被 2 个专栏收录

150 篇文章 27 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

1.把登录注册的链接都设置好

全局收登录注册主页把这三个链接分别改为

http://auth.gulimall.com/login.html

http://auth.gulimall.com/reg.html

http://auth.gulimall.com

2.添加mvc配置类

用来作为单纯的页面跳转就不需要在controller中写了

package com.atguigu.gulimall.auth.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author rengang
 * @version 1.0
 * @date 2021/4/11 18:38
 */
@Configuration
public class GulimallWebConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {

        registry.addViewController("/login.html").setViewName("login");
        registry.addViewController("/reg.html").setViewName("reg");

    }
}

测试发现页面都能成功跳转

3.注册页验证码倒计时前端代码实现

把span改为a标签

<a id="sendCode">发送验证码</a>

js中添加点击事件方法

$(function(){
				//点击发送验证码按钮触发下面函数
				$('#sendCode').click(function(){
					//1、倒计时 如果有disabled，说明最近已经点过，则什么都不做
					debugger
					if($(this).hasClass("disabled")){
						//正在倒计时中
					}else{
						//2、给指定手机号发送验证码
						$.get("/sms/sendcode?phone="+$("#phoneNum").val(),function(data){
							if(data.code != 0){
								alert(data.msg);
							}
						});
						setTimeout("timeoutChangeStyle()",1000);
					}
				});
			})
			var num = 60;
			function timeoutChangeStyle(){
				//开启倒计时后设置标志属性disable，使得该按钮不能再次被点击
				debugger
				$('#sendCode').attr("class","disabled");
				//当时间为0时，说明倒计时完成，则重置
				if(num == 0){
					$('#sendCode').text("发送验证码");
					num = 60;
					$('#sendCode').attr("class","");
				}else{
					//每秒调用一次当前函数，使得num--
					var str = num + "s 后再次发送";
					$('#sendCode').text(str);
					setTimeout("timeoutChangeStyle()",1000);
				}
				num--;
			}

页面效果如下