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

各位同学大家好，刚才呢，咱们把登录的接口完成了，下面呢我们来整合前端，把最终登录功能我们进行实现，那下面我们来看一下怎么来做，咱们开始做前端，我在这里边给大家写一下。首先我们的第一部分我就来个一或再来一个2.1。第一部分我们干什么呢？先配置一下咱们后端接口，这个路径也是我们后端的IP地址，加上这个端口号，这个我们先做一个配置，因为你配置肯定不知道你后端的路径到底是什么。这是咱做的第一部分，那这部分怎么做，给各位做说明，在咱框架中有多种实现方式，首先第一种方式大家看啊，咱们找到这个文件大家看，这个叫做，然后大家看啊，这里边一个路径杠API。

那这个路径咱们来看一下啊。比如说我现在我把服务器重启一下，咱看一下这个路径它的作用是什么。服务器已经启动，然后咱们打开F12。在里边看一下啊，直接登录各位看啊，你看路径是不是叫d vapi，所以它指的是你访问路径，那我们怎么来改呢？第一种方式，你把这个地方给它做个修改。那这里边我来改一下。我把这行复制一下，然后咱们改成就是HTTP冒号杠杠。Local host加上8800改成这个路径，然后你把这行注掉可以了，它就会访问到你本地的接口路径，这是里边的第一部分，就是咱这么做完全可以，另外里边还有第二种方式，我们现在用第二种实现，当然用它也完全可以做到，那第二种怎么做？给各位最后说明，咱们找到这个文件叫wee config，就是wave.config JS文件，然后大家看里边啊，在这个文件中我们找到这行配置。

咱们看这行什么意思，各位来看啊，咱们说过是不是引入它引入是这个Mo server，就是咱说那个模拟服务器，咱把这行注掉，给它改成咱们本地的接口路径，那怎么改，我从课件中复制一下，咱把这段代码直接复制过来，然后咱看一下这个代码什么意思，这段代码不需要各位敲，咱直接复制改就可以了，然后大家看啊，首先我加一个叫percy，什么意思，是不是代理，然后这里边有一个叫d va片，那它的作用是什么呢？也就是你可以理解为当你把路径中包含有d va片，它会做件事情给我们，就是跳转到这个路径中去，就是local house8800，只要路径中有这个，那就跳转到这里边去，这时候我们用它进行配置，咱们就用这个进行实现，就不改这个文件了，当然就改这文件也可以，然后这个之后。

下面还有这么一个内容。大家看这里啊，就是对我路径做个重写，比如说你访问的是这个路径，然后他到那个我们的880端口中去访问8800中的接口，另外里边还有这行给大家重点解释一下，这行叫change o，给你等于处表示支持跨域，那什么叫跨域，给大家解释一下，这个跨域呢？咱们之前呢，就是我在录制那个硅谷课堂，包括上一通项目的时候说过跨越，当时咱们解决方式都是在我们的后端解决，但是现在其实前端也可以解决，那这里边给大家解释一下啊，什么叫跨越，然后说一下这个解决方式什么意思。

我在这位置给大家画个图来说一下，这个问题叫做跨域问题，那什么叫跨域呢？咱解释一下啊，它指的就是啊，比如说咱们访问过程中有三个地方，哪三个地方第一个就是访问的协议，第二个是你的访问的地址，比如说你的IP或者域名，第三个是端口号，那它指的就是这三个地方有任何一个不一样，它就会产生跨域问题，咱说的具体点给大家简单画一下啊。各位注意，我们前端的路径应该是这个路径，HTP冒号杠杠，Local house这个9528这个路径。而咱们后端路径是这个路径，HTP冒号杠杠，Local house 8800，这是咱们路径，大家看里边啊，有这么几个特点，咱做一个分析，首先第一个访问协议他们都是htp IP地址都是local house，但是大家发现他们的端口号不一样吧，这个是9528，这个是8800，而我现在前端要去调用后端接口，当然咱们调用用的肯定是那个阿贾克斯，具体说这个叫ex进行调用，这个过程中因为端口号不一样，它就不能访问，访问就会产生跨域问题，这是咱一个解释，而跨域的本质，各位记住是浏览器对阿贾克斯请求的一种限制，写下啊对。

阿贾克斯请求的一种限制，它不允许跨域访问，所以咱们这个过程中会有跨域，那怎么解决呢？咱目前在前端解决加上这个，趁着这个属性值等于true，它就表示支持跨域访问，所以以上咱们这配置之后，我再访问接口，就会访问到我本地8800中的接口，进行咱们功能的实现，这是咱们做的第一件事情，这里边我来给大家截个图，在图里边特别画一下。

我写到这位。在咱们这个voe JS里边，然后做了个配置，通过里边这个pro进行配置，当时这个路径到8800，然后它支持跨域访问，这个第一部分我们就完成，然后完成之后呢，我们再改一下里边的第二步，在里边我们继续写下这步咱们完成，然后写一下这个2.2。写到这里，2.2做什么呢？咱们修改一下一个地方，就是us里边有个文件叫request.js文点啊这个文件最后修改，那为什么要改它呢？咱们看一下这个文件里面的内容，我们把这文件找到。

YouTube里边的request这这个，然后大家看啊，文件里边我们看这个位置，各位注意啊，这里边做什呢个码思然你啊，是咱们刚才文件中的这个内容，就是它d va片，当取到它之后，它会做一个跳转到8800中去做了这个实现，当然做的过程中往下来看还是刚才这个文件，Request文件中，你看啊下面这里边两个部分叫inter s，咱理解为就是拦截器，一个是请求，一个是响应，什么意思呢？当你用阿里克斯发送请求，先执行这个拦截器，然后再请求，当你接收反应数据，先执行响应拦截器，再反应数据，所以每次请求响应都会执行两个拦截器，那咱们看响应里。

前有个地方就这个位置，它会得到你响应返回那个数据，然后数据中他给咱们做了一个判断，当状态嘛，不是2万那就是失败，他会用IUY弹个错误提示，如果是2万直接返回，当然各位注意啊，咱有一个问题。我们目前成功不是2万是多少，是不是200呀，所以咱们需要把这个给他改一下，就这位置我们给它改成什么200做这么一个处理，这是咱们要做的这个事情，给大家截个图。就是咱们要做的就是在里边把成功状态呢改成200就可以了，因为咱的接口是返200写一下啊，状态码修改为200。

这样的话就可以了，以上是咱们说的第二部分的修改，这各位给他要改出来，第一个配置接口路径，第二个改返回的状态码，然后改完之后，下面我们还有第三个，我们写一个2.3。第三个里边做什么呢？那就是修改一下你那个登录接口的路径。包括提交方式，包括参数等内容，这个最好做修改，那这个怎么改？咱们之前讲过啊，在咱们框架中规定的结构中，API里边是定接口，然后API中大家找的这个user色我们看啊，User里边有咱们请求的路径，那咱把路径给它改一下，怎么改？找到你的接口中第一个复制类上边和方法上边的路径，那我直接复制一下第一道这个路径。

In system index，它的名字叫第二个叫这个，我都给它改下。然后里边呢，提交方式检查一下啊，第一个是post，第二个是get，所以现在这一部分我们也做了修改，然后注意保存，保存之后咱现在这个就完成了，我把这个给大家截个图。咱们改这个就是。API里边user JS文件改一下你接口那个路径，提交方式等信息，所以以上前端就改完了，通过以上的修改，咱的登录就能用到本地接口，最终做个实现，所以以上是修改过程，咱们再看一遍，然后最终我们做一个登录的测试。首先第一部分我们在后端两个接口，一个登录一个info，包括返回跟它Mo里边相同的数据，然后第二个前端，前端中第一个改一下请求接口路径，并且解决跨域，注意路径不要写错，然后另外响应状态码成功是200，咱改一下，第三个把咱们接口路径给它改一下，改成咱们自己本地接口路径，现在完成，完成之后我把服务器重启一下，最终做测试，但是测试中呢，为了咱们明确，我把这名字稍微改一下啊，比如说改成加个at硅谷，为了咱看的更明确。

这个啊，都给它加个at硅谷。然后现在啊，我把后端和前端都重新启动一下，咱们试一下最终的结果就是这个登录能不能实现，或者说咱改成了本地接口之后，能不能最终登进去，咱们等它启动，等最后测试。

后端启动了，咱们等前端。前端也启动了，咱们在这个浏览器中啊，我重新试一下啊，为了明确我先给它都清一下，防止有缓存，然后咱们先退出去，现在注意啊，我点开F12，然后咱们点击登录，大家看是不是登进去了，然后咱明显看到这名字什么是不是at硅谷，就是我刚才写的是不是这个就是它，所以证明用的是咱们本地接口，另外呢，咱看它的路径中啊，有一个特点，你看这里边是不是还是DVAPI，就是它里边通过dvpi它会给我们跳转到咱本地的8800中去，所以显示还是它，但是已经调到咱们本地接口，咱们通过显示名字就可以看到，所以以上就是登录功能改造，把登录就改成了本地的接口实现，然后改完之后呢，最后还有一个小功能就是退出，比如现在啊，我点退出发现是报错了，因为目前这退出我们。

有写接口，那怎么退出，给大家说一下啊，两种方式，第一种方式你可以写一个退出的接口，然后做个调用就可以了，这么做完全可以。另外还有第二种方式，咱们改一下前端进行实现，那我就直接改个前端，咱们来试一下啊。那说一下怎么改，咱们找到这个文件，此道里边有一个user.js，把这个点开，通过它来修改，如果你不这么改也可以，那就加个接口，就反一个OK就可以了。咱们用前端改一下，那怎么改大家看啊，第一个它是调那个登录，第二个是info，第三个是不是退出啊，就这退出是干什么呢？大家看啊，咱找这个方法，你看啊，这个方法其实就是在这里。我们找到这个方法。

应该就是他啊这个方法你看啊，这个方法干什么呢？就是我现在登录之后把数据是放到cookie中了，而咱怎么退出，把IE清空是不是可以了，其实我退出呢，不需要请求接口，我把cookie清空一刷新是不是就可以了，所以咱们给它改一下怎么改，找到退出里边，咱把它请求部分给它注掉就可以了，那我现在啊，把这个四行代码注释掉。现在他就可以清空cookie，就可以退出这一行，就是清空数据，所以现在这个完成完成之后，我们最终试一下这个效果啊，我先登录，然后点退出，是不是退出去了，我再登录，包括我再退出，所以现在啊登录功能咱们就完成了改造，各位把这过程给它能做到，另外通过过程也熟悉一下咱这框架中的开发的规范。