Django，vue3项目怎么运行

哈喽，小伙伴大家好，欢迎收看大熊课堂，我是安迪，本节我们来教大家创建章沟项目。章沟项目的创建和我们前面在讲解基础知识中创建章沟项目是一样的，所以呢，这里大家学习起来会非常轻松。 ok， 接下来我们开始编写代码创建项目，那我们这个电影项目呢，我们给它起个名字就叫做 d r f 木美。你可以使用命令行的方式来创建一个文件夹，也可以手动的方式来创建一个文件夹，这里我使用命令行的方式来创建这个文件夹。 创建完文件夹以后，我们可以直接使用咱们的编辑器，比如说你可能使用 pitalm， 但是呢，我们这里教大家使用的是 vs code， 因为在我们的项目中，我们要涉及到大量和前端相关的内容，所以呢我们使用 vs code 编辑代码会更加 方便一些。首先我们打开 vs code， 然后选择文件，找 open， 打开刚才我们创建的文件夹， 点击打开， 点击 trust。 好，现在我们就创建了一个项目，这个项目呢只是一个空的文件夹。接下来我们使用命令行的方式来创建张狗，那么我们想将我们的项目放到一个虚拟环境中，打开 vs 扣的终端，如果没显示的话，你可以在底部往上拖， 这里我们看到 tomino 就是终端的意思，在这里面我们输入命令 passen 杠 i m v n v， 这是虚拟环境，然后创建一个 v e n v 的虚拟环境，稍等片刻， 创建完成，创建完成的时候，这个文件夹下就多了一个 v n v 这个文件夹。那如果你使用的是 windows 的话，这里显示的稍有差别。接下来呢，我们来启动这个虚拟环境。 如果你使用的是 windows 的话，你可以使用 v n v， 然后 scripts， 也就是这里的 v n v 下有一个 scripts， 下面有一个文件夹，下面有一个文件叫做 attivate， 那这里呢，我使用的是 mac 系统，所以呢我需要使用 sauce， 为因为 in activate 启动这个虚拟环境。启动完成以后，我们会发现这里多了一个括号 v n v， 那这一表明我们的项目启动成功了。接下来我们可以使用命令 pap list 来查看一下当前这个虚拟环境中所安装的包，一共就两个，然后呢，我们所有的新的任何包全部安装到这个虚拟环境下， 好，我们使用命令 pad install， 我们要安装章狗，然后呢，这里版本我们就选择四点二点四好开始安装，稍等片刻， 安装完成。安装完粘钩之后，接下接下来咱们来创建项目，创建项目我们使用粘钩 admin， 项目的名字咱们就叫做大熊 movie。 创建完成以后，我们看一下，这里就多了一个叫做大熊 movie 的文件夹， 下面有两个子文件，一个是大雄杠木威，这是全局配置文件，下面还有一个 manager py， 这是章勾的入口文件。 接下来我们来配置一下项目，在这个 d s movie 下面找到全局配置文件，然后找到 settings， 在这里呢，我们来配置一些相关信息，比如说咱们可以配置一下子语言， 这个语言我们配置为汉语 时区，我们配置为亚洲上海。接下来 我们配置下数据库，在章构项目中默认的使使用的是 circle light， 而我们的项目中使用的是满 circle。 这里呢，我们配置一下 数据库名称叫做 d r f movi 用户名和密码，小伙伴需要根据自己的实际情况修改为你本地的买 circle 的数据库用户名和密码。 接下来我们来创建这个数据库。创建数据库的时候呢，你可以使用命令行的方式，也可以使用可视化工具，比如说大家比较常用的 navi kit。 在这里我们新建一个数据库，数据库的名字就是刚才咱们起的 d r f 木尾 字符集，我们选择 u t f 八按 b 四 creation， 我们就选择第一个，点击 ok， 创建完成。接下来我们执行迁移命令来生成数据表 l s。 看一下我们的项目在哪，在大雄 movie 里面，所以咱们 cd 大雄 movie。 这个时候我们看一下，这里呢，有 manager p y 和大熊 movie， 然后我们执行命令 python manage 点 p y make migrations。 这里呢，说明我们没有安装买 sq db 的 model。 那接下来呢，我们使用 p y 买 circle。 好，这个时候我们需要来设置一下， 在我们的配置文件中，大熊 movie 下面有一个初始化文件哎 net 点 p y， 在这里面我们来配置一下，导入一下 p y m i c 口，然后使用 p i m i c 口做的作为数据库的引擎。那接下来这个 p i m i c 口我们需要安装一下。 在这里面，我们既然使用命令 p i p install p y 买 circle。 接下来我们再次执行迁移文件 python manage， 点 p y make migrations。 因为现在呢，我们还没修改模型，所以这里没有任何变化，那我们直接执行迁移 migrate， 好开始生成数据库，应用到数据库中了。那此时我们再来看一下刚才我们新建的这个数据库， d r f 木未在这里呢，就创建了很多的表，这些表都是粘钩项目中应用到的， 也就是他自在的，这样的话我们的初始工作就完成了，然后我们可以启动这个服务， 启动服务的时候，咱们依然执行 python manager p y 文件，大家可以先看一下这里，我们当前是在大雄无为这个文件夹下，这个文件夹下呢有一个 manager p y， 就是执行它， 所以小伙伴一定注意你当前所在的位置，如果你在上一层的话，那那是无法直接执行这个命令的。 python manage 点 p y run server 启动服务，服务已经启动，大家可以看到当前这个网址幺二七点零点零点幺，问号八千，我们可以在浏览器中来查看一下这个效果。好，这就是我们的张勾项目已经安装成功了， 当然我们也可以访问后台，访问后台的时候，我们输入 a， d， m， n， 此时呢进入到后台的登录页面，那这里需要用户名和密码，而我们当前还没有创建管理员用户， 接下来我们来创建这个管理员用户，先关掉服务， ctrl c， 然后我们创建。怎么创建呢？创建的时候依然使用命令 python manage 点 p y， 然后 create super user。 好，用户名我们设置为 a， d， m， n。 邮件地址随便写一个 密码，一二三四五六七八一二三四五六七八。这个时候它提示密码太常见了，只包含数字，如果你想换其他新密码的话，你输入 no， 输入 n， 如果呢？你保持确认的话，输入 y， 好，创建成功。创建成功以后我们再来启动项目， python manage， 点 py run server， 好，服务再次启动。然后我们回到这里输， 输入用户名， a， d， m， n， 密码一二三四五六七八，点击登录，这个时候咱们就进入到了后台。 好，现在我们就完成了一个项目的创建，至此呢，我们就完成了章沟项目的创建，和我们前面在基础部分介绍的内容是一样的，小伙伴，我们下期再见。

好，接下来呢我们要做内容是登录这一块了，那下面呢来看一下学习路线点 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 中啊，这种整个过程也就说 说，第一步，我们先前端自己啊，自己去验证，叫叫验，先验证一遍好。然后第二步呢，请求，请求的过程呢，我们需要干嘛？ 加密对不对？要加密好，然后返回的数据要干嘛？要存起来，存哪呢？存到我们家通俗点啊，存到拼价中，对吧？那其实呢，就是本地存储 也做了，哎，就这意思啊，那么至于登录完事以后的行为就是第四步，第五步了，这个后面我们再说啊，先把登录这块都给做了，比如说短信，这还没有做呢，是吧？行，短信这个呢，我们就放到下一课啊，那这一课内容我们就先说到这里。

讲解下排场的 jango 框架，项目配置以及运行方法。首先解压好圆码到文件夹里面，再用排场编辑器将代码打开， 我的 bycom 还没有破解，大家有兴趣可以自行破解下。 打开项目后，首先要先配置排山环境， 这个用之前装好的牌坊环境就可以创建环境需要等待大概十秒钟时间， 这里可以等待一会，不同电脑加载时间不一样。 加载好后下面就开始运行项目， 打开袋的 bad 文件，将里面内容复制出来，也可以双击直接运行，建议还是复制出来在软件里运行，这样报错的话也可以看出来错误在哪。 这里报了一个错误，我们没有把配置文件更换为我们数据库的用户名和密码，现在改一下 远见。安装命令，执行好后开始执行运行命令， 这里运行完又犯了一个错误，查询下暴 做文件地址是由于版本升级，模块位置不同导致的，现在都改一下。 到这里出现八零八零端口，就算运行好了，我们把启动地址也改一下， 这次是启动到了我们想要的地址，打开链接，看到后台的网页，我们再打开前端地址就可以使用了。 最后我们登录到系统，对项目中数据进行修改，看看是不是在数据库里也跟着修改过来， 这里看到是修改成功了，项目部署完成。

哈喽，小伙伴大家好，欢迎收看大熊课堂，我是安迪，本节我们来初识 d r f， 那么 d r f 到底是什么呢？ d r f 全称是章沟 rest free mark。 那这里呢，我们就不得不介绍一下这个 rest 了。 我们之前在写接口的时候是没有规范的，比如说为新增商品写一个接口，张三可以写成这样， create product， 李四呢，可以写成 products create， 这只是其中一个接口。那如果我们的项目中接口比较多，又是由多个人同时协作的，那这样的话，最终整个项目的接口就会五花八门， 大啥啥，写的这是啥？这样就会为后续的维护和代码的阅读带来诸多的不便。在两千年， roy thomas 非洲鼎在他的博士论文中就提到了 rise 这个词，由 此诞生了一套接口规范，那符合这套接口规范的 api 也就被称之为 rest for api。 这里需要注意点，他只是一套规范，而不是必须啊。就像我们前面提到的，你用张三的方式，或者是用李四的方式，同样的是可以实现这个接口功能的。 那么 res 的规范又是什么呢？我们来看一下这个全称 representational state transfer， 翻译成汉语就是表现层状态转化， 那这里呢，是两个词组成的表现层状态转化。表现层指的是什么呢？表现层指的是资源的表现层， 那这个资源又是什么呢？例如刚才的网址， product 杠一，这是一个 ui， 它就是一个资源的实体，它代表了一个商品的信息。那这个资源呢，有多种的外在表现形式，你比如说 product 一，它可以表示查看 i d v 一的商品信息，或者是修改 i d v 一的商品信息，或者是删除 i d v 一的商品信息。那么当我们在访问这个 product 一的时候，那到底是执行哪个操作让它的状态改变了呢？ 这个时候我们就需要去设定 http 方法了，比如说我们最常见的盖得 post， 这都是 http 的方法，那此外还有很多。而在我们的 res 中定义了如下规则， 主要有四个方法， get， 它就是用来表示获取资源的，而 post 呢，就是新建资源， put 用来更新资源， delete 是用来删除资源。 好，我们来举个例子，依然以 product 这个商品为例，当我们使用 get 方法来访问的时候，他就表示获取 idv 一的商品信息。 那当我使用 pro 方法的时候，他表示去更新这个 i d v 一的商品信息。当我使用砥砺的方法去访问的时候，他表示去删除 i d v 一的商品。那这里有所区别的是，没有 i d 的情况下，他这个 product 就表示去新增一个商品， 也就是添加一个商品。所以说 rest for api 其实呢就是一种面向资源的设计方案，它使用 http 方法实现资源的获取、创建、更新和删除。 简单来说， rise free 片就是通过访问不同的 uil， 用标准的 http 方法来实现资源的操作。再简单来说，当我们创建接口的时候，我们就按照这样的规范 来定义我们的接口，然后通过不同的 h g b 方法来去实现对应的功能，这就 就是符合一个 rest for api 的规范。那么为什么要使用它呢？因为我们这个项目是前后灯分离的项目，拍子呢，主要负责的是后端，它呢主要是和数据库进行打交道，对数据进行读取， 而我们的前端呢，使用的是 view， 那前后端之间是怎么通信的呢？此时我们会选择一种通用的数据格式，就是接生格的数据， 也就是说拍森去读取数据库，将数据的形式以接森的形式进行展示，然后六去请求这个后端接口，将接口获取到的接森数据再展示到页面上，这就是一个前后端分离的核心思想。 那这里的 d r f 起到一个什么作用呢？它的最大作用就是对数据进行一个序列化，为了让小伙伴更好地去理解它， 我们使用两种方式，第一种呢是不使用 d r f 的，也就是我们传统的方式来生成杰森格式数据。第二种呢，我们再来使用 d r f， 来看一下 d r f 它有哪些优势。

好，下面呢我们来做一下支付吧。呃，首先呢进入到购物车页，然后这有一个去结算，去结算以后呢我们选择支付的方式， 然后选择完支付方式以后呢点击这个确认订单，那这时候呢就弹出来这二维码了，然后我们去扫这码支付去。啊，这差不多这个流程啊，行，第一步呢，我们先把这个地方的一个选择支付方式给搞了啊，来打开我们代码，然后这里边呢有一个 biusbius 里边一个这个确认订单的这个页面， 然后呢选择制方式呢？是在这啊，我们给他一个可立刻实践，然后把这 item 传过去，这是我们选择支付的方式，选择支付的方式， ok， 好，这有一个 item 啊， 那么，呃，首先呢我们肯定是要给这个值做一个负值的啊，我们这样呢可以给他做一个负值，这样话呢，当我们点击了，比如说支付宝支付或微信支付啊，他们就这样支方式， ok， 行，然后呢 其实呢我们还要去请求这个接口，就是你是使用哪种结束结算方式，我们这呢先弄这个支付宝吧啊，下一个我们再弄微信啊，一样的，其实一个会基本上都会了。好的，我们回到这，这是一个支付宝结算。好，我们把这个请求呢写一下啊，这是一个 api 地址， ul 啊，然后情况是 pose 的传递参数呢，也是有的， ok， 那行，那我把名改一下吧，叫，哎，这是微信，这是支付宝，不是错了，这是微信啊，这是支付宝，这个有点 bug 啊，不敢了。好，是他的一个 order， ok， 好，回到我们的这个项目里边，然后把这个 api 的一个地址给他放过来，然后我们肯定要传递一些参数，对吧？好，我们来看传递哪些参数吧。首先有一个支付的方式，支付方式就是 atm 的扣的 attem 扣， ok， 然后再其次呢，有一个列表，就是我们之前呢写过的那个，呃，拼价中 列表， ok， 搞定，然后这儿有个 i s， 你打印一下啊，当我选择了支付宝支付啊，然后我点击 这个支付宝支付，再来点一下，那这样呢，会返回一个订单号，这个订单号呢？一会我要传过去的啊，包括这有一个 url 链接，看到了吗？这是我们的二维码啊，所以说这两个呢都需要给他去写一下。这个是支付的二维码啊，然后支付的订单号 有一个 outer number。 好，那这个地方的一个图片呢？需要在这进行展示啊？应该是吧， ok， 还有个 number 啊， 然后当我们点击确认订单的时候，点击确认订单啊，点，这其实就是去支付，点击确认订单的时候呢，我们需要把那个弹出框打开，对吧？就是这个 delo， ok， 行，那我看这二维码是不是可以展出来啊？好，我点一下支付宝支付， ok， 然后点一下这个券订单。好，这支付的一个二维码，然后什么时候支付成功呢？并不知道，所以说呢，我们会不断的轮寻啊，这样呢，是一个短轮寻，不断短轮寻，去查询他的订单的状态啊，好，查询订单状态呢？是查询支付宝的，那我们把这个打开吧，查询支付宝的一个订单状态 啊，这样呢，我们再写个接口啊，把这个复制一下啊，链接我拿过来， ok， 这是查询他的一个状态 啊，然后传递参数呢？只有一个订单号啊，他是一个盖紧球这个标啊，往上走啊。那现在呢，我们这个地方传一个， 它叫 order number， 对吧？等于 order number 的 value 啊，注意，我们那个呢是一个 is， 是一个那个 proc 的一个数据啊，所以说我们叫 value 啊。啊，这有一个 is 啊，这个订单状态呢，我们是一直要查询的短人群啊，就是我并不能确定支付这个用户。 什么是支付成功啊？所以说呢，我们会一直查询啊，在这一直查询啊，这是一个短文询。嗯，所以我们要这封装一个方法查询订单状态啊，然后隔个两秒吧，咱快点，隔两秒呢去查询一次，隔两秒去查询一次， ok， 然后什么时候停止呢？那我们这呢有一个定时器啊， 这是我们的短轮循定时器啊。呃，等他到什么时候停止啊，先来看吧。好，点击支付宝支付，然后点击确认订单， 然后他会给每隔两秒呢发送一次这样的请求。哎，这个参数不对吗？看一下啊，点歪溜 哦，这没有点来着。好，再来一遍，回到我们的那个购车页，刷新一下页面，点击去结算，然后进入到结算页，选择 支付宝支付，点击确认订单。好，这时候呢他就每隔两秒发送一个请求了，对吧？就是微支付，微支付，微支付， ok， 行，我拿手机支付一下啊， 扫一下码， ok， 我支付成功了。好，大家看上面的订单状态呢，都是未支付，然后这个订单状态呢便是已经操作成功的了。那如果说他的 cod 码等于二百就成功的，如果等于七万零二就没有支付吗？对不对啊？所以说我们这判断，如果说 r s 的，呃，看一下啊， the max 的扣的码如果等于了二百，那就代表他怎么样支付成功了，对不对？那我们就 clear， 先停止计时器吧，停止这个计时器 啊，并且呢，你可以给他一些提示性的信息，我们打开这个里边。啊 啊，这是支付成功，支付成功。好，然后这个组件我们需要去拿一下，这两个组件干脆都拿过来。好，那这个逻辑我们就算搞定了。我把这的 啊康索先搁北山了。啊，这个地方康索没了，那我们的支付宝支付呢，就算是完事了，那如果等于二百提示个支付成功，然后并且跳转到支付成功页吗？就可以了，对吧？啊，差不多这么一个逻辑啊。 行，那有关于微支付宝支付呢，我们就先说到这，然后微信支付呢，我们下一课再说哈，一样的，就是做一个条件判断，办了而已。好，那我们就下一课再见喽。

今天就用宝塔控制面板安装一下装狗 ville ming 的这一个开元的框架， 然后的话这个是官网。然后的话我们点一下这里快速开始，然后点击项目运行及部署，这一边的话，他会你会看到作者这一边已经告诉好所有人 拍摄的版本是三点七，然后 low 的 gs 的话是用一点四以上的版本，买色口的话，推荐这里直接选用的是八点零版本，然后这里会有一个一个的步骤，但这一个的话是基于命令行去直接运行的，咱们今天就直接用宝塔去安装这个项目。 呃，宝塔的话呢，我这个服务器上面呢，其实已经早就装好了，然后的话给大家说一下。呃，有几个的管理软件要装的，第 的话就是拍成的项目管理器，第二个的话呢就是 low 的 js 版本管理器这两个你们是必须要装的，然后装完之后呢啊，这里我们打开拍成项目管理器项目版本这里直接选选装三点九七版本就可以了啊。 然后 low 的 js 的这里的话呢，我这一边用的话呢是十四幺四点幺七的版本，我昨天是赚了一个十五的版本，我这边把它卸载了啊， 我给大家看一下数据库，我这一边选用的也是一个卖车口八点零的版本， 我们现在打开文件夹这里啊，宝塔的面板文件夹的话，他会在个目的下面默认有一个 三 w 的文件夹，然后的话你在这一边打开 lt 的这个文件夹，然后再打开打开官网，把这个 d 的地址复制过来，当你也可以直接传上来啊，往这一边就直接， 我这一边就直接使用 dit 的主推地址把它下载下来，这个速度很快的，下载完了 再点一下啊，这一个的话呢，就已经下载成功了。这个张狗 viom 的一个开元框架所有的文件， 这里的话呢，他有两个文件夹是比较重要的，一个是 rken， 是放后端张狗的一个项目文件， 然后 v， 然后 v 的文件呢，是放在外部文件夹这里的，就这一个是后端文件夹，这一个是前端的文件夹啊， 然后我们在拍摄的项目管理器这里添加一下项目，这里就 dva 后，然后这一边就直接选择我们刚刚下载下来的文件夹， 这个是选这里，然后框架咱们选张狗第一个默认就行。启动方式，然后启动文件加这里的话呢啊，你要看清楚，他这里选的应该是 后端文件夹的 app 楼 k 省下面的就可以了。后端端口这里我看一下啊，你就按照上面写的，这里 这里后端的端口是用八零八零的，这里是直接写八零八零，八零八零。然后这里选的话，我是选择 rot 的用户，然后开机依赖和开机启动直接选上，然后稍等一下，他这里会把自己需要装的依赖，他会自动装的 啊，我再开多一个页面，然后这里的话呢，我就配置前端的前端这里的话呢？嗯，看到是十四点七没问题了，然后在远见商店 男鬼都装好了点。网站前端这一边的话呢，直接就在网站上面的一个漏的项目添加，漏的项目这里直接加就可以了，这一个还是比较快的。 这一个外部文件，然后这里直接选就好。这也是 dva 后啊，这里选择第二个、第三个 dev， 然后这个是前端是八零，哦，后端是八零版，嗯， 前端是八零，八零，我刚刚写错了，这里是八零，八零，等一下咱们改一下那个， 等一下咱们改一下后端的那个，应该后端的那个是八千端口，这里前端的是八零八零端口，现在就稍等一下，等他装完就可以了，装完咱们就可以进行下一步。

好，这节课呢，我们要说的是路由啊，就是那个 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 啊，那一就拿到了， 对吧？这就和这样写线基本差不多啊，传直还这么传，接还是这么接，无非就是这个对象，我们先要这么去写啊，原因就是三叉里边并没有类似啊，这点大家注意。行了，那么有关于这个路由呢，我就先说这么多了，基本上呢，就够大家去用了，去使用了。好，本节课呢，我就先说到这里。

好，这节课呢，我们来讲一下这个 vivo x 哈，那首先呢，在 vivo 二的时候呢，我们也都用过这个 vivo x 是吧，它是一个状态管理，它是一个仓库，然后里边呢，有什么 state， gathersome， mutation， actions， models 这样的一些属性，对吧？ 好，那我们可以把一些值呢集中的存储到这个 vivo x 里边啊，我们在 vivo 二中呢，也都玩的不带玩了。好，那么下面呢，我们重点是看的就是哎三和原来那种写法有什么样区别，对吧？ 那首先呢，先来看一个版本吧，那我们这的 vivo 点 g s 是三，这不用说了是吧？ rooter 和 v x， 注意啊，都是四啊，也就说你的原来版本可能 v x 是三是吧，现在是四。好，这是一个版本上的升级，那么具体的一些区别是什么呢？或者写法怎么回事呢？下面我们来看一下， 在 storm 录下呢，有一个 index 加 g s， 这里边呢，这个是我们之前所比较熟悉的一些属性，当然我这儿呢，给 给他补充一个 gathers 啊， gathers ok， 行，然后呢，我可以先一个一个测试啊，比如说我在 state 里边写点值，呃，写一个 a m 吧，为十，然后 it 二为知识数据啊，知识 store 数据好随便写的。 行，那么到这呢，我们就去组件中使用呗，好，比如说 a 组件吧。好，首先呢，它的写法大家也知道比较多，比如说通过这个选项式 a p h 去写， 那么如果说你这儿采用的是选项式 a p i 的话呢，就几乎来说没有任何区别，包括我们的辅助函数啊， mac， skate 什么的，都是可以去用的啊。但是呢，我们这儿重点要说的是 set up 这种写法啊， 三法三大法。这种写法该怎么去用呢啊？和那个 rooter 差不多，比如说我们要用 rooter 就得 use 什么 rooter 或 rooter 对吧？啊，一样的，这儿呢是 use 一个 store 啊，然后这儿有一个 prom w x。 好，呃，然后呢？我这定一个变量吧，就是一个 store。 呃，等于啊，要扭一下，要不然加括号对吧就可以了啊。这是个返回一个函数嘛。好，我们运行一个函数，然后打印这个 store。 好，来看一眼， 打印出来以后呢？这里边有什么？呃 comety 啊， dispatch 呀，乱七八糟东西啊，这还有一个 state， 看到了吧？好，我们可以把这值打印出来啊， state 的 a m。 好，我们刷新 啊，这时候呢，这个十呢？他也就出来是吧。那把它放到页面上呢，也比较简单啊，那我可以采用这样形式， nm 等于好，然后把它直接负到这个边量上。好，然后我们把 nm 的放上去。那此时此刻大家要注意一个点啊，我在这呢也可以康搜一下这个 nm， 它是直接的十，它不是 shops 啊，它是直接的十，所以说它不是一个响应的，那你要改的话呢就有问题了。好， 那下边呢，我们就一项一项去测试啊，那我先埋下伏笔，一会我去给大家去测试。呃，那我们测试完 state 完事以后呢？ gets 也是一样的，比如说我叫他，嗯，随便写吧，叫 total 吧。好吧，然后我再定一个。 呃， sub 来一个十吧，然后加起来就二十哈，然后这呢我就 return 一个 state 的 a m 加 state 的 sub。 好，然后把这个 state 放到这， 好，用一下这个 total 啊，那这个 total 要用的话呢，也是比较简单的，我们可以在这呢写一个这个 total 啊，然后这儿呢就 light total 等于 store 的 gets 的 total 啊，好，来看二是有进来的是吧？好，那下面呢，我们再测试这个 meditation 啊 meditation？ 我说我叫称至 n m 吧，好，点一下呢，我希望给它改一个数据，比如说呃 state 的这个 n m 原来是十，我给 改成一百点一下把 n u m 的值呢改了。好吧，那到这呢，我们就弄个按钮 button， 然后这有一个修改 nm 值啊，然后这呢有一个 chari click 啊 btn 是吧啊然后这呢我们就 const btn 等于一个箭头函数过来，然后呢我们就 store 点啊 come meet 去提交称之 a m 啊去提交他。好，那这时候呢，我们去点一下注意啊啊一样的，就是我们要通过呃，就是调用这个 meditation 里边的方法，我们就要 call meet 啊，如果说 action 呢就是 dispatch 啊，来刷新一下，我们试一下啊，你看啊，我点你发现不管事， 你放心，我那个方法写一定没有错啊，他一定是 ok 的。好吧，一定是可以执行的。那为什么不能改呢？原因就是你的 是怎么样，不是 propse 哈，那所以你这个值啊，就是 n y m 错就错在这儿，你不能这么用，你怎么用呢？你这样去写啊，这 n y m 看到啊，你得啊 compute 哎，然后 记得返回这个值，返回这个值，这样就 ok 了。好吧，这样就 ok 了，来我们再来试啊，他是十对不对？啪一点变成一百 好吧，当然你也可以传直啊，比如说我这传一个叫二呃，传一个三百吧，无所谓啊，传个三百啊，传个三百过去以后呢，我这就应该接收到一个 y 六对不对？然后给他复直啊，我们再来看刷新 点一下啊，这样改了好，然后你发现这个二十也没有改对不对？因为他也是职业的值，没有 propse 啊，所以说他也不会去进行计算啊，这样呢，大家相信也都会怎么去计算了啊，也是一样的啊，把它呢这个值也包裹起来对吧，你可以这样 把它放到这好，然后再来 点，你看这两就都改了对吧啊就 ok 了。行，这是我们这所说的大家需要注意的修改值的一个事情啊。 啊，这个呢，一会给大家去做笔记吧啊然后呢这个地方的，呃，比如说 actions 里边的方法啊，我随便写一个吧啊，我随便写一个，比如说就叫称之为天吧， 好吧，甚至 bgn。 然后我这儿呢是一，那怎么调用它呢？ dispatch 啊 dispatch。 好，我们就不调用这个了啊，我们调用 start 的 dispatch 诶， start 点儿 dispatch， 然后你的名是呃叫称之 b d n。 好，我们去执行塔刷新点， 你看这一也打印出来了是吧，也弹出来了啊，所以说呢，就是 mutation comet 是吧？ despise action 对吧，就基本上区别并不大啊。好，那我们这样的统计一下啊。呃 state 的值，你得这么接 好，然后这个 getrs 啊，你也得这么接，要不然它不是响应的数据好，然后这个地方的一个 mutations 啊，你你得 commit 啊，然后这个呃 actions 你得 dispatch 在这儿 好，知道这几个东西就可以了。那我们这样呢，写十三点一，这是十三点二，这是十三点三，这是三点四。好，然后呢，其次我们再测试那个模块啊，就是那个 meditation， 呃，不就是这个 models 啊，这是 models。 最后 十三点五啊， models， 这 models 呢和过去也是一模一样的啊，也是一模一样的。行吧，我把这儿的这个呃文件呢给大家做一个备份啊，然后在这儿有一个 store， 不是，我把 store 呢复制粘贴一份吧。 好，这是我们的，呃， e store。 好，大家知道这 e store 是啥意思啊？这是我们第一个测试的啊。好了，现在呢，我把这里边东西呢全部给它清掉了，我都不要了，然后回复这个 a 点 view 的 sata 这个 sat。 呃， set up 这块啊，呃， 我也给他整个的给他干掉，然后留下这部分啊，留下这个部分， ok， 行，那基本上就问题不大了。好，然后下面呢，我们来说这个，呃 models 这块啊，也是跟这样一样，我们新建一个 models 的一个目录， 然后在这里边呢可能有模块，比如说叫 user 吧，随便 user g s， 然后也是一样啊。呃，跟这儿写法一样啊，我们就可以 as port， 然后比方特然后这儿有 save 什么的，比如说我有个 how can 或者叫 user in for user in for 啊，然后我这儿就随便写一个 in for 吧。好吧，然后咱们去调查就行了 那。呃，你只要这个 state 会掉，剩下的什么有 teacher 乱七八糟你都会掉了啊，我们就进行测试就好，然后在这也是一样，也得这么去用， 他只不过加了一个层级罢了而已。 看这个 story， 稍息。呃，然后在这儿看一下。哎。哦，刚才我们这儿没有引入 epole from user。 好，稍息。 哎，这个地方的值还是有点问题。我看一下啊，好，在这呢啊，在这呢，他过来了， 好，我们回到这个 app 点六啊，看啊，我这个地方呢，得 state 的 user 的啊， user 音符啊，就能拿到了，刷信息。 好，大家看是不是 using for 拿到了对吧。然后他这呢出现了一个警告啊，就是一个 warning， 我们看这 warning 是怎么回事。呃， a 组件我看 看一下啊 b 组件，来，咱们百度翻一下那个有道哎，这有道，我这没有弄，他就翻一下 啊，他说运行时，呃，这个 a m m 在渲染时被访问呃 a m m。 哎啊，这这这这上面。好，那现在就没有警告了， 好， ok， 那这样就 ok 了是吧，这个音符呢，它也就出来了，行啊，然后呢，你要动态的，就是让它响应的，和这样写法一样，也是这么去写，只不过这里面内容就换成这大串就可以了。 好吧，就是这个太无聊了啊，没啥意思啊，就和之前写法是一模一样的啊，一模一样。呃，我可以把这个 in in for 给它改掉吧。那就 给大家写一写，写一写 叫 user in four。 那现在就是 in four 啊，没有复制啊。 把这个拿过来。 user in for 等于把这一个拿过来放到这儿， ok， 好了，来看一下。好， in for 也进来了是吧，然后点按钮上去改啊，那我们这儿就是修改 in for 好，也是一个 click 吧。笔尖，好，这儿来一个 const。 笔尖等于 啊，然后也是去提交 come meet 去提交一个叫呃 up 呃 summer 叫 change info 好，然后这呢有一个 mutations okay state 好，我给它改成一二三吧。随便了啊，来试一下点啊，改了没问题是吧，好，呃，然后呢，其次呢，就是在 vivo 我们也知道 v x 嘛，在 v v x 中呢，它也不能做到智化存储，比如说刷新一下，这是一个音符对不对？ part 改成一二三，再刷新还是一个音符 啊，我希望就是他做到持发存储。该怎么办呢？还是老规矩啊，用那个插件我们可以到 npm 上去搜一下。 好，现在等他打开一下啊， 有点慢，那我这就直接给大家去写吧。呃，和之前 的版本写法一样啊，使用吧一样啊，然后现在呢，再说一下这个 v x 的一个智化存储， 那这句话存储的话呢，要不然你就用 local storage 对不对？要不然就用插件啊，我们这儿说的是插件形式啊， local storage 大家都会啊，所以说我这儿就呃不给大家演示，直接去写了啊， 用到那个呃插件呢是 view x， 我这就别别这个名了，别硬泡了， s i 什么的有点太长哎，怎么打开这儿六 x 杠哎，就它 好，就用了它。那所以说呢，我们这儿呢，先得 n p m i 下载它啊，或者一二的无所谓，然后呢 再引 pot 一下，那我们就直接去找一下这块的一个使用吧。嗯，大体这么去用，但是呢一般会配置一下 k 啊，所以我一会给大家去配一下那 k 吧，要不然不配 k 肯定是不行的啊。我们先去下载啊。 好，先下载，然后你要用的话呢，就得在你的这个引带上 g s 就是段里边你得引入引入，引入完事以后呢，在下边你要给它 prolongus 啊，要配 重启一下啊，那我们就引入进来了，然后这是一个 plan with， 然后他写法呢，这是一个数组，然后里边呢是呃，这样的一个回调函数，然后这样呢可以写 k 啊，比如写 k 就叫小六象 啊，然后其次呢，还有就是你可能会分很多模块，比如说叫 user 模块，是吧？有可能呢还会配置 home 模块，乱七八糟的东西 啊，那这样呢，他还有一些属性，就是说，呃，你哪些模块需要用到这个智化存储啊？比如说你这个 stud， 这个 use user， 是吧？他要用到。好，那么你这样呢，就可以写一下 我这个 user 模块需要用到这样写下就可以了啊，那这块的配置呢？大家可以自行去找一找啊，看这里边有没有， 这边没有啊，当然还有就是你采用这个本地存储的模式，是用 session storage 还是 local storage 啊？他都可以配好，在这看到吗？需要存储起来的模块，然后这儿也配个 k。 好，这到底什么意思呢？下面我给大家举一个例子吧，咱们去看下这代码就明白 啊，现在 info 啪一点一二三，对吧？刷新的时候它还是一二三啊，不会回到 info， 因为我这做到持卡存储，我们可以看一下应用啊，在这个地方，那大家可以看到这，这有一个小路线，看到了吧？啊，这是我之前存的啊，然后我们找一下 啊，这个 user 音符，看到没有？这有个一二三，是不是我存进来啊？这是我存进来，所以他读就读到这这个地方啊，读到这，然后这个 k jk 呢，是我们在公司里边做项目，是肯定会配的啊，如果不会配的话呢，比如说你这叫 toky， 他也叫 toky， 那这就重了，就后互相就覆盖了，所以说一定会配 k， 好吧？行吧，那这就是 vx 了，基本上， 呃，变化并不是那么特别大，对吧？那大家也都基本上可以接受的，变化不是特别大。好了，那我就把代码呢具体给他放， 这是第一步，然后这是第二步，然后这是第三步。行，那有关于 vivo x 这块内容呢？我就给大家先说到这里啊。

好了，下面呢咱们就来讲一下 view 三中特别特别重要的东西了，就是 set up， 那我把这样的笔记呢也做了一些小小调整啊，就是 view 二和 view 三具体的区别，比如上节课我们讲过的东西，我都给大家罗列到这儿了，然后呢，下面咱们要讲 set up。 好，首先呢明确一点，在 vivo 二中咱压根就没有用过这玩意，对吧？在 vivo 三中呢，不是他笨出来了，那当学习一个新的东西的时候呢，我肯定要了解这个东西的是谁，对吧？他是什么？这第一个疑问，第二个疑问呢，就是来解决什么问题的，这 vivo 三为什么要新增一个三大法？他到底来解决了之前的版本的什么问题？这是我们这呢要带着疑问去考虑的点。 好，首先呢，咱们先来看它到底是什么啊，其实上来呢就告诉你了啊，在这个文档里边啊，教程这咱们可以看一下，这有一个组合式 a p i。 这有个介绍，我们直接看这就可以了，那 set up 呢，明确一点，它就是一个组合式 a p i。 好，我们先给它放到这儿， 组合式 a p i。 原来呢，其实我们是 oceans 的 a p i 嗯， ocean 的 a p i 啊，不知道大家有没有写过这个标语原码，比如说 this 的 door protect 等于 option 字得对的啊，写过这个没有，这就是一个 option 的 p i 啊，比如说 option 字点儿啥？啥？点儿 m i c 这个啊，点儿这个东西啊，或者说点儿什么周期那些东西啊，这是 option 的 p i。 其实组合是 a p i 了啊，就是塞大，那么这个组合式 a p i。 大家看这个字吧，组合啥意思啊？就是可能俩东西，仨东西，一大堆东西全部呗放在一起了。原来我们有 dat， 我们有这个，我们有这些东西啊，乱七八糟，还有卧室吧等等等一大堆是分开的对吧？一个一个一个哦，我可以把它写成一，这是二，这是三，这是四，如果说把这四个哥们我要组合在一起呢 啊，就是这四个合一，那就是组合嘛，所以组合这一篇呢特别好理解，就把这些东西呢啪归到一块了，这意思他所解决的什么问题呢啊，我们来看一看啊。其实这呢他有很明确的一些内容已经给我们说清楚了，他说你原来呢使用这个 daily 号 computer 也好啊， mess 也好，卧室也好啊， 组建选项呢啊，组织逻辑通常是很有效的啊，就是一块一块的嘛，非常有效。然而当我们的组建开始变得更大是就是代码特别特别多的时候啊，逻辑关注点的列表也会增长。对于那些可能怎么样，下面就是漂亮话对吧，反正就是会带来很多的一些灾难性东西。 不知道大家有没有写过很大的一些项目啊？我写了一个项目啊， deta 的数据一大堆是吧，你再用 alt ui 加的数据啊，一大堆啊，然后呢可能要监控一个值的变化，卧室哒哒一大堆是吧，然后再 ctrl 一大堆，你的鼠标呢？要 滚轮是吧？滚上去，滚下来，滚上去滚下来啊，可能这侧的纸在卧室监听一下啊，可能还在这里边去做了是吧，某一方法可能在这去弄了，在那去调用了，来回的翻你的滚轮是吧，滚轮都快烂掉了是吧？哎，这就是 你分块能带来就是你的管理，可能是很好管理的，但是一旦多了可能就上翻下翻的是吧？就麻烦了。所以说他是来解决什么问题的， 它也有原来之前的这个 vr 的也有好处，但是更大的时候呢就不好了，所以说呢，它是来解决什么问题的， 不用翻来覆去了是吧？全都给他通摞一块就完事了啊，组在一起就完事了啊，这是 set up 它的一个功效。好吧，就是它来干什么？行，那我们了解完它以后呢下面呢咱们再来看一下 set up 这个东西啊， 他他为什么呃要出现是吧？或者说呃他出现的优势是什么啊？都有哪些东西可以弥补之前的问题啊？来我们先看一下 vr 的这个项目啊，那是我们上节课写代码啊，我们把 vr 这个打开吧，先把这的这个内容呢给它关掉。好，我们就随便的拿 vr 呢去写一段代码，让大家感受一点东西啊，随便给大家写一段东西， 嗯，这个地方组建我就给他干掉，这儿都给他干掉，行吧。然后这儿呢我写一个这个 w a r 或者说有一个对象都可以啊，都可以， a 加个一， b 加个二，好有一个这样内容，然后把这个 o b g 呢给他分 往这一放，那在我的页面中呢就会出现一个 bg 对吗？啊，没问题。 ok， 好，然后呢我再来一个按钮按钮，然后这呢有一个可立刻还有个 btn， 然后做一个很简单的事情，就是响应式数据的问题， 不减按钮的时候呢，我让这个 this 的 o b g 的 c 为三啊，说白了就是多了一个这么一个内容，对吧，但是它能生效吗？小心 点点点点点，它不生效。为啥呀啊？首先呢，我们先要明确一点啊，就是 view 二，它这个版本做数据的拦截，它用的是 object 点儿底板的 pro 几啊，我们经常说双向绑定原理，双向绑定原理对吧，好多人就记住了一个 object 底板的 pro 几啊，不管了，它用的这个东西， 那用这东西呢？大家可以去各种地方去搜一下，都会有这样的文章说哦，这底盘的 prop 如何去监控呃，这个数组的变化等等，这些内容什么意思呢？就是它的原码里边呢，是可以监控到 o b g 的变化啊，比如 说你把 o b c 的变成三，绝对会变啊，刷新一下绝对会变好，为什么这样呢？大家看啊，其实它的数据呢，也都变了，来刷新一下，变好，我们来看这。 呃，在最外层是有 o b g 的，看到了吧，这 o b g 有没有被 get 还是 set 呢？我们找一下 o b g 好，有 get set 看到了吧。 prompts a 什么 getta pro b c set ok， 然后呢，你把这个地方的 o b g 给它打开好，这地方的 a 这长的 b 有 get her sitter c 呢？没有吧啊 say 他就没有 get her sitter， 那他就监控不了啊啊，所以说会导致这样问题啊，这是 object 底翻的 pro， 记得啊，不能说他的问题啊，就是作者没有做这一块，说白了就是 为什么没有做呢？是因为性能的问题啊，要不我给大家去讲没有做啊，那这块怎么解决呢？在 vivo 三就没有用啊， p h 底盘的 pop 机了，它用的 pop c 来 解决的，我一会告诉大家。好吧，一会告诉大家，那么先让大家体会一下赛大吧，那么我可不可以让他进行一些修改呢？可以，咱们要用什么高尔夫赛对吧？这个玩意 这可以。好，那么在我们的 view 三中根本就不需要这么操作啊，在 view 三中你可以直接去响应好响应这样的数据，那怎么做呢？就在他大家看我们回到我们的 view 三的里边来打开这儿的一个呃， west down 这种 view 三的一个项目好，然后找到这个 home。 行，我想把这组件什么的呃，都给他清了吧。 这个 hello word 留下也无所谓啊，然后把这内容呢先全部给记掉。好，然后呢先要打开这一双啊，有一个 hello 是吧？ 行，那么在这他该怎么做呢？看啊，这有一个 set ok， 这么写就可以了，是不是感觉到也没什么难度对吧？好，然后呢，你可以在这呢去定义数据啊，当然语法堂和我现在写的形式不同啊。后面我给大家讲语法堂啊，你可以写一个呃数 啊，比如刚才我们写了一个 o b g 是吧，那我这呢也需要写 o b g， 你可以写个 let o b g 等于 a 冒号一， b 冒号二，是吧，然后这样呢， repeat 出去这个 o b g 就可以了，那这样话呢， o b g 也会展示到页面上哎，是不是和 d 有点相似啊？ 好，下面我们再来看啊，就是具体有什么区别我快会讲啊，咱们先体验这个东西啊，然后我这样加一个，比如说叫 btn 吧，也是按钮，那 btn 怎么加呢？过去我们加到这个里边是吧，既然是组合一篇了，就不要分块啊，甚至我这里都不要不要分块，全都给它挪里边去啊，就 like 或者 coms 都可以。 是个函数吗？对吧？你写半个身加上函数本身无所谓啊，然后把它给他抛出去，然后我们先做一个，让他一把点一下按钮，你给我弹个一呗，点，哎，一出来是吧，好，改这个数据 o b g 点 c， 给我来一个三，咱们看看能不能增哈，小心点。哎，不行啊，咱我这么去洗。如果你 你要让他这个数据呢？响应啊，你可以做这样的事情，比如 i s， 还有一个 reaction。 好，这样吧，我先不说 rf 了，咱们就拿这个东西给他包起来，包起来，然后大家再来看啊，刷新点是不是简单， 所以他可以解决这样的响应啊，包括其实这呢，我们是可以感觉出来他们区别。什么区别呢？我给大家在这个 btn 中打印点东西啊，我打印 obg 啊，大家看着啊，刷新点，注意这返回的是 new 什么 propsy， 返回的 propsy 啊，这个对象啊，如果我不用他包着 好，首先点就是它本身这里边根本就没有 get 和 sensor， 那你怎么样能监控到你怎么样能拦截到呢？对吧？ you proceed， you get a sensor， 那他就能监控到呀，啊，这个 proc 就可以啊，所以说呢，这就是三大法啊，我先给大家声明几个点，让大家呢有一点小小的感 学。好吧，我把这个笔记打开啊，笔打开，首先什么是组合式？ a p i， 现在大家清楚了吗？啊，就是你把数据是不是也写到 cd 里边了啊，原来我们写到 disad 里边儿的，对吧？ obg 现在写到这儿了，方法原来写到 message 里边儿，现在也写到这儿了，全版包括什么 what cute 的，后面给大家讲，全部都可以写到这儿。 ok， 注意啊，记得就这事啊，当然语法咱就不需要了，泡沫讲语法啊，下车组合一篇，这课大家记住了啊，这组合 api 好，然后呢，他解决的问题就是你看 你代码乱不乱呢？乱，比之前的模块不清晰了，但代码多，你不用上下来回滚了对吧，就是各有优势。老人说鱼和兄弟啊不可兼得吧，鱼和兄长不可兼得，道理也差不多了是吧，这个自行体会吧，你觉得拉就拉进，觉得 ok， ok 是吧，觉得好就好，自行体会就可以了。 好，然后呢，我要做到数据的响应式是吧，就是你要拦截你要加啊某一个东西啊，比如说 vip， 这样就可以了，那他就可以做到数据的响应了。好， 下面呢，咱们来讲一下他们具体选的这块的一些区别啊。来响应区别。呃， view 二的话呢，采用的是 object 点，哎呀呵哎，没写错， object 点里面的 pro 起 啊， v u 三呢，采用的是 prox， 这两个是完全不同的啊，不同的点是什么呢？ v u 二能不能做到响应呢？直接用 opg 里面的 pro 技能可以，但是呢性能就会差。 那所以说呢，他这个三用成 pro 写啊，那到底为什么这样呢？来，我给大家随便写个代码，咱们去体验一下就好了。呃，我们做一个例子就好了，比如我这有一个 m 对象， a 冒号一， d 冒号二，然后有一个 a r 是一个数组 行，然后呢，我这有一个 o 类型，它是空的， 现在呢，我要把 m 东西呢都放到 o 里边是吧，让 o 的所有的属性啊都可以被我拦截是吧，他只要是什么修改了或者设置啊等等，这样东西我都要知道，那么你该怎么办？非常简单， 我们可以哦，这次点啊，比如说循环对吧？ p 四或者说呢，你就 fore 都是可以的，无所谓 m 点 for 一直追我这循环了。为什么 ab ar 我都得复制到 o 里边啊。所以说你要有一次循环是吧。这有一个。呃，我们那个 k。 好，我们先看，打印一下这 k 吧， k 就是 a b a r 啊，来， a b a r 别扫好了。那么到这以后呢，现在我们就要写 object 的点儿，别看到，哎，算了，复制粘贴一份儿吧，别写了， 还有几个三数三个对吧，我们主要用的三个。然后这儿呢，要写 m， 要写的是 k， 还有 get 以及 set 好，那再往下我就不给大家多写了啊，来，我们这样呢， console log 打下这儿的 o 就可以了。哎，这是往 o 里边儿放啊。往 o 里边儿放好，打下 o 刷新。哎，报错了哦， jack 点儿 defend 好，这儿没有 d 啊， 好，小心。再来看，我们看一下这儿的一个对象啊，就是我们复制过去 o 来 a， 当然我这儿没有给他反复这个值啊。那 return 一下， return o， 呃， a b 的 k， m 的 k 啊，没错，好，打开丢东西吧，然后你看 a 被 get set 了啊， a r 也是 b 也是对不对？ 好，你的 a r 里边的 a b c 有被 get 的这事吗？没有，所以它的变化你怎么能知道呢啊，就现在，我在这 ctrl， 我说我修改 修改好。然后呢，我这儿来一个，呃，比如这个 o 的 a r 加幺零，我给改成 d 叉，改成 d 叉，这是变了吗？变了啊，看这儿修改了，有出发吗？没有，但是如果说你要去改一个 a， 它有出发吗？它肯定会出发， 因为 a 他有 get 和 set 啊，也太有 set 啊，说白了，但是你数组的里边东西哪有 get 和 set 啊，这就是导致他的问题。那至于能不能做到能低规啊， 对吧？如果说你这是一个对象，我就把你里边每一个再给你 gets set 一下，够不够？也可以啊，但是我们在写没有像的时候作者，或者说你是作者，你能知道我这个 deta 中的 read 这个数据我有几层吗？ 你不知道吧，我也可能五十层啊，咱说的不好听的话，可能层数特别特别多，导致性能就会一定差，你再循环，你再低微，那行了，性能就没法 保证啊。决定差，所以不是作者不做啊，这个做起来本身也不难，百度一下一大堆了啊，大家都可以做，关键是性能真的保证不了就。所以说在 vivo 二中呢，没有这么去搞啊。那为什么在 vivo 三 他用的 proc 呢？那就是哦占底分的和哦占底分的 proc 和 proc 的一个区别嘞，注意， proc 他是不需要循环的，那这样性能就会提高了啊，我们把这呢就给他先除掉 这点啊，那我们就按 proc 去写啊，那这不是循环意思吗？来看这这就不需要循环了，我们写一个 ctrl 等于一个对象。呃，然后因为他的参数，第三参数就对象啊，我们这写 get 算了，或者说我们直接写也行。那这样我们直接写， 我把这 o 拿下来吧。啊，这样去写上面我把 o 给他注下啊，这直接去写，然后一会呢，我也是 conse 点 log 打这个 o 不变啊不变好，只不过 o 呢，我给他扭一个 proc 啊，扭过来，然后 它的第一个参数呢，我们就要放的是什么呢？就是那个圆对象，比如 m， 第二个呢，就是一个整体对象，然后这有个 get， 这有个 set 好，然后在这呢我们就可以有。呃，可以弄他参数啊，当然我就弄一个 tiger 和 key 就行，当然正常来说呢，我们可能会要解析很多东西，所以说呢，呃会用另外一种写法。那这样吧，我们先去看一下，进去看一下 tiger。 好，来刷新。是不是刚才一模一样， 是不是一模一样哎，也复制了一份啊，这 o 也复制了一份，代码非常简洁。首先不管代码简不简洁啊，我循环了吗？没有啊， 那这个性能肯定要比上面高啊。那想都不用想事，对不对？好，那好，咱们看啊，修改 o 得 a， 我给它改成叉，好刷新修改出它看到吧。那我改含，同样我改 a 二三六零 发吗？我告诉大家他也不会出发。为啥你还是没有监控到？就是你，你监听的是这个这个这个没有，没有到这里边，所以这你递规意思就可以了，也有意思说了啊，咱们就举例讲也有意思说他只要递规意思就可以了啊，递规就行了，他呢不仅递规还要循环。 所以说呢，这就是性能上的问题啊，性能上的差别吧。那我们这呢大体的来总结一下。好吧，他们所存在问题也好啊，或者说为什么在这个二三中用的东西是不同的。首先哦，这是底盘的 pro 哦，这里面 pro 几呢？存在的问题一，不能呃监听数组的变化，它本身的问题。必须这个不重要啊，重要下面 必须便利对象的每一个属性对吧。必须便利循环便利意思啊，当然它参数是有三个的好，而我们的 这个 property 不需要便利啊，不需要便利，所以说呢，这个性能上的一个极大差距。当然呃，在刚才那个写法中啊，包括我们就这个地方啊，如果说你要解析到任何的数据类型，那这时候呢，你得这么去写， 我得看一下啊，我把这呢给他写件上，然后大家呢也可以下去呃去搜一搜啊， 这样的话也是可以的。然后包括这里，只不过这多了一个杯，把它拿过来，这是一个 set。 这都是 es 六东西了啊， 这样也是可以的啊，折进也是肯定没有问题啊，该改该获取都是可以获取的啊，这样写法也是可以的。这样写法也可以，这样的话可以解析很多类型。好，那我们就言归正传吧。那现在呢，大家知道了哦， set up 是干嘛的？主要是 api 啊，它主要来解决问题了，仁者见仁智者见智是吧，看这就可以了。 那为什么二的时候要 get 一般的 party 呢？我不知道。归归知道是吧，那为什么三不用了？我们是知道的啊，主要是它存在问题，那它呢，性能会更好一点，所以说呢，在 vivo 三用到它对吧。那 set up 返回的就是 proc 啊，我把这关了啊，返回就是 proc。 那这时候我们知道哦，有 propc 的才叫响应的数据，没有呢，就不是是吧。所以说你把这家伙给他去掉，那他就不是一个响应数据，自然而然在这个地方他不更新是有不更新道理对吗？不更新是有不更新道理，而你加他才可以。 好，加了。行，那么具体这个东西干嘛的呀？哎，有两个东西，其实一个是你看 i f， 这个有点乱啊，不要跟之前 i f 混淆了哈，那这有 i f 和 reps 这俩东西都是干嘛的呀？ 呃，简单来说呢，他俩都是和原来 data 比较相似的。原来 data 比较相似啊，比如说我这儿写 a m 二一， b m 二，对吧？然后可能写 o b g， 这个对象写一个 a r， 写一个 a r 是个速度啊，就和这个呢比较相似，但是呢他这这俩东西呢分的比较详细啊，什么意思呢？就是这个 r e f 呀，哎，我给大家看这个文档，这有没有 r e f 带 r e f 的响应式变量是吧？你就知道他其实就是个数据啊，说白了啊，看这有没有啊。这还没有去写，行吧，那我就直接给他写吧，写到这吧。 呃，叫使用渲染函数对吧？渲染函数 r f， 那这个 r f 是干嘛的呢？来我们找一下它的一个官方写的这个话术。 没办法说啊，那那回头我再给他找吧，可能一时半会我也找到了，刚才大家是这样啊，就是写边上的，或者写数据，就是定义数据，然后这个东西呢， ito 呢，也是定义数据，这俩都是定义数据的，只不过这个定义的是 简单类型，这是复杂类型，什么意思呢？就是字符串，对吧？这个这个数值啊，孤儿的你就都写成他啊，对象的写成他。好，那有没有个明确的规定呢？基本上我说到这以后大家就能分辨出来了，你比如说啊，呃，我刚才这个东西，这这不是一个对象吗？ 啊， i f， 它这个函数啊，你要包裹起来啊，你让 i f 不这么写行不行呢？我明确告诉大家，哎，稍息一下啊， 我们先把这保存下来，看这啊点，你会发现他不行，是吧？用这个玩意来刷新点他就可以了，能感觉出来吧。好，那我们再尝试一个东西啊，比如说 ar 这个数组 a b c， 好，我们把这 a r 注意啊，你返回啊，没事， ok， 然后点一下呢，我就别改 o b g 了呗，我们改 a r 是吧？ a r a r 的下标零， 我给你改成叉啊，现在不是响应数据，那当然他不会 a， 当然他不会更新了啊，只，对啊，只对，我还以为我多加了一个 a， 他不会更新，是吧？那我先换成 reaction， 它会个性吗？好，我们来看看啊，小心点，它会个性，它会个性，哎，换成 r e f 会个性吗？ 好，来刷新点，哎，怎么还不更新？我告诉大家，刚才上一次我们就操作不对，其实什么意思呢？就是我们在打印 ar， 你来看一下啊，刷新点一下他这呢，其实有个 value 的，看到没有，你得这么写 ar 的 value 的 value， 好，我们再把 value 打印 a r 的 y 六点指它，哎，然后你再零等于叉，这样它又就更新啊，稍息，叉，你看啊，所以说呢， 你要用 i f 呢，它多一步啊，多一个 value 啊，多一个 value， ok， 好，然后呢，我这儿想给大家说的就是，呃，这个 return 呢，你这儿还不能加基本类型，比如加一一二三，这是不行的。好，我们来看一下， 他会有一个警告，大家看到没有，如果不加呢，就没有这个警告， ok， 还有很多点就是，呃， 比如说这个地方你变成数组，那我这呢给大家弄一个规矩啊，就是到底什么用什么，是吧？一般对象呢，就直接用它就行了啊，其他类型的都可以用这个 if 啊，其他类型都可以用 if， 比如说你有个金猴，金猴反过来是数组，你就在这里进行一个空数组啊，你反应对象，那好了，就用它就可以了， 就基本上这是他们两者之间的一个小小差别，不管怎么样他都是可以做显示数据的。而 r e f 呢，你要用的话需要 value， 记得啊，需要 value， 这就是我们这儿所说的一些点。行，这节课呢，我先给大家讲这么多，大家下去呢，可以自自己的体验一下。而正儿八经在项目中 啊，或者在公司里边去开发都会用插件，直接呃去引入用就可以了，无需再领 pot i f 啊，因为你每个组件都得 i f 一次是吧？就以 promo 六对吧，都得这么去写一下，后面呢，包括还有身份周期昂，什么乱七八糟一大堆，你写这这麻了是吧？ 所以说呢，后面我到时到时候会给大家讲，这个插件咱先慢慢的一步一步熟悉。好吧，那这一课呢，让大家主要体会，就是你要知道赛道他到底是干嘛的，然后以及他的这些什么， 这函数啊，我们慢慢介绍好吧。行，那这节课呢，我们先这么多啊，先讲这么多，然后下节课呢，咱们就在比如说这里边怎么写这 compute 啊，怎么写 watch 啊，啊，怎么我原来那个东西我都得用啊，是吧？咱就一步来。行，那本节课呢？我们就先说这么多。

好，这节课呢，我们针对于首页的某些组件呢进行一些优化，那么在这呢我们优化的点呢是这个新上好课这块， 那首先呢欣赏好客呢？可能啊这个用户呢，进入到这个网站，他上来是看不到欣赏好客的，比如说呢，现在我这浏览器是长这个样子，对吧？ 进来以后呢，他一定会看到这个头部啊，就我们憨豆也一定会看到这个中间内容，你不可能这个浏览器成这样吧啊，就算是这么小他都能看得到，对吧？但是呢这个星辰好客啊，这个用户呢，进来的一瞬间 有可能是看不到，那么这一块呢，我们就可以把它做成一个义部组件，还记得我们之前讲过一个 view use 吧，啊，用到那个东西就可以了，说白了就是按需的去加载这个组件，那么在这呢我们也可以去测试一下啊，右击呢去检查一下，然后呢我们打开这个网络，就是 network 啊，打开这，然后呢 那我们去刷新一下页面，当我去刷新页面的时候呢，我们可以看到这里边的一些图片，他其实都已经加载完了，那我们看啊，这底下这些课程呢，是一些什么小猫小狗之类的，对吧？比如说我点击一下这个 啊，是这样的一个小动物啊，小猫，那明显呢是这张图片，对不对？但是呢我现在比如说这样的是根本不会加载他的啊，应该是这样的，但现在呢他是一定会加载，因为我们还没有加那个按需加载该组建的这个内容啊，所以说呢，我们把这呢要优化一下 好，然后呢在呃这个项目一开始我就给大家说过了，不合理哈，这项目不应该用 vivo 去做啊，为什么呢？是因为如果要考虑到 seo， 那这个事呢是一定矛盾的不对的， 所以说呢，我也说了，咱们这项目作为练手哈，作为练手来用的，那 su 的话呢，是一定务必要让它检索到的，也说在优待优机查看原代码是让它存在的，那这样呢，是不 存在，因为我们这走是客户端渲染啊，那就不说这个了啊，大家要知道其实在正儿八经的场景里边可能不会这么去做，但是呢我为了去做这样需求啊，所以说呢，要告诉大家就是这一块呢，我们会做成一个按需引入的一个组件。好了，废话不多说了，我们就来看看怎么去做啊， 那我这也写了，为什么要用这个一步组件哈。呃，然后呢，我们需要把这个 use 呢给他下载一下哈，来到我的这个终端里边下载一下 啊，下载完事以后呢，还是看一下这个地方的内容吧，就是我们之前看过的这个 reviews 啊，包括我们之前也写过这个笔记啊，给大家找一下，我先把咱们这一课内容呢先放到这啊，这是一个十首页之一部组件链接放哪？ 呃，然后我们去看一下我们之前那个笔记一步好，呃，是在这个板块是吧？是在这啊，行，那下面呢我们就开始调整， 首先呢我们要调整的这个组件让它异步了，是不是这个新上好课呀？就是这个 new 什么 good 对吧，就这个玩意儿。好，那这儿呢，我们就加一层盒子来，我复制粘贴过来了啊，呃， d i v r e f tigers 啊，我们就放到这儿，然后这儿呢是走一个 v 杠 if 的判断 you are in。 好，那这个组件呢，我们就让他按虚的引入啊，那下面呢，我们就把刚才下载的给他引入进来。 好，你们进来以后呢，我们需要一步的去加载这个组件，然后这样呢，就不能直接引 pro， 那当然 hundred 和 nine slipper 也不用一步哈，也无需去把它抽离出来， 嗯，然后把这删掉。好，那这样话呢，我们就，呃，已经是引入了 这个组组件啊，然后我们加一下这个判断 啊，加一个判断，然后这儿呢，我看一下啊，这个地方内容。好，那这样的话就应该是没有问题的了啊，那我把这个都给他放到一起吧， 按虚啊加载组建，这是我们之前讲过的，学以致用。好吧，来到这呢，我们也来看一下刚才那个问题啊，现在呢，我上线页面啊，然后咱们再到检查里边，然后再来看那个 night work 啊，就这个网络啊，来，大家看着啊，刷新一下。 好，现在看这个图片是不是就没有那个小猫小狗了呀？啊，这个是我们的 sweater 哈，这是我们的图片轮播啊，这都是，是不是没有那个小猫小狗那个课程封面图了啊，然后呢往下走啊，比如说，哎呀，已经到这了是吧？好， 这时候呢，这几个图你看就都加载进来了，那这样话呢，我们首页的首屏加点速度啊，他就会提高啊，并且呢，最后我们打包时候呢，其实这块是会单独抽立出来的。好，这是我们优化的其中之一啊，那么这节课呢，针对于 我们首页的这个新上好课的一步组件啊，我们就先说到这啊。然后呢我们之前也讲过这东西，还是把之前讲东西呢用到项目的某一个呃，内容块啊，这方便大家呢对于之前的知识进行一个巩固好了。那么有关于这一课我们所说的一步组件啊，就先说到这里。

好，这一课呢主要讲内容呢，就是基于 wait 这样的构建工具，在 v u 三的项目中呢，如何去设置代理来解决跨议问题？然后呢咱再顺带角的把 excel 四二次封装以及 a p i 解五呢，都给它顺带一下哈啊，毕竟 excel 四二次封装呢，美公司可能针对于他们需求呢，封装不一样啊，我们这呢就稍微带一下就得。 好，那首先呢，咱们先说第一个事情啊，就是来设置一个代理，那在 wit 中呢，设置代理是比较简单的，我们可以看一下这的一些内容啊，这是我写过的一个文章啊，首先呢我们要找到 wit 点 config 点 g s 这个文件啊，那我把这个参考文章也给大家放到这，这是一个设置代理 啊，解决这个跨域问题，那在公司里边呢，肯定是你要做这个代理，甚至还要做什么这个环境变料，然后以及 xs 工装是肯定的，对吧？ api 结果这些东西是必须的啊，然后这呢就给大家 弄一个参考文章吧。好，那下面呢，我们就按照参考文章呢去设置啊，来，我这样的设置可能是比较简单的，我们就直接去用就行了。那你公司里边呢，可能每一个 api 都不同，对吧？不是，可能是肯定不同的 啊，然后呢，在这呢，你把那个 api 呢给他添加到这就可以了啊，对应的这个网址啊，或者是 ip 啊，那我这添加的是咱们这个学习路线点私人这个网址哈。行，那这样的话就 ok 了，我然后我们把项目呢给大家重启一下，启动完事以后呢，我还会做 xs 二分钟，对吧？那这样呢，我们就新建一个目录啊，是一个工具类。 好在这个工具类里边呢，我新建一个 requested g s 啊。啊，这里边呢就是有关于 x s 二次封装的内容，那我就把这呢整体给拿过来了，那在这呢我强调一下，就是在 v o 三里边呢，它除了新增的什么乱七八糟那 东西啊，那 xs 这块或者 api 这块啊，他并没有一些东西，因为 xs 不是属于 vivo 的，对吧？啊，就是说你在这个上面里边可以去用，你在任何地方都可以用 xs 啊，所以说呢，他没有任何的改变哈，这点大家要切记啊，就是很多小伙伴会问到这一点啊。行，我就把 xs 给他下载一下。 好，下载完以后呢，我们重启一下，那他先下。哎，下载完了哈，那我们这就直接说吧， inpuls， 这不用说对吧？这是创建一个 excel 对象，然后这是一个请求拦截器，我这也没有做一些功能啊，就是大体的一个东西，这是一个架子啊， 然后这是一个响应的拦截器啊，然后你这样呢可能会判断很多的扣的码，那你就自己填就好了，好吧，然后这呢是 response data 啊，返回的一些我们的数据啊，当然你可以按照你的需求 data 点 data 啊，只不过我这样呢是点 data。 好，那么现在呢我们这样呢就，呃把它分装完了，分装完以后呢，在很多公司 里边呢，都会单独再弄 a p m 键，是吧？然后这里边是封装的一些呃，这个请求的具体的东西啊。好，那我这呢随便给大家打开一个接口文档吧，当然我也会添加到我们的课程里边啊，大家到时候直接在课程里边看，在这我给大家演示一下啊。稍等。 呃，我找到咱们这门 real 三的项目啊，在这呢会有一个接口文档，到时候大家点进去就好了啊，我这还没有给大家添加哈。呃，然后呢，我这就随便去找一个测试的就行了，比如说我就拿一个 轮播图吧，好吧，拿这个轮播图吧，因为毕竟他有很多图片啊，然后呢，在这我就新建一个 g s 文件啊， 好，那这就是一个轮播图的一些内容啊，然后把这个整体代码给他拿进去。好，那， 呃，他这个请求的一个 ip 啊，一 api 啊，我给放到这儿啊，然后他的请求方式呢是一个 get， 所以说我们这儿呢就都不需要了，参数什么都不需要啊，然后我把这名换一下， 行，那这样的一下这样的 api 解偶呢，我们就弄完了，然后现在呢，随便的去找一个页面进行一个请求吧。呃，我看一下，在这呢有一个 vivos， 那我就在这个页面吧。啊，咱们跑一下这个网页啊，在这。好， 那你可以通过选项是 a p i 或者 set up 这样去写啊，那我们就直接 set up 了，然后我们要引入的就是这个啊，然后这儿有一个 from， 找到这个路径，第二个要出去，然后是 a p i 下边的。 好，那我们请求的话呢，你可以在很多很多地方，比如说，呃，你是数据一开始要有的，你可以 在 b four 啊， on before mont 里边啊，如果说你是要靠这个第三个插件的，你可以写到 on monty 这里边啊，这个看你具体需求了，那这个呢，就等同于我们在 view 二的时候用那个 before creat 啊，差不多这样的一个内容啊，就是我们到还没有的时候啊， 行，那我们就在这里边去请求吧。啊，那我们先去拿到这个数据啊， is， 好，我们看一眼， 好，在我的控制台里边啊，大家可以看到这里已经有数据，对吧？ i s 点 date 点 list 嘛？ i s 点儿这个 date 点 list 啊，这就是我们的数据啊，一共有六项。行吧，那我们现在就把它选到页面上喽，那这儿来一个 u l l i， 那这里边我就放一个图片儿。 好吧，然后这呢，我们就写一个 steal， 呃，然后这有个 sql 的，那语言我就不写了啊，什么烂萨斯，我就不写了，挺烦的那个版本。然后宽度呢，就百分百，高度呢，咱们就来个二百吧，也别太大了。好，然后这呢，我们就给一会给他写上一个 item， 点什么什么玩意就行了。 行，我现在给他来一个微账号啊，循环一下 item in 一个 list 啊，那我们这呢需要弄一个数据，那这有一个 list， 等于 if 的一个数组。好，然后呢，在这呢给他做一个复值，他的 y 六啊，就等于这个值。 好，那么现在呢，我们这儿呢就可以写 k 了，等于 item 的 id， 是吧？然后这儿呢，就是 items 的什么什么玩意儿？好，我们看一下啊，来，看一下我们这个控台里边儿那个 图片路径是哪个啊？我们找一下啊，这样他有个错误，我先把这个先干掉。 好，此时此刻呢，我们的 l i 肯定会循环很多的。好，我们先看一下我们这儿的这个数据，呃，是 image 幺 l， ok， 那我就直接放到这儿吧。好，那这样的数据呢它就肯定出来了啊，一共有这么几张。 行，那这就是我们这儿呢做的具体的内容。那这儿呢给大家复盘一下啊，总结一下，首先呢我们第一步啊，在这儿呢写了一个 server 是吧？然后呢，这儿有 probacy 啊，设置了一个 a p i， 这是我们的代理。好，那设置完以后呢，我的 a p i 我在这儿呢就可以直接去写了。那当然，这儿呢我们有一个 x s s 工装啊，然后这儿呢会 呃有一个请求拦截器以及响应拦截器啊，那请求拦截器，响应拦截器，这个我就不想了啊，因为，呃，还是那句话，我们课程是从二过渡到没有三啊，必须要二，特别是 游戏啊。行，那在二里边呢，肯定我们要做这个 xss 封装吗？只不过我这就搭了个架，请求和响应来电器里边什么东西都没判断啊。行，然后呢，我们现在再到我的某一个呃文件里边去进行我的请求的接口的这些东西，比如 ul 是吧，可能有参数，你就把它写呗，是吧，没有参数就算了，或者请求方式。 然后呢，在具体的每某一个吧点 vivo 文件里边啊，我们 input， 然后在某一个生命周期里边直接去调用它就可以了。 那么大家可以看出来啊，就是基本上和我们二没有任何变化，对吧？所以说呢，就是请求这一块呢，就还好啊，没有给我们带来太多的一些学习的成本啊。 呃，然后呢，值得说的就是，呃，在这呢大家可以对照着他一些生命周期钩子啊，正常使用，比如说我们要在数据，呃，就是盗墓之前你要用 before mont 是吧？然后你如果要借助了啊，举个例子吧，比如 是吧，你肯定要写到 on monty 的这个生命周期里边啊，所以说呢，你要选对这个生命周期，然后呢，这样呢，有一个 a p i 的参考链接，我也给大家放到这儿吧，省的大家去找哈。 行了，那么有关于师师代理什么乱七八糟这些问题啊，那这节课呢，就先说这么多。

好，就在前两节课呢，我们讲到了这个组建的传职，比如说呢，父传子以及子传父这样的一些形式，对吧？然后到这呢，这节课我们就来复习一下啊，并且呢来看一下具体的一些问题，我们该如何进行调整啊？ 那我们先来回顾，首先呢，这个 home 点 view 呢，是属于一个父 list， 点 view 呢属于一个子，对吧？这是父子组建嘛，那我们就先来回顾一下子传父哈， 那类似点六呢，它属于一个子，那么在子里边呢定一个数据就是 nm， 它的值呢是为二百，然后在这呢并且使用了，对吧？然后这呢有个事件，那这时候呢，我啊执行这个事件，那把 amit 呢写到这了，是吧？然后呢我的父通过 fn 这个字印事件，那我这写的 fn 嘛给他传过去， 那这种写法呢是属于 t s 写法啊，那如果说不是 t s 写法呢啊，也是可以的，我们可以看下这个地方啊，我们可以把这个 inter 呢给它拿过来啊，啊，这儿就不用这种 t s， 可以直接这么去写啊，然后呢，这样呢，你可以定一个，比如说就叫 fn， 是吧？然后呢这样呢，你也叫 fn， 这样也是可以实现的啊，这就不是 ts 写法了。好了，我们来看一下，小心啊，然后我点一下啊，这样呢，我传过去的是一个二百， 好，然后我们在这呢看看这个二排是不是拿到了啊，因为我这呢是 consol 的啊，所以说呢，我们需要在控制台里边去看啊，确实没有问题，是吧？注意这数据呢是在子里边定义， 然后在副这呢可以直接去用，是吧？当然你也可以在副组件呢给他进行展示，上节课我们也说过了，是吧，给他呢，副到一个 if 里边就可以进行展示了啊，这就是子传副， 那我们再来回顾一下富传子吧，富传子呢，其实和我们之间差不多，是吧？这样呢，比如说我有 num， 算了 itr 吧， itr， 然后等于 itr， 那其实这种形式呢，是微钢并字的形式，对不对？好，然后在这我可以定一个这个 itr 等于 if， 然后这呢写下，这是副组件的数据，副组件数据，好， 那么我的子怎么去接收呢？我子呢，可以通过比方的 drops 进行接收，对吧？然后在这呢可以写一下，我们拿过来的就是 h r。 好，你可以定一下 h r 呢，它类型呢，是一个 stg 类型，然后它有有一个默认值，比如说就是你，好呀，是吧？啊，随便写的 好，然后呢，我就可以把这 s t r 呢给它放到页面上了啊，放到前面吧，或者说呢，我这来一个，呃， h r 换一个横线啊， 咱们把这 x 给它放进来好了，我们来看一眼啊，刷新一下， ok， 这是副组件数据呢，也就拿到了，所以说和我们之前 props 呢几乎没有什么太大区别，只换了个名，对吧？ definite props 啊，原来我们是 props 啊，六二的时候，行那，呃，我们 知道在 vivo 二的时候呢，就比如说副组件把值传给了子组件，然后子组件呢，如果说需要去改副组件这数据呢，他是不可以，对吧？因为我们数据流的来源是来自于副，你子怎么可能直接改副的这个数据呢？这是不现实。 那在 vivo 三中呢，也是一样啊，比如我这儿呢，可以给他写一个 light 吧，叫 probs 或者说抗死啊，这都无所谓， 我点击按钮时候呢，我希望把这个 itr 给他拿到，是吧，通过 gs 呢进行操作，那能不能拿到呢？可以哈，你不能直接写 tr 哈，你要写 pros 的 str。 好，我们来看一下啊， 点一下，哎，你看这里边呢，是不是有一个 probce， 然后 x 啊，我们可以点，哎 x。 好，首先我要记在四中呢，哎，可以拿到，那这个植物可以去改吗？好，我们来试一下。按道理来说呢，比如说 vr， 这肯定是不能改的， 比如说我改成一堆叉。好，然后这时候呢回到我的项目里边，啪一点，他提供你啊一堆这样的东西，对吧，提示你 orange 了啊，说这东西呢是止读的啊，你不能修改啊，他是止读的好， 那么我现在想要改该怎么办？那这就实验陷入了另外一个问题，对吧？那这一课呢，我要给大家讲的是另外一种传治方式，只不过呢他是叫双向的， 那么在 vivo 这呢， vivo 二周呢，我们经常会提到什么双向绑定的原理，双向绑定说白就是那个 v 杠 model， 对吧？那么其实呢在这呢也是可以通过 v 杠 model 形式呢给大家进行传递，并且他是双向，可以进行修改，写起来呢要比这呢啊简单很多。好，下面呢给大家演示一下。 那我就把这里边的东西呢，呃，我看一下啊，这里边东西我就全部给他删了吧，咱们就从头再来一遍。行吧，那我就把这个地方东西呢全部给他干掉， 然后这写个 h 一吧这是呃 list 点六组件，然后副组件东西呢，我也都给他干掉，全部不要了啊， 但是引入我需要啊，引入这个例子我需要。好，哎，这是 list 啊，负，引入了，这个子没啥问题是吧？好，现在呢，我这呢有一个，呃，这个副组件 啊，复读键，那我可以定一个数据，比如说，呃，有一个 a m 吧，好吧，那咱们有个 i f a， 呃，我定义值呢，就是一个一百，随便或者说咱们就定一一吧，以一为其实。 ok， 然后你要给他去传这个值呢？我们经常会之前都是这么去写，都是这么去写。 好，现在就不需要了啊，现在呢你就换一种形式啊，微杠 model 这么去写啊，这就是双向的啊，我们这记录一下四点十一吧，微杠 model 这个 父子组建这个双向双向数据啊，我们可以这么去理解好了，然后呢这个父呢你就可以完全按照刚才我这呢所写的，哎，你这么去传，这么去传 好，传完以后我的子是否可以拿到呢？好，到这呢我们就来看一看啊。拿呢还是跟之前一模一样啊，比如说我要拿到那个，呃，这样应该定义是 nom， 对吧？我要把它展示到地面上啊，我这来个 hr 放好。好吧，我要拿到啊，这是子的 只拿到一个数据， ok， 那这样呢也是一样。呃， letter 或者说 cons 的有一个 props 的一个常量，是吧？等于底盘的 props pros 好，然后这儿呢也是一样 a m 对吧？然后这儿呢是它的一个 type 类型啊，就是一个 number， ok， 然后它的一个默认值， 我们这呢可以随便写一个，当然你，呃这个地方呢，我们就一个一吧，那就写死吧，无所谓，或者你写个一百无所谓啊。好，那么我们在这呢看看这 n m 他能不能拿到，哎，刷新一下。好，大家看这个一是不是我拿到了呀？哎，那你看夫传子哇，可以通过这种形式去传， 那这个东西的功效是什么呢？刚收到了，你可以改。好，比如说我现在呢这个子午键啊子午键想要去改这个值，想要去改这个值，那么我们知道啊，他这个地方呢是这样的，我们可以在 props 里边呢拿到这个数据， 拿到这个 a y m 是吧？拿到 a y m 来我们看一下刷新哎，你看你是一是不是？好，我现在呢要给他改一下，比如改成一个二好，刷新，这样改是不行的哈，各位，他这呢也显示是指读对不对？这样改是不行 的那，哎，我用我的方法提交你让这去改可不可以？这是可以的啊，怎么去做呢？我这呢还有一个按钮啊，按钮 click b t n。 好，那我们这儿呢写 cons 的 b t n。 ok， 他是他。好，然后呢，我去，呃，这个子传父一个数据，但是呢我是可以去修改你的啊，可以去修改。你。好，那这时候呢我们就要用到敌方的啊 amys 了啊，把这个拿过来。 好，这个啊，那怎么写呢啊，首先呢，这儿呢你要定义一个内容啊，这个内容呢是写死的啊，就是 update 啊，对啊，注意这地方呢是斜死的哎，这个冒号呢是在后边啊。好，然后呢，你这传过来是 a o m， 你这呢要写成 a o m 就可以了。好，然后呢，你这可以提交把这个呢再给拿过来。 好，然后呢，你现在拿到的不是一个一百吗？我希望给你改成一个二百。好，这样就改了，注意负把数据传到了子，对不对？我子点击他就像去改这个原理的一百，来我们来看啊，刷新一下啵，哎，改掉了， 好了改掉了，那你的数据的来源是哪啊？来源于这谁改的呀？这啊，所以说呢是其实就是子把这个数据传到辅了啊，这就是形成一个双向啊，用 v 港 model 去写就好了啊，所以，哎，我们这呢把这代码拿过去 这个地方的子，哎，确实可以去改好副呢，就这么传好吧，然后它的里边的这个 ps 呢代码我也给你拿过来。那么这儿呢，我给大家提示一下，其实在 vivo 三中啊，关于 wega model 呢，有很多很多乱七八糟的一些写法啊，它其实提升了很多很多东西啊， we got model， 你会发现 后面随着我们后面讲吧，到时候会有很多很多的一些改变或者写法啊，你发现，哎，在组建中呢，你可以这么去写了啊，这就是父子组建这个数据双向的一个问题啊，也不叫数据双向了，对，你可以这么去理解啊 啊，然后呢在组建传职中呢，分为父传子，子传父以及兄弟之间的传职，对吧，那至于兄弟是怎么个兄弟呢？后面我给大家讲一套。好吧， 那目前呢，我就先把这个父子子父先给他弄明白完事了，然后呢整个的这个组建这块的传植乱七八糟东西，包括还有一些什么依赖之路，到时候呢后面给大家去讲好了。那么有关于这一课内容呢，我就给大家呢先说到这里。

hello， 各位小伙伴啊，最近呢，我要录制一个 vivo 三的视频教程了啊，有兴趣的小伙伴呢可以一起去学习一下啊。那首先这样的，之前呢，有些小伙伴会问到，我说，诶， vivo 三都这么长时间了，你怎么看是吧？是怎么看的问题啊？怎么看这个 vivo 三，一会呢我给大家去聊一聊。然后其次呢就是 vivo 三的一个使用吧啊，使用，那我后面会给大家讲 vivo 三的各种大使用。然后呢再其次呢就是公司怎么用，公司怎么用， 因为有三个产生来说，呃，有很多东西他是比较乱的，所以说呢，有的公司呢，使用方式可能都是不同的，比如说百分之八十公司这么去用，但是有百分之五的公司那么去用，百分之十的公司呢那么去用，那我这呢需要呃通过这么几个情况给大家讲一下分别不同的用法。好吧，那这随着我们课程呢慢慢就会更新下去啊。 行，那先来说怎么去看的这个问题吧，那版本的升级，首先 biu 三呢，肯定是从 biu 二升级到 biu 三，对吧？他有一个升级的过程啊，那么升级来说呢，我之前看到一个学员说过一丈话啊，就是换汤不换药，我特别赞同这句话，大家如果觉得说一个东西他升级了，改动非常非常大，大到硬境界了，那这个产品也基本 什么意思呢？就拿举个例子吧，比如说王者荣耀啊，这样游戏来说，他是一个推塔游戏对吧？不是一个人的王者，是团队荣耀对吧？推塔一个游戏好，如果有天砰一旦升级变成一个可能合格制游戏，或者变成了一个什么呃，射击的游戏等等乱七八糟游戏，那这个产品内法又和之然不一样了， 等等等等，使用的人肯定就会下降，大幅下降。所以说呢， vivo 二升到 vivo 三呢，大家不用慌啊，就是他就改这么一点东西吧，差别呢，并不特别大，也就是你会 vivo 二升到 vivo 三，很轻松的就可以过渡，只不过有些东西呢，我们人可能也会有固有思维啊， vivo 玩挺好，突然弄个 vivo 三，我觉得这不好那不好，是我们的固有思维啊，当然也确实需要我们的分辨能力 啊。然后呢，再说一下，就是 vivo 三，啪刚一出来时候，很多的小伙伴啊，都会觉得好牛化层啊，全都一猛子都去学了。好，你要注意啊，就是一定要有自己的分辨能力啊， vivo 三，咱们假设一个情况， vivo 三都出来了，然后挨了问 t u i， 他没有升到三，也说你用 view 三项目去以外 mpv 做掉，你觉得是不是有必要？你觉得你的相声有必要，完全没必要，对吧？所以说呢，这个 东西他只个升级，并不代表说他很强，对吧？他可能是未来呃，绝对会替代二的版本，这个我们不能确定啊，但是如果要有再出了 vivo， 那 vivo 基本上可能就不降，我们一定要有突破固有思维的思想，就是我们一定要有接触新鲜事物的能力，或者说接触新鲜事物的能力，或者说接触新鲜事物，我们要勇于去接受啊，但是也要分辨出来，不是说一个新东西 polo 数量就一猛去学啊，弹出来讲，这东西被炒的最多的就培训机构， 所以说呢，大家一定要有分辨能力啊，然后其次呢就是大家可能在网上也看过，比如说这个 vita 加 vivo 三，甚至还有加什么 gucci 四是吧，甚至还有加什么啊，平亚还有加什么 that， 还有加各种各样东西，乱七八糟啊，甚至还有这三大加一大堆， 这家到底是啥是吧？我分别给大家去说，这就是我告诉大家的，刚才说到他好乱啊，咱们一点聊好吧，一点聊我就当大家呢这些东西都不知道一点聊，那我六三，呃，怎么看呢？就是他目前来说吧，或者 vivo 本身吧，肯定是做后台管理系统非常适合的，做前台内容还是不适合的，然后随着这个课程大家慢慢去体验 vivo 三吧，或者体会 vivo 三的优缺点就可以了，那至于他怎么 去使用呢？这个随着课程咱慢慢去聊啊，我就一步给大家去说，包括那些东西啊，位置啊，加什么东西，对吧，慢慢的去聊好吧啊，然后公司怎么需要呢？就是后面等等都会的括号。但是呢，我这先要强调一点啊，就是，呃，我这次呢会讲的 vivo 三，主要是拿 vivo 和 vivo 三进行对比，如果一些小伙伴呢，没有学过 vivo 二啊，我建议呢就是你去学一下我的 vivor， 或者说学别人 vivor 都是可以的啊，无所谓啊， 大家要学我的 vr 呢，可以到这个学习路线展森或者小路线展森这个网站，然后这呢有课程的全能框架，然后在这有一个 vivo 基础课，大家可以学这个。好吧，那我就不在这呢不多说这个 vr 东西了，我只说这个对比，好吧，如果说你真的不会 vr， 一定要看 vr 再看这个，要不然你别看好吧，因为这里面都看不懂，你也看的费劲是吧，彼此都难受。好，那下面呢，我就呃正式的去来说微商的一些东西啊， 来写一个 bg， 我就当他家的这个 vivo ok 的 vivo 三什么都不会是吧他其实呢，我也当他不会了，我就整个都给他过一遍啊要首先呢，今天第一节课的第一个事，我们就来创建 view 三项目呗。啊，创建项创建 view 三项目创建 view 三项 上面呢有很多形式啊，很多形式，比如说我们经常一个命令就是 view， 呃， creature 这这个项目名称是吧，这么去创建，来吧，我把 view 二和 view 三都给创建出来啊，我进入到我的桌面儿，然后 see view creature 代号二就是 view 二啊，我再提一个 viv crate demo 三，那就是 vivo 三了。好，我先把 vivo 二这个版本选一下，我就把 return 和 vivo x 都安了啊，然后这样选择，看到二点叉走你。哎，我就按个二，那就二吧，就按个二，好，就按个二，然后这个玩意呢，我按个三，千万别点错了，三点叉啊走。好嘞， 好，他们先按着，然后呢，哥几个去聊着是吧，咱先喝着。好，就是。呃，我们通过这样的形式呢去创建这个项目啊，注意，这个形式是基于的构架工具。什么基于 构建工具？工具？嘿，是这个 wipe 啊，注意，这样积极构建工具是 wipe。 然后刚才呢，我给大家说过一个东西，就是 wait 加 vivo 三，看到吗？ 就不是基于外派。好，我们先来说一下，可能大家在六二章中已经做过很多项目了，那基外派这项项目呢，有一些痛点，怎么样痛点呢？大家看这个图啊，先说一个痛点啊，就是如果我们做这个项目，这个项目呢，可能有一百个组件，或者一百个点背文件 好，然后呢？某一个点没有文件呢？修改了点东西是吧？这个点东西啊，至于哪点咱就不说了啊，修改点东西，然后我帮你保存，我一保存时候呢，我去刷页面，我靠，怎么还跟原来一模一样，然后我一看这终端，我靠，你还没修完呢啊？你等半天，等上个十秒五秒都有可能。 大家发现一个问题，没有慢是吧？ wifi 好慢好慢，为什么呢？看这儿啊，是因为这样的啊，这个 wipic 呢，它有一个摁水，就是入口， 如果大家足够了解到 cat 的话，它有 encher 和 output， 是吧？入口，咱们拿入口来说，我这项目呢，可能有很多的页面啊，就是很多的这个 ruce 啊， ruce 这个路由，比如有三个吧，咱们举举个例子啊，有三个，当我去修改某一个时候，比如我改这个，我改这个和这个点没有文件，和这个没有文件，这俩页面有啥关系呢？ 我改，我和你俩啥关系呢？没关系，但是我要派克也会把他们重新的编译解析一下，然后包括他里边一带项全部再执行一遍啊，最后完事啊，我，我只说开发环境的时候啊， 这就是来拍个问题，导致你开发效率比较慢啊，就是我改一个，当组件特别多，改一个时候，其他都得编一下，超级慢。好，那么 有没有很好方式呢？ which 啊，这是这节课要说的这东西呢，大家一看图就明白啊，比如说我这也是有 n 多个这样的页面或者组件，不管啊，当我去改某一个，比如改这一个吧，哎，只是他自己生效，这几个哥们呢？不生效 啊，不就是说，呃，不根据啊，这呢进行什么加载呀，各类各样的东西啊，他不需要重新加载啊，这就大大提升效率。大家想想，我有五十个好假，五十都执行，但是我只改了某一个，那一个执行不就好了吗？所以说呢， wait 很好，那我们总结一下，呃，基于 ipad 的项目， 这项目啊，有一个问题啊，就是开发 map， 或者叫编译 map， 编译啊，编译版来解决它，该怎么去解决呢啊？使用 wait 构建构这个 wait 构建工具，使用它 使用解决，就是使用位置啊，就可以了，位置呢，要比他快，所以说呢，咱们要了解位置优势， 在开发，我只说在开发啊，在开发过程中大大提升我们的效率， 大家形容交流。好，那现在我再给大家阐述一遍啊，就是大家去创建一个 view 的项目，你可以通过战士创建，你也可以通过一会我讲 wave 方式去创建，这两东西呢，都可以完成你的项目，这个我说清楚了啊， 都可以完成一项，但是如果单纯的通过开发效率来讲的话啊，一个保存大码代码来讲的话， wait 要比 rap 速度要快，一会我带你带大家去体验。好吧，所以说呢，两个无所谓，爱用哪个用哪个，但是这个东西快，我们就用快的，舒服的，爽的，对吧？我们出出去就坐飞机，就坐高铁，就开车，我不骑。那那个什么，这，这个大轮车是吧？不，不，骑大轮车，不，不，踩平衡车，哎，就舒服， ok， 就跑车各种要开，哎，就这意思啊，就是我们要选一个跑的比较快的。好，那么 vit 项目怎么创建呢？创建 vivo 三项目，我们要基于 which 这构建工具。 命令这样的，跟它这儿就不一样了，命令这样， n p m 啊， in it， 然后这儿呢是 wait 哎， wait g s 哎，然后这是项目名称， 好，我再来一个，进入到我的桌面，然后 n p m e net， 啊，我们这儿呢，起一个名称，先写一下 wait g s 我叫它 wait demo 吧。好吧，随便儿起一个。 好，然后他让你选择你要创建什么样项目呢？那肯定 view 呗，选择 view 啊，走啊，然后是 view 的还是 view t s 的，呃，咱们先不说 t s 啊，如果小伙伴会呢，你就随便。好吧，不会呢，就 先跟着我走，选 v 五吧，走好，然后 c d 根据它的命令啊，进入到我们的目录里边，然后 n p m。 算了，我要 c n p m 安装它依赖，然后 n p m 绕 d v 启动起来啊，就可以了， 咱填不上第一位啊。行，好，我们来体验一下它的效率有多么的快啊。来，当然现在呢，还不是体验那么特别特别深刻啊。我们打开这个 logo， hose 三千， 呃，他访的时候扣后三千，大家看到了哈，来，我随便去改个东西，我打开这样的一个 app 没有吧，或者打开这个 hello 啊，都行啊，无所谓，就打开这好，我在这呢写一个一二三啊，我啪一保存，你看 是吧。四五六啪一保存，你看这速度是吧。叉叉啪一保存，你看这速度特别快，所以说呢这个东西呢只是提升我们的开发效率罢了而已啊，那就是你的一些选择了啊，到底你要用哪个倒无所谓好，但是呢大家呃 这样呢，我要给大家讲就是这个东西我不知道说了大家应该会对吧，这个就直接写代码就好了。那这个呢还有点问题啊啊基于 wait 呢还有点问题啊。首先呢 wait 呢它默认安装的如果你选择是 view 的项目啊它默认安装的这个版本呢是三的 view 三 啊默认是 vivo 三的啊。所以说我们这也记录一下如果选择 vivo 的项目默认版本是 vivo 三是 vivo 三。好，那 vivo 二能不能用呢？能一会我给大家讲啊。但是呢我们先来先来看一下这个 gv 的这个项目录啊 s r c 大家熟吗？不熟吧，熟是熟，感觉少点东西对吧。少什么呢？原来我们的那个撸件没有 store 没有。那咋办？这有啊啊，你把他的 src 整个的给他把这个位置的啊 src 给他删掉，把这 src 呢整个复制粘贴过来就可以了把这儿一复制 把这一复制把这一粘贴就可以。哎我这个粘贴的咋这么慢哎这是我电脑问题。好吧那那这样我我自己新建一下。这是我电脑问题啊各位你们肯定是不需要我这么去操作的这是我电脑问题我需要手动移一个来。那这个电脑 不听我话了已经好久已经坚持了很很久很久啊，我就一个一个笨点啊给它新鲜出来啊啊就是你要做的话呢就把你那个呃 s r c 粘删掉啊整个的复粘贴过来就可以了。好，我们就我这操作笨一点吧。 好，我把这个都拿过来。 好，这第一步还没有完呢哈，各位，呃，第二步呢？是你再打开你这个用 create 创建的 vivo 三项目的拍点 jason 啊，把 这一块，把这一块复制一下啊。哎，搁到这，搁到这个位位置，这个地方，把力量效应给按一下，好吧，来， n p m i。 然后呢，你再去启动啊，可能也会报些错，然后改一点东西就没有问题了。 好， n p m 状 b v。 走，启动起来。好，启动起来以后呢，我们看啊，它里边其实已经爆了一些错了，比如他说圈儿也不认识，对吧？咱们需要去改一下，找到这儿的一个，呃， home， 把这改成第二杠， 他们还会报一个错误啊，这个错误呢，我直接给大家去找吧，就是这个 ruth 里边这样呢，没有那个点 env 文件啊，所以说我们改天告就可以了。大家看，这不是我们熟悉的那个 vivo 的初始化的项目吗？哎，这也没有问题，好，给大家总结一下。呃，如果说我们要用 wat 即 wat 的来做项目的话啊，那我们要做的事情， 六三啊，六三使用。呃，这个应该不叫六三，应该叫 wait 加六三的方式。我们第一步， 把 print 创建六三的 src， 整个复制粘贴到 基于 wait 的项目中啊，只敢我们做第一步。第二步，把 create 创建的 六呃，把根的创建的 package jason 中的。我得给大家看看啊，这，这块， 这块，复制粘贴到这条 在项目中啊。第三步， n p m r。 呃， n p m i。 安装依赖啊。第四步， 启动修改错误就可以了。刚才我不是改了一个那个第二缸路径吗？还有一个是 rooter 里边对吧。改一个这个啊就可以了。那有些小伙伴可能还会有一些需求说，哎，我觉得挺好用的，对吧，这个东西挺好用，那我的 viewr 的项目呢， 也想用这个，我不想记 wifi 了，哎，那能不能用呢？可以啊，那可以。好，我们下面就来说一下 vr 的该怎么用。那 vr 呢，是在戴帽二对吧？好，那也是一样，前两步没什么区别啊。你要把它的 src 这块 给它放过来啊放到放到这边啊放到这边啊。那我又把 s r c 给删掉了，我这复制是有问题的啊，我再确定一下大概是不是 m 二啊 啊 ok， 好，复制我这个复制大家可别学我这种复制啊。我这我这是我电脑问题啊，你也别别到时候按照我本身你的电脑是可以的，结果按照我这样去去弄了。 这一句话不到位，我怕大家也笑话这麻烦大。是我电脑问题， ok， 然后这个里边就一个 logo 好行，完事以后呢也是把它那个拍着 jason 的，因为你是基于哎 the demo 二啊，这个啊，你看它是基于 view 的版本是二点六对吧？二点六点十一啊，所以说把这块也是要拿过去， 然后到这也是改一下再重新下载那个依赖啊，你看现在 vivo 的版本是二了对不对？不是三了再重新下载依赖。 p m i。 好，等下来以后呢， n p m 让 d v 去启动启动完事以后呢，就会报很多很多错儿了啊会报很多很多错呃，首先呢它报 d 个错呢，就是找不到这个玩意儿啊，找不到这个东西，那我们就需要把这个东西呢按一下啊， c n p m i 按一下。 好，我把这个给大家记录一下。第一步，第二步啊第二步，我们拷贝过来的是这一大堆 好，第三， 呃，第三是，对，这还有一个是复制安装依赖， 注意会报错，再安装一下这个啊，完事以后呢？哎，还没完事呢，等他完事以后我们再启动一下。啊 呀，这么慢啊， 呵呵，这还有点慢，行，他先安置吧，然后我给他去找一个插电啊，因为一会呢启动起来他还是不行的啊，还会有一个问题啊，所以说我们要用这个 wait 关闭原一会呢要用到这个玩意啊，我们去 n p m 去找一下啊，你要去下载一个这个玩意啊，然后呢在那个 wet ctrl ps 中的新配置啊，这样才可以。这还没安装完，行吧，没有安装完的话呢，我们就先按它去吧，周围要是慢啊，咱们先安装它，那我们就把这个删掉吧。第四步第五步 再 page page。 东西如下，比较简单啊，我我们直接来啊，直接来到这好，大家看啊，第一行这个地方把它拿到 我们的这款，这款就不要了啊，一会我给大家整个的 project 过来啊，这样就不要了，就看这个 好，然后呢这个底部也是一样整个换成它啊，直接都换成这样就可以了啊，这是最后我换完的。 呃，当然这一块儿的 defunt cray defunct convey 这个也算先留到这好我们再启动一下啊，可能会还是爆那个模块啊，我们需要把模块按一下 行，那再再运行一个第六步是吧，再运行好再去启动。 哎，现在就启动起来了啊，启动起来了，行，我们去看一下 logo home 三千，当然还会报一个错啊，就是你那个路径问题啊，路径问题呃， james view 是里边的 home， 这跟第二杠， 然后还有一个问题呢，是你那个，呃， rucher， 呃，这地方我们改天去杠， 小心，哎，还是有问题，看一下。嗯，没问题的。好，我再重启一下吧。 好，我们再重启一下，再看一眼啊，哎，大家看是不是现在就 ok 了，这是 vivo 二啊，大家看切换，哎，都是没有问题的啊。那这一课呢，就主要给大家说一下，呃，这个 wait 加 vivo 三，它到底是怎么回事 啊？然后大家呢，就可以后面我讲课也是会用 wait， 基于 wait 的，一个没有三项啊。然后大家呢，也可以按照你的自身情况是吧？你公司里边呀，或者说你自己想用哪个都是可以的，用 wifi 也行，只用位置也行，只是让大家清楚的 有一些地方的课是这样的，那么到底这个是啥啊？要给大家说清楚。好，那这节课呢，我们就先说这么多，然后下节课呢，咱们再具体的说。 view 三里面都强。好，那么构建创建 view 三项目我们就先说到这里。

好，那么这节课呢，我们来说一下登录完事以后的这些功能，那么现在呢，咱们先转换一下角色啊，咱转换成一个普通用户，那么用户的行为呢？是我不管采用的是账号密码还是短信验证码，不管啊，这两种任何的一种登录方式。当我点击了登录按钮，他做什么事？首先提示我登录成功，对不对？当然如果说错了，就提示我错了呗，如果正确，那就登录成功，提示个信息， 并且呢返回到我上一页啊，比如我原来呢是在这个首页，是吧？然后当我点击到了这个登录，啪一登，不是回到我的这个首页上，并且呢会展示我登录完事以后的个人的信息，就比如这个登录注册应该就没了，换成我的头像，对不对？所以说呢，咱还有很多事情要做啊，这是出于用户的角度，那作为一种程序员，我们要做事情哪些？ 那首先呢，不管是哪一种，当我点击登录了，如果他的登录成功了，有账号密码是对的，那首先呢，我们是要把他的 talking 存入起来的，那这一步呢，我们已经做了，然后其次呢，提醒他登录成功，对不对？然后并且呢跳转到上页啊，这是我们做的前三步，我到这呢给大家写一下，第一步，我们这呢要 top 进行存储，第二步呢，我们要提示信息。第三步呢，我们要返回上页啊，返回之前页，然后还要做什么事？那在比如返回到上页， 或者返回到任何页面，那我们要做事情还要获取啊用户的信息，比如说他的头像，他昵称等等一系列这样东西。好，那下面呢，我们就开始去做啊，这是登录以后，或者叫登录成功， 那我把这个笔记先给大家放到这吧。好，那我们就按照这个思路一步来啊，存储套定呢，我们已经做了，来吧，到这呢我看一下这个 logo 点六，然后呢在下边我们去找一下。呃，在这个地方有一个登录成功，对吧？这有个套定存储在下面呢，也是一样，这是我们的手机号，那个登录也有一个套定存储。 ok， 行，然后呢我们先要提示个信息，对不对？那我们这呢就来提示一下啊，这个是实在是 往前放一放， su 这些一二三四啊，然后这呢就是，嗯，登录成功。好，那我把这个呢粘贴一下。呃，到我们上面，其实这一块呢，其实完全可以封装成一个方法。呃，我们先这么做啊，接着做，然后呢我们再去说这块内容。好，那，呃，这地方的一个提讯器我们搞定了，是不是还返回商业呀？那就用到了什么陆游吗？这种的这个 roser 啊，来，那就是陆游， 用谁呀？ use ruler， 对吧？这呢是 bill ruler。 好，然后下面呢，我们就需要 light， 一个 ruler 等于不是 const 啊，那我们这儿呢用 const 吧。好，然后这儿呢是 ruler 啊，这些 rooter， go， 然后负一反上页啊，你看这呢，我们应该同样的方法，要不然呢每次要写两遍，对吧？这个呢，我们先知道就行了。好，那现在呢，我们就简短来试一试啊，比如说我这输入加密码，对的啊，走，哎，反正上页了，其实我这么成功啊，挺好一个事。行，然后，并且呢，这要获取到什么？获取到我们的一个用户信息，对不对？那下面呢是肯定要启用接口的，来吧，我们去看一下这个接口， 那你获取用户信息是不是要在 honder 这些展示啊？这要换成我们的用户头像吧。啊，所以说我们 honder 里边呢要做很多很多事情啊，还没有完好了。那现在呢，我们先回到这个 honder 这个组件里边啊，这公共的 honder 里边。好，在这呢我们要获取用户信息了。行，那现在呢，我们打开这个接口文档，然后来看一下具体获取用户的信息啊，有哪些 获取用户信息呢？首先这 api 我就不说了啊，咱们直接可以去用，来吧，到这呢我就。呃看下这 api 文件，我们找一下啊，在我们的那个工具里边啊，在这，然后有 api， 然后这边有个 logo 点 dsok， 这是获取，算了，复制吧。获取个人信息 啊，然后我们这呢给他拿一个这个过来啊，然后这呢是一个干净球，好，我们先给他写一下。呃，这是个干净球。好，那我们就写到这啊，这里盖上，这就不要了，然后这是盖上 info， 他是这么一个过程啊，为大家呢去说一下，比如啊，我们后面呢会做到一个叫提交订单，或者说呢加入到购车，比如说要加入到购车或提交订单，这东西反正是一个按钮啊，比如说咱这列举叫修改昵称吧，原来是张三啊，原来是张三，这个昵称，对不对？好，然后呢我改成，比如说李四啊，改成李四，然后我一点提交，哎，这时候 他就会改了，那点击提交他是不是应该刷新页面啊，然后把你账号换成李四，对不对？好了，那我问你啊，如果说我提交，我叭叭叭一顿点，我点十下，哎，那这时候会怎么样？那这时候呢，就会有很多问题啊，其次你的九次的这个点击其实无效的。那怎么防止这个事情啊？我们就会做一个事，进入到这个页面啊，进到页面我会先生成一个零， 注意这个照片不是我们的用户，那个是临时照片啊，生成一个他就像一把锁一样，然后呢，我们点击他的时候要把这个照片呢传传过去啊，就是传给后端，那这个照片呢，也是后段生成的，只不过和用户没关系。好吧，也是用户是也是后段生成好，那他就把照片呢存起来啊，比如存到他专业里边啊，有一个缓存好，等我点击了提交。你不是发送请求吗？就会把这个后端呢，就会把你之前生成这个啊，他已经存到那个缓存里边了，和你这个传过来先对比，然后把这个删掉。 那这时候呢，你再点击的时候，那这个 top 呢？就没有用啊，因为他后端已经验证通过了，因为这个已经被后端移除了啊，所以说你二三四五六点击的乳胶就这个意思啊，你也就不能去修改。好吧，这么一个过程啊，那么现在呢，我们就先去，呃，把这里一个创建 token 的这个 api 先给他放过来哈，那我这样呢，就给他新建一个 api 的 gs 键吧，我叫他 create a token， 选 dsok。 好，那我就回到这啊，然后把这都删掉，留下一个就可以了，然后 api 地址我复制一下。嗯，到这。好，然后这是创建临时 talking， ok， 加到这行，然后呢？我叫他不是叫 talking。 啊，这个没问题，然后他不需要传递和三座，他是一个 get 或 pos 机球，用哪个都可以。好了，那这呢，就直接写到这就可以了。 好，那什么意思呢？就是说我们这个地方的一个获取用户信息啊，你要传两个，一个是啊，你就是通过我们的那个参数传过来的，这个防止会提交的。也就是说呢，我们在这个 honda 里边先要请哪个？先要祈求 crave。 呃，我们找到这啊，你看现在就可以用 char a 了，对吧，很方便了。呃，我是 a p i 下的啊。好，那就 on b four。 好，我们去请求一下 i s。 好，我们来看一下在这的一个内容。 好，打开我们控台刷新一下。好，在我们控台里边呢就出现了一个 r e s 点这个点 top， 对吧？这个是我们要传过去的 r e s 点 de 点 r， 这个是我们传过去的。好，那这个呢？就 ok 了，对吧？然后呢我们再去干嘛呢？哎，再去请求获取个人信息的这个地方。好吧，那我们到 logo 里边啊，就在这个地方获取用户信息。好，叫 get info info。 好，这个拿过来，这边又一个 i s。 然后我们刚走好，这个地方呢，需要传一个 talking。 呃，等于 i s 上面这个 top。 啊，或者说呢，你这儿可以写一个 light talking， 等于。好，这儿直接写一个 talking 就可以了。好，那我们看 i s 现在也是不行的啊，现在也是不行的，我们刷新一下。 为什么呢？是因为用户登录 top 你没有传呀，对吧？他说你 top 不正确，吧啦吧啦这些内容吧。好，所以说呢，我们需要把用户 top 传过去啊，用户 top 现在存到哪儿呢？关键搜索里边儿我们的 pina 中，对不对？好，那下面我们来看啊。那，呃用户 top 的话呢，在很多地方可能都会用到，比如说获取个人信息啊，到时候你是修改昵称，修改头像等等一系列，是不是都要传接 top， 那这个呢，我们需要放到二次包装里边啊，就是我们 excels 二次包装，我们这样要做改动啊，那怎么改动呢？首先我们第一步需要把啊我们的 topic 拿到， topic 呢，是在 pina 中啊，这个模块中啊，我们在这注意写法啊，这个引入必须要在里边去写，要不然就报错了，回去不到啊，我们这呢拿一下，然后这儿有个 light topic， 等于它的 topic。 好，我们去判断，如果说 tony 他存在啊，我们做什么事，就是往他的 hondas 里边去加这个东西，然后其次等于 top 好判断， tony 如果存在，我就给他传过去，如果不存在就不传了啊，比如说没有登录你过去，他没有意义啊。好，那下面我们来到这，我们再来看，小心， 呃，这有一个哦，这是圈 a 下。好，大家再来看 r s 点 deta， 点 detail 啊，这里边呢就是用户的各种行行为了，或者他的各种信息了，比如说这是他的头像对吧，这是他的城市，呃，这是他的学历，这是他的 id 等等等等等等一系列这样东西啊，还有他的一个昵称，还有他的一个详细地址啊，包括他设置会员啊，全部都在这个数据里边，那这时候呢，我们就请到了，当然我这个文章里边呢，也写清楚了啊， 调整二次童装，大概这意思好，那么现在呢？我们做到用户信息已经是拿到了，下一步呢，我们就是要在这进行判断，如果用户登录了，那这样呢？就不应该显示登录告诉错了，对不对？应该显示就是用户的这个头像也好呀，昵称也好等等，这样布局需要做 v 杠 if 的判断了。行，那这个判断呢？我放到下一个再去做。那这一课呢，我们主要是讲登录成功以后，我们可能要做些行为。好了，那这一刻呢？有关于这个内容我们就先做到这里。