41-尚硅谷-硅谷通用权限项目-开发角色管理前端-改造框架登录功能（后端）

各位同学大家好，刚才呢，咱们把前端框架的目录结构给各位做了一个介绍，那下面呢，我们继续往下来做，下面咱们做什么给各位做个说明，咱们做一个功能的改造，那我们改造什么呢？我们来看一下啊，咱们回到这个框架里面来。比如说现在我先把它退出去，直接退出，那咱们看啊，我们要做什么事情。各位注意啊，现在我点登录，大家看是不是能登进来呀，但是这个登录呢，其实我们目前这里边啊，并没有写后端接口，它是用到这个Mo里边模拟服务器效果，而我现在想做件事情，让这个登录改造成访问咱们本地的接口做个实现，所以下面咱就来做这个事情，改造登录，让他访问本地接口做个实现，下面咱们开始来做这个事情，那怎么做，给各位先做个分析，然后咱们开始进行实现。

首先第一个我说明啊，其实咱们目前的重点并不是写登录，咱只是为了熟悉一下这个框架的使用过程，真正登录我们是不是要查数据库，我现在这个登录就不查数据库了，咱做个改造，那怎么改造，咱们这么来看，首先我先退出去，咱们现在把浏览器的F12打开，打开之后呢，找到这个叫network网络，通过它来看一下目前登录大家看啊，他的请求信息中是不是有两个请求，我们看两个请求。首先大家看第一个请求这个。是不是叫log in登录，然后登录中会返回一个内容，然后第二个请求叫这个info，就是得到用户信息，Info里边是不是也会返回内容，所以咱们参考它来做个实现，那怎么实现给各位来写一下，就是我们要改造的第一步操作，我就写到这个位置第一步。

咱的做法就是呢，在我们的本地。根据框架它的请求来创建接口，它的接口咱们看到是不是有两个接口，一个接口叫log in，一个info。那我写一下一个印一个info，这是我们的第一部分，咱们也是写两个接口，也就是啊这么一个原则，它掉的时候有几个接口，那咱们就写几个接口，然后它的接口返回什么数据，咱们就根据它一样也返回相同的数据，那咱们刚才看到了它的登录里边呢，返回的是不是这个数据，这个为了咱一会儿方便，我把数据先给它复制出来，我在桌面呢，就建一个T文件。然后这里边写上它的数据，首先第一个就是登录，它里边返回这个内容，然后第二个叫info得到用户信息，返回的是这个内容，我把这个也复制一下，所以现在我们看到啊，这个返回的数据我们都看到了，然后数据我们快速浏览点啊，首先第一部分登录信息状态嘛，是2万，然后有date，包括有一个to这么一个纸，然后info里边有他的角色有介绍，里边有一个叫AVA，就是他的头像，然后包括有他的名字啊，这个头像大家看一下啊，其实就是一张动图，也是咱们看到里边的。

这个土。我现在把这个打开就这个啊，所以咱们现在根据它这个框架里边请求这个接口，咱创建相同接口，只把接口在咱的本地进行创建，这就是他的第一步操作，然后这个之后第二部分咱再改前端，咱先把第一步完成，然后再写第二步，那下面我来做一下。

咱们来到咱的后端里边，首先第一部分我在CTRL里边，我们来创建一个CR了，那我来做个创建，我就叫index controller。把这个创建，创建之后呢，在上面加上注解，第一个controller，然后第二个request mapping，在里边加上咱的路径，这个路径呢，我就从课件中直接复制一下了，比如我就加上这个路径。加上这个叫in，这是我们的这个路径。然后在过程中呢，为了咱后面如果要用swa测试方便，咱再加上一个注解A片，然后里边加上个tag，我们加上就是用户登录的接口，所以现在这个就完成了，完成之后呢，在里边两个接口，一个是log in，一个是info，那我们写两个接口，首先我们先写log in接口，咱们再重新看一下啊，我这个先退出去。

把F12点开，我们再快速看一下啊，首先第一个接口login，咱们看到啊，Login什么提交，Post提交，那我在里边我也写一个POS提交。Post mapping里边加上路径烙印，然后加上public，咱还是用result，根据咱们相同这个结果，然后这个叫捞。把这个完成，然后最终呢，返回跟它相同的数据结构，就是这么一个结构，我把这个给各位直接复制过来，根据它我们做一个返回，那咱们来写一下这个结构，在里边我们加上result.ok然后在OK里面，注意啊，它传入的是这么一个结构，这结构应该是一个map集合。

所以咱们创建一个map集合，等于new上一个哈希map，把这个做创建，然后向map集合中放入它的数据，它的名字叫ton。然后值me。这个咱直接拿过来，最后把map直接穿进去。所以这样的话呢，捞印接口就完成了，但是一个小问题啊，大家看啊，状态嘛，是不是2万呀，咱们这状态嘛，成功之后是不是200呀，咱先这么来写，一会儿咱通过前端给它改一下，所以现在登录接口完成，完成之后我们再写第二个接口就是info接口，我们来看一下啊，Info用的是get提交，那我在里边快速写一下。

加上get mapping，然后f publicf，然后在里边返回跟他请求接口相同的数据，就是这么一个数据，我把这个拿过来，然后用它咱们来返回一下，那我快速写一下啊，首先咱们还是new一个map集合，然后向map里边放入它的数据，咱们复制一下啊，第一个Rose就是角色。啊，其实这个角色呢，我们现在没有用到啊，咱后面会整合里面的功能给它先加过来，就加这个me啊，就加这个了，这是第一个。然后后面跟他一样，第二个名字叫introduction，就是介绍。然后在里边我就加上这么一个介绍，然后继续来添加第三个叫AVA，就是头像，这部分我直接复制一下。

这里边改成逗号，然后之后还有最后一个它叫name，然后这个值叫superdmi超级管理员，现在这个完成完成之后最后加个造的也OK，传入map，所以大家看啊，现在登录的两个接口我们就完成了，第一个log in，第二个叫info，这个咱们做了一个实现，所以以上咱就完成了登录改造的第一部分，完成了登录本地的接口的实现，这个写到这里，然后这个之后呢，咱到第二步呢，就开始来修改它的前端，在前端里边把这功能我们最终做实现。那我这里写下啊，第二步咱们开始修改前端。

然后前端怎么改，咱们一步一步来做一下，这个过程并不难，但是咱要改很多的地方，所以咱们一点一点来做个修改，把前端给它最终改出来。