day05【讲师管理模块前端开发】/02-尚硅谷-谷粒学院-后台系统登录功能改造（1）

首先咱们做的事情就是把这里边的登录功能改造传到本地，也就是说呢，我在后端一会儿咱写一个登录的接口，然后把这功能先给它改过来，最后咱再往后来实现。那这怎么改给大家，我这里边来画一下啊这个过程。也就是说，我们要做的第一部分。把我们系统里边的登录功能。改造成咱的本地，也就是请求我本地这个8001端口，然后让他来实现我们这个登录啊，这是我们要做到的，那我们先看一下他之前的方式。上一个我提到怎么看啊，咱们把这个就是F12点开，点开之后呢，不看这council，咱看这个地方叫network，或者说中文叫网络，然后咱点它点这个登录。在这里边呢，它会列出来目前他默认访问的地址，而他默认访什么地址呢？再看里边这个地址，就这位置，你看啊，默认他这地址叫e z Mo是这个地址，但是目前这服务器有问题，所以咱们要做的事情就是把他访这地址改成咱的本地的地址，这是我们要做到的，那这怎么改给大家我来具体说一下他改的过程。

啊，这各位啊，咱就临时做个改造，后面的咱肯定会整合上我们的框架。那现在拿过来啊。角这个位置。首先第一句话就是系统的登录默认。啊，默认它使用的是这个地址，比如我们刚才看到的。这个地址。但是这个地址中它的服务器有问题，所以咱现在要做的事情就是把这个登录请求的地址给他改造成咱本地，就是本地是这个地址HTP冒号杠杠local house，这个叫8001，这是我们要做的事情啊，所以大家要先明确咱们要做什么事情。

这是我做了一个说明，然后这个说完之后，下面再来说这个。具体该怎么去改这个部分。那我们来强调一下啊。首先第一个啊，咱先看它的原始方式的过过程，然后咱再自己来做个修改，那咱就看它的代码中啊，这过程希望各位给他也做个了解啊，首先第一个咱看这怎么做啊，大家看啊，咱第一个看什么呢？你看啊在src中有个文件夹叫API。API中有个文件叫log in.S大家看这个啊，你看啊，这里边写的是什么呢？我觉得这个各位应该能看懂，咱之前写过，他就表示这个方法可以被别的债的调用，而这方法中做的是什么呢？主要是这部分。这部分做的适应就是定义了你当前请求的那个接口的地址，还有你提交方式以及你的参数，包括大家看这叫user烙印，是请求地址，这POS的表示提交方式，然后它默认是给我们封装的一个地方，就这个地方啊，这大家也看一下啊。

Us，然后这里边是什么呢？咱就看一个单词这个东西。AX iOS啊，刚才咱忘了回顾了啊，大家知道这就是发送阿贾克的请求，所以它里边直接在里边给我们把它做了封装，而咱只需要在里边定义就可以了，那咱就把这个地址改一下，那地址怎么改，它里边是一个构成部分，这里边只有一部分，咱看这位置啊，大家我打开啊，大家看。你看啊，这个是它配置的一个地址。而这个地址咱们清楚的看到，他跟我们刚才访问的这个地址应该是一模一样的。你看啊，这两题是一样的，然后它只包含一部分，你看这个地址中，它在后面还有一个叫user login，而这个user烙印咱也看到，它是不是就是。

这个地址也就是说他的访问地址是由你这一部分，然后再拼接上你的这部分构成单地址，这是它的前面部分，然后加一个杠，U侧劳是它后面部分，最终咱看到地址就是里边的这个地址。啊，这是它本身一个地址拼接，然后咱一会儿要做的事情就是把这个地方改成咱的本地啊，然后后面地址咱们可以写接口用这个地址，那我们来啊说一下怎么改。来看步骤啊，然后这里边我写第二个啊。咱的做法就是第二步就是我们修改这么一个配置文件中那个请求的一个地址。然后配置文件是什么呢？在我们这个CNF这个文件夹里边，它有一个文件，就是咱们刚才这文件叫Dv.Inv.DS再来改这个文件。

Dv.ev.DS然后这个文件中咱要改什么，就是把这个地址咱做个修改啊，那我来改一下啊，这个我先给它先注释掉啊，咱保留原始的，然后下面我再多加一行，再加这行中就是这个地方咱不用它了，改成咱的本地。啊，那我改一下啊，改成本地。我先删掉啊，而我们的本地就是HTP冒号杠杠，它叫local host的8001啊，就是咱们本地的这个地址。801端口把这个需要做修改啊，这是我们要做的第一部分，把这地址改成咱的本地。啊，这个大家啊，我直接就截过来了。然后我们改的就是里边的。

这个地方。这各位啊，给他知道啊，这是我们做的。就是第二部分。啊，咱做这件事情。所以咱们这么改之后，这个就可以了啊。然后这改的时候呢，给大家强调啊，它会有这么一个细节问题，希望各位特别注意一下啊，我这里强调什么细节问题呢？大家仔细看啊，你看上面的地址是不是叫HTPS，而我写的是不是叫HTP，所以各位注意啊，你写的时候这个不要写错，这叫访问协议，咱现在用的是HTP，你别给它加个S，这就不对了。不是说S不能用，是这S你要用的话呢，我们个人是没这个权限的，你需要找相关部门来认证，比如相关部门你需要花钱，他给你装个证书，你才能用，所以咱们是没这个权限的，你不能用HTS，咱用的是HTPTP，可以直接访问。

在实际项目中肯定都有RS的，但是S需要你找相关的部门给你认证，需要花钱，需要装个证书才能用，所以这个不要写错，答案写的是HTTP，这我特别强调啊，之前班上很多同学这经常写错，他写的APS后来一直仿不到，还问我为什么返不到，我说是不是你写错了，他一直跟我强调没写错。都是复制你的，我说你肯定不是复制我的啊，所以这各位注意啊，这边不要加S，要特别注意加S咱用不了，因为咱没那个权限啊，你需要找消防部门申请认证才可以，咱用HTTP。这是啊，第二个我们做了一个修改，然后这个做到之后，下面咱们继续往下来做，咱做它的第三部改。那第三部怎么做呢？给大家强调啊，因为他现在呢做登录，它默认是要去请求里边这个地址的，那他地址怎么请求，咱们大概看一下它的底层的过程啊，咱找个地方啊，给各位了解一下啊，不需要你去记。

底层中呢，应该是在这里边。就在这个store里边有一个文件叫user JS，然后大家看里边啊，在这里边呢，有两个方法，它在请求时调的就是这两个方法，一个方法叫log in，一个叫get info，也就调这两个方法，一个叫log in，一个叫这个info。Log in就是做登录的，而info来看这个词，Info是不是有信息意思，它就表示登录之后得到我们那个用户信息给他，目前应该是会调两个方法，一个是登录方法，一个叫info方法啊，就是对应这两部分啊，这是咱看到第三个，也就是说咱们一会儿要做的是这个事情。我写一下啊，第三步我们要干什么。就是因为啊，他现在就是进行这个登录，他要去调用两个方法，一个方法是log in就是。

进行登录的这个操作的方法，还有一个方法叫info，是用于登录之后获取用户信息的方法，有两方法，所以说我们要怎么做呢？咱一会儿就创建这么接口中的两个方法，然后就能实现这个登录，就是咱一会儿写一个log印景印，对应我们刚才看到的这个地址，然后就可以了。啊，这是我们要做到的那两方法怎么来写，咱看它那个底层的这个地方啊，还是这个地方。其实你看啊，这一部分呢，是他反映数据啊，这代码虽然看起来有点乱，但我觉得关于能看懂啊，就是咱们一会儿怎么做呢，因为咱们现在是临时为了能登进去，咱们其实真正操作肯定要查数据库，但是我这个就不查数据库了，咱后面在整合那个的时候再查数据库，那怎么做来看登录啊，按照它的格式反应数据，它里边这么一个格式。

第一个这个东西叫Rose，就是一个角色，还有一个叫name。Name就是名字，还有一个单词叫a water a water什么意思呢？这单词不知道各位是否认识啊，如果你不认识，我今天说出来各位要认识，呃，What表示头像的意思，就是用户的头像，所以大家看info里边咱需要反映这个数据，一个Rose，一个name，一个water啊，这名字这里边只可以随便起啊，包water我们加个头像。然后咱看登录里边，它只需要返一个值，就这个值叫token啊，这是我们做到的。那我们来写一下啊，咱怎么来做。就是第一个。咱们login里边，我们只需要返一个token值，这是第一个。

然后第二个在这个info方法里边，我们需要返回有多个，一个叫Rose。还有一个叫做name，还有一个叫A啊，就是那个。就是头像啊，刚才刚刚说的这个头像，你看里边Rose别写错name。所以咱们按照这个格式返回可以了，而我刚才说到这里边啊，咱看到啊这个代码不知各位是否记得啊，咱在我们上节课提到过，就是点赞response，点赞是表示成功了response反应数据通过response里边我们有个date，然后date中有Rose，有name，有water，所以咱们把这返回就可以了啊，这是我们要做的事情，而它返回结构。就是咱们之前写那个，就是R那个对象啊，包括咱们看这个地方啊，你看这里边。它就是根据这个2万做了判断，如果是2万返回，不是2万他就报错啊，2万是咱们当时写那个R类中那个状态码啊，也就是这个东西啊，咱看一下啊。

咱上一课都写过的啊，是这个，你看这里边我们返回成功失败，然后成功咱是2万，失败是变为零一啊，这是我们提到的，所以就按照我们框架的结构中有一个细节，各位注意啊，咱们写这个状态码的时候，正确效果必须是2万，你不能写2000，也不能写20万，你要写2000，他不对了，因为它的底层中判断的过程就是根据2万做判断。往前这位置扣的不是2万就是失败，一写2000他就失败，所以咱们一写2万啊，这个啊是我们要做的这么一个事情，就是咱们一会儿做的就是写两个写接口中写两方法，一个是登录，让他返一个tone值，一个是info，返回三个一个Rose，一个name，一个water，然后返回结果都是咱们那个R那个对象。

啊，这个啊是咱们做到的。C把它给大家做了一个基本的一个分析啊，咱就这么来做，咱只是模拟这个过程，后面咱会整合进来那个C那么一个框架啊，现在是模拟登录，为了咱能往后来做，所以这也不是最重点东西，但是咱能把这过程能给它做出来。这个啊，咱就分析出来了，然后分析之后，下面咱就开始写下这个具体的这么一个接口部分，把这接口我们给它写出来。啊，然后写一下啊，就是第四部分。咱就来。开发这个。接口，那接口怎么做？首先强调啊，之前一直说接口指的不是interface，是咱写那个controller service和map过程，那我们就直接几个controller啊，在里边，咱给他按照这个要求把数据返回就可以了。

那咱来写一下啊，来到我们的项目中，我就在这里边直接写了啊，在controlrler中，那CTRL里边呢，比如我现在我在建一个controlrler，专门用于模拟我们的登录，这controller按照我们的规范，比如我叫edu。Log in control。这个啊，是我们建的这么一个control，然后在里边我们写上就是两个方法，一个登录，就一个log，印一个info。啊，这个给大家我先截个图在里边，我们就创建了一个CTR，然后实现我们的这个登录。啊，就是这张图啊。然后创建之后，下面按照我们刚才分析的里边两个方法，一个log印一个info，那大写一下啊，这个咱就快速写代码，那怎么做，第一个CTRL上边。

我们是要加注解啊，要各位记住啊，咱先看一遍，后面再有这功能，我就直接写了啊，然后怎么加，第一个我们加一个叫rest controller，表示这个类交给管理，包括它能反映数据，第二个加个快的mapping，表示它那个请求的地址。所以咱们啊，加上这两个，那我在里边加一下啊。第一个注解叫这个rest。CTRL啊，就是我要我建议各位啊，这种注解你不要手敲出来，都要给它用提示出来，你手敲很容易写错，然后第二个叫这个request mapping。在request mapping中，我们给它起个名字。啊，比如说这个名字，假如我就叫这个，呃，咱就换个名字啊，我叫edu service，然后这个叫U。这个我们起的名字，然后写完之后里边两个方法，一个就是log in的方法。

还有一个叫。In for的方法啊，咱们来写两个方法，那咱来写一下啊，第一个login啊，比如说来一个提交方式啊，不合适咱再改啊。它里边起个名字就叫。Log in在下面写方法，咱来一个public，按照咱之前说到的。咱们这个CTRL所有的方法都返回到是不这个R对象啊，所以现在咱们也反个R，这个是不变的啊，我叫R，然后名字就叫烙印。这个啊，是咱们写的这么一个方法。我先蕊那个值啊，先不让他报错啊，先来OK。这个创建了啊，然后创建之后咱们再来一个O。我来一个get，比如mapping里边起个名字，我们叫这个info。然后在里边也是写方法。Public r，我叫info啊，Info里边我们也是给它先捋那个值，然后咱再加它的返回值，比如说叫OK。

所以这样的话大家看啊，现在在这个CTRL里边，我们就写了两个方法，一个叫log in，一个叫info，这两方法为了咱一块儿这个登录中做调用啊，这些地址咱一块儿改。然后这个方法中，因为咱是做了一个模拟登录，所以咱们不需要查数据库，但是咱后面整合rate啊，肯定需要查数据库，咱做个模拟，怎么模拟呢？按照它这个结构第一个登录。咱在啊，就是看到这个位置啊，登录里边的，咱只需要返回一个值就可以了，就是这个token，因为你看里边啊，它是根据token值做个判断，所以咱们只需要摆一个token就可以了，那我这里边咱来返回一下啊。怎么返回咱之前写到过啊，就是我点上一个date，在里边加个名字，这名字是固定的，要跟你这一样，又叫token，然后它的值，这值其实可以随便写个啊，那我就写一个的mi了啊，因为咱那个用户明白这用的的密，所以这是叫登录方法，让这方法又返一个token，然后值是个me，然后在你的这个就是前端中，它根据这个值得到token，就能把这个登录进去。

啊，这是第一个，然后第二个叫info info里边返回有三个值，Rose name和就是角色名称和这个头像，那咱们也是返回这三个值。啊，咱来返回一下啊，跟上面写法一样。点上一个date第一个值啊，我用这个复制啊，咱最好也不要手敲，很容易写错啊，这个叫Rose跟他要一样。这是角色，比如说角色，呃，随便写一个啊，我就叫我的命。啊，这个名字随便起的啊，然后第二个再给它点it，第二个这个名字我们叫name，比如说name，咱叫这个admit。

然后第三个这个叫AVA。啊，就是里边这个头像。比如说咱们啊，给他加一个头像，就加一个，就你加一张图片就可以了啊，那这头像呢，我在这个里边啊，提供了一个这么一段数据啊，其实咱返回就是这个数据，比如说头像咱就给它返回。这么一个头像啊，这是我家找的这么一个图片啊，就是它默认那个头像那个图片。就是。这个啊。包括这个咱们看一下啊，这个头像是这个头像。就是他啊，一张DF动图啊，把它对我们的头像啊，或者你自己随便找一个可以用我这个都一样的啊，所以现在把这个两个方法就完成了，咱最后看一遍啊，两个方法，一个叫log in，一个叫info log in表示登录，按照它前端的要求，咱只要返名称是to k，然后就可以了，值可以随便写，我写个me，然后第二个info返回三个名称，就咱看到里边的这三个。

Rose name water就可以了，那我这里边分别也是加了不同的值，这是Rose，这是名称，然后这是它那个头像啊，就是刚才我们看到加了一个GF这么一个动图。这个接口我们就完成了啊，这是我们写出来的这么一个东西。然后这个写完之后，接口完成了，咱下面啊把这个啊，我先启动一下啊，把服务启动一下。然后咱们一会儿改前端进行操作啊，这是接口部分。这个啊，我给大家，呃，直接啊，咱就截个图了啊。就是这部分啊。直接我截个图，然后把这图我就放到这里边来啊，这是我们刚才写的这么一个接口，也就是我们里边的第四步操作，咱就完成了开发这个controlr，就是两个方法，一个叫烙印，一个叫ino。

啊，这个完成，然后完成之后，现在这服务器也已经启动了，高请之后咱来改一下前端，就是前端，咱刚才把这地址已经改过了，再改的话是什么呢。相哥要知道啊，你看啊，刚才我提到他的地址是由你的这个地址和他最终拼成你的路径，但是咱的路径应该不是这个路径啊，咱路径应该是改了，那我改成我的路径，我们的路径是这个地址。Edu three user所log in edu three in for，所以咱们啊，把这个改一下。我在这个图上给大家标注一下这个步骤啊，是咱的第五步。我们就是修改A片文件夹那个log，印点JS，然后给它修改成咱本地接口的那个路径，或者说本地接口的地址，那咱们修改啊，首先这个login我们本地应该是叫这个名字。

叫他edu user login。啊，那我们改一下，这是我们本地的这个地址与他们两个要拼成的地址，然后写完之后往下看啊，第二个POS提交方式，我这个也是POS。啊，下面有参数，但咱不需要这就放在这里啊，因为咱用不到这个参数，咱直接有地址和提交方式，然后第二个是它里面这个信息。我们的地址叫做u edu user info啊，就这个地址。然后提交方式是get，咱这里边也是get，所以你需要把这两个地址做修改，改成咱们就是。本地的地址。一个是log in里边我们需要做个修改，我把这核心的给大家截过来啊，这是第一个。

然后第二个是那个info里边我们要做个修改。就是里边的。这部分。所以这个啊，就是我们的第五步修改你的这个log in JS中这个地址改成咱的本地。这样的话就完成了啊，比如说现在这个过程中，咱把这个基本的过程应该就初步做到了，那下面咱剩下的就是最终测试了。好，这个啊，我再说一遍啊，然后咱再测试它的过程，就是呢，首先我们在里边先把这个，就是在前端中这个地址改成了我们的本地的local house801，因为它默认用的是这个easy Mo，但这服务器有问题，所以咱改成了本地，然后第二个在本地按照他的要求，咱们建了两个方法啊，这是它固定的，它要求两方法，一个log in，一个info，按照他的要求返回数据，一个token，一个就是这些值啊，也是咱们看到这个。

右侧里边根据它看到。In for里边这几个值，Log印中这个值，然后写完之后咱们把接口中都返回了，最后改一下log印JS中这个地址，改成咱们的本地，因为我本地写的是edu user，什么law in，什么info，把这个都做修改，这样的话就可以了啊，所以这个我们就做到了，然后做到之后咱们把后端的接口启动，然后这个前端也要重启，因为你改了配置文件，这是需要重启一下的。我再说一下啊，你改了这个就是DVEV这些配置文件需要重启，但是后面其实咱写在里面不需要重启，而你如果说配置文件一旦修改，这必须要重启，要不然它不生效，C单给他重启一下。冲洗之后，最后我们再测它的这个效果。