00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成权限管理业务的串讲。那咱们呢,先看一下呢,已经完成的这个项目。那么对于权限管理模块,有相应的三个小模块。分别呢是用户管理,写一下权限管理。它这里面呢,有三个小模块,第一个呢是用户管理。以及啊,还有相应的角色管理,以及还有一个是菜单管理。那么对于这三个小模块啊,那么对于它的完成呢,相比而言呢,会简单很多。所以说这里呢,咱们呢,进行代码的串讲。那首先说这里老师写一下子。那么由于由于咱们的用户管理。以及角色管理,以及还有这个叫做菜单管理。
01:04
对于。获取数据。以及展示数据。以及还有收集数据啊,还有收集数据。那么相对而言呢,会简单很多。因此啊,咱们呢,进行相应的串剪。那咱们呢,先看一下呢,他已经写完的这个项。那比如说对于用户管理而言。那么它展示数据呢,还用的是table。那当然,咱们在项目当中用到table的地儿太多了。那一集啊,还有分页的功能。那当然还有一些所谓的dialogue。对吧,哎,以及还有修改的功能,那其实说白了是不是都是dialogue。以及删除的功能,当然是不带什么呢,是不是带泡泡?
02:02
对吧,那以及还有一些表单,对于这些业务逻辑呢,相对而言呢,会简单很多。所以说啊,咱们进行相应的串讲,把什么呀,把咱们的注意力啊,也就是说把咱们的精力。啊,经理放置于啊,也就是说放到哪儿呢,放到。如何实现?权限。这个业务。那对于这三个小模块的数据的展示。对吧,以及数据的收集呢,咱们呢,稍微进行一下串讲。那咱们呢,看一下,那看一下的已经完成了这个项目。那假如说咱们呢,要开发这三个小模块。那第一件事是干什么呢?是不是先把相应的静态组件给它完成?对不对,对吧,那当然咱们呢,可以把咱们已经完成了这个项目当中的静态组件可以给他拿出来。
03:07
在哪呢?在咱们的找一下在src文件夹下的views下的有一个叫做AC文件夹。在这个文件夹当中啊,分别有相应的用户。以及角色以及菜单这三个子组件。那当然相应的静态啊,已经完成了。那所以说啊,咱们呢,可以把已经完成的这个项目当中的静态组件部分给他带走,对吧,找到咱们的acl。对不?那么扔到咱们的项目当中,当然是不是扔到咱们的src下的views下的这个,呃,这里。但是呢,你要注意一件事,那你看刷新看咱们的项目。
04:00
那首先说,那你现在呢,只是有相应的静态的组件。但是你没有配路由呢,对吧,这是咱们的项。您可以看一下咱们的项目来。老师呢,把这呢都给你们打开,看见咱们的项目。咱们项目当中路由的地方啊,就配置了这几个路由。对吧,登录。404的以及首页的,以及商品分类的。那么对于权限管理模块的路由啊,咱们呢,也得进行相应的设置。那当然咱们呢,就直接找一下已经完成这个项目当中关于路由这一部分。对吧,那咱们呢,可以看一下有没有关于权限相关的路,这里是不是有。对吧,那咱们可以看一下子是不是有相应的权限管理,用户管理,角色管理以及对吧,啊还有这个呃,角色授权对吧,菜单管理这些路由。
05:04
那当然,你写完静态组件的一定是要配路由的。对吧,那这里配路由的方式跟咱们前面是一模一样。那所以说咱们呢,可以把这一部分的结构啊,扔到咱们的项目当中,把咱们的路由也给它配置好。对吧。那所以说老师在这儿再添加一个路由,老师呢,给他折上。对吧,哎,当然这块呢,要注意一件事,这个逗号问题。对吧,那咱们先看下咱们的路由有没有,是不是已经有了。对吧,权限管理的路由已经有了,对吧,那相应的这个呃,二级路由组件是不是也会展示出来。那跟咱们以前开发业务是一样的。静态组件有了,你要写路由,但是你要注意相应的组件当中还是要咋的发请求的。
06:00
对吧,比如说用户管理,那你一定是需要发请求的,比如说在mount或者create当中向服务器发请求。获取员工的信息,是不是进行展示,那以及角色这里是不是也是要发请求的。那所以说啊,咱们呢,找一下子已经完成了这个项。咱们呢,可以看一下它的API文件夹。对不,咱们找到关于谁,是不是找到关于权限管理的这些请求的文件。那咱们找一下。他们是在API下。API下呢,有一个叫做AC文件夹,有三个模块,分别对应的用户相关的请求。角色相关的请求以及菜单相关的请求。那所以说啊,咱们呢,把它呢也带走。找到咱们已经完成的这个项目,那咱们看一下子。
07:00
找到咱们的src,找到API,找到咱们这个AC。那么把它呢,扔到咱们的项目当中,给它扔进来,找到src,找到API,对不。当然你要注意,就像咱们的product是一样的。它这里面的四个模块的请求将来都要挂载到index当中。那它也是一样的。对不,那所以说回到咱们的项目当中。咱们先看一下它这里面放的是什么,放的是不是相关的请求。对不,就比如说这个菜单权限,那它里面放的无非就是一些接口。对不,而且它采用的是什么呢?采用的是默认网。那以及角色这里这不也是相应的接口。对吧,但是它采用的也是默认包。对吧,这些镜你看看这个应该非常熟悉,这不分页的。
08:03
对不,那以及还有用户的用户也是一样,你会发现这几个很熟悉。对,不登陆的。退出登录以及还有获取用户信息。当然这个暴露呢,是分别暴露。所以说咱们呢,把人家咱们已经写好这些文件,那引入到咱们index这些当中,那也是同样需要露。那所以说咱们引入一下老师的做一下笔记。再呢是引入咱们权限相关的接口文件。那你都需要引谁呢?咱一个一个来先看用户。当然它这里面用的是分别毛,那咱们呢,就统一引入进来in part。行,矮子。对吧,A user。从谁那里是不是应该是点杠。AC下的咱们的这个user。
09:03
那一期还有谁呢?还有咱们的角色,那就是inport。要注意,它是默认暴力。那引炮谁啊肉?For应该是咱们的点杠啊,AC下的这个肉。那以及还有谁呢,还有咱们的这个菜单权限。但是要注意菜单权限,它暴露的方式呢,也是默认暴露。那所以说咱们inport菜单权限for wrong从谁是不是从点杠AC下的它引进来。当然引入之后你要相应的注册。有谁有?以及角色以及菜单权限。那么你想想,相当于咱们已经把静态写好了,路由搞好了,以及组件要发请求的这些文件也配置好了。那咱们的项。老师把已经完成的这个给它关掉。那咱们呢,就盯住咱们的这个项目,你看一下子是不是就可以跑起来。
10:05
相应的数据也咋的,是不是也有了。对吧,啊,这是咱们的。那么对于用户管理,角色管理,菜单管理,咱们这里面呢,进行串讲一下。那比如说你要开发用户管理这个模块,那咱们看一下。老师呢,先把没用的先给它关了。你看这那第一步,那一定是需要先完成相应的静态。那咱们呢,找到相应的这个组件应该在哪?是在views下的AC。角色啊,这用户是优。咱们呢,先看一下它的结构,把这里的业务逻辑呢,咱呢也看一下,你看这。他这块呢,放了一个行内的一个缝啊,这没问题,一项一项一项,你看这。这放了个啥?这里是不是放了一个表单元素?
11:03
哎,表单元素。叫什么呢?叫做用户名,那你看不就是这块的结构。那么在用户名后面还有两个按钮,那咱们也看是不是相应的查询和清空清空按钮。对吧,这里是查询与清空的按钮。这也没问题。那以及底下呢,还有两个按钮,添加和批量添加。那咱们看一下那底下这儿还有一个对不,这里是什么是添加。与批量。添加按钮。对不,那这块的结构是不是也有。对吧,那以及底下这那这就比较简单了,是table。黑布呢,有123456788里。对不,那咱们找到咱们箱子table,那这不就是table。
12:02
有相应的一列一列的数据。对吧,那当然这块应该很熟悉,是不是放按钮的地方,最后一列放按钮啊。啊,所以说这块呢,是咱们table展示。写下这块呢,是table表格。这里呢,是展示用户信息的地方。那以及底下这里呢,还有咱们曾经写过的分页器,那不就是这。对吧,这块呢,是相应的分页器。爱菲儿起。那么以及你想想点击按钮的时候。它是不是有相应的,相应的这个dilo是不是弹出,那这不就是对话框,两个对话框吗?为什么有两个,这是一个。对不,那以及这儿还有。所以底下这里呢,是相应的什么呀,是相应的对话框的结构。哎,对话框的结构。
13:00
哎,结构。那咱们呢,你自己看一下,那就比如说咱正在开发。那首先说第一件事,结构写好之后,你是不是要发请求?把用户的这些信息是不是获取到,经展示,那你得发请求啊。那也就是说这个。组件只要一挂载,我是不是要发请求。所以说咱们找一下底下这里咱们先可以先不用看date,你看这。在这里干什么呢?在这里发请求,对不发请求,一般情况下我们都是在mount当中去发,但是也可以在created的内部去发,那只不过比mounted之前是不是在之前发请求。那这在干什么呢?是不是获取用户信息?当然,它调用的是当前组件实例的一个方法,叫做get users。那咱们呢,可以找一下这个方法叫做get users。
14:02
那咱们可以看一下有没有这个方法找一下,对不叫get users,这不在这呢。看,这也就说当你组建e created或者是组件挂载完毕,你就要盖上首发请求,没问题。你看这个一是不是很熟悉。配置等于一,默认获取是第一页,当你点击分页的时候,会注入相应的第几页的参数。对不,以及每页多少条,以及带给带给带给服务器的信息。当然咱们这里面呢,用到了loading,你看咱这个table是不是用到了loading。对不?咱们可以看下咱们的这个table,你看table是不是用到了loading we loading,而这个咱们也用过,你看一刷新是不是有个loading的效果。对吧,咱们切换一下。对不?啊,那所以说咱们呢,还是找到咱们刚刚这个地儿啊,叫做get user info,那咱们找一下。对不找到这个函数在哪,在这呢。
15:02
对,不获取一些,比如说当前第几页,每页多少条数,以及带给服务器的信息,以及loading开始咋的是不转。那么就会向服务器发请求。那服务器返回数据之后,我的loading是不是结束?那以及存储一些咱们需要的数据。比如说飞人一共要展示多少条数据?以及用户的信息你要展示,所以说这些信息是不会进行存储以及展示。那不就出现了现在的这个情况。对吧,那当然你在这里可以进行用户的搜索,比如说你搜个一,那你一点击查询按钮,你是不是要发请求。找到用户当中带一的这样的用户信息。那当然对于表单元素,这这个这这个填写的数据,你要不要收集要收集。对不,所以说咱们可以看一下顶上用户的这里。看一下这里。
16:00
那他们一定是要收集数据的。对不?We model收集到template object username这个对象的身上在哪呢?在date等等,咱们找一下老师,先把method给它折上。那咱们看一下在date当中是不是有个叫complete search object这个对象。那么有一个属性,属性值是为空,这是不是收集搜索条件输入的对象?对吧,比如你搜索的是一,当你一点击请求按钮的时候,你是不是要向服务器发请求。带着你携带的参数是不是给服务器送过去?唠叨数据是不是展示。所以说当你点击查询按钮的时候,咱们看一下。那么它掉了一个方法叫做search,那咱们看一下叫做search。那咱们找一下这个方法。对不,那当然得找到底下的麦是不是在这,那你看是不是要把咱们收集到的信息。要咋的,是不是带给咱们的福气?
17:02
对,不,但是这里要注意,这里面用到了一个前拷贝,为什么呢?他怕出现一种现象。比如说你第一次搜索的是什么,搜索的是一没问题,你点击搜索展示的是不是一,假如说有第二页没点第二页,你你换条件了,换啥换张三,那你这么一点,第二页应该搜索的是谁,是不是张飞,而不应该是一。所以说它这里呢,把数据呢,进行前拷贝,那也就是说搜索是一个对象,当你点击查询按钮的时候,又用一个对象去发请求,获取相关数据进行展示。对不?对吧,这是它那以及还有清空。那咱们呢,可以看一下清空案。来看下清货。当你一点击这个按钮,就叫做re,测试这个方法,那咱们看它干什么?你看他干什么?对不,咱们找一下走在这儿呢。那也就是说,把带给服务器的这些参数都清空,再发请求。
18:00
那这不又回到起始状态?那节还有什么,还添加按钮。那么当你点击添加按钮的时候,是不是显出一个dialogue?那咱们找个添加按钮看一下。找到添加按钮啊,找一下在哪呢?是不是在这。当你一点击的时候,会调用这个方法叫受a user。那咱们可以看一下,你看他做了一件什么事找你,咱们找一下。那首先说是不是让咱的diallo的数据清呃展示出来,以及你会发现每次点击这不咱当年套路。对吧,比如用户输入完取消,我再点击,你不应该让数据回显,所以他是不是把数据清了,以及diallo是不是显示出来,以及发请求。对吧,啊,一起发进去。对吧,那当然你收集完数据一点,是不是要发起。对不,所以这块的业务逻辑跟咱以前是一模一样。那一集选中的这些,当你点击批量删除的时候,你是不是要把选中的这些用户都要收集一下。
19:05
当你点击批量添加对吧,批量删除是不是真的要删除,所以说还得发请求。所以你看批量删除按钮,咱们也看一下。对不在哪,在这当你一点击的时候,它要调remove reserve。这个方法,那咱们可以看一下。对不找一下。当你一点击的时候,你看。看这当你一点击的时候,它是不是弹出了一个这样的一个呃小框。对不,那不就是用。完了之后发请求,把你选中的这些用户带给服务器,但是这个一定是数据,为什么?因为你选中的可以是多个。对不,所以说咱们可以看他在这里声明数据的时候应该是数组,因为你要收集很多你要删除的用户。对不?对吧,哎,止烫。做这块的业务呢,几乎都是一模一样。
20:01
那以及还有删除,删除这个操作也是一样,这个,而且咱们还见过。对,不泡泡。而且当时老师也说过,确定了那个事件必须得写on和for。由于版本问题。那以及底下还有分页的功能,那你看咱样看一下分页。老师呢,把这块给你折上看下,底下分页,这那这不就是咱当年看见的这些东西,甚至这个咱都见。对不?改变当前第几页以及每一页多少条数据发生变化的时候毁掉,对不?这些套路都是都是一样。所以说这是咱们的一个用户管理,当然角色管理和用户管理很像,几乎是如出一辙。当然你会发现咱们的这个结构是不是有问题,那咱们改一下。那就说用户这里,咱们找不着角色这里。你会发现它的这个按钮啊,是不是变了,那由于啥,由于这个table它不够大。咱们找一下这个table是不是这样,它们应该是最后一列,最后一列的宽度不够,应该是123第四列。
21:08
那应该是table的最后一列,是不是这?对吧,那咱们的宽度给它大点,咱给他来个300,那你看是不是就OK了。刷新看一下。对不?其实这块的业务逻辑和这几乎是一模一样。对吧,都是相同的套路。对吧。所以说这块的业务呢,老师就不再一点点絮叨了,跟这块是一模一样,我相信各位同学应该能写出来,这你要写出来快。对不,那这不都是一样套路吗?Span input span input span input,这不相同的套路以及删除,这都是一样。对吧,当然有一个组件咱没用过,就是它。Train组件。这个老师说一下,这个呢,是饿了么UI当中的一个小组件。
22:00
对不,他是谁呢?咱们呢,可以看一下老师呢,这里说一下,你搜一下子饿了么UI。Element UI。OK。咱们呢,看一下子这里。他们有一个组件叫做什么呢?叫做tree t。对不,树形框架。你看这不就是咱用到的这个组件吗?看见了吧,是有相应的这个组件。但是要注意一件事。对于这个CH组件,它的数据它必须是得这个样子,一层套一层,因为你会发现它是不是有一级结构,你看这它是不是有一级。二级。二级下还有啥,三级还有可能四级五级六级。就是他的数据是有要求。它的数据必须是对象。对吧,数组套对象,对象再套数组这种形式。而且对于二级目录或者三级目录,它必须得有children字段。
23:02
它会根据你数据的格式展示出咱们这个train组件。所以说你会发现咱们呢,可以看一下咱们network面板刷新。你看你看他的这个数据呢,咱们找一下,你看是不是就带有children。是个数组,数组假如说再出去,这是一级目录,再有二级目录,也还得有children准则。你叫斥资都不行,就叫children。所以说这个组件也没什么问题。对吧,但是这里面呢,要注意一件事,看这。对于咱们的这个项目而言,比如说我要给给谁呢?我要给这个硅谷。对吧,你看啊,我给硅谷,你看硅谷有哪个角色,咱们看一下有新媒体。管理员运维,OK?你看。新媒体对不对,是不是有新媒体,那么新媒体现在能将来能看到哪些菜单,比如说是不是能看见这个商品分类菜单。
24:03
对不,那将来你是不是要把勾选的这些数据。咋的,你是不是要提交给谁,是不是要提交给服务器,就比如说他能看到一些,比如说咱再来个叫优惠管理,咱们是不是给给这个,呃,硅谷测试的那个用户是不是添加了一个菜单权限。我已保存,你看咱们的这个我在乎。对不?对不,那咱们看刚刚老师给他折上啊,这个给他折上菜单这个都给他折上。都给它折上,都给它折上,都给它折上,对吧,咱找个测试。对吧,咱就最后一个吧,测试,你看老是点击保存,我是不是应该向服务器发请求,没问题。但是你会发现,来,咱们回手看一下,老师都给它折着。你看你会发现一些事,什么事呢,你看咱的这个,这是咱现在正在写的这个,OK,是不是也勾上。你是要把这些数据带给谁?是带给服务器?对不,这能懂吧,啊,只是他。
25:02
那以及底下还有个菜单权限。其实菜单前线呢,用的也是哪个组件,用的也是table。那么只不过这个table带什么带折叠功能?而饿了么UI呢,也是有相应的组件,咱们可以看,你就搜搜谁搜。它也是有相应功能的,只不过是需要设置一些属性即可。对不,咱们可以找一下。往往底下翻看一下。来找找。看这这不就有。对吧,你看这是不是table,是不是相应的功能。对不对,对吧,其实table展示出这种情况,咱们看用的是谁呢?用的是一个字段,就是这。你看这个字叫什么叫呃,Expand肉杠key。咱们可以看一下这个属性,咱们找一下。找一下,那咱们呢,去搜索一下这个属性,可以让table变成这种折叠的效果。
26:06
对吧,咱们搜一下。哎,行,这个老师看一下子啊,应该是他。对不,咱们呢,给他拿过来去看一下。是不是有?那么可以通过该属性设置table目前的展开行。那么需要设置肉K属性才能使用。该属性为展开行的K的数据,它是个数据。对不?所以你会发现老师在这的时候,他也得是个数组,初始化也得是一个数组。所以要注意table是有这个功能的,而且这个属性必须和它一起使用,谁呢?就是咱们的这个看一下就是这个K的这个属性。OK吧?所以说这是对于咱们的这个权限管理模块这里的一个串讲。
27:03
但是这里真的没什么难度,几乎除了遇见了一些新的组件之外,剩下的业务跟咱当年所完成的几乎是一模一样。OK吧,那接下来咱们要把注意力放在该如何实现权限的这个业务上。怎么给他实现?但是这些展示数据,收集数据这些业务咱们就不再做了,但是你要注意,这里面出现了一个工程当中常用的一个组件,就是train组件。OK吧?
我来说两句