这一部分的主要内容是开发商城的认证服务。

一，211-商城业务-认证服务-环境搭建

1，创建模块

创建一个新的模块gulimall-auth-server，引入如下4个依赖：

• 开发工具DevTools
• 开发工具Lombok
• SpringWeb
• 模板引擎Thymeleaf
  

2，引入相关依赖

<dependency>
            <groupId>com.atguigu.gulimall</groupId>
            <artifactId>gulimall-common</artifactId>
            <version>0.0.1-SNAPSHOT</version>
            <exclusions>
                <exclusion>
                    <groupId>com.baomidou</groupId>
                    <artifactId>mybatis-plus-boot-starter</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

引入common依赖，注意要排除对mybatis的依赖，因为这个模块需要操作我们自己的数据库。

3，各种配置

3.1 注册中心配置

server.port=20000
spring.application.name=gulimall-auth-server
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

3.2 启用注册中心

启动类上加注解@EnableDiscoveryClient。

3.3 本节域名配置

后续使用auth.gulimall.com访问服务，所以要配置域名映射。

4，页面模板

4.1 html模板

将课程提供的登录相关的两个页面模板复制到资源目录下的templates目录。

4.2 静态资源上传到nginx

静态资源上传到nginx的html/login和html/reg目录下。

5，网关配置

网关将域名为auth.gulimall.com的请求转发到登录服务。

        - id: auth-server-route
          uri: lb://gulimall-auth-server
          predicates:
            - Host=auth.gulimall.com

二，212-商城业务-认证服务-好玩的验证码倒计时

1，首页跳转到登录和注册页面

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

2，模板配置简化

使用了Thymeleaf模板引擎，访问页面时，需要提供一个接口指定对应的模板，如下所示。

这种配置接口非常简单，只是指定了一个目标，有很多冗余代码，最好是可以通过配置的方式。

可以通过实现WebMvcConfigurer 接口，简单配置即可实现指定模板的功能。

@Configuration
public class GulimallWebConfig implements WebMvcConfigurer {

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

3，验证码重发倒计时

注册时，需要使用到发送验证码的功能，为了防止客户频繁重复点击发生验证码，设置下一次发送必须在60秒之后，开发一个倒计时功能实现这个需求。

这个功能的实现只需要前端使用JS的setTimeout函数即可实现。

	function timeoutChangeStyle() {
    	$("#sendCode").attr("class","disabled");
    	if(num == 0) {
			$("#sendCode").text("发送验证码");
			num = 60;
			$("#sendCode").attr("class","");
		} else {
			var str = num + "s 后再次发送";
			$("#sendCode").text(str);
			setTimeout("timeoutChangeStyle()",1000);
		}
		num --;
	}

代码定义了一个名为timeoutChangeStyle的函数，其主要功能是控制一个HTML元素（ID为sendCode）的文字显示和禁用状态，用于实现发送验证码后的倒计时功能。

核心功能和函数说明如下：

1. 函数名称:

   • timeoutChangeStyle: 这个函数负责更新按钮的文字和禁用状态。

2. 功能描述:

   • 当按钮第一次被点击时，按钮文字会变为“发送验证码”，并且按钮会被禁用（即添加disabled类），开始倒计时。
   • 倒计时从60秒开始，每过一秒按钮的文字会更新为剩余秒数加上“s 后再次发送”这样的格式。
   • 每次更新后，函数会通过setTimeout安排自身在下一秒再次执行，直到倒计时结束。
   • 当倒计时结束后，按钮的文字恢复为“发送验证码”，按钮的禁用状态也会解除（移除disabled类）。

3. 变量说明:

   • num: 一个全局变量（虽然在代码片段中没有声明为全局，但在实际使用中应该在外部定义为全局变量），用于记录剩余秒数。初始值设为0，当按钮首次被点击时会被重置为60。