00:00
好嘞,各位,从这一小节开始呢,咱们来学一个view里面特别重要的技术,重要到什么程度呢?就是拿view所写的项目几乎都会用到这个技术,它的名字呢,叫做路由,我不想一上来吧,就把官方的那个定义啊甩给大家啊,然后我就不管你了,我说你自己理解去吧,反正我给你讲完了,什么是路由,咱换一种方式,从生活中出发,同学,就路由这两个字儿,我摆在你面前,你首先想到的是什么呢?我觉得啊,大多数同学想到的可能是这个东西诶。家家都有是吧?这是什么呀?啊说老师这是路由,错,同学这一小节我就得跟你叫这字眼了,这东西不叫路由,这东西叫路由器,嘿,可能有些同学说,哎,老师真无聊,你跟我叫这字眼,同学这一小节我们的目的就是把这些概念性的东西给它过一遍,如果这些东西同学你处理不了,接下来的代码你是没法写的,你傻傻的路由和路由器你区分不出来,代码没法写,OK啊,那我再问你生活中的这个路由器啊,它的功能是什么呢?来用图表达是这意思,不就是多台设备同时上网嘛,啊也就是说路由器上的每一个网线接口,这红色的都会对应一台什么呢设备,那你说我能不能这么理解,就是路由器上的每一个网线插口啊,它都是K,然后我给它编上号,K1到K4。
01:23
然后Y6是什么呢?就是每台设备我也给他编上号,是这意思不?各位,一个接口对应一个设备吗?你是T1,那我就是Y61嘛,说白了各位,Y61上不了网了,你找谁去?你肯定得找K1去排查问题对不?各位好,那同学说,老师你看看你讲的东西啊,上来呢,先告诉我要讲view里的路由,我还不知道啥是路由呢,又给我扯到了生活中的这个路由器,结果到现在呢,一堆概念我都不明白是啥意思。好,接下来我就给你下定义了,各位,到底什么是路由呢?走。K1加Y1就是一个路由,同理,K2加Y2啊,还有后边的K34匹配上自己的Y都叫做路由,诶这回好理解了吧,哎,也就是说各位路由其实就是一个对应关系,T1对应一个Y61,那这一组对应关系就是一个路由,路由呢有一个好听的英文名叫做root,哎,你自己可以查一下root特别标准的一个解释就叫路由啊然后说老师,那路由和路由器它又是什么关系呢?看图说话呗,各位,多个路由得由一个路由器进行管理,各位你去那个电子卖场啊,你去买路由器的时候啊,你说我要买一个路由器,那你买完了路由器是不是就意味着里边这些接口就都能用了呀?那你能这么说吗?说我要买路由啊,我不买路由器,然后那商家说,哎,那你等一会儿哥们儿,我拿一路由器,然后我把这T1这口啊,我抠下来,我给你不存在吧,是吧,各位路由不经过路由器的管理,它是不能工作的。
02:55
不,各位,我不管你买的是什么品牌的路由器,这口必须得焊在他身上对吧?得长在他身上才可以,那么路由器各位也有一个好听的英文名叫做roer,这俩词儿首先你得搞懂了啊,这儿呢,是多了一个R路由路由器,多个路由一个路由器进行管理。好同学,那接下来呢,我就要给你抛出标准化的概念了,走,就是这两句,所谓的路由就是一组KY6的对应关系,那么多个路由需要经过路由器的管理。同学,你注意,就我给你总结的这两条,不仅仅适用于生活中的路由路由器,也适用于我们编码世界里的路由路由器。接下来我们要学的view里的这个路由,其实它也是一组KY6的对应关系,View里的多个路由也得经过路由器的管理,OK,好,那生活中的路由啊,和路由器啊,我们理解的差不多了啊,知道它的功能是什么了,就是多台设备啊同时上网,那编程。
03:55
的这个路由和路由器,它想实现什么功能呢?难不成也是多台设备上网?那肯定不是,那为了实现什么呢?来,走着各位,为了实现SPA应用,啥叫SPA啊?它的全称叫做single page web application叫做单页面应用,老师没懂啥叫单页面呢?OK,回到代码里,各位你发没发现啊?从我们开始写东西,我一直只有一个页面,就是它。
04:26
只有一个HTML,一个HTML不就是一个页面吗?那单页面啥意思?就只有一个点HTML呗,同学回想一下啊,就是好久之前,在没有react view的那个时候啊,你说我们写代码的时候,就是最传统的一种代码,其实是这么写的,Inex.L是什么呢?叫做整个应用的主页啊同学你注意啊,我这个用词就有的时候啊,经常说,哎呀web应用其实指的就是啥,就你写那网站啊,就这么理解就可以,OK,然后还会有很多的页面,你比如说我再来一个user.tml啥意思呢?就是用户中心可能还会有一个cat啊,这词呢,咱之前用过,叫什么意思来着,分类对吧?哎,然后比如说你再写一个啊,比如说叫做or DR啊点attl啥意思呢?订单,然后呢,你写了很多很多的页面,然后呢,让这些页面呢,来来回回呢去跳转,就比如说在这个主页这个HTML里面,我写了四个导航按钮,哎,这一个三个四个,然后我点击第一个导航按钮呢,它往这跳,点击第二个往这跳,第三个呢往这。
05:26
跳,那第四个呢,可能跳到一个什么别的atml是吧,在这随便写一个什么什么什么第2ATML,然后在这个里边呢,你可以再写一个链接啊去跳转,跳转到哪呢?可能直接跳转到这个用户中心是吧,也就是之前的应用啊,是这么一种模式,N多个页面来回跳来跳去,跳来跳去,这就是属于典型的多页面应用,同学多页面应用是不是有一种感觉,丰富多彩,我有很多的页面,一个页面呢,就是一个大的功能,然后来来回回各种跳是吧,就显得哎,这个网站功能特别多啊,那同学你说单页面应用怎么去实现这么丰富多彩的来回跳转呢?让人看起来这个网站的功能很多呢,对吧?那怎么实现呢?说老师,首先我觉得呀,这事儿就不对,你多页面就能实现完了,你非得去整什么单页面完再告诉我单页面怎么实现,老师你这不是刻意的提出问题,完了再解决问题吗?你这不对呀,多页面这不挺好的吗?各位,多页面不好,大家想象一下N年以前的网页,你点一下这个东西,比如说啊各位,这是你的浏览器,完你这呢?
06:26
开了一个页签,完这页签里边对应的这个内容呢,是在这儿的,完你在这里边啊,你点了一些奇奇怪怪的东西,奔儿同学咋的从当前这个页签跳走了,又开一个签完里边再给你呈现东西,你整个交互的过程当中,同学那个页面是来回抖动的,各种跳,特别的烦,哎,所以说呢,我们考虑到这个单页面应用只有一个页面,你也甭跳了,想挑你也挑不了啊,你就一个页面啊啊那问题是单页面应用怎么能实现这个切换呢?哎,回到我们的这个PPT里,各位,我在这呢,截图的是一个,我们之前呢,拿这个所做的一个高效管理系统啊,整个应用呢,是分为左侧和右侧的,我们管左侧的这个区域,哎,就这个区域叫做什么呢?导航区同学,你不觉得这是一个导航吗?比如说我想管理班级,那你就打开教学管理里的班级管理对不对?哎,这是导航区啊,然后在导航区里面各位啊,你去选择了某一个导航项之后啊,在这个区域就会做出不同的呈现,就比如说。
07:26
我这边如果点的是课表管理,那同学你注意看,整个绿色这一块就都变成了课表管理相关的功能了,然后如果说呢,你这点的是班级管理,那这块展示的就是班级管理相关的内容,在整个切换的过程当中,各位页面是不发生跳转的,因为你也没法跳,你只有一个,并且整个页面注意这个按钮是不转的啊,就是你从课表管理切到班级管理,你就发现,哎,各位咋的,这个东西他压根不转,然后页面呢,只是做一个局部的更新,也就是说绿色框里的东西是来来回回在变化的啊说老师那这块呢,这块不变,这块是写死的,就是一个欢迎语嘛啊,就是一个当前登录用户的这么一个名字嘛,对吧,在这一点能什么注销啊,退出登录什么的,对不对?OK,想想这种感觉,有导航区也有展示区,是不导航区里边能点展示区也会展示不同的内容,但是页面不抖,页面不跳,只是停留在当前这个页面啊,来再重温一下各位,这叫什么?
08:26
旁区,这叫什么展示区啊,一个丰富多彩的应用,同学一定是有导航区和展示区的,对不对?点击不同的东西展示不同的内容嘛,好了,这不墨迹了啊,可能有一些同学说啊老师。我觉得不太可能,这东西好像不存在,那你说只有一个页面完了,我点击的时候咋的页面还不跳转完就能展示不同的内容,这么神奇吗?能实现吗?当然能实现啊,目前我给你截图的这个高效管理系统是不是就实现了?为了让我的这个说法呢更有说服力,我给你找一个大家每天都在用的网站,他就实现了,谁呢?来到这儿各位,就是这个东西,美团。
09:03
哎,同学你看啊,目前我打开的是北京美团里的生活服务这个分类,所以说你看路径,它就是干什么呢,生活,然后接下来你注意啦,各位我先跟你说哪儿是美团的导航区这儿。就是生活服务里面还有很多分类啊,你比如说快照啊,心理咨询啊,宠物服务啊等等这些对不对?好然后这块是什么呢?就是美团这个网站的展示区,当然了各位人家那展示区吧,其实特别长,你看啊,那在这儿呢,我们就不看那么长了,我们选择把这滚动条停在这儿,就是能看到哪儿呢?导航区也能看到哪儿呢,这个展示区,那接下来我点的时候,各位你观察两个地方啊,第一个地方你观察一下这个位置。这个位置如果转圈就证明咋的页面跳转了啊,或者说你观察一下这也行,各位就看有没有新开一个页签好吧,然后你再观察另外一个地方,就是这儿,就是整个展示区是不是真的跟着我这个导航的切换在进行变化,OK来接下来我可点了啊,各位我点公司企业走。
10:08
然后在这肯定他写了这么一个东西啊,就是说让你知道你目前点的是哪个啊,接下来我再点的时候观察啊,同学咱说好的一个是这儿,一个是这,看看这转不转,看看这新不新开业签,再看看这儿变不变化,好了同学我接着来点心理咨询,宠物服务,配眼镜啊,母婴亲子,服饰鞋包,企业咨询宠物,各位有没有感觉出来,整个页面其实并没有实现完整的刷新,或者说页面跳转只是做了一个局部的更新,对不?而且你注意观察,我的路径还在发生变化。也就是说你点了服饰鞋包,同学,你这一点不要紧,这会儿肯定展示的是跟服饰鞋包相关的,诶那你发现路径也变,那想想为什么要把这个路径也维护一下呢?为什么呀?同学,如果路径不维护,那就会造成这么一个比较差的用户体验,你感受一下各位就说你点了这个公司企业这块,没有给你写这个C20什么什么444。
11:06
也就是说呀,不管你这块怎么点,这块始终是美团杠生活,那就容易造成一个问题,用户选了好多分类,发现自己啊还是想看这鲜花,于是乎呢,就把这个网址啊就存起来了,说等着以后去看,如果你这里边带着这些东西,C65那同学,也就是你把这个地址给它复制一份,你在新开一个页签的时候,各位你再回车,他应该来到的还是鲜花这儿,对不对?但如果路径不跟着变,那就有点恶心了,各位,人家点了半天,终于找到了自己想看的东西,在这儿呢,也呈现了,用户知道个啥呀,他就觉得哎呀这可挺好的,我赶紧把这个网址啊给他复制一下,然后发给我的朋友,说你看看我在美团上看到了什么东西,结果人一看说啥呀,你这里什么没有啊,我也没看到是鲜花啊,比如说人家看到的就是这个东西,说没看到你的东西是不?各位哎,所以说能实现啊,而且呢,还比较简单,只要你学了接下来我们讲的这个view里的这个路由技术,好回到我们的PPT里,这回明白了吧,各位单页面应用也能丰富多彩,并且。
12:07
用户体验更好,这个页面不刷新,而且路径呢也跟着变化,其实你看这同学细节啊,我这选的是啥,是不班级管理,那你看我的路径其实就变成了什么呢?杠class,那你说如果在这我选的是学科管理,同学让你去设计,你说你把那路径给它变成什么呢?肯定是不能杠class,一个最low的设计学学科科也行吧,是吧,各位,哎说老师那我还想问一个问题,就是它怎么实现的呀,就是点了导航区完了这边呢,哎就跟着变,它怎么实现的呢?老师,其实简单说说这个原理啊各位来往下说,原理一上来呢,你注意看啊,这个路径啊,是这个样子的啊8080,你发现后边没有任何的杠,什么什么啊,没写这个杠,哪怕你写了一个杠生活也行啊,没有没有的意思,就是哎展示区这个位置咋的啥也不展示,然后你听我说,随后啊,你点了班机管理,哎走着。
13:03
点完之后呢,我们进行一个慢动作回放,你点了班级管理之后,你会引起路径的变化,路径就由原来的什么192.1684.1768080,就变成了后边多了一个后缀杠class,因为你点的是班级管理嘛,所以变成的是杠class,随后你听我说各位浏览器路径一旦发生变化了,就会被一个人监测到,哎,就是有那么一个人很辛苦,时时刻刻的啊,不差一分一秒的在帮你监测着浏览器的路径变化,谁呢?就是viewer,就是view里的路由器,然后路由器发现,哎呀,这哥们儿改路径了呀,啊,那我看看你这个路径是什么,然后它自动忽略前边的什么192这些东西,什么8080,就从端口号后边开始看,然后他发现,哎呀,这哥们这路径是杠class,那之前呢,程序员在我这儿配置过一个路由规则,说如果路径变成了。
14:04
Class,那就给他展示班机组件,然后他上上下下一看,哎哟喂,这路径还真是杠,Class还真跟这程序员之前配置的这个路由规则对上了,那于是乎呢,走着就把班机组件给你展示到这个位置了,所以说同学你体会一下,你觉没觉得这个就是我们所说的路由里边的那个key,那你觉不觉得这个东西就是我们所说的路由里边的什么呢?Value,对于我们前端来说,同学你说路由的K是什么呢?是路径,那你说对于前端来说,路由的Y流是什么呢?是组件,你是这个路径,我就给你展示这个组件,那么这么一组对应关系就称之为一个路由规则,N多个规则交给VI的路由器管理,同学是不是完全符合刚才的概念啊,那说老师如果有一天我点了这个呢,学科管理呢,那点呗走点了学科管理,随后呢,去修改这个路径,就把路径由原来的杠class就变成了杠subject,因为你换了别的这个选项嘛,啊然后呢,哎,同学这人不是吃干饭的,View的路由器又发现了,说你看那个哥们儿啊,又把路径给改了,他就知道了,说那我看看吧,你这个路径是什么?说路径是杠,他说巧了,你看我这就有一套路由规则,杠subject就对应着学科组件,于是乎应用这套规则,就把你刚才的那个班级组建呀,给他干掉,然后显示的是学科组件,OK,剩下的我就不再演示了,这就是一个完整的前端里边的一个路由的工作流程。
15:36
OK,各位想想啊,路由规则KY6的组合,多组规则交给一个路由器去管理,当然这块我没写太多,各位如果写的话,用这个省略号就是还有很多的规则,说老师呢,存不存在这个情况呢?就是我这儿啊把路径改成这个东西了,这佩齐,但这里边没有这个规则,那同学也存在这情况啊,那如果没有这规则呢?那在这就不展示任何的组件了呗,对吧,各位因为匹配不上了嘛,哎,想想这就是路由的概念,来吧各位,推出来生活中的路由和路由器是为了完成多台设备同时上网啊,那么编码里的路由和路由器是为了实现SPA应用的导航区和展示区的来来回回的这个切换,是吧?各位,好的各位,有了这些概念来吧,回到课件里面,非常轻松的就看完了,我们进入第六章,View啊,就是view里的路由器啊,View同学本身啊,它是一个库。
16:31
就是说你想在view里面去实现我刚才所说的一点,这个路径就变,路径一变就监测到,就匹配,就展示组件,你想实现这套流程,你得记住一个库啊,这个库的名字叫做view页,就是说你得NP mi,谁呢?View杠是不?哎,它是一个什么插件库,那我不多说了,你知道怎么用啊,既然是插件库,是不是得u.use去使用啊?哎,专门用来实现什么SPA应用,同学通过图的方式把SPA跟大家说一下,是不是觉得理解能更好一点,好来对SPA的理解,那这几句话快速的过一下吧。单页面外B应用这些不读了,简称啊,有人也开玩笑的说是SPA应用也行,是吧,生活中那SPA来第二读,整个应用只有一个完整的页面,只有一个,那页面什么呢?页面就是atml,这个atml是不啊,第三句话,点击页面中的导航链接,不会刷新页面,页面也不会跳转,只是做页面的局部更新,说白了各位就是在一个展示区的位置,我给你控制它展示。
17:32
不同的组件是吧?各位啊,来第四句话,读数据需要通过adjust请求获取,为什么呀?很简单,各位来咱拿这举例子,你刚才呀,点了这个学科管理,换个颜色学科管理你点这个了吧,路径是不是变了,是不是被他监测到了,那是不是有这条规则,那有了之后,同学给你呈现的是什么?是不是学科组件,学科组件你得初始化一个学科列表吧,你得有学科才能去管理吧?各位,所以说同学,那你说这些学科数据哪来啊?肯定是发送A加子请求,从服务器那边是不是捞回来呀,对吧?各位好,回到课件里再往下读路由的理解,什么是路由,一个路由就是一组映射关系,KY6啊K,为什么路径?
18:14
啊,Value是什么呢?哎,注意了,刚才我们所说的value是component组件,也就是说在这刚才我不是给你画了一下吗?我说同学们啊,这是key key是什么呢?就是路径,我说这个呢是value value什么呀?其实就是组件,那怎么回到课件里面又出现一个说value还有可能是函数呢?同学,其实这呢就涉及到什么呢?前端路由啊和后端路由,说说这个前端路由吧,先说这个啊,因为刚才我们刚过完这个概念,Value是啥?Component用于展示页面的内容,工作过程就是当浏览器的路径改变时,对应组件就会显示OK,这很简单,直接过了。再说说后端路由,后端路由啊同学其实研究的就是什么呢?就是服务器了,Value是函数,用于处理客户端提交的请求。说老师这会儿我就不理解了,同学,但凡你对NOEGS有点了解,来我你打开之前我给你写的那个测试代理的那个服务器啊,我给你打开这SERVE1,各位你看一下有没有这么一种感觉,这个student其实他在匹配你那个请求的路径。
19:13
你之前不是发过那个架次请求给他吗?你咋写的HTTP对吧?然后是local host,然后是5000下的谁呢?Student同学,我问一下这是不是你请求的路径对吧?哎,然后他拿到有效的是哪一块儿呢?其实是这一块,然后呢,做匹配发现这块,诶匹配的是杠student,那也就是说白了,你的路径和人这边要的key呀对上了,那随后怎么办呀,就把你本次请求交给这个value去处理,那这个value的值是什么呀?你瞄一眼呗,粉色框什么东西函数对不?各位,哎,这就是后端路由,也就是说什么呢?同学,这个前端路由吧,就是你是什么路径,诶我就给你展示什么组件,但对于后端路由来说呢,就是你是什么路径,我就给你调用指定的函数去响应你本次请求对不对?各位,哎,前端路由后端路由,诶,其实你对这个后端路由啊,如果说老师我也不想理解的,其实也没有什么大影响啊,但是本着这个知识面广一点,你还是了解一下啊,后端路由工作过程就是服务器收到一个请求时。
20:14
根据请求路径啊,然后匹配去找到对应的函数来处理请求返回响应数据,对吧?各位OK,那你看这么一说,路由这个概念不就清晰了吗?然后在这儿呢,跟大家说一个有意思的事儿啊,就之前呢,在线下讲的时候啊,有一个同学啊,他这么跟我说,我觉得他说的也行啊,虽然不标准,他说老师啊,我是这么理解路由的啊,然后他问我说老师,我这么理解是不是有点不太对呀,但我觉得好记,我说那你说说吧,他这么说的,他说老师,我觉得是这么回事,路由,路由就是根据你的路径,然后由我,我是谁,就这个路由器,然后去决定展示哪个组件。哎,我再跟你说一遍,路由,路由根据你的路径,由我决定给你展示哪个组件,诶同学这么说好像也挺顺畅的是吧?哎,但是这么说吧,就有点怎么感觉,就是太low了啊,但是你能理解也行,OK,标准点说呢,就是路由,无论是生活中的路由,前端路由,后端路由,路由它就是一组对应关系而已,多个路由需要一个路由器,OK,最后给大家铺垫一个事情,同学你觉得我想实现这种导航区和展示区的切换,你说前提是什么呢?
21:21
哎,这问的可能大家就懵了是吧?老师前提得是编码啊,老师前提得NP mi安装啊,哎,我说一下前提是这个啊,我想问的是这个就是前提是啊,你得把这些东西什么课表管理呀,班级管理啊,学科管理啊,你得把这些东西形成班独的组建,你说对吗?各位,哎,就比如说同学班级管理,你可以叫这个组件啊,Class组件,当然呢,你要直接写啊,还不太合适,因为class呢,是这个JS里的一个关键词,对吧?你比如说class,哎,比如说教室ROM对吧?Classroom啊教室管理,那么学科管理呢,你可以叫做subject,也就是什么呢?各位,你得把这些要进行一会儿切换啊,一会儿显示,一会儿隐藏这些东西,要切换的东西你是不是得变成一个组件才行啊,同学,要是没有组件你就想吧,哎呀,你的路径啊,是杠class,我要给你展示班级组建,那班级组建呢,我没写呀,那你就写不下去了,对不对?哎,各位一句话啊,不同的内容展示区,不同的内容要变成不同的组。
22:21
键才可以啊,然后就是同学你得写这套规则,说说什么东西是需要我们写的,各位导航区每个导航项的名字,你觉得它能是人工智能帮你生成吗?不可能,导航区导航的名字得你自己写啊,然后还有就是这个路径得你自己去配置,就你点完了谁路径变成什么,这个路径得你自己写,还有就是各位,这一堆路由的规则也得由你定,说白了啥路径对应啥组件等着你写呢,然后这个东西呢,你安装,然后你扭一下它就出来了。OK,各位,这就是路由的一个简单的理解啊,如果你要说老师我觉得还是有点懵,你就点点美团这个你就感受感受对不对,一直在切换,但是页面呢,它不发生什么抖动,这块呢始终是一个页面,OK,好了,各位呢,这小节呢,我们听一下。
我来说两句