尚硅谷大数据项目之九章云台/视频/11-前后端对接.mp4原创

呃，那我们之前说了，实际上我们已经把所有的这个用户管理模块的代码都已经写完了，呃，实际上就是说你可以看到我们这个index controller里面，我们写了一个log in，也就是登录的这样的一个呃API对吧？呃，当然我们在这实际上我们还是需要再补充两个API对吧？呃，比方说登出API我们还没写对吧？所以说我们在这边我们需要补充一下这个就是说。你退出这个中台的呃，一个API，好loveout，它是一个post请求，然后public result里边的泛型是void，因为你登出的话呢，你是实际上呃不需要返回任何数据的哈，所以说我们就直接给他一个void，然后呢，Return一个呃，result.of200success对吧？然后呢，啊，那我们除了写这个登出API以外呢，我们还需要写一个根据token获取用户信息的API，那为什么要写这样的一个API呢？因为当登录以后，对吧，后端会给前端返回token对吧？我们来看一下上面的这个呃登录API loving API，当我们登录成功以后呢，我们会把token返回给前端。

对吧，那你返回给前端以后呢，那前端会带着token对吧？向后端发送请求，那么后端接收到token之后，根据token提取出用户名，对吧，然后根据。

用户名对吧，根据用户名做什么呢？呃，根据用户名获取用户可以访问的菜单对吧？或者说权限信息，这样我们每一次发请求的时候呢，呃，实际上我们都会获取一次，呃，就是说这个菜单或者说权限的访问信息对吧？那这样的话呢，我们就可以保证前端不管你访问什么样的页面，呃，你都只能访问。这一个用户可以访问的菜单对吧？所以说在这儿的话呢，我们是一个什么呢？是一个get请求，那么这个get请求的话呢，它的URL呢，是info对吧？URL是info，然后接下来的话呢，Public result，我们返回的是user logging info，对吧？然后我们的函数名呢是user info，那这里边的话，我们接收的参数呢，是http serve request，那为什么我们接收的参数是这样的一个参数呢？呃，这是因为呃，你接收这样的一个参数的话呢，你可以从这个请求里边呢提取出。

什么呢？提取出我们的请求头信息对吧？所以说在这的话，我们首先从请求头中提取出token对吧？那么怎么提取呢？哇，Token等于request.get header对吧？啊，当然我们的这个请求头的名字呢，叫做token，然后我们get heer呢，我们就可以呃，提取出它的token信息，然后呢，从token中提取出用户名，那么怎么提取呢？Y user nameme等于这个实际上提取用户名呢，我们已经写过了，那就是j wt helper.get username对吧？然后把token传进去，这样的话呢，我们就把用户名给它提取出来了，然后呢，获取用户的权限信息，或者说是可以访问的路。

不由信息对吧，那在这的话呢，那就是one user logging info等于什么呢？Index service.get user info对吧？然后这个是一个username，然后返回就可以了，Return result.of。200SUCCESS，然后呢，User log给你for OK，好，那这样的话呢，我们就补充完毕了，然后接下来的话，我们把这个云台呢给它启动，启动以后呢，就可以和前端呢进行一个对接了，对吧，和前端进行一个对接了，OK，我们启动好以后呢，当然我们在这里边我们就直接给他访问一个八，呃访问一个9528。

对吧？呃，当然在这的话呢，它就直接登录进来，我们在这登出，我们选择退出的话呢，那么它就调用了我们的这个logout这样的一个API，对吧，然后我们就来到了登录页面，然后在这里面的话呢，我们点击检查。然后再点击右键对吧，点击检查，然后点击network来监听一下我们前端发出去的请求，然后呃，当然这里边的话呢，我输入的是admin，然后六个一对吧，然后点击log in。你就发现登录进来了，那你呢，你这里面呢，你会发现它发送两个请求，那么第一个请求呢，就是我们的logging这样的一个请求，首先你可以看到这里面的headers。我们向谁发送的请求呢？大家可以看到我们是向local host的冒号9528斜杠Dave杠，API，然后斜杠斜杠index斜杠，那么有同学就会想啊，说我们的后端对吧？我们的spring BOO它监听的不是local host冒号8080吗？那为什么这里边它发送请求的URL是朝9528，怎么还多了一个什么代维API这样的一个东西呢？对不对？那我之前讲过了，实际上就是我们前端它会启动一个服务对吧？

啊，那么前端启动了一个服务以后呢，对吧，它启动的监听的是9528，那我前端发送请求呢，会向这个9528这个服务发送请求，然后它会把这个请求转发出去，对不对，转发给8080，也就是supreme BOO，那么在前端代码里边，其实我们可以看一下对吧，云海front and下面它是怎么配置的呢？那么在voe.con点。JS里边诶有一个proxy，这个proxy其实就是路由的意思啊，你可以看到在这儿有一个斜杠大方API，当然我们这个前端的服务呢，它是启动在了9528，然后呢，他把9528后面带斜杠de API的通通转发到了local host 8080，实际上它的转发操作是在这里实现的，是在这里实现的，对吧？好，所以说呢，我们在这儿的话，你可以看到它发送的请求，对吧？前面的这个URL的开头呢，是local hosts冒号9528斜杠带VAPI，那么这一段呢，我们转发到了local host冒号8080，然后我们再看后面这个API，斜杠命斜杠index，斜杠loging。

对吧。那么它发送了8080，有哪个控制器来处理呢？我们来看一下。你可以看到这儿斜杠劳命，斜杠index，然后斜杠老兵。对吧，它就会自动去由这个login这个方法来进行处理，那么当登录成功以后呢，我们就会返回一个token吧，是不是我们就会返回一个token呢？那在这里边的话呢，我们就可以看一下。

他的response对吧，当然你可以先看一下它的配漏。它发送的这个请求体呢，是user nameme mini passwor6个一，那么它的响应是什么呢？你可以看到它响应就是除了200和以外呢，那就是我们的token的这样的一个字符串，好token的这样一个字串。那么我们。前端接收到这个token字符串以后，他会做什么事情呢？我们再来看一下对吧。那么在这个user JS里边啊，当然我们可以看一下，就是说呃，点击APSRC这个文件夹下的API下面的acl对吧？这个是我们前端的呃，用户管理模块，它发送API的这个文件夹，我们看一下这个user.js对吧，你可以看到这里面有一个log in这样的一个请求。

对吧，那么这个就是我们前端页面发请求要调用的一个方法，对吧，你可以看到它把请求发送到斜杠的命斜杠index斜杠斜放老丁，它是POS请求发送了U内发的，对吧。那么我们的这个log in是在哪调用的呢？我们来看一下，它实际上是在store下面的modus下面的user.js里面调用的，我们来看一下，诶，你可以看到这儿呢，有一个actions，然后呢有一个logging，对吧，它调用了这个logging API，然后它调用了API以后呢，当然你其实不用管这个什么action啊，什么modeldus这些干嘛的，因为它其实涉及到比较复杂的一个概念，呃，就是说它涉及到了VO exx这样的一个状态管，前端状态管理工具的一个使用，其实你不用管它，我们只需要知道这个动作，也就是他登录的时候，它做了什么呢？首先你可以看到他登录。

那么他登录完以后呢，对吧？你可以看到这个return，这个user api.logging对吧？这个就是调用了我们的呃，登录请求对不对？调用我们登录请求使用用户名和密码进行登录以后呢，你可以看到它从result.data这个字段里面获取token对吧？你可以看到在这里边，诶，我们的这个data字段响应的data字段呢，就是token，然后呢，获取token以后呢，然后将这个token保存到浏览器的cookies里面，我们把这个ton保存到览器的cookies里边呢，我们再去点击这个request.js对吧？呃，这个request.js呢，是在src文件夹下面的哪里呢？在us下面的文件夹的request.js对吧？那这个的话呢，你可以看到它就是说我们每次发送请求之前啊，注意这个是拦截器，就是每次发送请求之前。

呃，都会执行这套代码，那这套代码做了什么呢？你可以看到它，我们判断了一下对吧？发送请求之前，如果有1TOKEN存在，那么我们就把token放到请求头里边。对吧，那么这个token存在在哪里呢？显然它是存在cookies里的，对吧，它是存在前端的cookies边的，所以说我们后面每次发请求的时候呀，都会带着这个token来发送。对吧，每次发请求都会带着这个头肯，因为我们在这里边实现了一个前端的拦截器，对吧，每次发送请求都把这个头盔带上，比方说我们下面我们还发了一个请求U引O，也就是。对不对，实际上它是朝哪发请求呢？就是朝这个user引O这发请求呀，对吧？我们来看一下它的UR，它发送的UR呢，是a domin index u info，对不对，那这个就是他要发送的，呃呃，就是说请求实际上它就是发到了这个，呃，Spring boot的这个方法这来处理，对吧？那你发过来以后呢，它提取出token，然后呃，提取出用户名，然后呢，就提取出用户可以访问的权限信息，然后返回，所以在这儿的话呢，我们就可以看一下前端他发的这个请求，对吧？他发送的这个请求的话呢，我们看一下他请求头里边。

对不对，这个是request headers，你可以看到它这个请求头里边，诶，它是确实带了一个key为token，呃，Value是这个令牌，或者说token字符串的这样的一个请求头，对不对？那么它的返回是什么呢？当然它的返回就是200SUCCESS，还有呢，就是我们的。对吧，Data，那这个data的话就是用户名以及这个routes，也就是我们这个用户呢，他可以访问的所有的权限，对吧，可以访问的所有的权限。

好，或者说所有的菜单，诶，那你在这边你可以看到，由于我们的用户名是admin，呃，那么他的角色呢，是系统管理员，所以说他可以访问所有的菜单，对不对？比如说用户管理啊，角色管理啊，包括后面的一些统计管理之类的，但是你要注意，我在这里面点击统计管理的时候呢，返回了一堆404，为什么呢？因为我们目前为止我们只实现了用户管理和角色管理的，呃，这个后端的API，像统计管理呢，报表管理啊，什么任务调度呀，数据治理对吧？我们在spring boot里面，我们还没有实现相应的控制器，所以说你在点击它们的时候呢，就会出现404对不对？404表示什么呢？表示URL不存在的意思，表示URL不存在的意思，好比方说你这里面你点击了用户管理对吧，那我就可以比如说把这个诶用户给它删除掉。

对不对，我可以把用户给他删除掉，我还可以点击。创建用户，比如说在这里面的话呢，我就可以点击检查，然后点击network，看一下我们创建一个新用户的时候，他发送的请求对不对，那么在这里面的话，比如说我是一个左员。然后密码是123456对吧，然后点击确定，那么它就什么呢？对吧，我们这里边我们创建用户就成功了，你可以看到我发送的请求呢，是往啊，Thein user and user这里进行发送的，对吧？也就是我们往哪里发送呢？我们往这个user controller里边的什么呢？ADD user这里边进行发送的，那么它接受的请求体呢，必须是一个user这样的病类，对吧？也就是说它必须包含用户名和密码，我们在这里面我们就可以看一下诶。我们的paylo，我们把用户名和密码呢，给发送了过去，对吧，给发送了过去。

OK，那么它的响应呢，就是诶新添加了一个用户，就是我们往数据库里边呢，新添加了一个用户，那么在前端代码里边，我点击添加用户，然后填进去以后，点击确定它是怎么样。对吧，弹框，然后发请求的呢，我们简要的看一下这个前端代码，首先用户管理这个组件，它所在的位置呢，是在views这个文件夹下面的acl文件夹下面的the命下面的list vouee，对吧，Liste。然后呢，我们来看一下，当我点击添加用户的时候，这有一个艾特click，就会调用艾的命这个方法，那么艾dmin这个方法呢，就在下面我们来寻找一下，当我调用adddmin的时候呢，Diallo visible呢，就复值为触了，当然就是admin ID啊，什么username password对吧？呃，它这个组件的内部状态呢，我都给它复制为空字符串，Dialog vis visible变为true以后会发生什么事情呢？我们来看，那么就会弹出一个对话框对吧？你可以看到这里边，哎，这儿有一行就是dialogue visible，如果它变为true的话呢，那么下面的这个呢，就是弹出来的框，然后呢，我们在这两个input标签里面呢，输入用户名和密码，然后点击确定，那么点击确定呢，它就会调用ADD的user对吧？因为click事件。

呃，他监听的是这个这个ADD user呢，它是一个click事件对吧，那么这个ADD user在这里边，它调用到哪里呢？你可以看到它调用的当然是这个a user方法，那么这个a user方法呢，它会调用API里边的。ADD的user这样的一个，呃，API对吧，也就是它会向后端发请求，当然我们传的两个参数呢，一个是用户名，一个是密码，我们点击这个I的userr呢，你就会发现，诶，它就跳转到了API文件夹下面的acl文件夹下面的啊，in.JS对吧？那么它会向哪里呢？会向API name斜杠ADD user，也就是会向ain斜杠user，然后斜杠user呢，发一个post请求，然后key为username value为用户名，Key为password value为password，对吧？

那你发送了这样的一个请求以后呢，对不对，那它就发送到后端了，那么后端呢。针对这个域密码呢，进行加密对吧？进行加密以后呢，把它写到数据库里边，然后返回一个这样的一个响应，诶这样的一个流程我们大概就明白了，当然你添加了一个用户以后呢，你还没有给他分配角色，所以我们在这里面点击分配角色，他就又弹框了，对吧？啊，当然这个前端的逻辑呢，基本上是差不多的，呃，你想要说是一下子彻底把它理解，可能难度比较大，因为现在前端它有一个概念叫做大前端，也就是说实际上它现在。

前端呃，可能比后端还要更加的复杂对吧？好，我们点击角色列表对吧，在这我点击一个普通用户，然后呢，我再点一个保存，哎，你就会发现我们给左源这个用户呢，分配了一个角色叫普通用户对吧。当然你点击确定的时候呢，很显然它调用了一个叫做啊S。To user对吧？那么它调用的后端请求呢，就是啊，Domain user，然后ign row to user对不对，然后它发送的数据呢，是比方说你可以看到user ID呢是七。ID呢是二。对吧，他就把这样的一个呃，Jason数据结构，或者说字典数据结构呢，就发到了后端，那么我们后端由谁接受请求呢？当然就是由这个user controller这个控制器里边的啊，Sign road to user来进行，呃，就是说处理对吧，那么在处理的时候呢，我们把这个user ID和rule ID的这两这个关系呢，给它写入到user row这张数据库里边，对吧，这张表里边对不对？当然在这的话呢，然后呢，返回一个信息，分配角色成功对吧？你就可以看到，诶我们的response呢，是分配角色成功，当然你这里面你要一定要注意，就是我前端在传参数的时候呀，我的这个字段名row ID和UID对吧，这是一个驼峰命名。

那么它必须和后端的这个user。这里边的的这个B类里边的字段名uz ID和肉ID呢，必须是一样的对吧？必须是一样的，你这是驼峰，那么前端发送请求的时候呢，它也必须是一个驼峰对吧？它也必须是个驼峰命名，呃，就是说也就是字段，比方这是RO大写I，小写D，那么你后端的这个字段呢，也必须是RO大写I，小写D，对吧？我们来看一下前端在代码里面你发送请求的时候对不对。

啊3ROSE，我发送这个请求的时候呢，你就会发现，诶，我这儿发送的这个data对吧，它的字段名是user大写还是小写d row大写还小写D对吧？那和后端是完全一致的，因为你不一致的话，后端它是没有办法把你发送的，呃，这个数据呢，反序列化成一个。什么呢？Java的这样的一个病的对象对吧？所以说这儿我们是呃，需要注意的好啊，当然就是说我们测试了这两个以后呢，当然你也可以再测试一下其他功能对吧？呃，但是这个流程呢，我们基本上就讲明白了，那就是前端向后端发请求，然后写数据库，然后后端呢，向前端的返回响应对吧？比方这个角色管理，我就可以这个普通用户分配权限对吧？比如说这个权限呢，普通用户的权限呢，目前有三个可以访问报表管理，任务调度对吧？当然我可以把这个都勾掉。

然后呢，点击一个确定对吧，点击确定的话呢，你再点分配权限，你就会发现，诶，它就只剩下三个权限了，对吧，也就是实时统计，访问流量统计以及会员统计。那么有同学就会想啊，就是我点击这个分配权限，它是怎么样知道，诶怎么样渲染出来这个树形组件的呢，对不对，那这就实际上我们还是点击检查来看一下他发的请求是什么，对不对。点击分配权限对不对，那你可以看到我们这里边点击二的话呢，那就会发现它的响是什么呢？它的响应就是data ID等于1PARENT ID是零，然后什么全部权限，然后你要注意的是什么呢？你要注意的是。

我们看呃，当然就是说在这儿的话呢，我发送的这个请求对吧，实际上我们是可以用postman来来看一下，这样的话，它会把呃Jason数据结构呢，进行一个就是进行一个美化，对吧，会好看一点。好。我们复制过来，然后点击send对吧，你就会发现诶。我们在这里边的话呢，它会把全部权限都返回来，但是某些权限呢，是什么呢？比方说数据统计这里，你可以看到它这个select的这个字段呀，是true。对吧，那么我前端根据你返回的这个字段select的字段的，它是处呢，我就可以把它勾选上了。对吧，那我们后端怎么处理这个请求呢？那我们来看一下啊，Doin row permissions斜杠二这个请求是由后端的哪一个控制器来进行处理的呢？首先它肯定是RO控制器，因为它的UR的开头呢，是啊，Doin row对吧？然后接下来呢，是。

Permissions，然后roll ID，那这个就是根据角色ID获取它可以访问的菜单，对吧？那我们在这儿的话呢，我们前端呢，那获取它的菜单呢，就是它可以访问菜单，就是数据统计这个菜单，也就是这里的哎，统计管理模块啊，这样的一个呃，菜单对吧？这样的一个菜单，好，然后我们继续看后端，那在这儿的话，你就会发现诶。它调用了这样的一个服务，就是role permission service里面的get permiss by RA ID，好，我们点进去你就会发现。他做了什么样的事情呢？首先连接数据库，然后从数据库里面把什么呢？把这个角色ID对吧，角色ID为二的对吧，我们可以看到它实际上请求的，呃，这个角色ID是二。

呃，实际上也就是普通用户啊，那么角色ID为二的呢？的所有的权限ID对吧，可以访问的权限ID都取出来，然后呢，把它放到一个列表里边，把它放到一个列表里边，然后呢，再把所有的权限取出来。对吧，然后呢，我们。就是说生成这个所有权限的列表的时候呢。啊，如果这个角色ID对应的权限包含了，对吧，我们在便利的时候，它包含了所有权限中的某一个权限，我们就把这个c select字段呢，给它设置为true对吧？其实在这里面设置的，然后呢，Bill的一个树形的菜单出来，对吧？Bill的一个树形的菜单出来，那你在posman里面你就可以看到它其实就是一个树形结构了，对吧。也就是说，哎，你可以看到。

它这个就是一个树形结构了，然后我们build完一个树形结构之后呢，我们就可以把它返回了。对吧，那么把它返回以后呢，当然它返回的是一个列表对吧，然后在我们的呃，这个控制器里边呢，我们就把列表作为数据呢，直接返回给前端了，那这个就是它的整体的一个流程，对吧？这个就是它的整体的一个流程啊。那么接下来的话呢，我们编写的权限管理模块，实际上其他模块呢，呃，基本上也就遵循同样的流程了，那接下来的话呢，我们就开始编写数据统计管理模块。