4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/24-尚硅谷-云尚办公系统-搭建项目前端环境（下）.mp4原创

各位同学大家好，刚才呢，咱们把项目的前端环境完成搭建，并且对于目录结构给大家做了一个简单介绍，那下面呢，我们来做这么件事情，大家看啊，在我们这个前端环境中，它里面是不是有一个登录功能，但是它这个登录呢，它是用里面这个Mo服务器中的这个相关的接口，就是并没有调到我们当前接口，所以咱们现在做件事情，把这个登录改造成本地，也就是说让他调用咱们本地的接口，就是我们系的接口，最终实现这个登录，那咱们看这个应该怎么去做。首先给大家做个分析，然后咱们进入视线。咱怎么来分析呢，说明啊，我们现在把这个12先打开之后呢，这个。如果说你用的是中文版，应该是网络里边，这里边能看到当前所有的请求，我现在点登录，大家看是不是登进去了，然后登录之后我们发现啊，下面有这么两个主要请求，第一个请求叫log in，第二个请求叫info，然后log in里边咱们看啊，给我们返回了这段数据，就一段数据在里边，也这个数据是目前的效果，那咱们怎么做呢？我们做法其实很简单，就是你可以这么理解。

它有几个接口，那我们就写几个接口，然后把接口写到我们的本地，它返回什么数据，那咱们就反映出数据，所以咱根据这种思想把它做改造，那咱们看具体怎么来做，我这里边啊给大家截个图，咱们慢慢来分析。我写到这里啊，啊，上面是咱刚才说那个搭建，然后咱们把它写到我们的下边这个位置画一条线啊，我它区分一下。咱们写到这里啊。首先第一个就是。框架它本身自带了登录啊，框架本身自带了这个。

登录，它的登录是使用这个Mo里边这个模拟的这个接口经实现的，然后实现过程中，它一共掉了两个接口，一个是log in，一个是info，啊就这是第一个，这是第二个。然后和F里边分别返回了不同的数据啊，咱们把数给它制过来，这是第一个，这是第二个，咱们看一下啊，在捞印里边呢，它返回了这段数据就是它。我把这个拿过来。啊，咱放到这里啊，让大家看的更明确。把这个数据。调到稍微小点啊，然后他在这个info里边呢，返回了这段数据，这数据稍微长点啊，咱们就截一部分了啊拿过来。包括你看啊，里边有date什么ton等于这个值，然后info里边有这么大数据啊，里边有就是更多的这个。包括啊，有他这个肉角色介绍啊，这个va头像等等。

所以现在我们看到它的基本结构，那咱们该怎么进行改造呢？咱们进步来看啊，首先看第一个，它里边请求接口中是不是一个路径啊，你看径里边啊，是这么一个特点，前面是LOCAL28，然后加了一个叫d va片，后面加上是你的路径，所以里边是这么一个组成，那这组成中呢，有这么一个特点，这一特点要看一下咱们这个前端框架中它是怎么来做的。啊，给大家做个分析啊，这部分做个了解，但是大家要知道，要不然后面功能你不好改出来，然后大家看怎么来看这个过程啊，第一部分大家看这里。这个部分他是不是有这个IP和端口号了，这是第一部分，所以咱们要做么事情，第一件事情把他的IP和端口号。写一下啊，就是IP加。端口号。

本是这个做我修改，然后再来看啊，它的第二部分大家看这里。是。本地接口路径，比如说本地，假如说我叫什么usere啊，或者叫什么别的名字，所以也就是说把这地址要让他访问到咱的本地，那怎么来修改，我们看一下啊，这里边有多种改法，咱先说改法一。讲到这里啊，就是修改方式一。咱们用其中的一种就可以了，这各位都讲一下啊，大家都有一个了解，第一种方式呢，你可以这么来做，就是我们找到项目中有一个文件，这个文件叫V，然大家看啊，有这么一个地址，你这个地址是DVA，跟咱们刚才看到的这个名字是不是一致，所以你可以怎么做呢？把这位置我改一下啊。

给大家写一下，比如咱写个事例改成什么，就是你的HTTP冒号杠杠。加上local house，咱是8800也可以这么来改，这样的话防盗就是你的本地接入路径，如果你写上它，那就是当前这个9528动作号，这是我们的第一种改法，改这个配置文件啊，里边做一个修改。我截个图啊，就是在这个文件中。我们进行修改。修改成你的IP加上号啊，这种方式是完全可以的，然后另外呢，还有这个修改方式二。

给大家也写一下啊，方式二。这个怎么做呢？咱们找到另外一个文件，大家看这个文件叫wave.config JS。把文件打开啊，咱们找到里边的一个位置，我们找一下啊，里边有一个地方。呃，大家看这个位置就这里。你看这里啊，就这一句话。叫Mo server，它用的是咱们这个Mo里边这个服务器的这个相关接口，就是模拟接口，所以咱把它改成咱们这个本地接口，就在配置文件中加一段配置进行实现，这是里边的第二种方式。我把这个也截个图啊。有这个文件。在这里边我们修改，把那个Mo的服务器改成本地的接口。写一下啊。把Mo。修改为本地接口的服务的地址。

所以这是我们的两种改的方式啊，咱们就用第二种方式了，用第一种也完全可以啊，那当家看怎么做啊，大家来到我的课件中，在课件中我这里写到啊，就是你在这个点GS里边这位置加上这段配置就可以了，我现在把这配置给各位就复制过来，这个不需要各位敲，因为你敲很容易敲错啊，比如你多个符号，少符号，总是出现一些没有必要的错误，咱把它直接复制可以了，然后这个before这段话给它注掉就可以了，那咱们把它拿过来。咱们看到这个文件中啊，把这段话先注掉。因为他用里面嘛，然后咱们加上这段话就可以了，这就我们改的这种方式，这里边写的什么内容，咱们一行一行详细看一下啊，它是什么含义。首先我们看第一行叫杠d va片，什么意思呢？因为你看啊，我刚才这个配置问题中，它的路径是不是叫杠d va派就表示只要我的路径是这个开始的话，那他就把这个路径给我们转发到local house8800里面去，说的具体点啊，大家看我刚才的路径，比如咱们是这个路径。

我给他截个图啊，咱就说一下这个过程，虽然它框架实现了，但是各位要知道他是怎么来做到的。我再重新画个图啊说明比如我现在啊，我这里边要做个登录啊，他要去请求我们的路径，那就是刚才咱看到的这个路径，当我们一启用这个路径之后，因为咱在配置文件中加了刚才那段配置怎么做，而且路径中你发现啊，它是不是包含了这个部分。是不是有一个叫DAPI，那怎么做，他就把这路径给我们转发到这个叫local house的8800里边去啊，它就会转到这里边去。就给你做个转发，然后最终反路径是怎么样，就是前面你可以列为把这部分就这里。

替换成。P杠，那就变成这个样子，后面是wave。Admit to。然后杠U色杠啊，最终把径就给你变成这个样子，这是我们这个配置作用，也就是把这个前面的到DAPI部分变成它，然后最终问到这个路径，这是它写这个配置的一个作用，这个要明确啊，然后咱们再往下看，注意这个你要写的话，要跟你的段号保持一致，因为我之前写的是8800，你可能不是啊，要保持一致。包括里边就是去掉你这个开始了，最终变成我们这个样子，然后除此之外呢，在里边还有几句话，这句话。

什么意思，就是支持跨域，解释一下什么意思啊，大家看，因为我当前这个前端的动画号是什么，那刚说过是不是叫281，而我这个后端接口端口号是8800，他们端口号是不一样的，不一样的话呢，默认是不能访问的，访问会产生跨域问题，你加上这段配置表示支持跨域访问跨域咱一般这么理解就是你的访问协议。IP地址端口号有任何一个不一样是不允许访问的，访问会产生，而你加了这个配置之后，就算你这个不一样，它也可以进行访问，所以这是支持跨域的一个配置啊，咱们通过前端把这个做了一个处理。这个我在里边也写一下啊，就是里边的这个特点就是叫跨域。你TPIP地址或者说域名，第三个就是你的端口号，这三个地方有任何一个不一样，它是不允许访问的，访问会产生跨域，咱们通过这个配置让它允许进行访问，所以这是我们的第二种实验方式，把当前的接口对口号改成咱们的logo house8800，我们是这么来做。

啊，这是刚才提到的，就是把它去掉，就是也就是说把这个到d vapi部分变成800。在里边我们做到。这是我们做的这个部分啊，更为明确，然后这个之后我们继续往下来做，下面做什么呢？我们来看啊，就是在我们这个操作中啊，我就不看课件了，咱直接来说了啊，下面怎么来做第一部分做这个事情。然后下一部分咱们到这张图里边啊。就这位置，我们到第二步。咱们的做法就是在我们这个。

后端来创建登录的相关接口。返回和Mo里边相同的数据，第二步咱就来做这个事情，那这个事情怎么来做，咱们看一下啊，刚才咱们也看到在Mo里边它的接口有两个，一个叫捞一个info，所以我们在本地我们也写两个接口，并且跟它返回相同的数据就可以了，这是我们要做的这个事情。那下面咱们把它来给它改一下啊，就写这个介绍部分。丹麦自我实现。我现在把我这个idea打开，然后里边开始建接口，接口创建很简单，就是写一个烙印。一个返回。相同数据就可以了。啊，等等它启动啊，咱们开始写一下。现在这个可以啊，然后可以之后我在里边操作啊，咱们在这个CTRL里边，比如现在我来建一个。

类就是一个controller，这个类的名字我就跟课件中保持一致了啊，就叫index controller。这个拿过来，然后拿过来之后在类上边加上切换注解啊，这个我也就复制一下啊，因为这都是之前写过的啊。这个。拿过来。就现在这个完成，完成之后咱们把依赖引入啊，当然你可以用那个自动导包，我这里为了各位看的更明确，都手动导一遍，在里边两个接口，第一个捞个印。第二个info咱们先写，首先看Mo里边它的提交方式是什么？Post啊，那咱们也写上一个post的提交。加上。Post。Yping在里边加上我们的路径啊，这个路径我就叫捞了。

然后加上public result。反正咱们统一的结果个。之后返回跟它相同的数据，它的数据是长这个样子，咱把它复制，然后对照这个我们来写一下。这个数据啊。然后大家看怎么做啊，首先在里边这位置是不是有一个date date中有名称，还有它的值，所以写法很简单啊，咱就建个map往里面放数据，最终通过点OK，把这个返回就可以了。我们写一下啊。建一个map集合，加上啊，咱加一个object map等于new上一个哈希map。把这个创建，然后向map中来放入它相关的数据啊，就是map。点put第一个它的名字咱们叫token。

第二个它的值啊，咱们是这个值in。这个拿过来，最后我们做一个。点OK，加上map，所以现在就完成了，但这里边一个小细节啊，我们这里边写的成功状态码是200，它那是2万，一会儿咱前端再做个修改啊，咱先给它都改成200状态码。这是第一个啊，然后再写第二个，第二个叫跟它基本类似，咱们快速写一下啊，For提交方式用的是get提交。我们就到这里。Get mapping加上f public result，然后在里边同样啊，建个map集合，向map中放数据，最终把它做个捋退。这个我就从课件中直接复制，因为就往里面put这个数据就可以了。这个咱们拿过来让大家看一下啊，首先个map集合，向里面放这个Rose name等等，最通过回，所以现在啊，把这两口我们就完成了，完成之后呢，在里边个口就是出出呢，我们就要loveout，就反一个OK就可以了。

这个单给他也写过来啊，比如在后面做退出做准备。所以以上这个后端接口部分咱们就完成了啊，各位知道里面这个过程啊，就是它那个Mo里面返回什么，那他就返回什么，最终快速完成，完成之后我们继续往下来做，咱们看里边的第三步操作。这个我画个图啊，第一步呢，咱们是改了一下这个。本地径IP这个完成，然后第二部分在里边，我们后端建了接口，然后咱们看第三步，第三步开始，那就是修改我们的前端部分，在前端里边来改一些相关内容，那前端中改什么？这里说明啊，首先第一个。

大家看啊。它本身的路径叫这个名字，咱们接口路径好像不是叫这名字，跟他名字不一样，所以单需要改一下我们接口的名称，那怎么改，看这个项目这个结构中啊，有一个文件夹叫A片。API里边有一个文件叫users，咱们在这里改一下它相接口径，就是把这些径改成咱们本地接口路径，这时我们要做这个事情。我截个图，然后写下步骤，最终做个修改。好，我们来看一下啊。首先我们做的这个部分，就是咱写个3.1。修改API文件夹里边的user.js文件，把接口的路径修改为这个本地路径。咱们快图改一下啊，我从里边复制了。

它的前面部分有这个。拿过来，然后找到us，第一个是这个登陆。改一下啊。改成劳印post提交，然后第二个是O。是他现在就完成，第三个是退出。改一下，这是我们做了一个修改啊，所以这个就完成，完成之后我们继续来看啊，在这里边还有一个地方，就是刚才我们提到的啊。大家看。它本身返回的状态码是那个2万呀，但是我们现在返回状态码是那个200，跟他那个不一样啊，它是2万，咱们是200，所以咱们需要给他做个处理，那怎么处理。这里写一下啊，3.2。咱们修改里边一个JS文件，把这个返回状态码。修改为200。

然后这样的话能得到我们接口，要不然不是200它不是成功的，那改什么，大家看这个文件啊。U to中有一个叫request JS，这里边我们相关的这个修改的地方。啊，这个结构图，然后咱们具体看一下这个部分啊。你先拿过来。大家看一遍啊，首先前面部分引入相关的组件，包括U等等，这位置创建ex请求，取到我们的路径啊，什么超值时间，然后往下看啊，下面有两个，一个叫intercepts，另外一个叫。都叫intercept，指的是什么？是不是咱们说的拦截器，拦截器中一个叫请求，一个叫响应，什么意思呢？大家来看啊，也就我现在啊，当我用发送请求的时候，会先行这个器最请求，当我这里边有的时候会先走这个器最终应数据咱们来到响应中，因为我接口反应数据会先到这里边，在里边它怎么做。

这个还记得吧。Response，咱之前提到过啊。这什么意思？响应中有响应行，响应头，响应体，这个是不是就是响体部分得到我们响应体，然后他根据状态码做了一个判断，它默认你看判断是谁，是不是2万，如果说啊，你不是2万，它就失败提示你的错误信息，如果是2万返回成功信息，所以咱把这个值改成200，因为目前我们是返回200状态码这个位置我们需要自后修改。所以现在啊，咱就完成这个基本的修改过程，把主要部分我们就做到了。做到之后我们继续往下来看啊。下面呢，咱们把服务器啊都给它重新启动一下，然后最终把这效果做个测试啊，当然这里边还有一些细节，咱暂时没有用到，咱先把这个基础功能先完成，那我下面啊把项目都启动一下，首先前端启动怎么做呢？咱先给它退出去啊，我用CTRLC。

加个Y就结束服务，然后把它再进行启动，N PM run DV啊，这个情况下CTRLC把它停止，然后再启动，在后端里边我们进行启动，然后咱们让这个接口生效，包括你的登录啊，包括你的info以及里边的退出。那等他都启用之后，咱们把效果最终来做个测试。我们看啊，后端启动了，前端也可以了啊，这些都成功了，然后咱们来到这里边，我们试一下啊，我先刷新。然后把F12点开，点开之后现在我点登录。大家看是不是登进去了，登录之后你看啊，它当天有请求路径，你看路径里边啊，这里边虽然还是DV9528，但是因为我们做那个转发，它就转到我们那个880里面去，你看后面路径就改成我们刚才这个路径，所以现在你看登录就已经完成了，就完成我们这个具体操作。

啊，这是我们目前做的这个事情，把这个前端框架的登录改成了我们的本地接口，咱们后面这个接口都用到咱们的本地，包括登录之后，这里边有一个小问题，各位注意啊，比如现在你在点里面这个功能。你发现是不是出错了，因为咱这个功能没有写，他还是找那个Mo里边，咱们现在只登录完成，后面这些我们都会去掉，然后加上我们的角色管理，什么用户管理等等相关内容啊，这就是关于我们项目中前端环境的搭建，包括登录功能的改造。