00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们用will封装了网络请求,那网络请求呢,是咱们前后端分离非常重要的一个知识点,如果没有网络请求,那么我们做完的前端页面,那数据就不能从服务器取过来摆在我们页面上,所以呢,一定要有网络请求,而网络请求呢,咱们用的是R对吧来辅助我们完成的,但是呢,如果你在每个组件里边都单独的请求是比较麻烦的,所以呢,咱们封装了一个统一的请求的入口,这样的话,所有的网络请求都通过你自己封装的POS方法啊,盖的方法去请求服务器就可以了。当然封装的方式呢,每个人有不同的见解,那基本上都有十多种啊,或者几十种不同的封装方法,那你自己觉得合适,能符合自己项目需求就可以了,那这节课我们来看一个新的知识点什么呢?陆游。那什么是路由呢?或者什么叫路由器这个概念呢?是我们学习路由一定要先掌握的,那大家经常听过后端路由和前端路由,那我们先来认识一下后端路由,在我们传统开发网站的时候。
01:03
比如说我们找到我们前面用PP我们做的一个项目啊。知道吧,那。看到这个网站这个不适应前后端分离,因为前边呢,咱还没学前端框架,所以用的是门模板式开发,用的是自定义的那个框架模板开发。那也就是在后端渲染完输出到前端页面这样的一个结构。那这样一个结构呢,你看我们在一个项目里边经常有这样的导航菜单,我们点首页。对吧,前沿的技术的,前端的后端的,你看你看下边都在切换,在上边头部呢,是没有动对吧,都在切换首页关于我们。对吧,这块你看又是一个切换,当我每次切换的时候,你看到这个地点有点首页看到看ul地址对吧,没变化,点前沿传了一个参数对吧。前端传了一个参数,看到了吗?关于我们你看换成配置了这个,然后不同的序号点击的时候,你看有不同的序号,也就是我们在点击每一个链接的时候,链接地址都是变化的,当然这个域名地址不是变化的。
02:09
那这个呢,就是什么?就是我们通过路由来帮助我们完成的,那是不用路由可不可以我单独都是P2P页面可以,你比如说绑定下边万.pp或者是什么home。点PP单独的页面,这是很早很早以前最传统的方式了。你看home.pp然后关于我们呃at.PP对吧,然后呢,分类,比如说商品gods.pp然后商品idd等于五等于四是这样的,那这样的话我们一样做项目,不用路由的话,我们是一样的,但是有了路由我们就很好规划这样的一个项目的一个架构,怎么规划呢?你比如说咱们打开这个程序,先了解一下后端路由啊,咱们在引出为什么前端我们需要路由。你看。如果我们通过路由的概念来规划我们项目的架构,好在哪呢?那我们程序里边你看。
03:03
我们整个程序所有的都写在我们APP里边,然后呢,我们分这么多控制器,控制器呢又分后台控制器,然后又分前端控制器。看到了吧,有这么多个PP文件,当然这还是一个很小项目,有可能有什么,呃,几百个几千个P2P文件都是有可能的,那互相包含对吧?那如果我们读项目的话,那有可能看上去就像一个球一样,不知道从哪入手,也不知道互相的关联关系,这是以前不用路由规划项目的,那如果用路用上路由的话,所有的文件请求的都是这个文件,你比如说我们看一下这里边儿的配置。你看用户只要是请求,我们这个页面都会请求inext.pp也就是整个项目只有一个入口,任何用户不管他怎么访问的请求都是inex.PP也就是我们在这块在访问,任何时候访问的都是index PP,哪怕你点这个访问的也是index.pp这个文件。都是这个面。
04:00
记住,都是这棱角。都是这个音带点PP文件,不管你怎么访问的,然后通过不同的路径参数给我们转到具体的控制器去执行,你比如说我们前面这个用的即是接口也好,或者是商城也好,API也好,你看我们访问的友情链接,那我们是怎么访问的呢?我们是这样。对吧,通过这里边的link对吧,下边的你是添加有情链接啊,是修改啊,是删除啊D删除传一对吧,是这样,那通过路径的改变给我们就能找到什么,就能找到我们友情链接的那个位置,你比如说我们现在看后端。路由它是这块爱密这个,那也就是我在指定这个路径的时候,这是路由的映射,你指定哪个路径的时候,在地址栏里边路径变化,就会找到哪个模块下的哪个路由就哪控制器的哪个方法,你看如果我们访问ID密下边的link I密下面link,那么就会通过路由,路由不就是一个路口,就像我们的家里边用的路由器一样,外边有一根线进来对吧?请求,然后通过路由表,然后分发到你请求的是哪里,你看我们ID link,那么找到的就是他就会到艾密。
05:14
这个呃目录下其实它叫做呃那个名字空间啊,那咱就比如说在找这个路径下,你看这个路径下,那找哪边找这个控制器link,也就是这个控制器,那找这个控制器里边哪个方法呢?你看这里边找index方法。Index方法,那index方法它会输出一个页面,最后输出页面,但是如果接口的话,就输出接的数据,那界面呢,用前端去摆放。所以在我们做一个后端项目的时候,用户的每一个操作,每一个点击,每一个地址变化,都会对应后端的一个控制器的一个方法给我们转换,这样的话我们所有的请求,你看接口。这所有的请求都在这里边,有这么多。这样的话,我们想找到任何操作,只要一看路由表,我们就知道这个操作是找哪个吗?
06:05
那是找这个摸一下的ad,这个控制器里边是这个方法对吧,什么操作呢?用post的请求,用get请求,这是后端路由,有有这么多动词,当然前端。咱们不要这么多动词了。这是了解后端路由,如果你是呃后端开发人员,那后端路由一定要了解,而且后端路由也很好理解,不光了解他也很好理解。但是我们前端路由。不好理解,特别是学vuee或者是X,因为我们都知道地址而变化,请求的是谁呀?请求的是服务器对吧?请求的是服务器,那请求的是服务器呢?当然得用后的路由了。那我们前端为什么用路由呢?因为咱们现在做的项目是前后端完全分离的项目,前后端完全分离的项目。那前后端完全分离的项目。我所有的请求,所有的请求都放到哪去了?你看我们通过上级和网络请求,咱们看到所有的请求都放到了我们组件里边。
07:03
你比如说。我们在呃一角里面,你看这里边请求对吧,在某一个模板里面。当然就算封装好了,他也是在这个模板里,对不对,你看请求的是这个,当然了,前边路径是咱们SURL里面设置好的,对吧,请求这个,那我们在这里边。嗯。组件组件。啊,我们找到。Network APP。组件。到哪去了?方法。我们找一下我们那个POS的请求。在这个里面这个诶不小心删掉了吗?怎么没有这个组件呢。看一下。有。刷新一下。
08:04
找一下我们这个组件买。啊,写在这里边,做在子组件里边啊,你看这个请求post在这块。在这个位置,也就是前后端如果分离的话,请求后端的数据,我们用的是后端路由,是在这地方请求的,那就跟我们前端,如果我们项目做的话,跟前端这个东西就没关系了。那我们地址变化不请求后端了,那也就意味着是要我们前端变化而已,一定要了解这个前端变化而已。听懂吗?那我们再看一下这个图啊,还有一个问题了。现在路由前端,那我们前端变化,我们是不是像这个首页是一个单独的一个页面,前沿技术又是一个单独页面对吧?前端后端云计算都是单独页面,那不光是这这地方用你看这里边儿的所有的链接,比如说问到文章对吧,访问的文章。对吧,这里边儿网站公告这些这个地方也都是导航,对吧,我们地址是不是也都变化。
09:03
不光是这个地方对吧,其他地方都变化那。我们在写前端的时候,一定要注意一点的就是什么。我们只有一个请求的入口,在前端也是一样,请求数据呢,是在组件里边写好了,咱就不说了,那前端也想让它变化,不管是你点上面的导航还是下边的子导航,不管上边导航下边的子导航,那前端都得让他变化,那变化不是请求的后台地址,你看这个咱们是做这样的效果,是看的是咱们这个项目是完全请求后台的,用后台的路由帮我们后台渲染页面,给我们发送前端的,这是。呃,不是强端分离的项目是这么做的,但是真正强端分离的项目,我们地址也改变。然后呢,也会让它显示多个页面,效果跟咱们现在用的效果看上去是一模一样的。只不过我们只是前端的一个页面切换,没有请求任何服务器。让这个地址变化,让我页面切换。而实际的看上去是一面情况,假如咱做跟这个一模一样的效果啊,那看上去是切换了,但是其实呢,它又没有切换,为什么?因为在我们做项目的时候,你看前端,咱们这个前端。
10:08
你看一下我们所有的。主程序假如编译完之后,这个现在咱们没编译啊。BB,你看这里边,嗯,咱们有一个主入空间是这个。主入口文件是这个看好了。这是唯一的一个入口文件,从这个入口文件调用这个APP,也就是这个。只有这一个入口文件,在这个APP里边加载各种模板,不管你怎么切换,其实都是在这个模板里面,都是在这个组件里面。在这个组件里边,你看我们加载的有头部,有中间的区域,有尾部,它是没变化的,都是这一个模板,然后加载的其他的子模板,不是页面级的切换,页面根本没有切换,要记住啊,页面根本没有切换,但是看上去像换一个页面一样。这就是前端也得有一个主入口,就是这个APP,其实主JS是慢点JS对吧,它的主模板这个模板所有的其他模板都在这个模板里边去加载的。
11:07
但是呢,我们又得做出来是多个页面的概念。是读音的概念。这样的话。就得用到前端路由,那如果不用前端路由,我给你模拟一下,给你简单模拟一下,比如说有个导航菜单,我就不做自组件了,我直接在这里边做,比如说有个NAV。做一个div吧。做一个这个里边呢,我把这个div做成一个导航class,等于点2NAV给大家模拟一下不用签的路由,但是呢,模拟不出不用签的路由的那个效果,只能让你看到是都在一个地方加载。这里边儿我只写几个导航项,这几个导航项,那我们这里边把它。加一下多少点AV,我们设置一下,比如说宽度是一百百分之,嗯,高度,高度咱们是30像素。呃挖嗯,上右下左,上边是20个像素,下边是上右下左零。
12:04
呃,加速这样的话左右为零,上下呢是20,把这个空调去掉。这是呃,Marin,然后呢,B加上背景颜色,咱们来一个。嗯,随便来一个颜色吧,看这里面哪个颜色好看,就是就这个颜色吧,咱们做导航对吧。然后这里边儿就是这个导航,这个导航里边呢,我们还放上。啊,放上ul。是一个列表,Ul list列表样式,嗯,No,然后呢,MAR0个像素,PARTY0个像素,把列表样式清除,然后里边里边还放Li Li呢,咱们就是一对是一行。然后呢,呃,M件market左右呃上下为零像素左右为。咱们左右是礼拜20个增速吧,这样。然后我们在这里边儿,呃,再来一个高度,行高,因行居中长高,比如说来个30像素这样,所以呢,我们在这里边需要做一个导航,那导航的数据呢,我们可以在嗯,下边date里边我们定一个。
13:12
上面是文章嘛,那我们比如说导航navs一个数据导航,我们做一个是数组,数组里边呢有几个对象,比如说导航的名称,就是分类的名称,咱们叫做首页,假如说是这样再循环几次,首页啊,列表页,然后啊。写在多个里边,然后这里边加上一个,呃,UR地址,或者是这个ID加ID吧,ID是一,咱们举个例子啊,就加这两个就行了,其他我不加,然后你想加几个页面,比如说首页列表页。然后内溶液。然后我们再加上关于。关于我们这几个,然后之后我们加四个就行了,二三。
14:04
四加这几个,然后我在这块遍历一下。在这里边加上UR,嗯,一个标签里边呢,Li Li里边,我们放在A标签这里边,然后在这个地方加上V大负遍利谁呢?ATM遍利这里边的,呃,是navs便利这个,然后我们在这块用差值的方式加上navs点。就上itm.name加上这个,来我们看一下这个页面。B点在这块没有放上去,因为我们没加上。Class NAV。因为我们家class NAV。在。这下面NAV宽度高度。做加这个。嗯,宽度高度它没有给我们加在没给我们横过来对吧,这个颜色。
15:08
我们往下看一下啊,这个就是样式的事。AV里边的。嗯,Ul。这块家。NV里边的组ul这块给你加一个。大家没起效果啊,背景颜色首页。列表页内容页,关于我们,他现在跟下边这个冲突了。我把下边这个我先去掉。这个东西咱们先不用。不用,但是现在他没有横过来,宽度不是100%的。宽度不是100%的,那我们这块宽度100像素100%。横过来了对吧,就有这样的一个导航菜单,那现在我点首页的时候,或者列表的内容页关于我们的时候,那那下边内容变,而不是真正的请求服务器让页面去变,那现在在模拟这个方式对不对?那我们现在首页列表页内容页关于我们,它是大的页面,大的级别,最大的级别呢,这是小的组件里边呢,显示的某一项,对吧?那比如说把它看成是大的页面级别,那通常我们在这里边呢,需要新建一个什么呢?
16:21
再建一个目录,你比如叫配置词也好,或者是VEWS也好,那我们就叫这个,把大的组件都写在这里边,其实还是加多个组件在这个页面写上,那比如说在这里边我们需要几个组件呢?我们需要。啊,V组件这里边有首页对不对,我们叫home件home.vuee对吧,这块只是写上,我只用一个文字,你知吧,这是首页,这是首页,然后我们这里边大的页面机,当然在这模板里边我们还可以加载很多其他的那个子组件是肯定的,然后比如说我们再来一个。嗯,列表页我们就叫做list。配置吧,有历史的配置,大写的。
17:02
最好是。这没大写,那就那就。配置列表页。因为大写我们可以用当线那个方式,就是通风式命名了,这样列表页,然后这块这写上,这是列表页面。列表页面,然后我这块再加上。嗯,再加一个内容页。C con cont,我就配置吧,就捡起了内容点D。这是内容页,先自己模拟写一个类似的路由,但是没有这么干的啊,这样有助于你对路由的一个理解啊,主要是这样这样的,然后太多了,四个四个吧,再写一个关于我们AB。A这块写上第二位,这关于我们。这四个组件,四个组件当我点击这个变化的时候,当我点击的时候,也就是在这个里面,当我点击的时候,让下边加载不同的组件,加载不同的组件就可以了,你看如果我现在静态的把这些组件我全体在这里边注册。
18:14
全体注册一下。这里边IPO注册谁呢?注册这里边的,呃。减上。你看原来有那么多对不对,比如说这里边home,然后从这里边过来IPO,还有呃,Con配置内容页,还有按port列表页,列表页还有关于我们的页面。I关于我们,ABOT关于我们,然后这几个我都得在组件里边去注册。分别有什么透明页面,还有啊。列表。列表页面。列表页面加括号,然后我们再加一个内容页面。
19:01
然后还有一个关于我们这几个都注册了,都注册了现在。你看模拟请求,那我点击的时候,是不是这里边儿每一个链接或者是A链接啊都可以,或者是Li上面都可以,你比如说在A链接上,它是导航,那我们在这块。那正常我们请求路由的话,肯定是在这个地址里边,但是他就跑服务器那端去了,所以呢,我们这里边儿直接加上。On click点,我们先把A链接的普通的链接这个。呃,把它功能跳转的功能给取消掉,对不对,点击的时候。点击的时候,这里边儿我们只要改变一下这个数字就可以,你比如说这里边我们,嗯,这里边做一个判断吧,在这里边做一个判断,你看显示,假如说显示是一个数字,就这里边咱们写一下,如果。不能这么写啊,咱们写一个div,这里边写上如果V-if v-if如果什么呢?如果咱们做一个变量,也就是呃显示吧,或者是那个页面配置等于等于一的时候,两个转号就行,如果等于一的时候,那我们这里边让它加载什么呢?加载呃后页面。
20:13
Home加载这个。同样你这判断,如果等于二的时候,等于三的时候,等于四的时候,咱们四个页面嘛,对吧,这块假设我做的是一个路由映射的表,那等于二的时候。等于三的时候,等于四的时候,当然这块必须得是V杠。通过这个来完成啊。通过这个来完成,这里边儿每一个都得变化一下,否则如果因为它是排斥的关系,排斥关系,当然你当然单独一个配置也可以啊,你不用,否则如果也行。你就是单独的一个,因为它等于几,咱们就设置等于几,不那么设置也可以可以判断啊,就是如果等于几的时候,咱们这块去设置,所以我们在这里面。啊,默认设置一下,这里边ID是1234 ID是1234,这里边是没问题的,对吧,ID234,那我们正好再加一个,再加一个,呃,配置默认让它等于一。
21:09
默认等于,你看默认等于这是首页是不是就有了,那我在点击的时候,点击的时候,这里边每一个点击的时候,我都让这个配置等于谁呢?等于it TM里边的ID。点击哪个,那就是点哪个,你看现在那边。嗯,诶。配置等于。It TM里边的。ID没问题啊。我这会儿把这个。放在这个后边。It,嗯,点ID。它是1234那个连首页。点列表页。没有过去看一下。没点过去都是首页,都是首页啊,模板咱们没换,咱们只是写了一组一句啊,这里边没有切换。
22:00
在这里边我们后呃等于二的时候,我们是列表页,那就是用呃list。配置列表页。看一下我们这块有列表页,然后内容页。这块我们改一下。这块是CN配置,然后内溶液。是关于页。括号a Bo。然后默认是首页,默认等于一嘛,这个点列表页,这是列表页内容页,那关于我们就可以切换了。那这个我让大家理解的是什么呢?你看是不是我都在APP里边将其他模板放在这块,根本没有请求服务器,只是感觉页面在变化。但是并不是实际的页面在变化,而是加载这些什么,这些组件,通过不同条件加载不同的组件,那么路由其实也是一个原理,你看也能分,但是呢。我们如果不用路由,而是用我们自己写的这种方式,那我们看我们地址而变化了吗?我们应该点首页的时候,这块给我们一个什么home。
23:03
我们在点列表页的时候,这会给我们一个什么?给我们一个list。对吧,历的配置,然后点关于月的时候这块A。这样的话感觉才是页面在切换对吧?页面在切换,而且这种地址也有利于什么,有利于我们的搜索引擎,而如果都在一个页面里边,这样切换是没有利于搜索引擎的。对吧,也给别人感觉也就是完全的一个页面,其实就是一个页面,然后呢,他打包在一起的,咱们用路由它也是这个道理,只不过路由比我们自己写,一是自己写要比自己写要方便,另外他会把地址栏也给我们改变。有利于搜索引擎,不光地址栏改变,点击的时候既然地址栏改变,那我们输入不同地址,它也会直接请求到不同的页面。所以改变地址栏,我们下边的页面也会跟着切换,那你点击的时候地址栏也会变化。这是我们前端路由的一个最重要特点,所以呢,要知道这样的原理了。
24:02
功能上跟我现在写的差不多,只不过点击的时候地址会变化,通过D栏输入下边会变化D栏传参数在组件能能接受,这就是路由的一个形式上的一个本质,那为什么用路由,那肯定就是我们大的页面切换的时候,对吧,感觉是写多个页面。的确是,我们写前端的时候,他也是有多个页面。那我们不能说把所有东西都写在一起,那现在咱们用的方式呢,就是把所有东西写在一起,对吧,你想这个组件里边如果再包含组件,再包含其他组件对不对,那就基本上就是很麻烦了。但是我们用路由实际上是一个判定图,实际上通过路由访问的都是主入文件对吧,都是在APP里边,然后切换到这个页面级的大组件,然后页面组件里边会有这些。但是给用户的感觉和我们开发的那个结构上。对吧,因为开发的时候你写的是一个一个组件,内部打包的时候往一起搁,开发的时候还是分大的页面组件,就像写一个一个单独页面一样,然后用路由帮我们把它都导在一起包含起来。所以这是大家认识前端路由,只有了解了路由在什么地方应用。
25:04
我们路由本身功能很简单对吧,就是刚才我说的实现那个功能对吧,但是如果你不理解,就不管什么路由应用,好多人不理解这路由他不做的不是做的大的页面机切换,而是像页面中单独的选型卡,那做路由做那没那必要。知道吧,这要理解路由啊这一块。
我来说两句