00:00
那接下来我们先来优化一下我们整个页面的跳转环境,那先来保证我们点鼓励商城能来到首页,也从首页能跳转到各种登录注册页,保证这些链接呢都算有效,好,我们先来到我们这个奥服务。奥服务呢,我们这有一个登录页和注册页,那我们这个登录页里边,那就是我们现在的这个页面,先来找到这个鼓励商城,我们先让它跳转到我们的整个首页,它呢在这个header里边,那么这个header里边呢,它有一个我们这个链接跳转,那我们就来搜一下CTRLF,好,那么这有一个header,这个header呢,那就是我们这个图标,整个图标当我们被点击以后,他们就会跳到这个A标签指定的位置,那这个位置呢,我们来写死HTTP冒号,那现在呢就叫鼓励mail.com,我们为了页面修改能实时得出效果,我们在这呢,关闭上我们SIM live的缓存,点一个SIM lea,好,我们把它catch先来关掉,来重启一下我们的这个server。
01:01
然后呢,我们先来确认一下我们页面的第一个跳转效果,我们跳到首页,然后呢,同样的我们从首页点登录也要能跳过来,我们先来测试一下,我来点击鼓励商城,好来刷新一下这个页面。这个页面更新完以后呢,服务启动以后,我们重新刷新来点击鼓励商城,好,现在呢,跳到我们这个首页,首页这里边呢,也有这个登录和注册两个链接,我们要跳转到我们认证服务器的登录注册页,好那么现在呢,同时来改一下我们的商品服务的这个首页,好,我们商品服务首页呢,都在这一块放着,那商品服务里边呢,首页我们来找一下这个登录注册,有一个叫你好,请登录,还有一个免费注册,来都找一下CTRLF,我们就来找一个登录。那这个登录页面要链接的地址,我们来写上HTTP,我们呢就叫author,点一个5ma.com,然后呢,由于它是登录页,我们以后呢,登录页就叫log.htmcrf9,包括这个注册页我们就叫register htm Mr,把这两个呢,我们来都来加上,这是呢reg,好。
02:12
那接下来我们就得在我们的also页面保证呢,访问log HTML能访问到我们的登录页来,现在来刷新一下我们这个页面,来确认一下你这个服务呢,刚修改完,我们等他一会儿,好,现在来刷新好,我们来测试,我们来点击登录,那链向了我们这个奥古lemail log,我们这个登录也没问题,然后呢,点击注册,我们先来保证这个地址,这个地址呢还是有问题,我们来看一下我们的注册,我们这一块呢,注册已经修改好了,那我们在这儿来重新来刷新一下,来刷新,那我们来审查元素,看一下我们的这个注册,免费注册好,我们在这儿CTRLF来找一下免费注册,确实是这个地址,来CTRLF9好页面重新编译一下,我们来测试刷新,来点击注册点好,现在呢也能跳到注册,但是呢,我们现在默认指定的这两个页面,一个是登录,一个是注册,我们就得在author这个服务里边有对应的跳转内容,那么先来到author,我们可以呢,先来写一个跳转的controltrler,好。
03:13
来在这来写一个controller controller呢,我们就叫index controller,或者我们就叫log登录和注册的controller,好,那我们就叫login controller,那这个controller呢,我就来写标上一个注解,因为我们是页面跳转,我来写上controller,我们要处理的第一个请求就是呢,别人会跳到我们这一块Logan htm Mr要跳到我们的登陆页,那么就来处理一个public string,好,我就叫Logan page,那么去登录页的我们要处理的请求,那就是get mapping,那get map呢,我们就是这个路径,那当别人发请求,我们就要跳到我们指定的位置,那指定的位置就是在timeless下边的这个登录页,那么把这个页面呢,我们就不叫index了,我们就现在就叫登录,好,那现在呢,跳到我们的登录页,后缀不用加都是好的,同样的,注册页也得有,我们把这个来写上,这是我们的注册页。
04:13
然后我们把这一块呢,也叫注册的配置,那么最终呢,要返回我们的注册页,保证呢,我们这两个性能访问过来,CTRLF9,让它项目呢,重新编译启动一下,那现在来在这来进行测试,好,那先来访问首页。走,那我们这个首页呢,有我们的登录和注册链接,我们呢先来点击登录,好,现在呢跳到我们这个页面没问题,然后呢,我们来点击注册,好现在呢是这个注册页,我们也放里边了,没问题,同意并继续这个注册页里边的内容,好我们来撤回来,那现在呢,同样的在我们这个author这个服务里边们登录页呢,也有链向注册页的地方,我们点立即注册,应该注册过去,好来到我们这个author,我们的author server,我们登录页里边,我们来找一下立即注册,CTRLF来找立即注册,好,这是我们的立即注册,立即注册呢要跳转到注册页,我们把这一块呢就去掉。
05:12
这块的链接地址现在来指向我们的HTTP,就叫O古力mail.com,好,这是我们的注册服务的注册页,地址是点HTMMRCTRLF9,把页面呢重新来编译一下,好,我们现在来刷新,我们来点击注册。好点击注册呢,能跳到这个注册页没问题。然后呢,注册页里边点击登录也能跳到登录页,那我们在注册页里边也来链接一下,来找到这个注册页,注册页里边呢,有一个叫我们的请登录,这个链接呢,是来面向登录页的,来找一下就叫请登录,好请登录的这一块链接,我们来加上我们来面向HTTP。我们的author还是我们当前这个服务鼓励email.com,我们登录的话呢,叫log.htmlctrlf9。
06:07
我们再来刷新一下我们的页面,好,注册页的页面内容我们在这儿来点一个请登录,我们来点请登录好链向登录页,在这呢,链向注册页没问题,然后呢,包括他们也能念下首页,首页呢也能念过来,好那么整个跳转呢就已经没问题了,那接下来呢,我们在注册页再来做一个效果,你们看注册页里边呢,我们要注册要填用户名,密码,还有我们确认密码,手机号,那这一块的验证码呢,我们就不用我们的这种验证码了,因为我们要用手机号,保证手机号有效,我们让他呢可以来发送我们的手机验证码,那在这点一下呢,相当于发我们这个手机验证码,那把这页面呢,这一块我们来换成发送验证码的这个功能,好们来到这个注册页,我们先来审查元素,那这一块的这个验证码呢,是我们这个span标签,好把这个span标签呢,我们就来替换一下,它是一个ID叫code的,来到注册页,这是注册页CR。
07:07
F,来找一下这个span标签,好,这个span标签呢,我们也不给它给ID code的了,那我们现在呢,就给它当成一个按钮,我们就将发送验证码。CTRLF9来看一下效果。好,我们在这来刷新。我们来到这个注册页里边,那么这一块呢,就是我们的发送验证码的功能这块,其他的这些乱七八糟样式我们就先不用管,但是这个发送验证码呢,我们有一个一般的效果是这样子的,当后来点发送验证码会有一个60秒倒计时,那倒计时结束了以后才可以再发新的验证码。所以呢,这个东西我们还要被点击,那么呢,这个就不叫SPA了,我们叫一个A标签,我们呢给A标签给上一个class,我们就叫send code发送验证码,这个呢,我们就来给上一个ID吧,我们也直接来好找这一块的TV们也不要了,我们来CTRLF9来看一下我们的页面效果。
08:12
我们在这来刷新,好,我们先来保证我们的这个发送验证码,好这个是一个链接,那我们给他绑定单击事件,一点以后呢,我们来进入倒计时流程,好,我们来在下边来加上它的整个单机事件的绑定好直接方式,我们就do了幅小括号,文档加载完成以后,我们就来干一件事情,来我们能把GS写到后边,肯定文档都加载完了,然后呢,我们来做什么事,来do乐福小括号,我们先来为我们的这个A按钮来绑定一个单击事件,那就是它点一个click。绑定单击事件,当他点击以后,我们就进入我们的倒计时流程,点击以后呢,做两件事,第一件事是来发送给我们这个指定的手机号,给指定手机号发送验证码,然后呢,第二件事情,那就是呢,我们进入倒计时,倒计时效果。
09:09
那正好呢,我们在这先用GS写一个倒计时效果,我们呢可以来参照GS的官方文档,参照这个W3SCHOOL文档,在javascript里边我们想要做这个倒计时功能,这里有个叫timing,诶,这是一个计时,这个计时呢,比如它有两个方法,一个叫set timeout,它作用呢是在未来的某个时间来执行一段代码,相当于我们延迟多长时间以后它去执行一个,还有一个clear time out,相当于取消掉我们这个定时执行,然后呢,接下来我们来看这我们的语法呢,就是哇,我们来set time out这一块呢,传入我们要调用的GS方法,GS语句,然后呢,在这儿再来传一个毫秒,而这个毫秒呢,它指的是从当前起多少毫秒以后执行我们第一个函数,所以呢,接下来我们要做的倒计时,倒计时的主要功能就是这儿要显示,哎,多少秒后可以来再次发送。
10:10
所以我们主要呢,想要显示这么一个字符串,这个字符串呢,长的是这样,哎,我们比如呢是多少秒,哎,我们60秒后再次发送验证码。我们可以再次发送验证码,但是呢,我们这个60呢,它是一个动态变化的,所以我们这个变化呢,我们可以使用这个定时,这个定时呢,把这个方法我们先复制煮出来,来看一下效果,能set timeout,然后呢来执行一个功能,然后我们让它一秒以后去来执行,一秒以后呢,相当于我们为这个数字来做一个减减就行了。但是呢,我们想要执行这个功能,大家就会发现,因为我们呢每隔一秒都要执行,我们呢一秒在这一执行,一秒在这一执行,我们直接调用set time out的话,它只是一秒后执行一下,所以为了都能执行,我们来单独抽取一个方法,这个方法呢,这就是倒计时,主要是改变我们这个效果的,那么这个timeout change style,那么就叫timeout,那么超时的这个change style改变我们的样式效果,这个改变样式效果呢,主要来改变咱们这两个东西。
11:21
第一个是我们当前A标签里边的文本池,那这个文本值呢,就是这一串,我们把它拿来,当然呢,这一串前面的这个数字,这是一个动态的,那这个数字到底是多少呢?我们接下来点了这个鼠标以后,我们上来就来执行我们这个方法,好我们相当于来执行这个方法,那这个方法这一块的语法大家可以看一下我们这一块的提示,Set time out,注意这是一个双引号包括的,包括这一块呢,也有提示,我们这呢也有一个示例,我们双引号,包括我们要执行的这个方法,好我们双引号来执行这个。这样呢,相当于我们一秒以后去来执行了我们这个方法,那执行方法以后呢,接下来我们就把这个文本我们来变一下,我们呢就将A标签的整个内容改成它,我们就刀了符小括号,刀了符小括号井号,这是A标签的这个元素,我们把这个元素呢,我们来改变它的文本text,我们使用这个text,这个文本内容呢,我们就叫它。
12:23
那多少秒后发送这个验证码呢?那这个秒啊,应该是可以倒计时的,我把这个秒的倒计时我放在外边这个number。然后呢,现在这个number默认等于60,所以呢,默认呢,先是60秒后再次发送验证码,所以我们只要点了这个按钮,我们也不一秒后执行了,我们直接呢在这来给它执行,点了这个按钮呢,它先会在这儿来显示给我们文本,这显示60秒以后,我们再次发送验证码,CTRLF9给大家先来看一下这个效果,我们先不加定时的时候。好,我们现在呢,这个效果就是我们只要点了这个东西,那这一块呢,文本就变了,我们在这儿刷新一下,我点那它文本呢,变成60秒后再次发送,好,那我们这个60秒后再次发送,这个字太长了,我们就叫再次发送。
13:18
那我们现在想要做的就是我们这60秒,这个60呢,一直叫倒转,倒转呢我就接下来这么来写,我写一个set timeout,好我们来调用我们这个定时器,好这个定时器set timeout,那相当于我们这个一秒以后再来做一件事,做啥事儿呢,还是把我这个方法执行一遍,所以呢,我们现在就变成了这样子,那这样子呢,我们先调用了它,然后呢,这是60秒会再次发送,每一秒以后呢,又把它再调一次。因为这呢相当于是一个再次调用它自个儿,而且呢,每次调用我们可以给这个number数量做一个减减,好,Number数量减减好,我们来CTRLF9,我们现在来看一下我们的最终效果,我们在这儿先来刷新一下我们的页面,好,我们在这儿同意协议,我们在这点击发送验证码,诶我们这个59 58 57,我们发现呢,它开始这个倒计时了,但开始倒计时以后呢,一直倒计时到零,我们相当于要返回到原来的状态,所以我们在这倒计时不能无限倒计时下去,我们在这儿呢,还得判断这个number先减减,如果说number现在已经等等零了,相当于减到零了,减到零呢,我们的这一块文本我们就来可以显示发送验证码,诶你此时呢,才给我再来发送验证码,那如果呢,我们没有显示到零,那接下来呢,我们才开始进入我们的倒计时流程。
14:51
来,我们倒计时流程呢,我们来放到这儿。而且呢,我们刚才一看我们上来呢,就显示的是59,因为我们是先减减,然后呢,我们再在这儿显示了,那我们应该显示完了以后,我们再来剪剪,最后呢来给它剪剪好,那剪剪完了以后,我们来看最终的效果,CTRLF9,诶大家注意,一旦我倒计时到零秒,我下次呢,可能还会点击发送验证码,那下次点击呢,由于我们上一次已经把这个number减到零了,所以呢,这个number可能就有问题了,那我们就应该把这个number再给它初始化到60,那下一次倒计时呢,又可以从60开始倒计时来CTRLF9,那现在来看一下我们的页面效果,那就应该是这个样子的,那为了好看起见,我们就以十秒为单位,十秒呢我们能快速看出效果。
15:43
好,CTRLF9。如果我们这个没有收到验证码呢,我们十秒以后还可以再次点这个按钮发送,好我们来看一下,我点发送验证码十秒九秒,那一直到我们最后的零秒,它就会显示成我们的又可以再次点这个按钮了,那稍等一下。
16:01
哎,我们又显示成差,我们再点它,那它又开始倒计时,那现在又有一个问题,我再把它点一下。诶,我们发现这个倒计时变得超快,诶我们连续点两三下,我们的倒计时呢,就变得超级快了,这是由于我们几个倒计时呢,全部在同时运行了,所以呢,我们只要点了这个按钮,就开始给它进行倒计时,这是有问题的,我们得判断,如果现在正在倒计时的过程中,我们就不用倒计时了,所以怎么判断呢?只要我们是在倒计时,那我们呢就可以给这个A这个标签,我们可以来添加一个class,比如它的class呢,就叫disable,相当于我把它禁用了,那么这个class呢,比如我们就叫disable,如果我们呢,这个A是disable class是disable禁用了的,你再点这个按钮,我就不用给你执行这个方法了,所以呢,只要一执行这个方法,那我们上来应该做的一件事就是呢,先把A的class给它变掉,好,我们把它拿过来。
17:04
好,我们给它呢设置一个值,它点一个,我们要设置它的这个class值,我们可以使用at tr这个解壳方法,那设置谁的值呢?设置class的值,Class的值是什么?诶只要进入了倒计时流程,它呢都是这个disable,我们都把它呢叫做disable。这是我们的这个效果,当然如果我们最终回归到零秒了,那么就应该把这个class呢移除掉,哎,我们应该把这个好CTRLC,如果我们现在回复到发送验证码状态了,那这个class呢,我们就不加了,来CTRLF9来看一下我们的效果,好,我在这来刷新。好,我们在这来给他先来同意协议,来F12来看一下咱们的这个控制台。走,那现在呢,想要来发送验证码,我来点它,现在呢,我们只要倒计时,我们的这个class呢都是Dis,那如果你下次再点它,我判断如果是disable,那我们就不要做这个事情了,所以呢,我们在这呢要做的事情就是if。
18:11
做一个if判断,如果我们再来点了这个按钮的时候,If,如果当前按钮的值,如果Dollar this,点它的这个class值,而且呢,我们可以使用解克瑞直接快速的判断它有没有哪个指定的class,有一个方法叫hands字class,是不是有我们指定的class,我们就拿这个方法判断它返回出货false,好,如果hands class,你有我们指定的这个disable,说明呢,你被人点过了,那什么都不做,这个呢,就是正在倒计时中,正在倒计时。所以呢,我们就不用显示这个效果了,否则呢,我们第一次进来,我们才有必要呢开始来倒计时,要不然就出现我们刚才那个一直在那超快速倒计时的效果,好CTRLF9把这个页面呢重新来编译一下,现在来看一下我们的最终效果,我们的整个倒计时功能来刷新,好,我们先来统一协议。
19:12
F12,我们来看控制台主要是来审查我们的这个元素发送验证码,好来点发送验证码功能,如果我再次来点,诶我发现是没作用的,以前是越点越快,那等它倒计时刀,我们这个零秒以后,我们呢相当于又能点了,又能点的原因是我们把这个class移掉了,所以呢,我再能点了,诶这就是我们的效果。而且呢,当我们一点发送验证码,肯定就要执行真正的功能,比如说我们在这个里边,那我们要做的事情就是如果他被disable了,那我们是什么都不做,如果他没有被disable,那我们就应该真正的去来发送我们的验证码。这是我们要做的效果,那给手机发验证码,我们下节课再说,好,我们先把页面呢优化出来,把这个恢复到我们的60秒状态,那么呢,现在再来做一个效果,现在呢,我们看到我们这呢有一个login controller叫login controller的作用就是呢,当我们来发送login.html请求给我们映射到我们的login HTML页面,我们发送reg HTML请求给我们映射到reg这个页面,但是呢,未来在我们的这个服务中,我们可能有非常多的这种需求,这是什么需求呢?就是我们发送一个请求,发送一个请求直接就跳转到一个页面,跳转到一个页面,我们什么操作都不做,跳转到一个页面。
20:39
但是呢,如果我们什么操作都不做,我们写这么多空方法,就为了处理请求跳到页面,处理请求跳到页面感觉呢太麻烦,那我们呢,就可以使用spring mvc给我们来做的view controller功能,它呢直接可以帮我们来映射一个请求到页面,诶将我们这个请求和页面映射过来,我们就不用写空方法了,直接映射过来,那我们未来呢,就不想写这些工方法,那我们想要用最快捷的方式怎么做呢?好,我们来写一个配置。
21:14
我们放在conflict里边,好,我们就叫my web conflict,我们的web配,我们就叫鼓励web,鼓励web con,那我们想相当于要定制spring mvc的一些功能,这个功能呢,我们先来写一个叫confi,我们呢可以来实现一个接口。加web mvc con菲,那这个接口呢,来点进来,基于我们这个扎八的这些新特性,那我们这些接口呢,都有一些默认实现,那如果以前呢,我们这个菲ER还有一个这个适配器,那我们现在呢,直接实现这个con菲,实现以后呢,接下来这个con菲ER里边有一个这个功能,来给大家看一下control f12看一下它的方法,它的方法里边呢,有一个叫and view controller,诶添加我们的这个视图控制器,它的作用呢,就是直接我们这儿呢有一个说法,比如我们想要做的就是直接渲染一个页面。
22:16
怎么渲染页面呢?我们无需来写我们自定义的controller逻辑,像我们直接告诉他我们哪个请求映射哪个页面就行了,我们无需写我们的controller了,好,那我们就来重写我们的这个方法,我们就叫and view controller,好,那我们的这个view controller这有一个reject,相当于我们的注册中心,哎,我们view u controller的这个注册中心相当于哪些页面都跳到哪,我们在这里边进行注册就行了。好,接下来呢,我们就来写这个,这呢有一个方法给注册这个中心里边,这不是我们NAS那些注册中心,大家别混了,我们这个registry里边,它有一个方法叫and view controller,叫添加我们这个视图控制器,然后呢,它里边先传第一个叫URL pass,然后呢,后边还有一个叫set of your name来给大家说一下这两个怎么写。
23:12
只要我们把这两个写好了,我们就可以省得写我们的这个ctrler,我们以前的controlrler是这么来写的,写了一个空方法,空方法的作用呢,就是把这个请求映射到这个页面,那接下来我们会发现view u controlrler,这就要传一个URL pass相当于URL路径,URL路径那就相当于我们以前request maping的内容,然后呢,Set无u name u name一听这叫视图名,那视图名。就是我们以前方法的返回值,这就是我们说的逻辑视图的名字,所以呢,我们把这个给这一照抄就行了,以前我如果我们写空方法,这一块路径写什么,那么这一块就写什么,那这一块返回值写什么,我们这一块就写什么,那有了他们以后呢,我们就不用写这两个空方法了,把这两个直接注掉,我们直接在这个视图映射里边,好,这就是我们的视图映射,我们直接在这个视图映射,在视图映射里边呢,我们就来添加好整个的视图跳转逻辑,我们来点一个and view u ctrl了,我们来再来填一个,这个呢就叫我们的reg htm2相当于我们的这个注册页,好,这个注册页呢,它直接跳到哪个页面,点了一个set name,那view name,我们以前这个空方法呢,我们在这写的就是reg,所以我们在这儿就来写reg,加上它就行了,那未来我们所有里边要。
24:42
请求直接跳转页面的,我们都用这种方式,就不写空方法了,好,我呢来重启一下我的这个服务,奥服务,我们现在来做一个测试,包括呢,我们以后也给奥服务来限定上我们的内存占用大小,像以前的我们的这些服务一样,都给它规定我们最大呢占用100,要不然我们这个内存呢就不够了,好。
25:05
我们现在呢,来重启我们的奥ER服务们,来看一下我们的页面效果啊,首先呢,保证我们这个logo页和注册页都能访问,以前呢,我们能访问是写了一个ctrler,现在我们把ctrler里边的方法呢都注掉了,所以呢,如果它能正确访问,那肯定就是这一块起了作用了,这是我们的视图映射,好我们来现在来看一下效果,我们的注册页我来刷新,诶我发现呢,它是照样可以访问的,没什么问题,好点同意并继续,包括我们的登录页,来点过来登录,好没问题。那下一节课呢,我们就来完成我们的注册功能,以及我们的短信验证码的发送功能。
我来说两句