vue项目如何暴露方法给外部调用
粉丝5409获赞2.5万
相关视频
01:59查看AI文稿AI文稿今天来看一个不怎么常用的副子组件通信方式。首先，通过绑定 r e f 获取子组件的实力对象， 这里定义的变量需要与绑定的 r e f 同名。目前我们可以拿到了子组件的实力对象，但并未能获取到子组件身上的数据，因为使用 set up 语法堂的组件是默认关闭的， 我们需要到子组件中使用 define expose 来暴露数据。将需要暴露出去的数据放到 define expose 中，现在就能拿到子组件暴露出来的数据了。 你甚至可以通过事件来修改子组件的数据，从而使父子组件数据实现同步的效果。这无疑也是一种通信方式，相对于前面 几种通信方式，可能该方式使用频率会少一点。 那如果在此组建暴露事件，是否能在副组建中调用呢？我们可以尝试一下， 可以看到也是没问题的。 相反，此组建想要访问副组建的数据，则需要借助 dollar parent 在事件中通过参数即可获取到副组建实力。只是副组建在没有对外报 暴露数据的前提下，此组建也是无法获取他身上的数据，所以副组建同样需要用到 define expose。
408茄子懂编程🙈
01:16查看AI文稿AI文稿打开阿里巴巴史亮图标网站，进行首页图标的搜索，选择符合自己预期的图标，添加到本地库，查看已添加到本地库的图标，点击下载代码按钮，下载史量图标到本地，这是解压后的文件。 拷贝图标样式文件到项目工程内，项目引入对应的样式文件和 grpas 对口文件， 鼠标的最终效果。谢谢观看。
98书香学编程
12:11
09:02查看AI文稿AI文稿好，这节课呢，我们要说的是路由啊，就是那个 rooter， 那这呢大家要知道一个点，就是 view 点 g s 呢，它是作为一个核心库存在的，那其实呢， view 的 rooter 或者说呢， view x 啊，都是属于你可以这么理解， view 点 g s 一个插件， 那所以说呢，我们要了解的就是 view router 三的版本和现在四的版本，他们之间有什么样的一个区别，或者说呢，从三到升级到四，具体新增哪些东西？ 第一第二呢，就是在六点 gs 这个 set up 组合是 api 中，怎么去用这个东西啊，就是我们要了解这么几个点，那路由这块呢，无非我们作为使用者来说，最需要知道就是怎么跳转音量对吧，跳转传直啊，传直啊，还有这个导航守卫 啊，动态路由等等等等一系列东西，还有路由的模式是吧？ hitter 哈西模式，这是我们需要了解的，行到这呢，我们就依次去看吧，其实呢改动并不是特别大，那首先呢，我们要看的是 router 下的一点小 gs， 这是我们 router 的一个配文件，对吧？然后呢，它的第一行其实呢和之前就所差距啊，那第一行它是 loser， 然后这儿呢是 created 外 petri， 这什么意思呢？模式对吧？ petri 模式，那相信各位小伙伴呢，也知道它的模式，比如说黑 tree 模式哎，颜值很高的这种模式，对吧，就是 url 好，那其实我们这儿呢是无需写这个杠的啊，不用写， 他默认的就是直接这么一个样式啊，直接这么样式啊，那如果说我们在做后台管理系统的时候呢，我们经常会加一个，比如说啊的命啊，那这时候呢，他的首页就变成了一个 logo hose 的三千，比如说啊的命，是吧？到这里边关于我们就变这个样子， 好，这是我们可能需要去修改一些点，哎，那现在呢，明显是一个黑制模式，如果说我要改变成一个哈西模式呢，大家可以看这个地方的 a p i 啊，就是这是 router a p i， 然后呢他也提供了叫 craterbab 啊，哈西喝水，看到了吧，你可以把这个呢给他拿进来，然后呢在这使用的他，是吧？然后呢我们现在刷新页面，哎，刷新一下啊，大家看是不是加了个井号啊，哎，这就会走哈西的这种模式啊，所以说呢，这块本身改变的并不大，对吧？ 那大家呢，也都知道这种模式存在，那么具体你相中哪一种模式啊，以及它模式区别啊，那在二的时候呢，大家就应该知道的话，这我就不做过多说明了哈。然后呢还要需要提醒几个点，就是它其实呢含有这么几个东西 api， 大家下去呢也可以看看，不过呢，呃，特殊场景下会用到特殊东西啊， 那我们日常开发来说呢，就是，嘿，其实哈气就够用，好，这块呢，我就给大家介绍一下就行了。好吧，这两种模式本身改变并不大好，然后呢还有一个比较重要，就是，哎，跳转呢，对吧？原来我们通过什么 roselink， 现在呢也是一样的，也是一样的，我们可以试试啊，比如说这有个 roselink。 好，然后呢，我们比如说要跳转到关于我们这个页面，那这呢就写一个 to， 对吧？然后这个地方呢是关于我们这个页面， ok 然后呢现在我这拍一点啊就进来了这个地方呢就没改变啊就没改变啊。然后呢你要通过 gs 方式跳转呢也是一样的啊也是一样的。例如啊我这地方呢是有一个 banana 吧啊然后这呢 可以加一个事件啊，我随便写一个啊随便写一个然后呢你可以通过 set up 形式去写啊。好，那我们就跳转。好注意啊那这样吧，我先去写一个简单式 aps 那过去我们怎么去写呢过去我们要写的话呢就得这么写呃 messy 是吧。然后这儿有个 go 然后这个地方有一个 lace 点儿什么 rooter 点 pose 啊 啊跳转到这个关于我们这个页面好来试一下耶。哎也进来了是不是那。呃现在要用 set up 呢，比如说这儿我要写个 set up 注意 set up 里边呢是没有 this 的啊再说一遍是没有 this 的啊。所以说呢我现在 console 类 console log 啊打印 this 呢是肯定打印不出来的啊我们可以看一下。 扎心是吧他这已经给你返回了 itunes 是吧是没有的哎没有的话呢该怎么办呢啊这就是一个我觉得啊挺大的区别了，和之前呢比较大的区别啊，你得这么做呢你这样 import 然后这是呃这个 use 啊，比如说叫 root 和 use rooter from 啊这是 view rooter 啊这么写 ok 那我分别呢把这两个东西说一说哈。 来咱们就列举到这那首先呢这个地方的 root 啊，就是我们原来的类似的多少服 root 好吧这个 root 呢就是我们原来的类似的多少服 root 啊。那这样的话呢大家就很好去理解了，也就意思说我们要用的时候该怎么用呢啊，比如这 go 啊，我把这就删了啊，删 let's go 等于，哎，这是一个函数啊，就显示这个函数，然后把这 go 呢给它 return 出去。 好，然后在这呢你就需要做事情这样的看到啊，我们要用他，对不对？他，那我现在呢先 ctrl 一下啊，他返回的是一个什么呢来看啊，点一下是一个函数， 那么所以说呢他在使用的时候呢，你看插一下 reaction 这个东西，所以你用的时候呢有两种方式，一个是加括号啊，一个呢是弥补一下。哎，这两个呢都是可以的，大家来看啊，他返回东西呢是一样的。好，再来分一点。 咦，这地方加括号怎么没有个返回东西呢啊？我应该要在外面去用啊，那我在这呢先给他写一下 等于。好，我把这个打印出来刷新一下点。哎这呢出现两个东西啊，一个是一个对象，一个这个呢也是一个对象。好，他俩呢几乎是等着二的啊。好走点。虽然是 force 啊，但是呢都可以实现一个功能啊，比如我举个例子啊，那么现在呢 我去 console 一下好点，然后大家看这里边呢它有什么 go 呀， photo 之类的对吧。那所以说呢现在就可以直接什么 poot 然后到这个页面。好，这样的话呢也是可以的，来试一下刷新 点，你看进来了是吧，用刚才那种命的方式呢也是可以的啊，我应该在外面去用。呃算了，我在这换成这个六吧。 ok， 然后到这，因为我要加括号去 这地方要加括号，算了，不加了也是可以，我们把这个也打开吧，你看他能不能跳转啊，刷新点是不是也可以跳转啊？ 所以说呢，呃，就是呃，无非就改变了这么一个点啊，无非改变这么一点，我们要用的时候呢就需要这么用。好，那这样呢，我再声明一下啊，哎，这个东西呢，我要在每个页面，比如说我要传直接时都需要引入一下，能不能像原来我们那个引 pro 的什么 if 之类的别引出来，其实我们先不引就可以了，来试一下啊。刷新点为什么呀？ 因为我们之前安装过一个插件，而这插件呢，我们这配了 view 啊，说白了就是 inpult 是吧，我不管你这写啥 prom， 哎，这个 v 我对应这儿还有一个 input， 我不管你这儿写是啥，哎，但是呢，我有一个这个， 那大家看刚才我写的时候是不是在这个地方有一个 flow 什么什么东西对不对？哎，就是它，好吧，所以说呢我们就可以直接用了，但是你要知道这两个东西啊，如果没安装插件是一定要拿过来，好吧，那几乎没什么区别 来，那到我们的三 w 语法堂呢也是一样的啊，那你可以比如说把这个拿过来，然后到这对吧，然后也是拿这个，或者我们就叫它 roots ok， 来，首先点，哎，你看也过来了，哎，就非这么点东西啊。这个改变，那我就不详细介绍 root 和 root 的哈。这个如果大家做啊 view 二的这个项目，或者说呢，你了解 view 二，那这个东西你肯定是知道他们区别的是吧，一个是当前路由，一个是大对象是吧，这两个是不同不同的一个点啊。好，然后呢再往下呢？还有一些比如说， 呃。就这个导航，所谓啊导航，所谓啊动态路由和之前呢一模一样，你就可以这么去理解啊。原来怎么写呢啊现在你还怎么写？比如说啊，这个 router 点儿 before 是吧？ each， 哎在这地方你该怎么写怎么写 啊。我抗作为一啊，先抗作为一开心啊 before h 哎。怎么不出来 before h。 嗯在 a p 里边儿，比方 enter， 诶，在这儿，呃 rooter 点儿。哦我这写的是有问题的 呃。我先把 rooter 打印一下，咱们来看一下这个 rooter 啊，来刷新。没关系啊，就看这里边的这个内容吧。这里边它有没有，呃比如说它有 after 意识是吧？有个 b for 意识，那就可以这样了。 这一点好，我把这个 com 过去 be for e 是不是写的是对的呀，大家看他是不是返回东西了对吧？然后呢我在这呢我就给他传过去一个东西， 好到这呢咱们打印一下。这有一个，呃我随便写吧，就是我的第一个和第二个以及 nice 我把这三个都打印出来大家看，呃第一个当前是吧，然后这个是 nice， ok， 都是可以的啊。就是这个，呃录 这个导航手背啊也是一样的好，比如我这啥都不写，哎。刚才我写错了啥，到底是是吧，现在就进入不了这个关于我们了对不对？然后你可以 next， 这样的话就可以进去了， 这样就可以进去啊。至于导航首位判断呢和之前一模一样，你就该怎么判断怎么判断就行了啊。这是导航首位是吧？然后呢动态路由，哎。该绑定什么？比如说冒号 id 和之前呢一样，和这一样，所以路由呢，并不会给我们带来很多的学习成本。好吧，就无非大家要注意一点，在 vivo 三中，你怎么去写啊？那你可能会 比如说 use 啊，传值什么的也是一样的，我就不演示了啊，传值也是一样的，这是路由对象啊，你要接收值的话，我们翻这么减点儿，比如说 carry 是吧，那么现在呢，就等同于这么去写啊，好，我们可以 console 哎，有没有参数呢？我把哎这个数角 root use root 写错了， 好，来，再来重新好当前的路由对象， 然后并没有 carry 是吧，那我就不打 carry 啊，当然你也可以传一个是吧？可以传一个，比如说我在这传一个 a c t 等于一啊，我们来看一下，然后在这有一个 query 啊，在这啊，有个 value 是吧？把这打开， a c t 等于一，那么你要拿这个值呢，也可以去拿，就是 carry a c t 啊，那一就拿到了， 对吧？这就和这样写线基本差不多啊，传直还这么传，接还是这么接，无非就是这个对象，我们先要这么去写啊，原因就是三叉里边并没有类似啊，这点大家注意。行了，那么有关于这个路由呢，我就先说这么多了，基本上呢，就够大家去用了，去使用了。好，本节课呢，我就先说到这里。
50小爽AI产品经理
11:28查看AI文稿AI文稿好，接下来我们实现一下这个页面的头部钥匙，我们头部钥匙简单的做几个 功能，第一个呢就是在这个头部呢有一个 logo 啊，后边，然后跟着一个我们的系统名， 然后在最右侧呢有一个小拉菜单，就是说我们可以推出系统啊，或者之后加一些修改个人资料啊什么的啊，然后我们打开代码， 找到这个组件里边的这个嗨点部分，我们先加一个图片，找一妹子，然后呢给一个 logo 图片，嗯，这是他默认的，让我们给他换一个， 这准备了一个照片，一个小图片， ok 啊，我们引入一下，我们用艾特的方式，哇塞斯的啊， log 点偏进好看一下啊，他有点大。然后我们给他改一下这个样式， 我们给他加一个类名，就叫 sisterm logo， 在这钥匙里边给他加一下钥匙啊，加一个死扣， 那样式呢，我们 给一个宽度五十啊，因为我们这个头部的这个高度呢，我们之前就是给的五十啊，直接给个五十 px， 嗯，然后圆角给个一半二十五 px， 像这样的话就是个圆形啊，然后我们加一个左边距啊，然后看一下效果， ok， 就这样啊，然后我们呢再加一个这个系统的一个题目啊，一个标题啊，系统名称， 然后我们加一个 spa， spa 呢，我们就交个我的个人项目，嗯， 然后我们也给他加一个克拉斯 啊，这里呢我们先保存一下，看一下效果啊，他现在是这样的，就是图片呢导致这个文字错位了啊，我们给他给图片加一个微， 我炒个烂出去啊，等于没到。这样呢，让这个文字呢能够垂直居中，然后我们再给文字加一点样式啊，比如说这个大小 十八个篇，然后文字的 粗细，然后给个七百，然后距左边的一个位置给个十八 ps 啊，大概就是这样一个简单的效果啊，然后我们在右侧呢做一个下拉菜单， 然后我们打开这个哎里面的 ui 啊，这有这个桌不当的一个下拉菜单啊，就是这种效果啊，鼠标放上去或者是鼠标点击的一种效果啊， 然后我们就用最最普通的这个，我们复制一下代码啊，就是 el 得不到 复制到代码中，然后他这有一部分样式啊，我们给他加一下，其实这块不需要也行，我们 自己自己再实现一下啊，现在我们先给他加上 啊，我们看一下效果啊，他现在是在这，然后我们给他加一个样式，让他去到右边啊， 然后我们之前说过，就是他使用这个 e l 杠桌不当的这个标签名，那我们就可以拿到 用他这个相同的类名来拿到这个元素啊，我们给他加一个这点 el 这么大啊，我们给他加一个右浮动， 然后让他跑到右边来，右边之后呢，我们给他加一个靠右的编剧 martin on right， 给个四十八 pix 啊，现在是这， ok， 我们再看一下这个，他这个元素啊，他这个是左右没有编剧的，我们稍微给他加一点编剧， 然后我们在这个 earling 上给他加一个拍顶啊，上下铃左右呢这个十二撇了啊，这样呢，就是鼠标放到旁边的时候呢，也有也可以把这个菜单给下拉出来啊。另外呢就是这个箭头， 他这现在是不是一个居中的位置？然后我们让他居中一下啊，然后我们可以看一下这个 他这个属性啊，然后有一个普利斯门特，然后一个菜单的弹出位置啊，我们可以给他改到这个 正下方叫波特么啊，然后我们看一下这个他的属性，给他加一下啊啊，普利斯面特等于这个波特， 这样呢，就是这个箭头呢，能够属于处于正中间位置啊，然后我们给他加几个菜单啊，比如说这个退出系统 修改资料， 然后我们就先给两个吧，我们后边有需要的话再讲啊，然后他这里边呢有一个类似一个歪柳直的形式啊， 然后我们看一下 hmm， 然后他可以看到这个地方，他有个 come on， 这个地方呢，就代表他一个歪九值啊，我们可以先给他付一下那个 come on 呢，等于一个啊，随便我们定一个，比如说我们叫 logo out， 另一个修改资料啊，然后他有个这个菜单的一个选择的试件，然后看一下我们这个叫艾特 come on 的啊，给他放进来 啊，我们去实现一下这个方法， 下拉菜单，点击式，选中式，然后我们再看一下啊，他这个方法里边有个 come 这个参数名，可以随便定义啊，然后不一定要叫这个 come on 啊，然后我们可以输出一下这个，打印一下这个 come on 的 看一下， ok， 我们点退出退出系统，然后他叫 logot 啊，然后点修改资料叫啊不对他，然后我们就可以通过判断这个 come on 的值啊，来进行不同的操作啊，然后我们判断一下 if command 等于 log out， 这个呢就代表 退出系统， 推出系统呢，我们可以再实现一个方法啊，就叫 logos 推出系统的方法，让我们再单独写一个啊， 推出系统呢，我们目前只保存了这个，嗯，在这个本地这个路口 老蕊中呢，保存了这个用户的登录信息，所以说我们现在这个系统呢，我们只需要在推出的时候删除一下这个存储的用户信息就行了，然后删除之后呢啊，调回到这个登录页啊就可以了，然后后期的话 这个退出呢，是需要调用这个后台接口的，因为他需要清除这个淘汰啊等等一些东西啊，那时候呢，我们在调用接口，调用完接口之后呢， 再清除一些需要清除的数据，然后再调回到这个登录页啊，我们现在就是清除一下这个用户信息就可以了，然后就是 look sorry 了啊， remove item 艾特，那我们的这个本地存储啊，这个我们可以看一下，我们保存的叫有点硬，放， 看这个 k 值，我们就拿着这个 k 值就可以了，然后他就会把我们保存这个优点信息呢给清掉啊，就叫优点一放就可以了，清，说完之后呢，我们需要跳回到灯笼页， 那我们使用这个 z 四点儿刀篮 就是里边呢，我们可以直接通过这个 pass 的方式啊，这就是 loy， 这样 ok， 我们看一下这个效果，我们点推出推出登录 这个地方呢，就直接给我们返回到这个灯笼印啊，然后我们再登一下 啊，这个后台接口挂了，我们再到时候再重启一下吧，然后现在的话就讲到这啊。
18前端杨wh
27:36查看AI文稿AI文稿好的，那下面呢，我们来看一下 v u r 片的面试题，那我把 v u r 片的面试题呢大致分为这么几大类了，第一类呢是关于生命周期的，第二类呢是关于组建的，第三类呢是关于 v u x 的，第四类呢是关于路由的，然后其次是关于 a p i 的，关于指令的，关于原理方面的等等一系列。 好的，到这呢，我们先来看第一个阶段啊，是关于生命周期的。那首先呢，我们先来看第一题，他会问到 view 二中的生命周期呢有哪些？那发送请求呢，是在哪一个生命周期中？ 那首先呢，第一个问题，它是比较简单的啊，在 view 中有哪些生命周期，可能我们也都知道，对吧，比如说在比方啊， creator creative， 比方 mot monty 的，比方 update updated， 比方机转机转的。 那我这就不写了，我给大家呢复制粘贴过来吧。好吧，来找一下我之前写过的那个扑克哈。那当然了，有些小伙伴呢，可能还会说到，哎，如果我用用到那个系统自带的 keep 这个组件呢， 他还会额外再新增两个，没问题。后面呢，还会详细的再给大家去说一遍比较完整情况。我们先知道，在 vivo 二的官网上呢，他系统自带的确实有这么八个就可以了。好吧，行，我们这样先写一下啊， vivo 二点叉系统自带有八个。 好，我们把这个八个呢给他列出来， ok， 行，然后其次呢，这个问题呢，关键点是在后面说发作情形呢，是在哪一个审美周期中。那么这个问题呢，他其实呢会涉及到很多前置性的知识， 包括这个问题呢，大家在网上搜呢，可能也有一大堆的答案，但是呢，每个答案可能都是模拟讲课的，当然呢，会详细的给大家去介绍一下，让大家彻底的了解我到底选择应该在哪个技术呢？其实没有好坏，只是说在特定时候选择特定的技术，或者特定的场景下选择特定方式，这是最主要的，也说我们要有一个独立 思考和选择的一个情况啊，会选择这很重要，那我刚说到他会有前置性知识，那么前置性知识呢，我们在面试的时候呢，面试官一般会追杀或者说逮住一个问题呢，他再去往下去问，比如说会问到你为什么不在 before crazy 中方的请求呢？对吧？他们之间有什么区别 啊？在这里边如何获取 dom 是吧？一旦进入到组建会指哪个生命周期？会有很多一些前任性知识？好，到这呢，我们先来看第一个啊，就是一旦进入到组建会执行哪些生命周期，我在这呢，索性给大家去讲一部分啊。行，那下面呢，我们来测试一把子就可以了， 我把我这个在桌面上已经新建好的这么一个项目先给它打开啊，然后我打开随便一个组件，打开这个首页吧，把内容呢，我先全部的清一下，干净一点啊。行，然后呢，我这先随便定一个 data 数据吧， deter 一个 s t r 好，随便写 一二三。行。然后呢，我把那八个身份周期呢都给他挪过来哈，然后我们看一下一旦进入到这个组件里边会执行哪些身份周期。 ok， 好，在每个里边呢，咱 console 一下， before creat creat it before monta montet， before update updated before destroyed destruct。 好的，那么现在呢？我打开这个项目 local host， 八零八零走着啊，右击检查，大家会发现， 一旦进入到页面，或者一旦进入到组建呢，他会默认执行前四个什么六七，比方 crit crit， 比方 month mot。 好到这呢？我们知道了啊，把它写到这个地方。好，那么到这呢， 我先暂且给大家去讨论一下这些什么日期吧。那在讨论什么日期之前呢？先告诉大家一下，我们的这个 view 呢，它最后把这个 home， 这个 div， 或者说这个文字，它都渲染到哪了？它都渲染到我们这个 body 里边，有一个 id 为 a p p 的这个 div 盒子里边儿， 那它具体在哪呢？是在 public 里边，这有个这个盒子，它把所有内容呢都渲染到这个 d i v 里边的，那它渲染过程呢？其实就是通过 g s 的逻辑，对吧？就是 view 点 g s 哎，然后把盗墓呢放到页面上， 那在这个地方呢，他有这么两组的生命周期 before crit 啊， crit 的就算一组，这个叫创建前后，想必各位有多清楚？然后这个 b for mont 和 mont 呢，就要挂在前后，想必各位呢也基本上清楚，那在这个阶段，就在这个，呃，这两个生命周期里边，它是没有道目的。 在这两个什么周周期中呢？这是准备 dom， 这是有 dom， 对吧？这是我们知道或者说前置性已经了解一些知识。那也意思说呢， 当我运行了这两个生命周期的时候，那我们的盗墓呢？还没有放到页面上，说白了就是还没有执行盗墓的相关内容没有一个添加几点到页面上，这么一个语句行为还没有执行呢啊，所以说呢，在这个阶段我们要打印两个东西，一个是 el， 一个是 date， 这个 e l 呢，就是代表 dom 啊，就是代表这个 home， 这个盒子，然后这个 dat 呢，代表是这个 dat 啊的数据。哎， t r 好，我们把这呢都给答应一下， 想要知道一个最简单的区别哈，来刷新一下，看下控制台在 b for credit 中呢，啥都没有。在 credit 中呢，没有盗墓有这个 dat 了，在 b format 中呢，没有盗墓有 dat 了。 哎，在忙记者中呢，又有盗墓又有数据啊，都是没有问题的。好，这是我们这儿所了解的前置性知识。然后紧接着我们再来看一个问题， 哎，如果副组件引入了子组件，那么他们的生命周期执行的顺序是什么？这个也是比较关键的。好，到这呢，我先去新建一个子组件啊， 当大家把这些知识都了解了，再去看我请求应该放到哪个身份周期里边呢，就很明朗，好的，我把这个身份周期呢拿过来，这八个呢，我都给他放过来吧。哎，这样吧，我把这个整体给他复制一份。好，这个 data 呢我就不要了， 然后这儿呢，每个生命日期之前我这个也不要了啊，我把这个都删掉。 好，每个生命日记之前，我给他加一个语句叫子 ok， 那这样大家就知道了哦，这是子组件的。 ok， 行，那我在副组件呢去引入这个子组件哈。 list 来 import 一下 compone， 呃， component 下面的好，在这呢有一个 component， 然后把这个拿过来。行，那现在呢，我们来看一下刷新，大家注意这个事呢，特别的关键啊，来，先是直径负的前三个， 然后执行此的四个啊，注意，然后执行负的，那通过这你能了解到什么讯息？你能了解一个答案，是先把副组件的这个数据给我准备了，那这个数据呢，我可以做一些 处理，或者说给子组件呢传过去，子组件呢，可以接收到，然后执行子的数据处理加子的 dom， 等把子的 dom 都弄完事以后，才执行父的 dom， 那这个地方大家能明白吧？好，是这么一个顺序啊，好，我们这呢写一下啊，现在执行负的 负的这个，这个啊，还有这个，然后再执行死的四个， 好的，然后再执行负的啊，这个当然，如果说你这儿有多个组件，举个例子啊，比如说我这呢，还有一个组件叫 a a， 它的执行顺序呢，那就是先把负的 前三个直行了，一样的，再把这个 list 的前四啊，四个直行了，再把 a 的四个直行了，然后最后也是直行负的 monty。 好，所以说呢，这个地方的词可能有多个，那么就按照他们顺序，一个一个一个直行，反正不管怎么样，最后都是直行负的 monty 的。 好，这个问题呢，特别的关键，大家要记住啊，特别的关键。好的，下面呢，我们就来看这个问题，回到这，哎，方案请求是在哪一个审美周期呢？我会把这几个呢都给大家去讲一下，对吧？你不仅要知道 critid 和 monty 的，你还要知道为什么不在这个里边。 好，下面呢，先来讲为什么不在 before christ 中， ok， 好，回到我们的这个项目里边啊，我这呢先去发送一个请求，那么在这呢先给大家声明一下，我这呢就不针对于 xos 呢进行二次封装呢，我们就直接请求去。好吧，道理是一样的，当然后面呢我会给 给大家去讲 x o 子儿童装的啊，行，那通常呢我们在一个项目中呢发送请求，基本上呢有这么几种写法。好，我这呢先给大家写一下啊，比如说我们现在呢要写一个请求，哎， 我这样的先给他加一个分号啊，那我在这个地方写，或者说在这口里记得里边写 xos 是吧，这有个 url， 然后呢，我们可以把这样的一个 url 的一个路径啊，这个先拿过来，这是请用数据的啊，然后这有个点灯哎，然后有个 is， 这是我们的第一种写法。 好，这是我们的第一种写法，来刷新一下，像这样吧，我先把这个子午键呢先给他注掉吧啊，要不然呢，就 这块呢，内容太多了，看的不清楚了哈，包括这的这个 date e l 我都给它删掉了，大家知道就好。 好的，我们刷新一下，然后大家呢会发现这个数据呢，他是进来的，哎，到这答应，大家有没有发现一个问题，我先把前四个生命周期执行了，才会拿到数据，这是为什么呢？ 就我现在告诉各位一个这样的事情，就我把这个 sales 啊，这个请求我放到这啊，放到 before crit 中看，大家看啊，也是最后拿到这个数据的啊，这个请求是一定没有问题的啊，那我放到这个 crit 中，他也是最后拿到数据的 啊，我放到 monty 的笔画 mod 中都是一样的，这是为什么呢？很简单，我问各位一个问题啊，在我们 g s 里边，是先执行同步还是先执行一步呀？是不是先要执行同步后执行一步呀？ 没错，那我们这个地方的 console 就是说这个地方生命六七，比如说 before crits are created 这些生命 周期呢，他都是一个同步的一个代码，而我的请求呢，他是一个翼步的，那所以说呢，先要把同步的都执行完了，才会执行翼步的，这没问题，对吧？世界循环机制语文的路谱嘛。啊，所以呢，导致啊，目前这种情况呢，我们把这个地方的请求啊，放到哪一个里边呢？都一样 啊，都一样，注意，我说的话都一样，没什么太大区别，或者跟自己没区别，反正都是最后执行， ok， 行。那么到这个地方呢，我要给大家再延伸一个问题了，既然这个里边的代码他是最后执行的， 在 monty 的之后执行的，是不是我这个义补的，对吧？我在这个地方去写的时候，我这儿要获取一下 dom， 比如说 document 点 get element by id 获取这个 dom， id 为 home 啊，是不是我可以这么获取呢？没错，是一定可以获取到的。好，我们来看一下，大家看是不是获取到了， 所以说呢，我们来解答下这个问题，在这个 christ 中如何获取到我们呢？非常的简单，只要啊，只要一步 就可以了啊，只要写只要写 e 步代码啊，获取 dom 是在 e 步中获取的就可以了。 好，那么我再举个例子，那刚才我们看到了，在这个 crate 中啊， crate 中它是没有这个 e l 的，就没有盗墓的，你直接同步的这样去打印，你放心，你在这个阶段是肯定拿不到对应的这个生物周期的，看对吧。 no， 拿不到的，你只要一 一步就绝对可以拿到，那一步呢，我们可以写上哪怕一个 set timot， 那 set timot 是属于一个红任务嘛，这样情况下呢，你也是可以拿到的呀。好，我们来试试啊，刷新， 大家看是不是我可以拿到，对吧，我可以拿到啊，在这个地方，大家看，在这这个地方 啊，这有个 div， 呃， id 为后幕， class 为后幕，是不是可以拿到？哎，没问题，所以说呢，只要是一步的就可以，包括在我们这个 vivo 中，它系统自带了一个东西，叫 next check 这个一个东西啊，这么一个东西， 这东西呢，我后面回答详细介绍，不管怎么样，你现在记住，他既然能在这个阶段获取到这个盗墓啊，就证明了这个 next tech 它是一个义务 啊，它是一个 e 部的。好，这一点呢，我们知道啊，那我这呢给大家把这个东西也加进去 啊，比如啊，例如 set table， 请求等等。二啊，使用 view 系统内置的 from miss， 点叉叉等等啊， 好，你也可以使用 view 系统内置的 next tech 这么一个啊， a p i 也是可以的啊。行，当然获取盗墓呢，它也有很多形式，我们可以通过原声 g s 方式进行获取。 大家可能呢，也都知道，在我们这个 view 中呢，它还有一个东西叫 r e f， 对吧？比如说，这儿写一个呃， chair 的吧，哈，随便写一个，我们可以通过 this 的 r e f f s 的 chair 的也可以获取到 dome。 好，给大家看一下，是不是这儿呢也拿到一个 dome 呀？ 啊，也是可以的啊，后面呢会展开，大家去讲。好，那现在呢，我们知道获取 dom 在哪一个身份证其中呢？都可以获取，只要你是个义部的代码就可以了，把这个获取 dom 呢写到义部里边就行了。好，那我们再回到原体里边啊，就是我们的请求这个事情。那先说为什么不在 b fork 的中， 那其实呢，说到不在 b per c t 的中啊，其实要说到在什么情况下要在它里边，在什么情况下呢？可能啊，不在它里边。好，那我刚刚提到了，就是我们这个。呃，请求呢，它有这么几种写法，第一种写法呢，我们可以这么去写，那这样呢，是可以拿到数据啊，没问题。 然后其次呢，我们可能会采用啊，比如说来，我把这个请求呢，先放到这个 crazy 这种啊，比如说我们可能呢还要采用 a sink a wait 的形式，对吧？这个也是比较常见的 a sink 啊，然后这儿呢有一个 r e s 等于 a wait， 哎，然后把这块拿过来，这种情况呢也是比较常见的，然后我们可以 ctrl 的 log 打印一下这个地方的一个 r e s 啊，没问题，来，我们帮机一刷新。 好，这个数据呢，也是在最后拿过来的，没毛病，是吧？ ok， 那么还有一种情况啊，也是我们也经常会写的，我给大家举一个场景的例子啊， 嗯，来看一下，就是我们这个请求呢，他可能会封装成一个方法啊，封装到 message 里边，一个方法供我们去调用使用啊，为什么要封装起来呢？是比如这儿有一个，大家都在看这么一个效果， 那首先呢，进入到页面会初始化，对吧？这调用一次这个方法来，请用一些数据，当我每次触底呢，他会加载更多，那当加载更多的时候呢，就不断的会调用这个接口，不断的调用这个接口， 那它的一个写法呢，会这样去做啊，我们这儿呢，比如说有一个 message 啊，是写方法哎，有一个 get tit 的一个方法啊，这里边呢是有关于请求的内容 啊，请求内容好，然后呢，我们这样呢，要去啊，这个，比如说 crazy 中调用它一次，哎，当触底的时候，比如说有一个 skill 事件，我再去调一次不就行了吗？那现在呢，我就不去写那个事件了啊，咱们就直接先调用一次， 好刷新一下啊，调一次，哎，你看这数据呢，也出来了。好，下面呢，注意，我就要说，为什么比 不在啊，这个 before crit 中放请求了。好，来，刚才我们看到在 before crit 中，如果你这么写它是没毛病的。 好，我们把这代码呢，先给他干一个啊，如果你这么写，在 b forcred 中呢，获取这个数据啊，请求到这个数据也是没有问题的，如果说你这儿呢，写 a sink， 对吧？然后这儿呢，有一个 let r e s 等于 a wait， 这么写也是没有毛病的，都是可以获取到数据的。 好，我们保存一下，走，你，大家看，是吧，也是没有问题的，但是啊，区别来了，大家一定要注意啊，但是如果在这儿要直接调用 this get date， 也说我在 before credit 中调用 message 中的方法，注意 刷新，报错了啊，他说 this 点 guide it is not， 方式怎么样就获取，就是在这个阶段啊，他获取不到啊，这个这个 message 里边的方法。好吧，所以说呢，这就是为什么我们不在 bifercre 中发送请求的一个原因。好，我们这儿呢，给他写一下 啊，因为如果这个请求是在 message 分装好的，对吧？分装好的啊，在我们的初始化 调用的时候阶段啊，是拿不到里边的方法的，比如说这个时候呢，会报错， 这就是为什么不在他这个阶段。好吧，那也就意味着，如果我根本就不会涉及到把这个方法，把这个请求放到到方法里边，我就是普通的一个，呃，进入到页面直接执行的，那么就无所谓了啊，你怎么写都是可以的啊，这点呢，大家要知道啊。 行，那么下面呢，我们再来说关于他俩之间的一个请求的区别。 好，那么这样呢，我把这个问题也补充一下吧，他俩什么区别？他俩的区别呢？其实挺多的，对吧？就是关于 apa 方面的这个阶段啊， 没有，没有，这个 e l 也没有 date 啊，在这个 wanted， 呃，在这个 credit 中 有 dat， 这样吧，我们就直接这么写吧，在这个阶段没有 dat， 在这个阶段呢，有 dat， 而且呢，我们这个 critic 呢，是可以拿到的方法的啊，但是这这个阶段呢，是拿不到的， 拿不到啊，所以说这是他们一些区别。好吧，好，回到我们这原题上啊，那为什么在这个阶段请求在这阶段呢？不请求啊，那刚才我给大家提到了，就是如果说我们这个请求，哎，比如说我们就这么写啊，在这请求 它这个代码呢，就是我们获取这个数据呢，它永远是在最后。来看一下，它是在最后吧，好，我把这个 this 该对的呢，在这个 monty 中调用，它也是在最后啊， 我们就算把它写到前面，它也是在最后啊，因为 e b 的最后执行哈，来刷新好的，它都是在最后的。那么通过这样情况来看呢，根本就没有半毛钱的区别啊，当然有些有，有些文章会说 啊，什么闪白啊，什么闪屏啊等等这样一些东西，这个呢，其实都是可以优化的，这个不叫核心的。具体区别 就这两个东西呢，在这样场景下去使用啊，就是处处啊去使用，没有太多数据情况下，真的，你在哪个阶段呢？去调用啊，去请求都是可以的，但是呢，有一种情况呢，你还真的有一种选择性在好，什么样情况呢？我家举一个例子啊，看现在呢，我副组件呢，引入了这个子组件， 假如我的词组件呢，也会有请求啊，我词组件在哪？请求倒无所谓了，比如说呢，是在这个 crazy 中请求啊，无所谓。 好，然后呢，我请求到数据呢，我会把这个数据呀给它放到页面上啊，我就直接放了啊， is date 的 date 的 list 等于负一个值啊，等于 this this 的 list。 好，我把这个 啊，我把这个死的这个 r s 给它打印一下啊，好，然后把数据呢也给它渲染到这个页面上。 v 杠 four 等于 item in list 括号 k 为 item 的 id 啊，这是 item 的 name 啊，我这儿已经记住这个接口的内容了。好，然后这是 four。 好的，那么现在呢，大家看，我把一个请求先给他放到这个啊 crit 中啊，来，大家看一下，我刷新一下，哎，这呢有一个报错是 excels， 我这没有引 pro 的 excess 是吧？ 好，我保存一下，大家来看啊，刷新一下。哎， least is not demand。 怎么了？在这个地方有个问题，呃，我们这没有定定义这个 dat 数据啊， 好，我把代码稍微移一下啊， 不移一下很难受。 ok， 好，差不多，来我让大家看一下，刷新一下，大家注意，千万注意， 父先出来，看到没有啊？父先出来，父先出来，然后子再出来，看到吗？父先数据出来，再子先数据出来。为什么呢？ 复，我们，我们上面说过了，就是我们这个如果子组件啊，这个副组件引入了子组件，他们生命周期执行数据顺序是父的前三，然后子的四，然后最后父的 monty， 对不对？ 那么我们刚才这个地方呢，是不是要把负的这三个执行了，再执行子的这四个呀，然后再执行父的这一个呀，对吧？所以说呢，这个地方的他就比子的这个先要 执行出来。那好了，假设我这儿请求多呢，比如我有三个或四个呢，你看啊，刷新 full full food full 子，你看它才出来，看到了吗？好的，那如果说现在我把这四个请求啊给它放到了 monty 的中呢？刷新 注意，子看到没有？先出的数据，然后负负负负能看到区别了吗？所以说呢，我们下面来看一下这个问题， 这个呢放到哪一个身份证据中呢？没有谁好谁坏，谁好谁坏，这个是不存在的，存在是你要针对于你的项目呢来进行一个 选择，这个非常关键。我举一个例子啊，比如我们这个项目它是一个，呃，移动段项目吧？啊？我给它切到这个移动段啊， 然后呢？我这移动大项目呢，是当前这个页面属于一个副组件啊，然后呢？这里边呢有一个轮播图，它是个子组件 啊，然后呢？有一个新上好课，他是一个子午建啊，然后呢？再往下有推荐好课，他是有一个子午建，然后再往下呢？大家都在看他属于副组建里边的内容，假设这是一个子午建，这是子午建，这是子午建，这是副组建啊，这是副组建请求的数据，这个都是这些内容，都是子午建请求数据， 那么我上来呢，一刷新页面是不是先要看到是轮播图和这个呀？那请问是不是这两个数据在初始化的时候啊，一定是 大于他的，那我就问你，你先要让这个数据展示还是先让这个数据展示呢？肯定先让他，对不对？那么这两个组件是在副组件中去引入的啊，在这个整体的副组件啊，在副组件呢去引入的。那请问请问你这个地方的请求写到哪？ 是不是要写到 monty 这里边？因为你先要保证他俩出来，他最后出来嘛，所以这个请求呢，写到 monty 里边就可以了，那这样话呢，就一定是这个请求，这个请求先出来，然后这个请求最后出来， 对吧？那这种是合理的。那如果说你要把这个请求写到负的 ct 中好了，假如这个请求呢是两秒，那是不是他先出来，他们才能出来呢？就造成一个感觉是一个阻塞情况，没错的，所以说呢，我们这地方呢，关于他们请求是在哪，要看 情况。好吧，要看情况啊，那我们该在面中怎么去回答呢？来我把这呢拿过来。 好，你要回答的是这个问题，具体要看项目和业务的情况了啊，因为组建的加载顺序是副组建引入了子组建， 那么先执行负的前三，前三生命周期 再执行子的四个啊，前四啊，这么周期。那么如果我们的业务是负组建引 引入子组件并且优先加载子组件的数据，那么在副组件中当前的请求要放在 mt 中啊，如果副组件啊或者说当前组件没有依赖关系啊，没没有一个什么副组件组件关系，那么那放在哪个这个生命周期 中请求都是可以的。所以说你要给面试官去说这个具体要看咱们的这个组建呢，是有父子之间的关系吗？还是说啊，就是我们当前只有一个请求呢 啊，还是怎么怎么样啊？反正呢他有很多的一些内容，大家呢，根据刚才我所讲述的内容呢，可以自己呢整理一些话术。好吧，这就是他们之间的区别。那我给大家复盘一下这个问题啊， 那首先的生命周期一共有系统自带八个啊，那我们这生命周期呢，为什么不在 b for credit 中呢？是因为哎，在 b for credit 中呢，如果这个起球呢是封装到 message 方法里边的，那他又拿不到了啊，那为什么不在呃 crit 的和或者说 monty 中呢 啊，是因为我们要看对吧。在 monty 中请求和在 crazy 中请求如果没有太多依赖关系，而且这个组件只有一个这么一个请求啊，那你放到哪个里边都无所谓啊，如果说他们有父子之间关系，我优先先让子母键数据出来，再让父，那也放到 啊我们的 mot 中啊，在负的负这个组件放到 mot 中，如果是这样负出来子再出来啊，就先直行负的这个请求，那就相反了，对吧？哎，就这个意思。行，那这就是我们的这个问题，就给大家呢，先讲到这里哈。
101小鹿线-北京线下班
01:39查看AI文稿AI文稿view 环境搭建的第一步，安装 note view 依赖于 note gs， 所以要先安装那个 note gs 环境，下载地址就是 note gsdlrg 安装包下载后直接双击，然后就进行了安装，安装之后呢，然后就有可以输入 no 的命令， no 的杠 v， 然后可以查看 no 的版本信息。第二步，安装 npm 镜像， 因为默认恩田默认的镜像是国外的，使用起来速度比较慢，所以我们这里使用淘宝的。第三步，安装全局无异议，肯定缴手价。 呃，命令就用刚才的用。第四步，创建新项目，这个命令是 wild park， 然后是项目名。第五步， 安装项目依赖，刚才只是初始画了这个项目所需要的文件，然后现现在使用这个命令呢，将会下载相关的依赖包，用 npm install。 第六步，也是最后一步，然后出入 npm 状，第一杯就可以看到控制台打出来 acp locals， 默认端口是八零八零，然后进入浏览器可以看到这个效果。
98广元中中
01:52
22:20查看AI文稿AI文稿好，接下来呢我们要做内容是登录这一块了，那下面呢来看一下学习路线点 cn， 这个网站的一个登录页啊，大体一个样子啊， 那他登录方式呢？分为三个内容，分别是第三方登录，第三方登录呢是微信、微博、 qq， 还有第二种方式呢是这个账号密码，第三种方式呢是短信验证码。那到这呢我们就一个一个去实现，先来实现这个账号密码的一个登录方式。 好了，回到我们这个地方，那首先呢第一个我们要做内容，就是先把这个 login 这个页面给他创建出来，对不对啊？然后呢我们去给他路由上进行一个引入，那这样的话呢我们就可以跳转到这个页面了，然后接下来呢我们分析大概要做的东西哈，行，那我们先回到这个项目里边，那我就给他打开了哈， 来，那到这呢我就给大家新建一个 large 点 view 这样的一个页面啊，这样呢，我写一个 topic， 这是我们的登录页。 好，稍微放大一点。行，然后现在呢再来找到这个 rooter 点 g s， 好，把这呢再给它多一个，那这呢就是捞紧。好，然后呢这个地方也写一下 那，呃，这都换成小写吧。好，然后，呃我们这的这个老茧， ok， 行，然后呢再跑到那个地方的一个，呃，憨豆啊，这呢我们要多加一个来往下走啊，不是在这啊，在这，那，这要加一个 rooter link 啊，然后把它放进去， ok， 然后到这呢我们需要有一个兔 到我们的 logo 里边就可以了。好，那这弄成一行吧，然后下面呢我们来看一下，那这呢会出现一个 a 链接，对吧？那在这呢，我们把这个 c s 样式呢也调整一下，好，到这个地方我们加一个 a， 然后再给他去除一下下，划线好点，他以后进入到我们登录页。行了，那 下面呢，我们就来看登录这块的整个的内容啊，那到这呢，我也是打开一个学习路线点 cn 吧，进行一个账号登录，然后咱们找到那篇文章啊，不过，呃，不登录也可以啊，只不过呢，一会我们还要看接口啊，所以说呢，我这登录一下 啊，然后这个呢作为一个参考啊。那到这呢，我们就先去捋个，这就是我我要做的这个账号密码登录啊，需要做哪些操作啊？ 首先呢，我们做操作是这样的，来往下走在第二十一， 好，来我们分析一下操作，这样的，那我们的账号密码你肯定是要有一个请求，对不对？然后把账号密码传给后台，传给那个后端，那你不可能是通过铭文进加密的，对吧？你不可能是铭文，你你肯定要加密码，所以说呢，我们这加密要走啊，咱们要走一个加密。好，这我也写了，然后等 登录完事以后，我们都知道登录完事以后呢，会有一个 token， 那个 token 我们要进行存储，那在之前呢，我们会呃存到本地存储，再加上 vivo xo， 那么现在呢，我们就是用 pena 来操作这个事情，是吧？ pena 就可以完成这个事情了。好，所以说呢，我们要做很多很多东西的。好了，下面呢，我们就一步来啊，我先把这文章放到这， 那我先去拿一下整个的这个网页的布局吧，先把这个布局拿过来啊，这写了很多东西，我先整个给他复制粘贴过去，然后呢有些东西我该删呢，删一删啊，然后给大家去讲一下。 嗯，在这个地方有很多东西其实已经弄了。呃，我先把这个地方的一个呃 g s 部分吧，先全部给它删一删。稍等一下，我把这儿呢都删掉吧，就先不要这个部分啊，这个部分是我之前写的啊，然后这儿呢还有一大堆 a p i 什么的，这些我就都不要了。好，然后我们回到这个页面中，呃，他出现错误了，我们看一下哪出现错误了哈？有一个 user name 啊， user name 这个不能删，那我找一下，是我们的一个数据啊，我把 这个部分先给拿过来，好，再来看一下。好，那现在呢？我们的页面内容算出来了啊。好，我把这保存一下，然后呢他这呢少两个图片，应该是我看一下 这里边内容还是不行的，我再来看一下啊，好，这是 ok 的了。好，但是切换呢就出现了一些丢失情况，我们先不管了。然后这呢，呃，他丢失一些图片，这些图片呢我也给他拿进来吧，放到这个地方的引魅值里边啊，把这两个呢给他干掉。 ok， 好了，我们再刷新一下啊。嗯，要多刷新几次了，看来 或者说我把这重启一下，好再来。 ok， 那他有一个背景图哈，然后第三方登录证呢？我们先不管他，咱们先来做一下这个账号密码登录这一块，那分别给大家说一下这里边的这些数据啊是怎么回事哈。 呃，这就不用说了，这是我们的自己图标啊，这是我们的自己图标。然后这个呢啊，这个地方数据，比如说这有一个 login test 吧， t s t 是账号和短信登录这两个数据，比如说我这写个一，这写个二。好，我们刷新一下， 你看这有一个一，这有一个二，是做一个切换的，那么这一切换完事以后为什么没有数据了？一会咱再说哈。好，然后呢？这有一个，呃， current 为一啊，为一， 那它的初始为一，我们去找一下啊，它这有一个判断的啊，它判断是 id， 有一 次说，呃，如果说一等于了 id 为一的，那么就展示这个，对吧？当我点击他俩的时候会有个切换，他是 id 为一，他是 id 为二，所以说我会把 id 付给 karent 的 v 六，那这样的话呢，这两个值就进行切换了啊，这是两个布局板块嘛，他进行一个开口切换啊，然后再往下看呢，这个地方， 这个呢是我们的这个账号密码登录整个一个 r e f。 好，然后这个这两个呢？呃，这个地方的 user name 和 p w d 啊，是这儿和这儿输入的内容，也就说 we got model 啊，输入内容好， 然后呢，这呢是账号和密码的一个啊，登录这块的一个验证啊，就比如说我们的这块你输入的位置，比如说你输入的是，呃两位或三位，那肯定不满足我们的要求啊，所以说我这限制了最少三位，最多十一位啊，密码也是一样的啊，这是这的一个验证的规则。 好，呃，然后呢，其次就是我们这呢有一个登录按钮，当我点击了登录，我们来看一下啊，把那个登录要拿过来，好，把这个放到这， 这个是，呃，账号密码一登录好，是这一块，就是，呃，我们现在呢，这个地方有一个登录，对不对？我这输入账号，输入密码一点登录啊，然后这呢提示啊，就执行这代码了，说白就这样子。好，那么在这呢，我们看一下子，他为什么这切换是有问题的啊？ 然后我把这原码呢，到时候给大家去替换一下吧，他说我这个东西，嗯，我这我就先不要了，这不要了，这个地方 ctrl 就是账号啊用户名和密码登录成功，或者说叫 验证成功。好，然后这呢我们看一下这个切换是为什么？这切换这出现了问题，那就肯定是，呃，这啊，我把这个地方先给他清一下，这不要了，然后这个 vgo model 什么的我也都不要了， 那这些部分呢？我们下一课再做好。再来，可能是那块的数据没有，所以说他导致一个错误，好，现在就 ok 了啊，这也不会报错了。好，然后我们测试一下这吧，比如说我说一个一， 呃，它提示我成功，那这儿肯定是不对的，我们看一下这儿数据哪出错了？ the name 和 p w d， 然后这儿是 上面是内蒙和 p w d， 看一下啊，上面是 user name 呀，然后这儿叫 user name 啊， 那这儿写错了， user name， user p w。 好，这样验证柜子它就有了，来输一下一，好，大家看来刷新一下啊， 比如说我这输个一，他提示我三到十一倍，对不对？好，那这时候呢，我把这个文章改一下，那就用现在我们的这套模板就可以了，我找一下我的补课啊，他做的时候呢，直接可以用我们这个文章去做，然后里边呢有一些重要点我会给大家去说啊，这只是一个布局内容啊，修改一下，把这个整体，这， 那这个整体内容我就给他删掉了，然后把这个加上，好再发布一下。好的，我们就去看一下这篇文章，那现在呢，我们这样呢就已经 ok 了，那下一步我们要做的事情呢，就是我这输入一个 账号，比如说我的账号是 tys 啊，我这呢也给大家去放上这个测试账号啊，测试账号，呃，这个地方的用户名是 tys， 密码是 admin， 一二三，应该是啊，然后这是 admin 一二三。好，我一点登录，那他就可以登录上了，那登录成功肯定会给我返回个 token， 如果失败了，那，那当然就失败了，对不对？现在是我的这个，呃，前端做验证是通过了啊，我们这还没有去请求接口。好，那么现在呢我们就要去请求接口了， 来回到我们的这个接口文档里边， 那在这呢，我们就看一下这课程六三吧，直接搜啊，这有个接口文档，我们点进去，然后在这呢有一个 登录啊，然后有一个用户名密码登录。好，那么现在呢，我们需要去这里边 a p i 里边新建一个 g s 文件，对吧？我们叫 user 吧，啊，或者说就叫登录吧，登录点 g s 叫 login 点 g s， ok， 好，进来， 然后在这儿呢我们需要把 request 啊进行一个引入。好，然后呢？其次我们这个请求呢是一个 post 请求，那我们再去拿一个之前写好的 post， 然后呢我们这儿做的是用户名密码登录，把这个呢拿过来，然后这儿呢是有一个 api 地址的，我们就给它粘过来。 好，然后呢这个地方我们的名，是吧，就用这个就可以了。好，呃，然后我们再看看啊，这个地方应该没有问题了。好，那下一步呢，我们就要跑到这个捞针点，必有中。引入啊，引入来，那我们这就是 a p i eport， 它是一个名。好，然后下面是 strong， 我们要找找到呃，这里边儿的 a p i 文件的 login 点 g s， 对吧？好，那它呢 就要发送请求去，就是你的验证成功了，对不对？我们就要发送请求。好，那这时候呢，我们这样呢需要去传递一些参数哈，我先 ctrl log 打一下这个 i s， 然后这样呢，需要传递一个参数，那么他传递参数是什么呢？ 哎，在这有一个 username， 对吧？还有一个是一呃 password， password。 好，那正好呢，就是我们上面的它的 username 和它的 user p w d， ok， 就是我，我们这 v 港 model 啊，说白了就是我们上面输入的，对吧？在这儿呢输入的内容啊，这是用了 m g u i。 啊，输入的内容看到了吧？啊， v 港 model。 好，我们回到下边，那么现在登录就 ok 了吗？注意，你现在是铭文的哈，现在是铭文的，所以说它是不行的，我们来看一下。好，当 我现在呢去提交一下，比如说我现在呢点击一下登录， ok， 他会返回一个四零三，看到了吧？好，我们需要给他进行加密的传输。好，这时候呢，我们就要做下一步了，来看我们的文章。 好，我们需要呢去下载一下，来到这呢下载一下啊，点 i 复制一下。 好，下载一下，下载完事以后啊，我们需要给它呢创建一个 g s 文件。 在笔记中呢，都写了啊，咱们就需要创建一个 a s 点 j s 啊，当然这个名呢就随便起了啊，我就放到这工具里边了啊。好，然后把这个代码拿过来，这代码具体内容是什么呢？给大家去稍微的说一说。这 m d 五加密是不要的啊。呃，就看一下这个地方吧。首先呢，这是我们刚下载的 做了一个引入，这是解密的，这是一个加密的方法，这是一个解密方法，重点是这个地方啊，就是十六进制的一个什么密要之类的，这个呢是你跟后端之前就规定好的，所以说呢，我们这就不用管了，好吧，然后呢，只需要引入一个加密的方法来回到我们的 logo 点六中 啊，这是加密一 pro 加的 a e s。 好，那在这呢，我们需要把这个内容给它扩起来，那么这样的话呢，就是加密后的数据传给后端，那这样就没有问题了。好了，我们在这再来试一下， 来看一下我的这个检查，现在呢，我点击一下登录走，哎，刷新一下啊， 啊，我们这还没有去启动这个项目，我们启动一下，呃，文章里边呢，我再去改一个东西， 把这个 md 五这个就不要了，因为确实用不到登起来了，我们刷新一下页面，我带大家看一下哈，现在呢，我随便点一下，大家看是不是返回数据提示我登录成功了，那如果说我这输入的比如是别的啊，那可能就是登录不成功了，例如我这输入一个这样东西啊， 这时候呢已经不对了啊，我们就随便的加点，再来看，这是账号密码和错误对不对？好，然后现在呢，我们需要去看的一个东西，就是在这个地方的一个网络啊，我们这呢会给他发送一个请求。 好，这时候呢我们来看一下具体的这个内容啊，大家看这个地方的一个 password 也好， user name 也好，都是我们加密后的啊，这样的话就没有问题了。好的，行，那一旦我们登录成功完事以后，比如说我这儿输入的是呃 呃正确的，那他会有什么样的一个反应？因为如果错了，我们还要做一个提示，对不对啊？我们先来输入一个正确。 好，那这时候呢它的一个 cod 码呢？为一万零六是吧？所以说呢，我们这儿啊可以判断一下，也就是 r e s 点 meta， 点 code 是吧？如果等于了多少呢？这个值，那么就代表是登录成功 啊，这边是登录成功的啊，否则那就是登录失败啊，所以说呢，我们在这要提醒一下，当然你在这呢可以去这么判断， 如果说这 coat 码非等于非等于这个值。好，那我们这儿呢可以做一个提示。呃，我们可以用一下 animals ui 里边东西来做一个提示框就可以了，剩下的都是很细节东西，你说它难吗？它不难不难啊，它就是麻烦。嗯，那就是登录。我用一个 l 吧，看一下啊，哪个好用一点？那就用一下这个地方的一个 running arrow， arrow 也行。 行吧，那就用 iro。 好，我们来试一下，来回到我们项目里边，我这呢随便输啊，肯定是不对的。 好，这时候呢他提示一个信息，呃，说我们这些东西没有，因为它属于 animates 里边的哈，那我们需要给他做一个引入啊， 好，在这咱需要给它引入进来，这样呢，统一我们就写成 element， element element element plus， 好，再来。好，你看，这时候就提示了，对吧？那我们这样提示呢？就可以完全 全直接用什么？呃，直接用它原来那个提示就可以了，因为它的返回后端的返回里边是有的，我们可以看一下，比如说我这儿输入是不对的，大家可以看 r e s 的 matter 的 m s j 对不对？ i s 的 meta 的 m s d。 啊，这是一个提示好，比如说现在我输入是不对的，那这时候会提示我一个这么一个信息， ok， 好，那如果说我输入对的呢？啊，比如说我这儿输的是 m in， 一二三，走，好，稍息一下啊， 当然，如果说非等于我们就 return 啊，如果输入是对的，那我们要打印一下 i s， 当然还有很多小细节啊， at me， 一二三，走啊，这时候我们是登录对的，好，这 其实有一个 talking， 我们需要存储啊。呃，假如说我这样的输的就可能格式都不对啊，比如这样吧，那你你不能报错啊，你到这也可以提示一下啊， 提示个信息啊，输入请输入啊，正确格式。好，那这时候呢，我们就 看看，不用这个，用一个 warning 吧，用一个警告吧。好，那行，那我们先来看，如果说我输入了正确了，比如对了啊，那他会返回一个信息，对吧？开始。 好，那这个信息呢？这里边有一个 i s 点 date， 这儿有个 talking， 看到了吧？啊，也由于是说我们可以 r s 点 date 点， ok， 好，再来刷新， 既然对的哈，点登录。哎，你看，那这个东西我们要存到哪呢？我们要存到原来我们存到本人存储加 v o x 里边啊，就是这么一个内容，现在呢，我们存到 pina 中，好吧，就使用 pina， 也不是说存到 pina 中，就是我们使用 pina 呢来做这个管理啊，然后存到我们的 pina 那份内容。 好，所以说呢，下边呢，我们就来练习一下 piny 啊，我们之前讲过就一直没有用过了。好，下面呢，我们就先去安装一下 piny， 安装一下，然后呢，给大家也解释一个问题啊，很多小伙伴会有一个疑惑啊，就是我们的 talking 存到哪？首先呢，我们的 talking 一定会存到本地存储啊，就是 local storage， 为什么呢？是因为如果用户把这个网页旁关了，我下次再比如说关了以后出去吃点饭是吧？我再回来，你还让用户登录吗？就不登录啊，当然还有什么用户的这个 top 过期时间，我们先不讨论那个啊， 就说本地存储是为了做持发存储的，对不对啊？用户关了然后再进来，那么他就不需要再次进行登录了。好，那过去呢，我们还存到 view x 啊，就会随便写啊， view x 中，为什么呢？ 可以我再说一遍啊，可以不存到它里边，存到这个里边呢，只是方便项目中使用。我说的是只是方便使用。好吧，那有些小伙伴说我直接用 local story 这点儿 get it 或许就可以了，对不对？ 是的，可以，但是 local story 点 get 什么东西？这个太长了。如果说我直接一个 talking 啊，比如说什么 story talking 可能更方便一点，也就意思说他不是必须的。好吧，他不是必须的，但是我们都会这么做啊，他俩是家的关系好不好，这一点一定要切记哈。行，那下面呢，我们就回到这个下面里边啊，我重启一下，然后呢，我在我的目 目录要新建一个 storm 目录啊， s r c 有个 store， 这儿呢，新建一个 index 点 g s。 好，呃，然后呢，回到我们 mate g s 中，需要 inpult 一下这个 store， 这儿有一个 from， 然后这儿是一个点杠啊， store ok， 然后 us 一下。 好，那我们的 store 里边所写的东西呢，就是要引入 pnea 好，在这呢我们就引入了 pena。 ok， 那我们要分模块的话呢，就需要新建一个 user 点 g s 啊，这是关于我们用户的各种行为啊，比如说用户登录完事以后呢，它它的 talking 是吧？那么把这块整体拿过来啊，整体拿过来， 那首先呢，这地方有个 talking 啊，这儿是设置 talking 啊，然后这个地方呢是开启我们的数据缓存的啊，当然把这个先注了啊，后面可能会有用，到时候你再说好吧。呃，然后呢，我们这里边呢， 还需要下载一下这个持久化存储啊，把持久化存储下载一下，要不然就报错了。好，然后呢，我们再来看这儿，我的 k 呢叫小路线下滑线， you sir 啊，行，好， 那么现在呢，到我们的这个捞针点六中，我是不是应该要调用他了，调用拼价东西了对不对？那下面呢，我们就要调用了哈，那在这呢，我也有写哎，我把写那东西给删了啊，那大家就看到我这个可以去做了那，呃怎么样去 引入呢？大家还记得吧啊，如果大家不记得话呢，可以在咱们这个项目中去搜 pin 是吧？哎，然后呢，去看怎么分模块 啊，这呢都有洗啊。呃，然后在组件中使用，是不是我们可以直接，因为我们这不需要什么 store， 点 two i f s 啊，进行结构啊，所以说我们这可以直接拿过来用，这是我们的 pinion。 呃，这儿有个 user， 那我们看一下那个名称是不是叫 user 啊？叫 use user store， 那所以说这儿的名肯定要改一下了，这儿也要改一下，那这叫 user store。 好，那就可以直接用了啊，那我们就，嗯，在下面直接用就行了，在这儿啊， set talking， 然后把这个传过去。好，那我们在这儿可以直接打 talking， 直接打这 user store。 第二， talking。 好，先说一下 site talking 哪来的啊？ site talking 是我们这儿写的一个 site talking 啊，知道了吧？啊，然后呢，这儿有一个 state， 有个数据 talking， 所以说我在这可以直接读好了，我们来看一下能不能读到啊。 嗯，进入到我们的 login， 别报错了。好，然后我 per 一点，哎，获取到了，来看一下我们的应用的存储里边是不是有一个 top， 哎，这样我们就存上，所以说我们在这呢，就是这个账号密码登录啊，就没有问题了。当然登录完事有一些行为啊，比如登录完事以后，我们要回到之前那个页面， 对吧？比如说回到首页，这个呢，我们后面再做，好吧，就先，目前就是我们的账号密码登录这块就没问题了。好，这样呢，我们总结一下啊， 首先布局就不说了啊，然后呢，这样的内容，这样内容我们的前端要做第一步。是呢，就是先要针对于用户名和密码进行一个验证，这是前端验证，跟后端没有关系 啊，然后等你验证通过了，那我们这呢要发送一个请求啊，就是后端给您接口，对吧？发送一个请求，那我们要把这用户输入内容呢进行加密啊，然后呢，等后端有返回的结果呢？我们需要给他存到返现随手或者 vs 中啊，这种整个过程也就说 说，第一步，我们先前端自己啊，自己去验证，叫叫验，先验证一遍好。然后第二步呢，请求，请求的过程呢，我们需要干嘛？ 加密对不对？要加密好，然后返回的数据要干嘛？要存起来，存哪呢？存到我们家通俗点啊，存到拼价中，对吧？那其实呢，就是本地存储 也做了，哎，就这意思啊，那么至于登录完事以后的行为就是第四步，第五步了，这个后面我们再说啊，先把登录这块都给做了，比如说短信，这还没有做呢，是吧？行，短信这个呢，我们就放到下一课啊，那这一课内容我们就先说到这里。
154小鹿线-北京线下班
06:40查看AI文稿AI文稿喽，大家好，欢迎来到汤圆的家，上节课呢，我们把那个这些路由啥的给他讲了一下啊，这节课来我们来说一下他的这些标签啥的，或者说他引入方式。 嗯，首先这 rotor v 我这儿我们讲了啊，这是走的 rotor， 这 rotor 这个 roots 这些，然后这个第一个页面就是这个 home 这儿，对不对？ 我们把上面导航去掉啊，然后这有个 home 这 去掉了，而且 现在就是这了啊，然后这个 input， 这是定义什么呢？这是定义当前这个页面标签 的名字是在这顶 input， 这个标签名 from 就是来自于哪个文件， 这圈圈 a 就是代表什么呢？就是从最顶层开始找，找到 compartence 这个文件夹之后就停止了，然后找到 hello world， 点 voe 就找到这个了， 然后我们需要在这输出一下 insport default， 这是将 这个下边这个这堆东西输出出去啊，然后内幕是这个这个当前页面的名字，然后 compotence， 就是我们需要把这个 名字在这定义一下，然后我们在上面就可以用标签的形式来写了，然后这个 message 在这，就是在这个标签里边直接写一个 message， 等于这个东西这个也可以写成别的啊，比如写成一个 in four， 可以改成这个，改成这个之后呢，我们在这个 hello word 这个页面里边，我们接收的时候，你看这 props 就是接收副组件， 因为这个 hello word 这这个页面就相当于在这个 home view 里边，就相当于是个子组件儿，然后 home view 相当于 halloweere 呢，就是个副组件， 就是父子，子父传职。然后这个在这直接写的话，那这个 props 去接收去，这改成 infer， 然后这个因为这接收 infer 了吗？所以我们在这可以直接用写 infer， 是不是还是这样，对不对？其实就是个这么东西啊，你们包括下边写 style， 这跟我们写 h h t m l 一样，就是该怎么写还是怎么写，用的语法也是一样的。 然后这个 export to find， 这个需要写到那个 script 里边啊， 这大家能理解吗？ 应该应该还是可以的啊， 然后还有需要什么呢？ 其实没啥了，这个介绍其实这么多也就够了，就够我们做一个页面了， 哎，还有需要什么讲的呢？这个其实只要环境搭起来，然后一弄就应该就很好理解啊。那标签还是 diy， 只不过最外层加一个 timelit 这个东西，这个去输出出去。 嗯，这就可以先这样吧，然后这个标签什么 那我们就是把初始的这个啊，就是他初始建项目的这个标签讲的差不多，然后后边的一些标签我们通过还是像以前一样通过做项目去认识去。 我们先呃，这一课先这样，下一课呢，我们用 b o e 去做一个项目，然后引入一个，然后引入一个这个东西啊， 饿了么大家都用过啊，他是饿了么的 ui， 这是艾拉玛的 ui， 是饿了么公司建了一个啊，建了一个 ui 框架。 这么慢吗？ 这波为啥这么慢啊？我们也可以先看一下啊，看这，这是饿了么的啊， element， 各种，比如说有边框啊，图标啊，按钮，对不对？我们平常写的都是需要去写各种东西，但在 比如单选框，你看这些其实如果要讲的话，一个讲很麻烦，包括技术，这个这之前我们都要写 gs 的，对不对？但现在你看就用下边这一点代码就已经完全实现了， 这就是一个前端框架啊，包括这种看就很厉害的一些东西，对不对？开关包括评分对不对？ 然后这个我们在后期慢慢去一个一个引再去用啊？这个大家可以自己下去去看啊。行，这节课我先到这，下一课我们开始做项目了啊？有没有引？
23汤圆的家
12:47查看AI文稿AI文稿哈喽，大家好，我是暖阳。前两天做了这样一个功能，需要对公司的前端代码进行加密处理，本来以为很简单，把插件引入到项目中，简单的配置下就可以了，但是实际开发的时候才发现总是会有问题， 要么和 wifipag 版本重复导致报错，要么页面原来的文字内容不能正常显示，只能在页面上看到加密后的乱码内容。所以我决定从头创建一个 vivo cri 脚手架来进行调试，避免受到其他插件的影响。 我用来加密的插件是我们的 wepad off skater 是这个，然后目前最新的版本是三点五点一，发布于两年以前，这个插件已经很久没有更新了 啊。能够看到如果我们需要使用的话，是按两个依赖，包括我们的 javascript of the gator 还有 wipi off skater， 可以简单的来看一下。 下面呢， 创建一下我们的项目， 用 vivo c r i 创建一下我们的一个项目，创建一个 hello word， 呃，这里我们选 vivo e 三，选 vivo 三，回车去充电，然后看到我们的，这里能够看到我们 vivo c r i 的版本是五点零点八，然后稍等一下， 重点讲一下我们的加密主要是分为两个方面， 呃，第一点就是说防止我们代码中的敏感信息泄露，第二点是防止我们代码中的逻辑泄露啊，针对这两方面，我们下面来做两个事情，就是第一个是在代码中创建一个 ip 变量啊，创建一个变量它的值是 ip 啊，作为我们的一个敏感信息。第二个就是解决 一个简单的逻辑啊，作为我们正常的一个优量的逻辑，所以说下面我们会做两个两件事情，一个是创建，一个呃，变量是 vip。 第二就是写一个简单的逻辑， 下面我们的项目已经创建好了，启动一下我们的项目看一下， 然后同时写一下我们的代码，这是我们刚才提到的两点，然后用来我们后续打包以后查看原码，使用 a 二七吧。 回我们敏感信息， 嗯，现在我们两点已经创造好了。第一个就是说作为我们敏感信息，第二点就是说写一个简单的业务逻辑， 嗯，现在能够看到我们的项目已经启动起来了， 这里是我们的一个敏感信息，已经在页面上。下面我们继续安装一下我们的家具需要的依赖， 因为我们的 osc 能看到这里有安装方式。 安装 offs later 的时候需要注意， all spatter 是跟我们的 wifi 的版本是相关联的。看一下我现在的 wifi 版本，我的版本是这个啊，这个是我的 wifi 版本， 但是 wifi 五如果说你 wifi 四的话，可能就要按其他的版本了，那么像我一样直接这样 pmi 可能需要制定一下版本来进行安装。之前我有试过，大概可以是，呃，安装一点一点一，或者说零点十八点零，中间或者说中间范围的版本都可以。如果你 wifi 四的话， 嗯，能够看到我们现在两个液态已经安装好了，一个是 wifi 的，嗯， oscipator 的三点五点一，还有就是 just square， oscipator 的四点一点零。 所以说如果，呃，像我的 ue 是三点儿二，是三三的版本，然后如果是二的版本或者 wifi x 的话，嗯，都要注意一下你的这个 house get 的版本，下面在项目里引入一下我们的这个嘉宾依赖， 我们先简单的引用一下，先不写参数，照看一下效果，启动一下我们的项目， 大家注意一下，看一下现在这个页面是完好的， 现在我们项目已经做好了，然后看到现在我们这个项目已经出现了断码的情况，然后看一下我刚才写的函数出示化已经执行了，然后看一下我们现在的这个加密的代码，现在是加密后的代码，那我们把能够看到现在已经全部都是这个加密，那么看一下我刚才的敏感信息，能够看到还是在的， 让我们看一下我们写的逻辑，能看到虽然被模糊，但还是能看到一点，很 nice， 迷你的。 我们的初始化，那现在我们已经引入他了，然后会导致我们的页面错误，那我们现在看下如果我们不引的话，我们正常的话启动项目应该是个什么样， 就这里就是一个问题，就是我们的 oscator 一般是用于打包后，这个打包的时候代码金下面，所以说他一般是不支， 这是我们正常的一个调试过程中使用，所以说这个地方我们需要做一个处理，就是说当我们的打包模式 刚我们打包模式是在嗯弄， 就说当我们在生产的时候，生产的情况下就说当我们在打包的时候，我们才会去用到这个插件，就先放在这里 能看到我们把插件注视掉以后，现在在玩已经恢复正常，然后这个时候看一下我们的，就说没有进行加密的时候，我们再玩个什么， 能够看到我们的完大码逻辑全部在这里能够完全的看到我们的大码逻辑，那我们继续就说刚才已经提到了，就是说当我们生产的时候，我们才需要为它生产和打包的时候，才需要使用到我们的 officer 下面我们对逻辑增加一个 判断，就判断我们在打包的时候再去使用这个插件， 把我们的加密 mini 引入，这个时候我们再重新启动一下，这个时候我们加密 mini 已经调用， 我们再来看看我们在哪，我们看到这个时候我们的依赖虽然已经使用了，但他应该是正常的，我们下面打包一下 宝宝穿 我们家使用插件加密以后的代码效果， 那我们就导购成功了。看一下我们的代码，看到我们的代码已经全部是一些资格证啊，看一下我们的，呃，还是分两个，一个先，第一个先看我们的敏感信息，然后敏感信息就在这里， 我们去看一下我们的 ug 也还是在的，下面就是加一下我们的这个加密参数， 对我们的将机来做一下配置，可以做这两个就可以了，一个是这个压缩代码， 第二个配置是打开我们的这个转移，可以再重新打包一下，然后看看现在我们的这些个敏感信息，还有我们的大码轮椅都可以看到 已经打包好了， 一点问题，那么看到我们的代码是没有执行的。 好，这里我们调小一个面料，我们打下包看一下， 那么这里也能够看出来我们的 if 判断是没有进来，没有进来的 可以看一下我编辑后的代码，可以顺便启动一下我们的卡，让我们看一下是否正常能看到。我们现在编辑后的代码基本已经都被加密混调过了，就完全看不到任何的痕迹，然后我们可以再去搜一下我们的敏感信息，已经是完全没有了，然后再来看一下我们的业务逻辑已经不在了，所以说现在我们加密已经算是完成了， 虽然我们的代码加密完成了，但是我们还要保证线上可以部署，就说我们的这个加密或者 gs 放到线上以后，是否可以进行一个编译，打开正常访问，那么稍后我们也会再去试一下，然后再去看一下我们的八零八零窗口，然后看到我们的项目是可以正常启动的， 然后我们的我的本金是有这个服务，就这样的一个 http server， 然后能够 直接访问我们的本机竞拍文件，然后我们打开八零八零它进行一个查看，能够看到我们现在访问的八零八零实际上是我起的服务，然后 server， 然后路线是点点杠，直接访问就是我们的打包号的文件也是可以的，所以我们的代码加密到现在就已经是完成了。
53暖阳☀AI
06:54查看AI文稿AI文稿哈喽，大家好，今天给大家分享一下怎么在生产环境啊，部署我们呃前端打包好的 voe 的项目呢啊，首先我们准备一个这样的 voe 项目，我这已经写好了 啊，这个 voe 的项目其实比较简单啊，就是请求后台的一个商品列表啊，然后把这个商品列表打印出来啊啊，请求的是 api 的估值历史的接口啊，我们可以看一下啊，这个估值历史的接口啊，这个估值历史的接口比较简单，我们直接返回了一个商品列表啊啊， 然后我们启动一下这个 vivo 的一个项目啊，我们看一下效果， 我们让 因为把它启动起来啊，这个是五幺七三，我们打开一下看一下， ok， 可以看到这个商品列表已经正常加载出来了，包括这个后台的一个接后请求啊，他也是正常返回 ok 的啊， 然后这样一个项目啊，我们写好之后啊，我们要部署到我们的一个生产环境啊，怎么部署呢？嗯，首先第一步呢，我们先把前单项目做一个打包啊，打包的时候执行 n p n round build， 用 pdr 装 build 的时候，他就会把整个 voe 的一个项目啊打包成一个静态的一个资源啊， 可以看到啊，他新版使用的这个 white 啊，打包工具以前的话都是默认使用这个在 v o r 的时候啊，使用的是 web park， web park 的打包速度啊，比较慢啊， 现在 vivo 三的时候默认已经升级到 white 啊， white 打包速度很快。然后这个打包完之后啊，他是在这个 diss 的目录底下 diss 的目录底下我们可以看一下啊，在我们当前项目底下已经生成了一个 diss 目录，我们打开之后啊， 我们把这个 diss 目录打开一下，要整个卡哦。 啊，在这里我们打完之后啊，然后我们这个打包好的文件怎么去部署呢？一般的话我们是通过 n g x 的返乡代理啊，去部署这个呃， ngs 这个代理服务器啊，全部是我们这个打包好的静态资源啊。首先我们看一下我们的 ngs 啊，我们我本地是有一个 ngs， 我现在它已经停电了，我们把 n g x 启动起来，本地的这个 n g x 它启动起来 我们执行 n g x star 的这个命令啊，然后我本地的这个 n g 也都启动起来了，大家可以看到啊，这个 n g 已经 打印出来这个幻音页了，然后的话我们刚才打包好的这个目录啊，我们把它这个目录地址记住一下，然后怎么 在 ntx 里面部署这个静态资源的？然后 ntx 去代理我们这个静态资源啊，我们打开我们的这个 ntx 的一个配置啊， 我是在第一盘这个 n g x 底下 n g s 配置，我们调整一下，首先这个是原封 不动的时候的一个场景啊，然后我们把刚才的这个呃打包好的静态资源的目录啊，把这个 atm 给他替换掉啊， 然后我们访问这个根目录的时候啊，他这个 root 啊就指向到我们这个 dist 了啊，然后首页默认是我们 index 的 atm。 二、我们打包好的文件， 打包好的文件里面也是有这个东西的啊，可以看到是有这个 india 的 tmr 的。然后我们弄完之后啊，这个 ng 是要重启的，你刷新是没有用的啊， 这里改完配置之后，我们 n c x 要重启一下， n c 重启的话，我们先把它关掉，关掉，关掉之后这个稍微等个一两秒钟啊，这个已经关掉，然后我们把它再启动一下，已经 启动成功了，我们看一下这个页面的输出啊，哎，商品列表已经 ok 了啊，但是这个商品列表的话，他是发现我们 没有打印出来我们这个想要的一个数据啊，我们刷新一下看一下啊，你看这个接口，他返回来一个四零四啊，你说我们没有找到我们想要的这个估字历史的接口啊，这个时候我们 n g x 还要配置一个接口的一个代理啊，怎么配置呢？我们 location location location。 杠什么呢？我们看一下我们的接口路径啊，是 a p i 杠估字 list 的，我们杠 a 篇， 我们把 a p n 的请求啊全部做一个代理转发， 我们转发到我们这个后台的一个这个接口地址上，八七六幺啊，我们可以看一下这个是呃八七六幺的一个端口啊， 转发完成之后，我们再重新试一下啊，重新这个，你这样再去刷新的话，它是不生效的啊，我们 n g 再重新启动试一下。先关掉， 先关掉，关掉之后啊，我们再启动一下， ok， 启动成功，我们再刷新一下界面。哎，可以看到啊，我们配置了这个呃， proc pass 啊，就是把我们 a p i 的一个接口的一个请求 哇，全部转发到我们后台的一个八七六幺的一个接口上啊，做这样一个反向代理的时候，然后我们看到我们的接口已经正常进球了呀，啊，不会再输出那个四零四的一个，呃， 啊，异常了啊，这个就是我们这个项目，其实这样的话已经打包成功了啊，这样已经打包成功了。 好，最后我们来总结一下，就看一下我们，嗯， ngs 要部署 voe 项目的话，我们要做几步啊？第一步就是首先进行 vivo 的一个打包啊，打包完之后啊，我们在 ngs 上将我们的路途目录啊配置成打包好的一个静态资源目录啊。 然后再一个就是我们要做这个 api 接口的一个代理转发，转发到我们真实的一个猴端接口地址上啊， 做完这些之后，我们 n g 是重启一下，或者 n g 是 reno 的一下， ok， 我们就可以看到效果了。嗯，是不是比较简单的？嗯， ok， 今天的分享就到这里啊，谢谢大家。
2621小波聊AI
