00:00
咱们继续来往下学习啊,刚才呢,咱们把这个前端环境通过这个框架模板做了一个搭建,这过程我们最终运行也成功了,然后下面呢,我们来做件事情。做什么事情呢,我说一下啊,咱就把这个框架中呢,它自带这个登录功能,改造成咱的本地。来做这个事情,比如大家看啊,刚才他的登录呢,并没有通过咱的本地接口,那我一会儿在本地并线接口,把登录访问本地介入性实现,但是其实我们的目的呢,并不是为了讲登录,主要想讲一个东西叫跨域,因为登录呢,咱后面也不这么做啊,咱这个只是为了讲一个跨域这个特点,比如实际中大家知道登录呢,咱可以用微信登录,或者手机二维码登录等等过程。啊,在下面咱来做这个事情,通过这个功能,第一个讲跨域,第二个让大家感受一下这个框架该怎么去使用,这是咱的目的,那下面咱说一下怎么来做的过程啊,我来写一下。
01:04
首先我们里边的第一步,咱们先通过浏览器的F12先做个查看,看一下,就这个框架这么写啊,这个框架它自带的登录访问了就是哪些接口,这是第一个,然后看到之后呢,我们怎么做,根据它自带的接口,咱们就比如说他访问了两接口,那我写两接口,然后它的接口反映什么数据,咱就反映什么数据,把这个改造成咱的本地,这是我们的第二步,我写一下啊,就根据它自带的接口,咱们在我们的本地创建相同的接口,然后返回相同的数据,这是咱的第二步,那我现在把这两步咱来做一下啊。那我这么来做,首先我先把这项目咱先退出去,先退出,因为它本身呢是自带登录,它的自带登录呢,在里边有个地方,这个地方叫Mo,它就模拟了一个服务器啊,我叫Mo,你看server模拟了服务器,但是咱要改成本地,那我们看怎么做啊,首先我把F12点开。
02:18
找到里面一个叫network网络,然后里边登录。大家看啊看这里边。我们清楚看到啊,它主要返问了两个接口,第一个接口叫log in,第二个接口叫info,然后log in中呢,返回了这段数据在info中。返回这个值,所以咱们怎么做,我们也来建两个接口,然后返回跟它相同的数据就可以了,最终改成本地的路径,这是我们看到的这个过程,通过它我们也看到啊,然后它里边的反应数据,咱为了一会儿操作方便,我给他先复制出来,就是第一个登录接口返回这个数据。
03:02
我把这个数据在我本地,比如我建这么一个啊T文件,咱在里边先拿出来,或者咱一会儿编写代码方便,我就放到这里边。第一个啊,这个in接口,它返这个数据,然后第二个有一个叫info接口,咱们看那个info里边,它返回的是这么一段数据,这个我也给他拿出来。所以现在啊,这个我们应该是看到了,然后看到之后呢,下面的咱就来完成这个具体的代码编写,我们来写一下啊,然后怎么做,我们做实线,首先第一个现在呢,我们来到我们的后端中,因为咱有一段时间没写过后端了,现在要开始写后端,然后后端中怎么做,首先第一个我在CTRL里边还是在vod中写啊,当然你可以建个新的模块,我就在这里写了,然后vod中呢,我们首先建一个新的C,我给它起个名字,这个名字我就叫这个。
04:02
User。捞个印CTRL。把这个进行创建,然后创建之后在CTRL上边加上它相关这个注解,我来加一下啊,第一个这个叫rest。CTR,然后第二个加上一个叫request。Mapping里边加上我们的路径啊路径,为了方便我跟这个teacher保持类似这个路径,比如咱也叫类似这个名字。把这个拿回来,然后这里边我就改成叫。User,因为咱是用户登录,这是CTRL创建,然后创建之后呢,在里边按照就是框架,它写的接口,咱们也是建两个接口,一个log in,一个叫info,那我在里边做创建第一个。烙印接口我写一下啊,然后咱们继续来看啊,烙印接口呢,再看这里它的提交方式是不是一个POS提交,所以说我也写成POS提交,改成POS的mapping。
05:10
起个名字就叫捞。下面加方法。Public。Result。还是反映同一结果,然后起个名字叫log。把这个写出来,然后写完之后在里边加上内容,因为它的内容中呢,就是返回这么一段数据,所以咱们也是返回这段数据就可以了,那这里边我来做一个返回,这数据中呢,就是有一个状态面,还有一个date这么一个值,那咱直接返回下啊。首先为了方便,我先建一个map集合啊,当然你直接设置可以,因为咱为了返回方便,我建个map集合,加上object,这叫map。妞上一个叫哈希map。一个map集合,然后在map集合中放入我们这个数据点上put,它的第一个名字叫token。
06:09
然后它的值,这个值叫me开,把这个咱直接拿过来,然后拿回来之后最终做个返回result.ok里边加上这个map就可以了,这是我们做一个返回,但是返回中啊一个小问题。大家看啊。他这状态嘛,是不是2万呀,但是我们目前的状态,咱看一下是不是200呀,这个需要改一下,或者说呢,你也可以改一下前端,我现在就在这里边改一下啊,咱们改一下里边来一个扣,改成这个叫。2万或者说呢,你把这个改一下,比如咱现在这么约定成功都改成2万都可以,我就统一改这个了啊,这改成2万,然后这改成。20001咱就改这个了,然后这里边不需要了,直接这样的话,把这接口就完成了,最终把数据返回,返回到就是长这个样子。
07:07
这是咱们做的第一部分,这各位知道啊,然后这个完成之后,我们再按照它的结构写第二个接口,这个info接口。Info接口看一下啊,提交方式是get提交,那我写一下加上一个get mapping,加个名字info,然后加上public info。在里边同样返回它的结果跟那个一样,那这结果咱们还是啊,用个map机和封装,然后存就可以了,在外机构中咱们加上这么些数据。这个啊,我复制过来,大家给他写一下啊这些数据。打到这里啊。首先啊,咱们看这个数据里边啊,有这么多值,我先给它稍微区分一下啊,这个值首先第一个值有一个叫Rose。
08:00
我直接复制一下啊Rose Rose值是这个。就是和的面。啊,就写个就可以了,然后里边咱再放第二个值map.put第二个名字叫introduction,就是他的介绍啊,我是一个超级管理员,这么一个介绍。Admin,这个拿过来第二个,然后再看第三个。map.put第三个叫瓦,就是它那个头像啊,什么叫头像呢?就这个你看啊,就这个头像就是它,所以咱们加上这么一个头像,这是那个头像,那个图GIF是一个动图。啊,也就是这个效果啊,这个意思,你看啊动图嘛。这样的吗?一直在不断在移动啊,不断在发生变化啊,动图,然后最后还有一个叫name,我们也最终写一下。最后一个指map.put它的名字叫name。然后它的值叫super me超级管理员。
09:03
这个拿过来,所以大家看啊,现在我这两个接口就完成了,按照框架中的写法,框架中有几个接口我们就写几口,它反映什么值,我就反成值,一会儿咱们调本地接口,实现这个登录,所以现在我这里边就把第一步和第二步都完成了,先通过F12查看哪些接口,根据它的接口反应数据,咱们建相同的接口就可以了。这个各位给他能快速做的啊,没有什么难点,按照它直接写就可以了,然后这个写完之后,下面就是注意啊,我目前这么做之后,这个接口肯定是调不到的,所以咱第三步需要改一下我们的前端。修改前端,那前端改什么说一下啊,首先第一个。先修改前端接口的那个路径,让他访问的是咱们本地的这个路径,就是本地是local house8301这个路径,那怎么改,咱看一下啊。
10:07
在这框架中呢,有一个文件,就是这个文件叫env development,在里边咱们把路径改一下,我把这个拿过来啊,给各位复制过来,就改这个文件。这个文件中呢,它有一个默认路径啊,就默认是这个路径,咱把这个路径改成咱们本地的路径,那我改一下啊,为了看到明确这个我先加个井号给它先啊,然后下面咱再加一个,这里边加上路径就是咱们的HTTP冒号杠杠。Local house。8301改成我们自己的路径就可以了,这个位置不要改错啊,给他正确改一下。这个我也接过来,这各位知道啊,所以这是我们修改路径,是咱们本地接口路径,因为要访问。
11:04
8301这个端口号,然后这个改完之后,下面还要改个地方。什么地方呢?各位注意啊,它就是之前的接口是这个路径叫d vapi什么路径,但是咱目前接口上的路径应该叫这个admin vod user就要改成这个地方,改成咱们接口那个路径。啊,那咱们进一步改一下啊,就是第四个。继续来修改。修改成。你两个接口的实际的那个路径,就是你类上边和方法上的路径,那怎么改,我们说一下啊,这个做法就是呢,咱们找一个文件,在src中API中有一个叫user.js,到这个文件中,我们来做个修改,就是改这个文件。优点,宅四。啊,这个位置就是专门定义你的接口的地方,这是框架中的约定它的这么一个结构,所以咱们到这里边给到最终改一下就可以了,那我来改一下啊。
12:04
大家看啊。这是录,这里边改成你的那个本地的径,那我复一下din VO user加上log哥印。这是我们的路径,然后下面是in。VODU加上in,包括T方式跟我们保持一致啊,这是里边做到的,而这过程中呢,其实他做了一个封装,在这里边引入一个文件中封装了一个东西。咱们看一下啊,就这个AXLS进行了阿贾克斯的这么一个请求,然后这里边做了一个处理啊,包括你看这个位置啊,有一个叫请求拦截器,响拦截器,每次请求先走,它当你反应数据先到这响中,然后响中它做了一个判断,就状态码,如果不是2万就失败,是2万做了返回框架中都做到了,咱们只需要把那接口路径改一下就可以了,改成你那个本地路径。
13:07
所以现在啊,这一部分我们就完成了,这是咱们做这个过程啊,然后这个完成之后,下面呢,咱们来做个测试,看一下这个效果对不对,就是目前我们应该都改完了,本地写了接口,然后前端也改了两个地方,然后下面咱们来测试一下,看一下效果是怎么样的。那我来操作啊,首先后端我先启动。前端因为改了文件,咱也重启一下啊,你点CTRLC把它停止,然后重新启动ntmru DV这些改成本地8301路径改,咱们再做个测试,看一下效果怎么样啊,我们来试一下啊,最后这个结果目前应该基本上都改完了。等他先启动,咱们最终测试一下啊,看结果。
14:05
首先我们看啊,现在正常都启动了,然后到里边呢,我把F12点开。找到network网络点登录。大家看啊,报错了叫network iol网络问题,其实不是网络问题啊,他报的错误是里边的这个问题,我们看里边啊,就是这个错误这里。给各位截过来啊。我写一下就是咱们。上面的代码运行它就。报错了。然后报的什么错,这个错误。叫cos,所以我强调啊,这是我们要讲一个重点,这一问题是什么,就叫跨域,包括大家看啊,他目前访问的路径是不是咱们本地的路径,你看8301DIN VO捞这已经访问到了,但是他这里边报错了,这个错误就是咱说的跨域问题啊,就这么一个问题,就这里。
15:04
然后说一下啊,什么叫跨域,或者说呢,有了浏览器中可能是有这么一段提示,就这个提示。说他不允许什么人访问啊,但是有这机主可能没有,但是目前的问题是存在的。这跟浏览器有关,有的浏览器中呢,可能没有这个提示啊,但是这里边问题出来了,这问题就是我们要重点讲到的,叫跨域问题。这里我写下啊,这问题就叫。跨域,什么叫跨域?咱们马上来解释,先把这个过程再说一遍,我们目前做的是改造登录到本地,首先本地建了两个接口,然后改前端的IP端口号,改前端的路径,最终访问,他已经访问到了咱的本地的8301,但是目前暴露错,这错误是跨域问题。马上再来解释,你先把这个登录改造过程能给他先整出来啊,所以咱们先说到这里,然后下面再来讲解跨域。
我来说两句