00:00
好了,各位对SPA有了一定的理解之后呢,我们就可以给大家说这个概念了,叫路由,同学先别急啊,先别直接说什么是路由,说哎,什么映射关系理解不好的回到这儿引导大家一波,目前呢,我确实能实现切换,同学们,我这种切换是不是属于写了多个页面,然后你点击的时候,你可能写了一个A标签啊,或者一些什么实现了一个跳转,对吗?那我们说同学如果你应用了react路由这个技术之后呢?那就不是多个页面了,它只是一个页面,那你想一下同学有这么一个问题,如果只是一个页面的话啊,你看现在,现在是不是属于多页面,我点about就跳到about.html,这里面就包含着hg about里的东西是不是?哎,我点击home,那就是home页面包含着这些东西,那你想同学,如果它是单页面。他怎么知道你点了about呢?然后我要给你展示about内容呢?他怎么知道你点的是home,我要给你展示home的内容呢?对吧,这是个问题啊,同学是不是?哎,他咋知道你点的是谁呢?
01:10
啊来说一下,他呢是这么工作的同学,那他这儿呢,在一上来的时候啊,他没有任何的展示,哎,就是一个干干净净的地址啊,没有杠什么什么什么没有啊,然后等你点击about的时候,你注意我现在在给你模拟啊同学,我现在不能点,我现在点了about,那它不就直接变成这种形式了吗?因为我现在写的确实是一个多页面嘛,没学路由呢,还没法用路由呢,对不对,哎就是说这事儿好了,那同学你看着啊,你就比如说啊,他一上来呢,哎,就是这种状态,谁也没选啊同学你就假设这块我没选hope,哎,我这儿呢也没有展示后面的内容,这两个人都是处于白色的状态,没有被选中,这儿呢也什么不展示,因为你什么也没点,对吗?好了,然后呢,我再给你说嘛,同学,我给你说这个路由的大概的工作流程啊,然后你点击了后面这个标签,那我跟你讲啊,同学,他就会把浏览器的地址啊给你改掉。
02:11
就给你改成这种形式了,杠home不带点HTM啊,就是直接一个杠home,然后呢,同学你看着啊,我给你说这个逻辑,你点的谁呀,咱管这叫什么区来着,导航区,你点击导航区里的链接,它不会引起页面的跳转,说老师这链接咋这么厉害呢?啊,老师这个链接都不会引起页面的跳转,好像据我所学的呢,A标签你只要一点肯定得引起页面的跳转吗?那只不过是在当前页签跳转还是跳转到一个新页签嘛,那你这个链接怎么还能不跳转呢?因为它是路由链接,哎,它是一种特殊的链接,你点击了这个home之后,它别的事儿没干,它就是把浏览器这的地址给你改成了杠home,然后呢,同学就有一个人,哎,路由里边有一个人专门监测浏览器这个路径的变化,然后他就发现了,哎呦喂,这个路径呢,由原。
03:11
来的127.0.0.1啊,然后冒号5500是吧,给它写全了,然后变成什么了呢?127.0.0.1,然后呢,冒号5500完了杠home,哎,说它发生变化了,人家现在要看的是谁呢?Home,哎,就被人家监测到了,一旦他监测到了,同学你这要看home是吧?他监测到了确实是home,就把home组件给你展示到这儿了,所以说其实前端路由的工作原理非常简单,你说它就靠谁呀,就靠浏览器这儿的路径明白不?你点击导航区,人家改路径,路径一改就监测,一监测就匹配,匹配上了就给你展示home组件,这个就是路由的一个工作原理,那同学你觉不觉得它就是一种映射关系呢?对吧?你点击home,你去更改这个东西,那每一个路径都会对应着一个组件。我们现在。
04:11
写的这个东西,同学有没有觉得每一个路径它对应的都是一个真实的页面呢?但由于我们写的是单页面应用,所以说以后就是每一个路径其实呢,是对应着一个组件的,那你觉不觉得这就是一种映射关系呢?有key有value,那同学你告诉我其实那个K呀,你说的是谁呢?换个颜色,你说其实那个K是谁呀,是不就是地址栏里的pass是不是路径对吧?哎,其实啊,同学有些同学说老师不应该叫pass,你应该说的标准一点,应该叫URL,同学我还真不能说URL,因为URL指的是HTTP啊,冒号杠杠那全都带着,其实同学路由人家在进行匹配的时候,他并没有拿到之前的那些东西,我刚才虽然是那么写的,但是说给你大概形容一下嘛,其实他在匹配的时候,同学他把前边那些东西他都忽略了,那你想一下同学人家能那么笨吗。
05:11
匹配的时候,127.0.0.1啊,然后冒号5500这些东西他也看一遍,他不看的前边这些他就忽略了,所以说你刚才的那次变化呀,127.0.0.15500啊,点0.0.15500,你从5500变到杠home的时候,其实人家压根就没看你红色区域的东西,明白不?人家直接看的是这OK不好,所以说你不能说那个杠home是URL,不对,那个杠home只能称之为pass,叫做路径,你如果路径显示的是杠home,那同学你觉得key既然是pass了,那你回答我吧,同学,你觉得那个value是什么呀?是不是就是组件component对吗?你如果路径是杠home OK,我就把哪个组件展示给你看呢?Home组件对吗?因为是组件,所以说首字母我得大写,诶,这就是前端路由。
06:11
的一个大概的工作原理,好了,同学,那这回回到课件里面,我们就能理解一下了,同学们,什么是路由啊,哎,一个路由呢,就是一个映射关系,你给我key,我根据你的key决定给你哪个value啊,Key呢一直都为路径啊,就是刚才我所说的那个pass为路径,那么这个value啊就有意思了,同学,你注意它有可能是function函数,也有可能是component,说老师这个我理解你刚才说了吗?点击导航区就会引起路径的改变,路径一改变,那其实就是所谓路由里的key呢发生了变化,我就根据这个key呢给你找到value,那这个value是一个能显示的组件,所以说同学哎来到这儿来说老师我认为呢,你说它是component,我理解对不对?哎,是一种映射关系,你什么路径,我给你看什么组件,但是老师你要说这个我就不理解了,它怎么还能是函数呢?那说一下同学,因为路由。
07:11
啊,是有分类的,分为后端路由和前端路由,如果在座的各位你稍微学过一丢丢的node,你稍微学过一丢丢的express,你对后端路由是有认识的,那么我得站在呢,大家没有学过node,没有学过express的角度去说,那同学来,其实对于后端路由来说,无论后端路由还是前端路由啊。你那个K呀,一直都是路径。明白,不一直都是路径,只不过呢,Y流有所不同,如果是后端路由,Y流就是一个函数,那这个函数能干嘛呀,能够处理客户端提交过来的请求,说老师,那你这说这东西什么鬼,谁知道了呀,那我知道你可能会这样想,那所以说呢,来同学啊,最小化这儿呢,也给他,诶都给它最小化啊走来到这个里边,同学你记不记得之前咱做github搜索的时候,用了这台服务器呀,同学,我打开这个server.js,我让你瞧一眼啊同学,现在你所看到绿色框里的代码呢,它就是一个后端路由,哎,那同学你注意看啊,如果你请求的是这个红色框里的路径,就是如果你想搜索,搜索的是用户,那我就把你本次请求啊交给粉色的函数去处理,来慢慢来,走在这儿,然后这儿呢。
08:40
再给它圈上,哎走,那同学你觉不觉得对于后端路由来说,其实它那个key呀,就是你的请求路径pass对吗?那你说value其实就是谁呀,那你告诉我value是不是一个函数啊,对吧?哎,你请求的是搜索用户,我就把本次请求交给这个函数去处理,那这个函数呢,会拿到request对象,拿到response对象,然后呢,哎去哎做一些事儿对吧?所以说同学们后端路由呢,也是key value的组合,只不过这个value呢,它是function,那你看说老师如何注册路由呢?你看像我刚才写的是不是点get,然后是路径吧,然后给了个函数吧,Request对象吧,Response对象吧,对吧?那工作过程呢,是这个样子的,当note接收到一个请求时啊,根据请求路径啊,他就找到匹配的路由了,你比如说人服务器那边呢,说我能响应这种路径的请求。
09:40
Search下的users,然后你就去发请求给人家,那么你写的路径呢,还真就也是这个,那我问你是不是就匹配上了呀,那匹配上之后呢,就调用路由中的函数去处理请求,返回响应数据对不对?哎,所以说后端路由啊,也是k value的组合,只不过value是function,那么前端路由呢,来我们看一下啊,Value就是component,是组建了,刚才说过了对不对,用于展示页面的内容,那这块呢,大家先不用看说老师如何注册一个路由,这会儿我们会详细的讲解一点一点写的工作过程,就是当浏览器的pass变为杠test时,那你看看同学刚才我给你讲的是不是变为杠home时呀?哎,好了,给这删掉,那同学我想问一下浏览器的路径怎么就能变成杠test呀?
10:30
怎么就能变成杠test呢?哎,回到这儿,是不是因为你点了这种特殊的链接呀,你点了home这个链接就引起了路径发生变化,就真的变成了杠home,对吧?不带那种东西,点HML,如果带了点HTML,那你觉不觉得同学,那不它就又是一个页面吗?没有D这个home页面了,你这么写home.html那就是home页面,你如果这么写杠home,那就是哎路径home,然后就被人家监测到了,哎,就给你展示home组件了,对不?哎,好,这是大概的这么一个工作过程,好,那么这个视频呢,我们讲解的就是对路由的一个理解,好吧,同学一点语法没学啊,只是说了一个工作过程,甚至连原理都没说,好吧,哎,这小节呢,我们听一下哎对路由的理解。
我来说两句