00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去讲一下咱们项目的路由的搭建。那咱们呢,先看一下子已经写好的这个项目。对于已经写好这个相嘛,咱们要注意。它有一些路由。比如说首页该报。在首页当中啊,展示了一些数据可视化的一些东西。但是呢,咱们呢,现在呢,先不用去管这里。以及啊,还有全县的这个一级路由,以及全县的一级路由下有三个二级路由。当然咱们前期的时候先不会处理权限管理这里。咱们会在最后的时候去处理这里。所以说啊,咱们一会儿在配置路由的时候啊,权限管理这块的模块的路由呢,咱们呢,可以先不用进行搭建。那以及啊,底下呢,还有一个叫做商品管理。那商品管理呢,其实呢是一个一级路由,当你点击底下的导航链接的时候,它的二级路由会进行切换。
01:09
对吧,分别由品牌管理,平台属性管理,S puu管理和SKU管理。那有的小伙伴呢,可能会问老师,什么是SKU,什么是s puu,那等到咱们专门讲这块模块的时候,咱们再去解释这些概念。所以说咱们现在要做的一件事是啥?是把整体的咱们的路由给它搭建出来。那首先说啊,看一下咱们现在正在开发这个项目。那对于现在而言啊,有一些路由是需要的,但是有一些是不需要的。比如说像首页。对吧,那首页咱们是需要的,但是其余的路由咱们是不需要的。那所以说啊,老师呢,把咱们已经。
02:00
运行起来的这个。CMD呢,老师呢,先给他打断一下。咱们呢,去把一些没必要的路由给它删除掉,那首先说只留一个首页就可以了。对吧,那其余的给他干掉。那回到咱们的views文件夹当中,那dashboard首页得要放,不需要,那不需要咱们就可以给它删掉。那当然啊,还有登录的路由组件登录咱们是需要的,以及像这个N,那咱们不需要不需要呢,那就给他干掉。对吧,那这块呢,一定要注意啊,登录咱们是需要的啊,这块需要注意。以及像table咱们也不需要,以及像这个train也不需要,那咱们就给它干掉。那删除之后,咱们去运行一下咱们的程序,那你会发现它跑不起来,那为什么跑不起来呢?这里呢一定要注意,因为在路由那里在使用你这些删除的组件,所以说一定是跑不起来的。
03:10
那所以说呢,咱们运行下子去看一下子,这块呢,一定要注意,老师呢,只留了首页和登录,而其余咱们不需要的路由资源全部干掉了。但是啊,咱们来看一下能不能跑起来,跑不起来,那为什么呢?因为在咱们的路由当中在使用这些路由组件了,而咱们刚刚已经给它删掉了,那所以说这里咱们需要重新配置一下。那咱们呢,去看一下的这个路由这里。那首先说这是在干什么?是不是引入voe?以及引入view router以及使用插件router。以及这块一定要注意,这块是整个这个项目当中的一个大的框架的这样的一个路由组件。
04:02
也就说你会发现咱们对于后台这个。项目的结构搭建,你会发现这块的结构就整体老师圈中的这一部分结构,咱们是从来没有写的,比如说Li bar对吧,侧边栏na bar,还有这主页面APP面。咱们都是没有写的,这就是谁的功劳,这就是他,也就说将来你不管你写的是几级路由组件,都应该在这个框架之下去进行操作,所以说这块一定要注意。那以及咱们看一下底下,那这里面就是在配置路由的一些信息了,那首先说登录路由咱们是需要的,而且它是一个一级路由。为什么呢?因为他们根本没有Q菌嘛,对吧,这是个一级路由,而且他还利用到了路由懒加载。所以说它咱们需要留着,以及404路由咱们也需要留着,以及你看这儿。他这个写法吧,跟咱当年的写法有一点不一样,比如说当你一访问杠的时候,比如根的时候。
05:06
那它其实显示的是哪个组件呢?是这个layout的组件,是整个这个大五架的这个组件。对,不是整个老师圈中这个大骨架的这这一部分,比如你一访问反斜杠。对不一访问反斜杠,你要注意,其实展示的是整个这个大的骨架,是这个项目的骨架结构。对,不,但是你会发现它底下有个操作什么操作radio RA重定向,就是说当你一访问杠的时候,诶显示出了这个大的股价,但是立马就重定向到它的二级路由叫dashboard这。重定向嘛,对吧,这是它的一个二级路由。说老师你怎么知道是二级路由,这明显有个children呢,对不,立马就跳到了二级路由当中,所以说你看咱们呢。这块要注意它这个结构,但这种写法咱以前没有玩过,比如说你一访问杠。
06:05
OK,没问题。整个大的结构已经有了,但是它立马重定向到哪,重定向到它的二级路由,但是就是这部分去首页立马重现到这个二级度这里。对吧,所这块呢,要注意一下,那以及还有什么路径啊name啊,组件呢,以及made I,特别是这个made咱们要说的说的。Mate呢,咱们应该知道,咱们在前面的项目当中咱们用过对吧?哎,特别是学HTML的时候,字符集什么的,对吧,这个这点有印象啊,叫mate,你看它有个title属性叫daboard,你看老师把这一改。我把这里给它改成首页。那你会发现一件事,什么事,你看这儿。它是不是就是首页啊,当然咱这还没有运运行起来,如果运行起来之后,你会发现这它就变成首页。就是title是设置什么呢?是设置侧边栏的这个文字的。
07:04
啊,当然咱们现在没有运行起来,咱们一会儿运行起来再去看一下,是设置这个文字的,对吧,你以及每一个路由。导航它前面是不是有个图标,其实他用的是谁,就是这个icon。而且他这个icon呢,很神奇,你看它顶上都有说明。看这他对于made是有说明的。比如说咱们刚刚看到那个抬头,你看这个抬头。The name showingli bar and,呃,面包屑,比如说你这个title的这个名字,可以在侧边栏和面包屑当中进行展示。以及icon图标,Icon图标你可以使用已有的icon图标,因为它有一些icon图标嘛,但你可以用饿了么。看着吧。对吧,所以这块呢要注意一下,那当然底下的这些路由咱们是不需要的,那咱就给它删掉,但是404咱得留着。对吧,那咱们看一下子,咱们将来需要开发几个路由组件。
08:02
看一下吧。那首先说首页咱们已经有了权限管理,咱们最后处理,咱说的是谁,是商品管理。对吧。那所以说啊,在开发路由之前,你这些组件内有,那咱们呢,回到view之下,咱再新建个文件夹。对吧,咱们叫啥叫product product商品的意思。那这个文件夹它代表的是不是就是商品管理,在他下是有四个二级路由的,分别是品牌管理、平台属性管理、SPU和SKU管理。那所以说啊,咱们在分别新建四个文件夹,第一个叫什么叫做trademark。哎,叫做吹的品牌吗?对吧,那除此之外还有什么,还有什么平台属性管理,那咱们就叫做at tr属性嘛。以及还有什么呢?还有什么SPU和SKU,那所以咱来s puu。
09:06
以及再来一个文件夹叫SKU,但是一定要注意啊,文件夹的关系啊,还有个叫做SKU。那这些文件夹里面你得放相应的组件,那所以说咱们来一些组件应该是src下的views下的下咱一个来按照顺序来品牌管理,那叫index.view。那咱们来呗。六姐一。哎,快速的整出咱们的模板V1。那这块呢,咱们先写一个名字吧,这个叫做品牌管理。品牌管理trademark。当然,那这里面咱给它起个名字就叫做trademark。对吧,那剩下的那几个,那咱就完全可以咋了复制粘贴了。对吧,以及还有SPU,那当然你复制的时候一定要注意啊,你这里面的文字到时候为了区分开,你还是要改一下SPU。
10:03
对吧,那以及这块咱也给他改一下子,改成咱们的po。那以及还有SKU。那咱们也改一下吧,那这个叫做S。Ku,那这块的名字咱也给它叫做啊,一个叫SKU,以及还有个平台售卖属性这里。那咱呢,也给它来个名字,就叫做at tr吧,那这块也是一样at tr。好了,那老师呢,只不过刚刚啊新建了四个路由组件,那咱们呢,把它右侧的这里呢都给它,呃,关了吧。可以吧,啊都关了。好了,那这咱都给它关了,那回到咱们这儿,那咱是不是得新建咱们的自己的路由。那咱就模仿着人家已经写好这个路由,去搭建属于咱们的路由。对不,那咱来呗。那首先说当你一访问商品管理的时候,它是一个一级路由,对吧,你按照人家来嘛。
11:05
对吧,咱给他来一个派。比如这个叫什么?叫做杠product product,但是你要注意,这个路由一定是在layout的骨架下。就是你不管将来开发有多少个路由组件,它都是在雷奥的这个这个这个组件的骨架下。所以咱们也是一样叫comp。咱们呢也用的是谁是layout这个骨架。Layout。那以及啊,给咱们的这个呃,路由这个一级路由起个名字,那咱们就叫product product,对不?这里一定要注意name,老师怎么写你就怎么写,因为将来咱们讲权限的时候,这个name是有用的。这块呢,一定需要注意,以及给咱们这个一级路由啊,老师也给他来一个mate。比如说咱们也给他来个title title叫什么叫做商品啊管理。
12:04
对不,那以及它也有一个icon。Icon呢,咱们就用饿了么当中的有个叫good z啊EL-icon-j ods什么意思,也就说你这个这个商品管理前面是有个小图标的,Good是一个小包。对吧,那这个呢,就是属于咱们的一级路由。在一级路由下,又有相应的二级路由,叫children。那二级路由的它得是数组,那咱们就按照人家这一个来呗。对不,你得有什么,你得有派。那P呢,咱的第一个叫什么叫做品牌,叫做trademark。对吧,啊,当然这里面你得给我放对象。对吧,数组里面得给我放对象啊,这一定要注意,那咱们得有PAPA,为什么那咱们就叫做trade mark。以及呢,它应该有属于自己的名字,名字咱们就叫做trademark。
13:05
那以及用的是哪一个组件?Complement,而且它利用的是路由懒加载。那咱们也用路由揽加载import。它呢,应该是爱的杠,Views下的product下的应该是咱们的这个trademark。那以及啊,他也有属于自己的M的。但是一定要注意他的这个mate呀,只需要有title,那这个叫啥,这个咱们就叫做品牌管理。品牌管理,为什么老师说这个二级路由只有这个这个这个抬头呢,没有icon,因为看前面,前面是没有icon。对吧,品牌管理,还有是平台属性管理。对吧,那剩下的你是不是就可以咋的了,复制粘贴了。那总共是几个,总共是四个。这是第一个,那咱再来。第二个是是平台属性,那咱的路径就叫a tr这块呢也是一样,首个英文单词啊,英文字母大写,那这块也一样,它们应该是product下的at tr。
14:07
对不,那这块呢,咱们叫做呃,平台属性管理。哎,平台。属性管理。哎,这是它,哎属性管理,那除此之外呢,还有两个,一个是SPU,一个是SKU。那这块呢,咱也搞一下,那这个咱叫啥叫SPU。看一下是不是叫SPU对吧?PU,那这块呢,当然得小写的啊,路径一般都是小写的,Name呢,那咱们是大写的叫SPU,那这块也是一样,改成咱们的SPU,但是抬头这里咱也需要改成叫做SPU管理。对吧,那这是第三个,还有一个,还有一个呢,咱们再复制一个不就完事了吗?对吧,那这个叫啥?这个叫做SKU。对吧,那这块呢,也给它换成谁SKU,那这块呢,你给它换成SKU。
15:05
那以及底下这儿给它换成SKU管理,SKU管理。那咱们呢,是把咱们自己项目的路由组件给他写好了,以及创建了属于自己的路由组件。对吧,路由那这块呢,一定要在书写的时候,你就按照人家的这个语法规则去来就行了,对不,一级路由一定要记住,一级路由它外层一定是带有这个大骨架,所以说你看咱访问普大的时候,是不是也有这个骨架。对吧,而且要注意每一个路由身上的mate的作用,第一个title就是设置它的那个,呃,左侧侧边栏的那个标题,以及icon就是设置它前面那个小icon图标的。对吧,那咱们呢,去把咱们的这个项目给它运行起来,先看一下能不能跑起来。如果没有跑起来呢,那咱们还是需要稍微找一下,可能单词出现错误了,对吧,那当然一般都会跑起来。
16:02
那所以说啊,咱们的运行一下子,看一下子咱们的路由有没有搭建好。好了,那这里面是不是出现了一个语法错误,明显少了一个逗号,对吧,那咱们看一下哪里少了一个逗号,是不是在这儿。对吧,这两个对象之间得有一个逗号,这块呢,一定要注意,一定要心细一点,好吧,那所以说咱们再运行一下,你看是不就跑起来了。所以说你自己对照着代码去看一下吧,首先说product。当你一访问product的时候,一定要注意,它也是在这个股架之下,在这个layout之下,对不?当你点击品牌管理的时候,你看收品牌管理,当你点击平台属性收平台属性SPUSQ,你会发现你只要把路由配置好,左侧的侧,左侧的这个呃,Li bar就给你配置好。这是由于潘家成,他已经帮你写好。所以说这个模板在工作当中,它使用的频率比较高,所以说这个模板一定要注意一下。
17:03
还有一个小细节呢,咱们也需要说一下的,你会发现人家已经写好这个,你会发现啊,你看啊。它这个元素距离左边和顶面是不是有点距离,但你会发现咱们的这个你自己看一下子。就咱们自己搭建这个这个这个这个有这个边距吗?没有的对吧,那所以说咱们去改一下样式。其实改的是谁啊,你要注意改的其实就是咱审查元素,改的就是这个元素的P点。你看咱审查这一部分区域。咱们看一下应该是谁,是这个叫APPM这个组件。对吧,这个组件咱们可以看一下子啊,看一下它的结构。你看啊。来咱们找一下APP min码APP min当中啊,它有一个样式,咱们需要改一下子找一下,应该是在layout下。有一个叫做APP min,这就是咱二级菜单切换内容的区域,它的根节点叫做APP min,但是你要注意,潘家成在写样式的时候,他把这个类名写错了。
18:07
这个钥匙在哪呢?咱说一下子啊,在这呢。在咱们的style当中的index最底下,这他写的不是APP meanin,是APP container他写错了,所以这块呢,咱给它改成谁改成M。对吧,那这样你的内容和左边顶上左边是不是就有点儿距离了。对吧,拍顶这不写了个20嘛,对吧,是不是就有点距离了,所以这块呢,要注意一下,咱们稍微给它修改一下子,对吧,其实就是就是这个元素嘛,对吧,类名叫APP面给它加点P顶,那这样就有这个边距了。OK吧?所以说这是咱们的一个路由搭建。
我来说两句