vue前端请求设置超时时间

那么这边呢，我们先退出运行状态，也不需要运行，我们现在呢还需要安装一个依赖，这个其实我们一上来就应该安装一个依赖，就是 element ui， 我们应该通过 view i 的一个一二一 m n t 去安装这个 element ui。 呃， element ui 的话，我们这是三代 x 版本，安装二代 x 官方文档会有，那这个安装方式会简单一点，不需要大家额外的配置，只需要去根据他的安装进行选择就可以了， 第一个是全选，第二是按需加载，我这里因为咱们是测试嘛，就全选了，当然你要真正开发中肯定是按需加载的中文， 好等待他安装，这面他一旦出现的话，就会帮我们多增加了一些页面。比如说大家可以看到艾伦文特的一个呃萨斯文件，包含这边生成了一个插件文件夹，里边是艾伦文特点接 的文档，然后他也在安装艾伦的 ui。 好，这边，呃，他会增加一些页面，可能会报错啊，因为他增加错页面被我们删除了很多。 不过这都没关系啊，安装完成了，现在的话这个就已经存在了啊，既然没报错，我们也不管他，也不用着急启动。我们先来看一下，这样的话，他增加出了一个 i m c 全部引用的关系，然后这边也增加出了这个呃萨斯的一个页面，其他没有什么特殊的 主页面当中的帮我们引用了。 ok， 然后接下来呢，我们这边先去创建路由页面，然后再尝试去启动。首先啊，大家注意，我们刚刚在 ipad vivo 这里面 把它都删了，所以这边我们把它删掉。这边因为刚刚说了这个上节课我们是把全删了，这节课之所以它还呈现了内容，就是因为我们安装艾伦的之后，它自动添加出来的 空抛内在里边那 hello word 被我们删了，因为它还引用了那 hello word， 所以我们修改一下，这里应该是入油的结构，我们所以把这个如特钢 vivo 给大家扔在这里，其他的没什么需要，这里边我们把它删掉 啊，这块有一个样式，我们去把这个样式拿一下，因为他这个样式还是很重要的，要不然后面我们用起来会很难看，这是一个萨斯的样式，那既然是萨斯的样式，这块我们就给他个浪，等于 啊，这样就可以了，样式就可以加载了，关掉它。接下来首先第一步先处理漏油部分的地方， 打开路由文件之后，我们把这个 home home 的引用地址标，所以删掉，这里边我们看一下，首先把我们家的需要的几个页面都给引入啊，首先我们需要 一个捞根印，这应该是我们第一个要加的页面，因为对于后台管理系统来说，一上来就应该是一个登录陪着之后我们找到捞根印啊，捞根印就啊对，我们看捞根印里边的名字叫什么， 里面叫 index， 那我们这个就不用干了， index。 然后接下来我们用什么呢？比如我们的后面页面，后面是我们的主页面，所以进来还是要加载进来的陪着，然后进入到我们的后面页面之后，我们这里面会有一些四零四的页面，我们都需要引入，比如我们叫 no 双木兰鱼啊，点点杠配置下面的错误信息页面，然后找到这个四零四，然后不仅有一个四零四，还有四零三，对吧？四零三的话应该就是信息的问题了，对吧？ 点杠配这配这，然后找到错误信息的四零三，好，之后呢？再往下我们还需要雷奥特音乐，大家一定要记得这个雷奥特是所有的陆游嵌套，其实都嵌到这个里边，所以这个我们要引用进来布局嘛。 下面呢这一块默认我们让他加载的不在这后面让他不加载烙印啊，所以这个我们改成烙印，然后这里改成烙印，然后这里边我们改成烙印， 我习惯性内部也是大写的啊。 ok， 然后这样的话路由结构的长成这个样子，那上面这个是出，我们把这种路由结构成为什么呢？成为初始化路由，就是一上来就应该呈现的路由。 我们接下来下面再来一个准备动态下载的路由。以前我们所有路由都是写死的，我们讲路由 好，讲其他知识点也好，所有的路由都是你已经知道你有什么页面，所有页面都是写死的，一进来就是这些页面。但是我们刚刚说到一个很重要的问题，我们把用户场景给描述一下，根据用户的权限，根据啊， 用户的权限不同，所能看到的页面和 可操作性也不同，你比如说我们有我的命运管理员，对吧？你有管理员权限，那你就要可以有很多，就是比如说管理员权限， 所有页面都可以看得到，对吧？你可能有 vip 页面， vip 页面你可能就不是所有用户都能看到，你可能只能看到属于。呃， vip 部分的页面就属于 vip， p 的 vip 的权限里面你可能还有 super vip， 对吧？这种 super vip 跟 vip 可能肯定也不一样吧，因为他又大了一级，就是更多的 vip 的权限权限等等。 刚说了每一个用户权限所能看到页面是不同的，我们这边刚刚创建了很多页面，在这个配件词里边他每个页面所能看到结果都是不同的，所以我们要根据不同的用户去加载不同的页面，所以这个部分加载页面就是动态路由了。 那动态路由我们这边也不是把所有路由写好，而是我们这边写一个，跟后面通过一个知识点叫爱的 root 的方式方式去将其一个一个往里径添加就可以了。所以这边我们先去找出一个路由对象， cons 的，我们叫动态路由。 哎啊， 动态路由，然后动态路由是个数组类型，然后这个数组里面有对象，我们把刚刚那那几个都引入进来，首先有个 pass， pass 什么都不写，就是根部录嘛，然后可能抛内特让他加载了根部录，刚刚说了就是加载雷阿尔奇就可以了。 然后之后我们在这里给他一个内幕，内幕里边我们来一个控制器吧，比如要用容器把横轻点，然后之后我们再给他一个重定向。呃，重定向，这，哎，我们这里给出提示，既然是微信的提示哈。呃，因为我之前加载了这个微信相关的插件，好不管他，我们自己写出来， 从内向到首页，然后因为也就是意味着他其实什么都不显示，他只是作为一个容器页面，然后给他加个麦的标签，这边我们会常用的这个麦的标签， i q u i r e s。 然后奥斯奥斯之后我们给一个戳，这个代表什么呢？ 有一些页面你是否需要登录之后才能进的入进入的了？如果你确定之后登录进入，登录之后才能进入呢？所以我们要加上这个奥斯的认证的权限，就是这个页面，加上这个属性判断的时候，等于处才是需要你登录进入的，如果他没有这个属性，就是所有页面你随便进，不需要登录。 有一些后台页面基本都需要登录一些前台页面，你比如说像京东首页，对于用户端来说，你不登录也能打开，那有一些页面你必须登录之后才能进入，比如说个人中心页面，对吧？好，就这意思。然后给他一个门内内幕叫首页， 然后他会有很多紫元素，所有就是抽准，抽准里边是个数组员， 数组里面加一个对象，对象里面我们指定一个 pass， pass 呢？这个就是 home 了，那大家一定要注意，紫元素页面是不需要大家去增加前面那个斜杠的，有同学经常这样写，没必要，在我们 vivo 当中不需要，你可能写 res， 写希望或者写其他的技术些，习惯了，需要加这里不需要。 最这边就是 home， 然后之后我们再加一个内幕，内幕就叫 home， 然后里边我们再加一个麦的标签，麦的标签中呢？我们来一个内幕，首相为首页，有同学老师，这个麦麦的里面为什么加一个内幕？这个内幕首先干什么呢？一会儿用来进行匹配规则， 整个 pp 规则我这里先不说，一会我们，呃，有了后台数据之后，大家就明白什么意思了，所以大家先扔在这里，然后再来一个 icon， icon 就不用说了。哎，这是一会我们要显示的图， 图标，对吧？这面图标用的也是 m， 他的图标， ok， 然后他的子元素就是最基本后面元素。 呃，之后呢，我们在这下面啊，再增加出两个页面，一个是四零四，一个是四零三页面，四零四的话就是正常的一个型号。四零三的话先说四零三，四零三页面我们家来肯抛内层，这是我们的四零三页面，这个 再来一个四零四的页面啊。 parts， 四零四，四零四啊，四零四也不用写四零四了，我们写新号，对吧？所有没有匹配到路径错误的页面都是四零四， ok， 现在这边就起火了，我们就选这个样子，一会这个动态的路由我们会引用进来，去往里添加新的路由。这个我们一会用起来给大家说吧，这只是最基本的一个结构。好，路由基本就这个样子，路由我们这，呃，在首页这么 有引用的，对吧？啊？在我们的门里边，所以现在我们尝试启动一下，看一下有没有问题啊。 sorry， 不是 siri， 是 siri 的，然后等他启动。 嗯，这面因为我们加载的东西多了，尤其是那个 i 的们的 ui， 对吧？所以它启动的速度会变得慢了很多，那没关系，我们等一下 好启动起来了。正面报了一个错误信息，我们看现在有个 helloword 的引用。哪里有 helloword 的引用呢？恐抛内，它里面有个 helloword 的引用。因为我刚刚删了嘛，所以这边我们看一下这是哪个文件引用了 helloword， 首先我们一点点来走啊，看一下这里面，这里面的 helloword 我们已经删了，路由已进来，我们刚加载路由文件，路由已进来，应该是我们的捞根页面，我们打开配置， 啊，捞根页面我们里面什么都没有呢，对吧？这样我们先给他一个最基本的结构， 这就是捞面登录页面。好， 强制刷新一下。好，大家看一下啊，这边加载了捞印之后呢，页面就没有什么报错了，因为我们这边一进来访问的就是这个捞印页面嘛，所以我们这边要给他一个捞根印。好，大家看，就是捞根印，但是你这里可以访问这个根木路，根木路，其实我们要访问的是什么？是 那个雷奥特页面，来看一下，但是这个雷奥特页面呢？我们又没有处理，所以现在只有露个印，所以这是没有问题的，路由大件是成功的，所以这边我们先访问捞个印。呃，为什么没有去处理这个雷奥特呢？因为一会我们会根据页面的加载不同会再去处理它。好，那现在路由我们就先写成这个样子。好，我们这里可能先说到这里。

哈喽，大家好，这一个小节我们来讲一下阿贾克斯请求超时力控制以及网络异常处理， 我们的项目呢在上不上上线之后呢，在运行过程当中一定会出现呢网络请求超时的一个情况，我们不能够保证服务端呢永远能够及时快速响应， 那么这个时候我们可以通过对阿贾克斯做一个超时的设置，然后给用户呢来一个提醒，并且在网络议程的时候呢，也给用户来一个友好的提醒，这样一类的话呢，把产品做的体验更好一些。 好了，我们接下来话演示一下，在这呢依然采用的是点击，然后把结果呢做一个呈现，我们首先先点开浏览器来看一下这个页面， 点击这个按钮呢向服务端发请求，然后呢服务端返回结果，我们加一个超时设置，时间，我们定为两秒，如果两秒钟之后呢还没有返回结果，那我们就给用户呢来一个提醒， 告诉他网络超时，请稍后重试。好，我们来把效果做一下。在这的代码呢，我们不打算再自个再写一遍了，因为前边我们已经写过好几遍把价格基本操作流程了，所以说在这呢我们把代码复制一份， 把阿姨缓存代码拿过来，拿过来之后把里边一些内容呢咱们更改一下，比如说这个元素获取这块咱们也得拿过来找水拿过它来， 然后呢把下边一些代码咱们变更一下，比如说给谁发请求，这个咱们需要变化一下， 在发起用这一块的话，咱们准备再去再次去创建一个规则，把它复制一份拿过来做一个延时响应， 因为咱们说了要有有一个两秒的一个延时设置，那我们服务端在返回接过的时候呢，也需要加一个这样的延时 才能看到效果，要不然的话呢我们就看不到一个最终结果了。好，把这个代码的话上边这个地方留着，下边这个地方我们加一个定时器， 然后在这，然后 ctm out， 这来一个三秒钟，也就是说呢，我三秒钟之后呢，再把这个结果返回给客户端里边呢，咱们拿点东西啊，写点东西，这是来一个延时响应， 保存，呃，先把代码呢先注料，待会呢再看啊，咱们先来看，直接看这个结果，然后至于路径这块的话，咱们这块来换一下，就是底类啊，这一块呢也叫做底类， 可以了，哎，看效果怎么样？刷新一遍，然后点击，点击 ok， 结果没有出来，结果没有出来，没有关系啊，我们首先先打开控制台看有没有报错， 刷新，然后点击看一下，这会来了一个什么呢？哎，这一个报错没关系啊，咱们这单词应该写错了， 保存，切过来重新来，点击看一下，结果已经回来了，这是一个没有加任何延时控制的一个效果，我们现在的话把它加一个延时 保存，你再看结果，点击一二三出好来了。然后呢这个时候呢，我们在前端的阿贾克斯设置这块呢，加一些代码，增加一个超时设置。 超时啊，怎么设置呢？ x x r 点 tfbox 等于一个来一个两千，我们加一个两秒的一个设置， 就说两秒钟之内如果说还没有结果啊，那我们这个取，那我们这个请求就取消看一下啊，刷新页面，点开 内存沃尔克，然后点击一二走，你看这就显示开锁的，开锁表示是取消的意思，因为两秒了还没有结果回来，我们这时候就把结果做一个来请求做一个取消。好，那么这个时候的话，咱们还可以再加一个什么呢？加一个超时的回调， 超时毁掉，我给 x h 二点安排 max， 然后这里边来一个 led 网络异常啊，请稍后重试， 请稍后重试 保存。切过来刷新一面，点击一二 弹框来看一下网络异常。当然在这的话，我们使用的安乐塔，在实际场景里面，我们可能会选择一些更加友好的方式， 比如说一些 div 或者遮罩层等等的方式去做一个显示，这样体验会更好一些。只是当前呢，我们对 请求超时做一个演示。下面呢还有另外一个就是网络异常，也可以加一个回调，网络异常的一个回调设置， x x r 点 r l， 然后发射， 然后安乐他，然后你的网络，你的网络似乎出了一些问题， 也是来一个提醒保存，那么这个效果咱们怎么去演示呢？我们可以借助于卡若木浏览器他网络这块的一个设置，大家看这 有一个安赖点击啊，当然我是得先刷新一下页面，为什么呢？因为咱们这页面已经内容发生了改变了，所以说 我呢需要先刷新一下，然后点击，然后点到那个奥弗莱，奥弗莱的话就是断网，没有网点击，这你试一试走啊，你的网络似乎出现了一些问题， 这样的话呢，我们可以直接给用户来个提醒啊，告知用户呢，你的网络可能出现一些问题，请检查你的网络，也是给用户做一个友好的提醒。 好，那么这个小节呢，关于阿贾克斯请求超时以及网络异常的一个操作，我就先说这么多。

有位网友发来这样一个问题，在 view 三中使用 reactive 定义了一个响应式的数组，在网络请求完成后进行复制，但是试图并没有更新。 打开控制台的确可以看到数据，试图也已经进行了渲染，但一片空白。在触发事件时，此种方式不会触发。试图更新，因为地址指向变成一个新的地址，我们可以改用 ref 来进行定义，通过点 value 的方式进行复制， 可以看到数据可以正常显示。还有两种我比较常用的方式，同样使用 reactive， 不过要以对象的形式将数组包裹给对象属性复制也是可以的。还有一种方式，我们 回到最初的代码， 采用 pose 的方式来更新。关于这几种方式的实现原理，相信路过的大佬会在评论区留下答案的。

在刚才给大家聊到 web socket 的实时数据渲染展示的时候，我们的数据呢，已经可以动起来了，但是呢，这个位置我们采用的是 web socket 的那个处理。我刚才在跟大家聊到 web socket 的时候，我提到了一个问题啊，我说啊，那个如果大家对于我们 传统的哎，就说白了已经过时的轮寻的方式，要是希望了解一下的话呢，我也可以跟大家写一写。那我现在就要问大一个问题了，轮寻的方式，如果你觉得有必要，我在直播间跟大家写一下的话，你们就来一波六六六，你觉得没有必要写的， 哎，这个地方呢，咱们就直接回复七七七，我们来跟他聊一聊，哎，聊天室啊，又应该怎么样去写？对，你觉得有必要那个写的就回六六六，没有必要写的你就回七七七，嗯，有必要吗？好，这个就取决于你们了啊。啊，一半一半，我看到大家回复 一半一半，对不对？嗯，好，回复六六六的也有回复七七七的呢，也有一半一半啊。好，那既然有一些小伙伴的回复了六六六呢，我就快速简单的跟大家说一下，那这个地方我就不去进行 具体请求了啊，因为这个时候我们要连接另外一个吗？好，刚才给大家写的这块，我就先把它呢注释了，我快速的说一下，如果有些小伙伴，你明明知道我们刚提到的这种啊，就是那个应该叫什么长链接，但是呢，你现有的项目中， 服务端他不支持对不对？这种情况太常见了，老项目他不支持，或者还甚至于用到，比如 giccorry， 那这个时候咱们怎么做呢？或者有些小伙伴呢，还有这样一些相对来说比较奇葩的需求，我当前项目我的老大说，你只要把这个功能能够展示给用 用户就行，我们先不管理那个别的存前端，先玩一玩，对不对？是不这样的呢，也挺多的啊，好，那我就跟大家说一个啊，咱们如果说通过轮寻啊，咱们自己来模拟一些数据的那个处理方式是什么样的？好， 大家说到这块呢，由于我们啊，像刚才不是有很多小伙伴说没有服务端吗？那这个时候你就可以自己模拟数据呢，测试一下，这个就比较简单了啊，我来跟大家写一写。 好，首先我们在里面呢，先跟大家把刚才看到的这个数据呢，来，在里面给大家指定出来。好，你当前看你需要有多少啊？来，我，我在里面就写个几条，写个三四条应该那个差不多。好，为了一会让大家看的更清晰，我这样写啊， 一百三百，来，我们这样测试的话，数据就比较那个，我就写一三五七，我这样写啊，好， ok， 这个的话呢，咱们来一个啊，八二六， 好，这个写一个啊四，哎，我这样反过来好，其他的数据我就不改了，只要前面两个有波动啊，后面的数据呢，咱自然看到，也就是数据呢，是我们自己本地写的，那很明显轮循吗？这个时候你首先要考虑到的是什么？咱们的定时器对不对？好，我想一想，你看当前这块咱们应该怎么样写， 你在里面就应该添加一个，哎，咱们的这个 set antwer 对不对？你看我一写完它立马出来了，第一个呢是我们的回调函数，第二个呢是具体的时间， 时间呢，我给大家定一个两秒，他就不像我们刚才写到的外部 socket， 那别人也不知道什么时候，对不对？他是属于一个有数据就推，这个时间是不会固定的，当然我们可以设定他的频次。 好，那么现阶段几秒钟啊？我接着要在里面进行的处理是什么呢？好，我接着在里面呢，是不是就要开始写入啊？具体要干什么好，这个位置呢，为了让大 看的更加清晰，我决定啊，咱们单独到外面来给大家写，获取我们具体的这个数据信息，是吧？添加一个定时器。好， ok， 来，我在里面呢跟大家把这个呢也简单的去那个写一写啊。好，我们想一想，你看当前这块应该怎么样写 啊？按我们刚才写到的，第一个呢是要把这个数据呢进行处理好，你看这块都不变。第二个呢，你在里面还要去进行啊，咱们的这个就是具体的渲染，所以说这块其实他都是不会发生变化的，对不对？关键关键的点在于什么？ 咱们的这个数据，哎，我们在里面呢相当于你要处理的数据呢？是，哎，咱自己做，如果这个地方是服务端，那就跟我们刚一样吗？发生请求，让服务端把这个数据给你就行，所以这一块大家记住了啊，实际你要做到的是发送请求， 拿到数据，间隔几秒处理相关数据。好，那如果说我们自己来做啊，我们这个地方其实可以采用另外一种方式吗？就是在里面呢获取一个随机的值，完了以后，哎，每一次获取这个随机值来进行处理，是不是？好，我想一下，你看他应该怎么样写 啊？我们在里面首先是通过我们的这个数组，那么如果你要获取这个具体的随机值，就从我们的数组里面去获取随机，比如数组里面，我这个是要拿到的是零一二三，对不对？我们当前的随机值应该是什么？ 零到三啊？有可能这个时候是零，一会一啊，一会二三，然后用零，哎呦，反正随机取，取到哪一个算哪一个，对不对？那么给大家提到这个随机值啊，我们应该想到的是什么？哎， master randon 对不对？ r a n d o m a， 通过它，它呢？啊？ 是随机数据零一，但是不包含零一，比如零点零零零一，零点九九九九，哎，我们是可以通过他的，那么这个地方的话，我们为了确保呢数据不会超过我们的这个范围。 ok， 当前的这个写法呢，大家看明白， 但是我们在获取这个随机值的时候，那它里面有可能是不是，有可能是一定会是小数啊？所以这个位置呢，你还要对他进行一个，比如取者，恩 i 等等处理好。行，把这块写完了以后，我们一会也来看一下 唇前端，咱们这样写他能不能呢？实现我们的实时数据线呢？好，给大家写完了以后，我同样啊，你看这个时候页面呢，我先给大家来那个刷新一次，哎，我看一下哦，当前这块已经开始了， 看到没有？你看我跟他改变的只是我们啊，这个前面的两条数据，后面数据都没有变，由于我们是随机的，所以说这个地 方大会发现数据是不是在不断的发生改变，你看是不变了，那么他和我们刚才的外部所给的从最终的效果你看起来有同学的，我没有有变化呀，那不一样也那个变动了吗？只是我们的数据，来我们看一下网络啊， 进入到网络之后，这个时候你看我同样给大家页面呢，咱们来一次那个刷新。好，你看啊，看我们当前的这个网络里面。嗯， 好，我来给大家把这款呢那个哦，我没有去发送请求，所以这个地方看不到，如果我要是发送了请求的话，进入到我们的网络， 它是会每间隔两秒我们在里面就会产生一次请求， h d、 d、 b 请求，再间隔两秒，又一次又一次，只不过我现在呢是给大家获取到的，是啊，这个本地的数据，所以我们这个数据 效果看到了请求没有发送，但是记住了，如果你真实的发送请求，这个地方是不断不断再去进行的，所以有些小伙伴你想去判断一下，你当前实时数据展示究竟是以轮巡的方式，还是以我们刚提到的 websoke 的方式，还是说你自己模拟的 通过这个网络呢，咱们就可以非常清晰的看到了，对不对？好，刚才给大家说到这块啊，这个呢，我希望大家明白，当然 轮循的这种方式呢，肯定是不好的，你说你要是哎循环 n 长时间，一晚上几天，哎呀，那这个很多时候会出现问题，自自然而然的，而且呢在我们 进行一些多个啊，像定时期调用啊，他也会出现一些不可控的问题。好，刚才给大家说到这块呢，只是说有些小伙伴能提到了啊，那我简单的跟大家在这一块呢，就是把思路啊，去给大家捋一捋。好， 我们刚说到的这个 web socket 的实时数据的渲染展示。再一次问一下，不知道大家呢是否了解清晰了？记住了啊，核心重点不在于我们里面的具体处理思路，他在于我们的这个 web socket 的连接，包括他，哎，如何去接收数据， 这个呢才是 web socket 呢，它的正确一个运用。好，那一旦对比完，思路是不是就清晰了？哎，像刚才有些小伙伴提到的一些问题吗？现接到我们是不是思路相对就清晰了很多？好，把这个了解好了，那我们接下来就要来跟大家 想一想咱们的这个啊，就是刚给大家提到的，如果我也要通过同样的这个接口，我们要是想实现六，哎，就是聊天室啊，哎，像留言信息，公屏展示这样的一些功能，那咱们应该 怎么去做呢？好，都听明白了，咱们还是那句话来波，六六六，接着呢，我来跟大家继续往后面聊。嗯， 好，都听明白没？都听明白，我就接着往后面聊了啊，刚才说到这块，相对来说是非常简单的啊，这个有些小伙伴自己捋一捋，所以你要是想实现数据，没有服务端提供数据，那咱自己模拟一个呗，是不是挺方便的啊？好，我们继续呢，来跟大家往后面去聊。

这节课呢，来说一下 view 的代理的相关内容啊，在当今这个年代呢，我们要去开发一个项目，几乎来说呢都是前后端分离的项目了。首先呢，我们不用去管后端什么语言啊，比如说拍三招啊， pp 啊，不管，反正呢作为前端我们来说呢，我们要哎请求这个接口，然后呢返回数据，对吧？这是我们的前端操作。 那在公司里边做项目呢，几乎都会有两个环境，一个是开发环境，一个是生产环境，那这呢咱们就拿开发环境去说， 那么在开发环境下呢，我们要去请求接口，可能就会涉及到跨越的问题，比如你请求的端口是三千，但是呢当前你的端口是八零八零，那这时候呢就跨越了，或者说呢干脆 ip 就不同，那这时候呢也存在跨越问题， 那么解决跨议的问题呢，无非就是要不然后端解决啊，前端呢就不需要进行任何操作了啊，要不然呢就是前端解决，后端呢 就不需要做太多操作了，哎，就这么无非是两种情况吗？那么在这呢，我们先不管后端进行哪个哪些操作，我们只管前端如何解决宽问题， 那么前端解决跨越问题呢是比较多的，那这节课呢，我们讲述的就是 view 这个项目啊，这个脚趾架它里边呢是如何解跨越的？要通过这样代理的设置来解决跨越问题。 好，首先呢，我在之前呢已经搭建了一个 vivo 项目，这里边呢啥也没动哈，反正就是一干巴巴项目就存在这了。然后这样呢，我们先去把后端搭一下，就随便先自己写接口，我们先反问道，对吧？咱们接口玩个寂寞是吧？行，那咱们就把这个后端这块也搭一下啊， 然后大后端的话比较简单，大家可以按照我这的一个文档去来啊。首先呢，我们可以起一个终端，在任何的地方呢执行这句话啊， n p m in store express gatrator 杠 g 啊，在终端里边把这句话运行起来，安装完事以后呢， 你要进入到 view 这个脚手架这个目录里边儿运行这句话啊，那我们把这句话呢运行一下，进入到我这个脚手架，就是 demo 这个目录里边儿 后面的这个 server 呢，其实呢是生成的一个新的一个文件夹，我们可以看一下新的目录啊，在这儿之前是没有的，然后它提示你 c d 进入到这个 server 里边。然后其次我们安装一下这个依赖项，就是 note models， 然后再其次 npm stat 去启动这个项目哈， npm stat 好，那我们的前台这块是 local house， 八零八零，我们的后台呢是 local house 三千好看一下 哎，这是 vivo 的一个特别熟的，对吧？啥也没写，那个玩意好再来看。那么现在呢，我拿这个八零八零去请求三千呢，当然是跨越了对不对？那这时候呢，不考虑后端我们前端该如何解决哈，那这样，我先去随便 写个接口，只要是能打印出来数据，就得来到这个地方随便写一个吧。呃，就叫 home 吧，随便写了啊，然后这儿呢，写一个 j s a 冒号一行 重启下这个地方。那现在呢，我只要在这打一个 home， 拿到 a 冒号一就对了。好，这接口呢，现在是没有问题的，那作为前端来说呢，我们要请求这个，呃 u i l 老师吧，来，这时候呢，我们请求一下，那请求的话呢，我们需要通过 excels 把 excels 拿来装一下，当然在正儿八经项目里边呢， excels 必定会进行二次封装哈，要不然你不封装他的维护性也忒差是吧，各种环境切换累死你是吧，所以说呢，咱们要进行二次封装，那在这呢，我只是演示这个代理，所以说呢，就不进行二次封装了哈，咱们简单去用就得好，找到这的 s r c f w 吧， excels from。 好，我们在 crit 的中来总结，然后这有个 u i r， 那 u i r 呢？你肯定不能说直接的把 local hose 啥直接写到这对吧？那基本上 啊，你这样写的话，你的开发环境和生产环境切换就麻烦大了是吧，你不再做任何的处理情况下啊，我们先不管，现在呢，你去请求，他绝对会提醒你这地方是有问题的是吧？啊，我们看一眼上台，嗯，这项没有启吗？启动起来 好，你瞅吧，反正呢，就是咣咣咣一顿报错是吧，这样是绝对不行的，肯定不行的，那么该怎么办呢？哎，就要去用跨这个代理哎去解决这个跨域问题了。那么其实呢，呃，大家可以多去关注一下这个 vivo 杠 cri 这官网，我们去看一下， 在这里边呢，有很多很多配置啊，包括代理呢，它有很多的一些不同写法啊，有不同的一些 k。 好，首先呢，我们需要配置一个，呃，新建一个 view configure 点 g s 然后呢，这里边需要加入一些配置性啊，我们新建一个这样的一个配置文件。好，那么具体怎么去设置这个代理呢？代理还是那句话，重点是来解决的，或者主要是来解决跨域的问题的，我们把这块呢先拿过来，然后咱们看一下这块是怎么回事啊？ 那如果你的前端应用呢，和后端 a p i 服务啊，没有在同一个主机上，那么这时候呢，你请求的时候就有问题，对吧？那需要通过它呢来进行一个相关的配置 啊，那你这样配置完事以后呢，就会告诉开发服务器啊，将任何未知请求都代理到这个地址上。 好，所以说呢，我们现在代理的地址呢是三千，那么刚才的请求就不需要加这个前缀了，直接来一个 home 就可以了。好，我们可以试一试，当然你在这呢一定要注意一下，就是把这个系统的这个配置文件给他新建，完事以后呢，尽量重启一下哈啊，要不然他可 可能会不生效啊，咱重启一下啊，重启完事以后呢，我们再来试一下，墨迹啊，快来 出来。哎，就拿到数据了是吧？拿到一个 des， 然后点 a， 哎，就这一，反正不管怎么样，现在呢，我们是可以去做这样的一些数据方面内容了，对吧？我们拿到这样数据了，也解决了跨域问题。好，那么言而总之，哎，这个 dj server， 他呢，这的这个代理一旦设置完事以后，就可以解决这个跨域问题了， 当然跨越问题呢，其实到这还没有完，还有很多很多内容啊，比如说大家在面试的时候，作为初级的这个开发公司啊，在面试时候呢，经常这个面试官会问 啊， view 项目打包完事以后出现空白页，你是怎么解决的啊？或者说为什么会出现空白页，你都做到哪些操作让它就有数据有内容呢？哎， 这个部分呢啊，我也是有讲到的，大家呢可以登录到啊，学习路线点 c n 或者小路线点 c n 这个网址上，然后呢去课程这儿啊，找到前端框架，然后这儿 view 点 d s 啊，大家可以看到的门，这门课程是这个啊， view 项目打包上线儿这门课程。 好，那大家呢，稍后自己去看就行了，里边呢有很多打包完事以后可能出现空白页，我们要一步一步去解决，包括现在我们把代理设置完了，对吧？那么如果说现在我进行打包会出现什么样问题啊？ 当然你如果说直接现在打包呢，他的路径是不对的，我们还需要配置一个东西啊，那这样呢，我们就先配置上啊，如果说大家不理解或者说不知道这东西干嘛呢，那么就看刚才我给大家演示那个课程就可以了，我把这改一下，然后把这个地方也改一下。好，那么现在呢，咱们就去打包来这执行一个 n p m r 哦 biu。 咦啊，打包完事也， 然后呢他会生成一个 dist 啊，注意我的后端这块呢是没有进行任何调动的是吧，他的这个接口还是正常可以反问的啊，只是我把前端这呢终止了，然后打包生成一个 dist， 你快快快，这个墨迹劲似的 啊，然后呢，这我插一句嘴哈，就是大家呢在呃运行这项项目的时候，或者说玩 view 的时候呢，尽多的去观察一下这些东西 啊，其实这些东西呢，你反正等着就等着，对吧？哎，你没事干的去看一看，其实这些东西呢，里边会讲到，比如说你这样是一个啊，已经到生产阶段了，然后你看你平时运行的时候，这样的话是一个开发阶段，对吧？他有很明显些提示。好了，不废话了，打包完事以后，我们看一下这的 index 点击面， 哎，内容没有问题是吧？点击切换什么的也都没有问题，很好一件事来，你看这个检查在我控制台里边以后呢，你会发现一个问题啊，就是我原来那个代理的地址呢，是 local host 三千， 然后下面的，呃，这个 home 现在给地址变成什么了？变成这个了，哎，你看 变成这个玩意了，也就意思说这个代理呢在打包完事以后，它是不生效的。 x l 四，你这写的是啥？最后打包完就是啥 啊？这个代理他在打包完事以后注意他是不生效的，也就意思说出现一个矛盾点，如果说你公司的这个呃后端呢，是 java 语言或者 python， pp 等等这样一些内容，非 no 的这样一些环境的话， 那么可以试想这个问题是吧，那他是没有这样的一些服务的，所以说导致就是，哎，你这个地方的代理不生效是吧？因为不是走 no g s 吗？他代理不生效，交手价呢，你也不能去运行啊，你只能 啊，打包，打包完事以后呢，这个路径还不对，还挺头疼啊。那这个问题呢，就是我也想要告诉大家，就是啊，这样的代理设置在打包完事以后，他是不对的啊， 我们还要进行一系列其他的处理啊，那这可能就是。呃，其中之一，就是打包完事以后出现空白页。哎，我数据请求的呀，为什么请求不过来呀，对吧？那放到 啊，这个 view 项目打包这门课程我给大家去讲啊。行，那代理呢？咱们这节课呢，就先说这么多啊。反正总而言之，代理就是来解决开发时候的一个跨议问题的，由钱呢进行解决，不需要去 gantp 啊，不需要干嘛？代理呢，非常简单，对吧？非常的轻松。行，那这节课呢，咱们就先说到这里吧。