day18【权限管理和配置中心】/05-尚硅谷-谷粒学院-权限管理-前端整合

就是下面啊，咱来整合security它的前端页面部分，就是把前端页面中的权限管理的部分给它整出来啊，那我们来写一下啊前端。我小位置啊，就是我们说这个。权限管理。前端这么一个整合，那这怎么做，咱们快速整合一下啊，这些代码不需要各位挑点，就是我在今天的源码里边给大家提供了一个叫前端整合代码，各位把这个直接替换到你那个前端项目中就可以了啊，主要这么来做，这些代码不需要各位写一遍啊，因为它都是前端中Java中的那些内容。啊，那我写一下第一部分啊，各位到我的源码中找到整合前端的代码，然后替换你项目中前端项目中的内容。就可以了，主要做这个事情啊，这是我们要做的第一部分，那这里边啊，咱们下面快速替换一下啊，也就是把里边这个内容替换到我们项目中，那需要替换什么，里边有两个部分，这里边我也写到了啊，我写的够。

具体点啊。首先第一个部分咱就需要啊把这个。啊，这么写啊，强一点，在我们这个叫model models里边。Models里边先给它替换。我们这个element UI的这么一个依赖，把这依赖我们先做个替换，也就是说把这个替换一下，那咱看到啊，就是在我们这个项目中，咱这个项目里边有个叫no models啊MOS，就是把这里边那个M的UI组件替换一下，因为之前下载的可能会有点问题，那这个啊，我们直接找到啊，找到我这个项目这个路径，我的项目是在这里啊，但是你找找你的项目路径，我项目是这个位置node models，然后在里边呢，有一个叫AUI我们找到啊，E开头的。

就是里边element UI大家看这个东西，你把这个给它删掉，然后把我这个代码中这个element UI这个依赖给他复制过来就可以了啊，这是他做的第一步，先替换这个依赖，因为之前那个可能有点问题啊，我这个它的大小应该是7.1兆啊，这我应该之前自己替换过了，就改成这个7.1兆，各位之前下那个可能一样，也可能不一样啊，但是你把我这个给它替换掉，注意怎么替换啊。不要说把这个直接复制过去，它复制过去之后可能会有问题，因为它里边如果包含一些其他内容，它不会给你删掉，所以你的做法就是先把它删掉，然后把这个在复制过来啊，咱这么给它替换，这是我们要做的第一个no model中的IUI组件，先替换掉，这个会注意啊，怎么替换先删掉，然后再复制，不要给他直接复制，直接复制里边有些内容它还是会保存在里边的。

这是第一个啊，然后第二个咱就是替换其他目录。写这位置啊，就是替换其他的目录啊，这过程就不写了，我就直接复制一下就可以了，那咱们对照这个啊，咱就这么来对照来看了啊，大家看啊，我这是替换代码，其实咱替换的就是src中这个内容，主要就是几个目录，在目录中这么几个地方啊，第一个就是API咱找到啊，API中咱定义这些方法，咱主要替换捞印，还有一个acl给它复制过来，然后第二个是这个root路由，然后改成查数据库的，第三个这个子到里边加一些JS的一些文件做一些处理，然后另外就是YouTube里边需要改一些内容，最后就是这两文件需要给它替换，还有views里边加那个页面的那部分啊，主要就是替换几个文件夹就可以了，那我就直接对照，咱就一个复制就可以了啊。

啊，咱找到啊，首先第一个src中有个API，大家看啊，我这里边是里边没有的内容和叫替换内容，第一个有一个叫acl，就咱做权限的，那咱把它复制到我们的API中，在acl中是什么呢？其实就是定义你这个操作的JS文件啊，就是这些东西啊，咱之前都写过，咱就不写了，把它直接复制。然后复制之后还有一个叫log in，你把log印复制过来，替换我们里边的这些内容，因为这个位置我们加了一些其他的处理啊，但是你看一下啊，加了什么呢。各位看啊，里边的这些路径都改成了咱们新的这个路径，比如说我们登录啊，包括退出等等，这是改成so，包括其他值啊，这个做了一个修改，所以第一部分你把这个API先做个替换啊，这个咱们快就做到了啊，然后做到之后咱看第二个有一个叫router，大家把router打开，然后router中的内容把它复制过去，就是这个复制过去做一个替换。

啊，这是我们的第二部分。而这里边做的事情就跟之前差不多，只是说我们现在做的话，这些数据最后根据要查数据库把这要做到啊，咱现在写固定值，然后一会儿是查数据库中那个菜单，把这做显示，就是通过动态显示这个菜单啊，这是第二个叫router，然后咱看第三个这个叫to，这里边要加上很多的JS文件，那咱们现在啊，我就把这段给它先。删掉，然后把这个此道里边这个内容给它就复制过来，因里边加了很多的JS文件，JS文件中主要做一些权限一些处理啊，就都是一些Java代码啊，就是里边一些GS一些代码啊，就是针对vuee包这些东西。啊，这个位给他知道啊，这是第三个文件夹，然后除了它之外还有一个叫us，里边就是做一些封装的一些类，包括一些处理，那咱把它也是直接就复制啊，然后相同的给它都替换。

这是第三个啊us，然后第四个有一个叫。Views views里边呢，就是多出来一些页面啊，那能把页面那就直接拿过来啊，主要就是。这么几个页面。比如说有一个acl，包括这些啊，给他就。都。复制过来了啊。这些内容啊，咱看一下acl中有你的菜单。角色，包括这个用户，然后在这个就是这里边，这是首页面中的内容，还有一个叫layout，是咱做那个布局中一些内容啊，主要就是这么多，然后除了它之外，还有一个叫log in log in里边做咱那个登录页面，因为咱们要这些修改啊，所以把这个给它直接替换可以了，然后除了它之外，最后还有两个，一个叫men.js，一个叫permision JS里边我们加了一些权限，一些处理些控制。

所以这样的话啊，把这个我们就给他替改完成了，就是你把这个代码直接复制过去就可以了啊，这是前端，我们就快速给他整出来。然后这个替换之后，咱们在里边还需要做件事情。还需要做什么事情呢？因为咱们现在做这个就是spring做登录啊，包括这个认证过程中，咱需要再用到一个依赖，这依赖就是为了做到咱那个登录存储数据来使用的，所以咱把依赖需要装上，默认应该是没有这个依赖，所以你需要做这个事情啊。我写一下第一步直接替换内容，把这直接复制可以了，然后第二步咱需要在我们的项目中下载这么一个依赖，或者说安装一个依赖。然后安装依赖，你就用这个命令直接安装就可以了啊，这是我们的第二部分，我这个应该是提前装过了啊，各位默认应该没有，你把这个命令直接复制过来，然后你回车就可以装上，那我们来看一下啊，我里边应该是有这个依赖。

这依赖名字叫做V。然后这个。这个就是permission啊，这个date这么一个依赖啊，然后找到。V开头的。ST啊VEX就是这个依赖，因为它需要做那种持久化的存储啊，主要为了我们做登录准备，这依赖是需要的，默认是没有的啊，各位把这个给的就是下载下来啊，这是我们做的第二部分。然后这样做到之后呢，咱现在啊，把这个最基本的整合，应该我们就完成了，主要就做这事情啊，包括我再重复一遍啊做法你直接复制第一步先安装这个依赖，然后安装之后呢，替换我们刚才里边的，就是咱刚才这个过程中这些文件啊，我咱再打开啊，就在我这个源码里边的。叫前端整个代码中的替换代码SRC1把文件直接复制到你的项目中，另外你需要把这个IEI替换成我们最新的一代，因为之前那个IUI，你下面那个可能会有点问题，用我这个最新的，这里边解决了很多的bug啊，这样的话就可以了，这是我们的第二部分啊，所以咱们完成整合，然后这个做到之后，咱们还有第三部分，咱需要修改几个地方。

啊，就是需要修改几个地方，修改什么地方呢？主要有两个地方。给大家说一下啊，首先第一个地方就是你需要啊，把这个routeor里边那个index那个文件改成你那个项目中那个地址啊，就说什么地方呢，给大家找一下啊，注意看啊，在这个route里边有个inex，而inex中大家看这些地方是不是写你的这个路径，还有你的这些。文件那个就是文件那个路径，包括这个名字路径等等啊，就是这些呢，各位写的话改成你项目地址，因为这是我那个地址，我这不需要改，我是之前改过了啊，你改成你地址，比如你这个入境叫什么别的名字你改，或者你是别的地址改成你的定地址啊，这个需要咱改一下啊。

那我来写一下啊。咱需要改的第一个地方就是。我们要。修改这个router。文件夹里边那个in艾点JS里边那个啊，里边的路径和你的vuee文件的这个地址，把这个需要改成就是各位自己的个项目中地址啊，这需要都有切换，要不然他起的会报错，虽然说咱用查数据库的，但是这个如果你写的不对，你一启动，这里边会提示说是什么什么没有什么什么找不到啊，这个咱需要改一下，然后这个改成你地址之后，咱们还需要改的地方就是我们的。第二个地方。写到这个位置啊，第二个改什么呢？咱就需要修改你那个数据库里边，菜单表里边那个路径和页面的地址，必须要改一下，因为咱要通过动态路由就是查数据库，所以把数据库地址要改一下，改成你当前这个地址啊，那我们看一下啊，数据库找到菜单数据库，就这个数据库叫permission。

然后咱打开在跑里边改什么，给大家说一下啊，就是里边这几个值比咱看一下啊，就在里边呢，权限不需要改，因为咱们都是写固定的，咱往下看。讲师啊，就从这个位置开始改，因为前面就是你直接复制我那个从这位置开始改，然后大家看啊改什么几个地方。第一个地方叫pass，这pass是什么呢？其实改的就是你里边的。这几个值，第一个pass。然后第二个叫table，第三个叫save，把这个改成你那个文件中这个地址啊，这需要修改，然后后面这是什么？是写你那个页面的路径，比如说我这个table是e Du teacher的意思，那里面就写上edu的意思，这是edu teacher save啊，它前面不需要加上这个东西啊，直接加上这个edu这个东西，因为这前面做了封装，包括下面都一样，比如里边你看啊，有这个添加就改删除这些，就是加上你那个具体的地址啊，主要是后面这个你看修改。

改成这个地址和它的路径，包括这个课程分类，改成subject这个pass和它的路径，也就是说你把这个页面中的这些值跟你数据库中写的一样，要跟你当前这个项目的这个路径要对上，要不然他在取的话，你点击它就找不到这个地址。这个咱需要改一下，也就是改你数据库中里边这个pass，还有这个comment，改你的这个路径和你页面的地址，这是啊，我们需要做一个修改。然后这个啊，给大家简单我截个图啊，咱就是改。

主要是这些东西啊，你把这几个都需要。改一下。啊，也是里边的。这些啊，呃，我重新截一个啊。就这位置我们都需要给他改一下啊，所以各位比如给他自己来手动改一下啊，因为我之前都改好了，主要就是里边的这些值。是这部分啊，改成跟你的当前项目那个一样，然后这个改完之后，你的文件也都需要改一下，让两个都一样，跟你项目能对上。这个啊是我们的第二部分，所以咱们需要做这些步骤，然后都做完之后，咱这个前端啊，把这个应该总体上应该都改完了，主要就是这些西啊，所以各位啊，把这个直接替换就可以了，然后都做完之后，还有最后一个地方给咱之前改过了，就是在con这里面这个地址改成咱那个网关地址，因为现在咱就不用那个N都用咱的网关，所以改成这个。

822是咱的网关的地址。啊，给我写一下啊，就是第四稿。咱们修改我们前端项目，它那个请求的地址是咱这个网关的地址，就是咱们改。这个文件，然后在这个文件中，咱修改的是里边的。这行代码啊，然后把这地址改成叫822是咱的网关的地址。这个啊，我们就做说明，所以咱们现在这个过程，我们这么做就可以把这个最终整出来了啊，这就是前端的一个过程，就是直接到我的源码中，把这文件替换到你的项目中，然后替换之后在里边安装这个依赖啊，帮你修改这个路由中的这些值，然后最后改一下你的网关地址，然后这个前端项目就完成整合啊，这个是咱的整个过程。我们就做到了啊，然后这个过程中呢，其实我们新加的内容就是加了这么几个，主要是多了一个叫acl做这个权限管理，包括你看啊，在API中有al，然后在我们的这个root里边加了这个路由，另外在views里边也多出来一个叫al，主要是改了它，另外还改了地方，就咱这登录，因为之前登录是用咱们就是一个edu中是不是一个模块，Edu中咱当时写的个登录，当时我讲过这登录咱只是临时用的，后面会整合，呃，在今天这个登录就用到了你，咱后面不用这个登录，但是用做那个真正登录。

啊，包括这里边主要是al，还有这个烙印，包括烙印中这个调用，以及它里面这个。页面啊，这个做了修改，然后其他的就是一些Java处理里边加了一些权限，一些相应处理啊，归给他直接替换过来就可以了，这样的话咱们把这个就完成了，关于我们这个。前端权限管理页面的一个整合啊，这是一个完整过程啊，这里边啊，在笔中把每步都写到了。

这个咱们完成啊。