✅P212_商城业务-认证服务-好玩的验证码倒计时

视图控制器

将导入的登录页面修改为：login.html

cfmall-auth-server/src/main/java/com/gyz/cfmall/controller/LoginController.java

@Controller
public class LoginController {

    private static final Logger log = LoggerFactory.getLogger(LoginController.class);

    @GetMapping("/login.html")
    public String loginPage() {
        return "login";
    }

    @GetMapping("/reg.html")
    public String regPage() {
        return "reg";
    }
}

如果编写一个接口仅仅是为了跳转页面，没有数据的处理，如果这样的跳转接口多了则可以使用SpringMVC的 View Controller(视图控制器) 将请求与页面进行绑定。

package com.gyz.cfmall.config;

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

@Configuration
public class CfMallWebConfig implements WebMvcConfigurer {

    /**
     * 视图映射:发送一个请求，直接跳转到一个页面
     *
     * @GetMapping("/login.html")
     * public String loginPage(){
     *     return "login";
     * }
     * @param registry
     */
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // @GetMapping("/login.html") -> "/login.html"
        // return "login" -> "login"
        registry.addViewController("/login.html").setViewName("login");
        registry.addViewController("/reg.html").setViewName("reg");
    }
}

为了页面修改能实时看到效果，关闭thymeleaf的缓存

cfmall-auth-server/src/main/resources/application.properties

spring.thymeleaf.cache=false

---

修改页面跳转路径

修改首页、注册页、登录页跳转路径

点击谷粒商城正确跳转首页

修改页面：cfmall-auth-server/src/main/resources/templates/index.html

点击立即注册跳转注册页面

修改页面：cfmall-auth-server/src/main/resources/templates/index.html

<h5 class="rig">
	<img src="/static/login/JD_img/4de5019d2404d347897dee637895d02b_25.png" />
	<span><a href="http://auth.cfmall.com/reg.html">立即注册</a></span>
</h5>

首页点击登录跳转登录页面、点击注册跳转注册页面

cfmall-product/src/main/resources/templates/index.html

<li>
    <a href="http://auth.cfmall.com/login.html">你好，请登录</a>
</li>
<li>
    <a href="http://auth.cfmall.com/reg.html" class="li_2">免费注册</a>
</li>

点击请登录跳转登录页面

cfmall-auth-server/src/main/resources/templates/reg.html

<header>
    <a href="http://cfmall.com/"
       class="logo"><img src="/static/register/img/logo1.jpg" alt=""></a>
    <div class="desc">欢迎注册</div>
    <div class="dfg">
        <span>已有账号？</span>
        <a href="http://auth.cfmall.com/login.html">请登录</a>
    </div>
</header>

点击左上角谷粒商城图标跳转首页页面

---

验证码倒计时函数

cfmall-auth-server/src/main/resources/templates/reg.html

为sendCode绑定点击事件

setTimeout()简介

经测试发现问题：当60s有效期过后，再次点击几次，多个事件会叠加在一起，导致验证码倒计时速度明显加快。

解决方案： 当被点击之后为class值添加disabled，判断class的值是否可点击

最终sendCode函数如下：

// 验证码倒计时60s
$(function () {
	$("#sendCode").click(function () {
		//2、倒计时
		if ($(this).hasClass("disabled")) {
			//正在倒计时中
		} else {
			timeoutChangeStyle();
		}
	});
});
var num = 60;
function timeoutChangeStyle() {
	$("#sendCode").attr("class","disabled");
	if(num == 0) {
		$("#sendCode").text("发送验证码");
		num = 60;
		$("#sendCode").attr("class","");
	} else {
		var str = num + "s 后再次发送";
		$("#sendCode").text(str);
		num --;
		//每隔一秒调用timeoutChangeStyle()
		setTimeout("timeoutChangeStyle()",1000);
	}
};