vue-sfc-loader如何避免注入

好，下面介绍一下 s t k tableview 零点九点零版本的更新内容，解决了虚拟滚动白屏问题。我们看一下视力， 在一些情况下，如果用浏览器原生的滚动条，滚动表格会出现白屏的现象，像是渲染速度跟不上。 就像这样快速拖动滚动条，可以看到表格的内容会出现一瞬间的空状态，横向滚动也是一样。为了解决这个问题， s t k tableview 在 零点九点零版本引入了内置的滚动条，在组建的 props 里设置 scroll bar 即可。开启 好，保存一下，刷新页面，先停止更新， 再次快速拖动这个滚动条，可以看到白屏现象就不会发生了，横向滚动的固定列也不会发生跳动的现象。 使用文档在滚动条这一章节向下拉，有个内置滚动条，可以配置滚动条的宽度、高度等。就这么多了，如果对你有帮助，请在 github 上点个小心心支持一下，谢谢各位！

踩了奥迪战组件的 bug， 兄弟们，就是这个自动完成组件，只要与完美域组件搭配使用的话就会出现问题。假设你现在输入英文没什么问题，然后全选删掉，你输入中文， 然后你再继续输入，大家看出问题来了吗？无论你输入多长，新输入的中文都会把之前的给替换掉， 而且你用卧室也监听不到。然后我就去他的 github 官网，想着去 asses 里边看看有没有相同的问题，然后就在这搜索 o two， 嗯，可以看到确实有相关的几个问题，这个是我上个周提问的，然后作者说没有付现这个问题，让我提供个小 demo， 但是上个周我看有人提到了这个问题，并且修复了，然后我们点进去看，他说的这个问题跟我们遇到问题是 相同的，然后我们去看他是怎么修复的，他分别是在这两个组件下修改的。 ok， 那我们就来试试他这个方法到底行不行。那我们这次打算用 pat 的方法来打补丁，因为我们用的是 p m m， 所以说他 p m m 自带这个 pat 就不用单独下载了 啊，使用用法就是 pmpm pitch， 然后这个报名 at 这个 version， 那我们来试一下，那到我们的项目当中，那我们根据命令 pmpm p a t c h 然后包名 aunt 杠 d s i g n 杠 view at 版本号， 四点一点二回车。 ok， 他给了一个地址，那我们 comment 点击一下，打开这个地址的文件，那打开这个文件之后，我们去 去看看他到底是哪两个文件。 components 下面的 input text error， 找到一下 input ok 这个文件，然后我们去找到他的这个方法，复制一下，点击搜索，那在这里对比一下，他是把这里改成了，并且那我们在这里也改成，并且 保存。 okay。 第二个文件 vc input， vc input， okay， vc input 在这边，然后 input 点 g s， 没错，然后我们也找到这个方法，看一看他这里哪有改动，也是在这里改成了，并且 我们也一样，并且 ok 保存，然后我们返回我们的项目文件，修改完之后执行这一段命令，复制一下 copy 回车。 ok， 我们执行完毕之后，可以发现这里生成了一个 pass 文件， 那这里就是我们打的补丁，可以看到我们删除了这一行，增加了这一行，然后删除这一行，增加这一行。 而且在拍 k 纸的接线里边，我们也可以看到这里增加了一个 pnpm 打补丁的一个操作。那接下来只需要我们重启一下项目， pnpm 第一位片欧底， ok， 我们在这里刷新一下，试试英文没有问题，哈哈哈， 啦啦啦。哎，可以了，正常操作现在就是没有问题了，那正常情况下我们这样就没有问题了，如果说你不放心的话，你可以去弄的 models 里面去找到 alt， 然后去找到 es， 然后找到咱们刚刚修改的这个文件，然后去这里面可以去找找，可以看到其实这个弄的 models 里面他也是已经进行了修改，所以说我们这个打补丁操作已经成功了，也就实现了我们这个 bug 修复。

提到这个无限极，那不跟刚才一样吗？你刚才在里面不是说要对我们的主键进行递归，那说白了这个位置我们也要去递归， 那我现在要地规去处理我们的这个数据的话，他的地规实际上说白了针对的是我们的函数，我们刚才针对的是组建，现在在这个位置呢，针对的是函数。好，我现在要对他进行地规呢，你看想一下我们在里面应该怎么样写？ 应该说它里面相当于是啊创建我们的这个啊，就是路由是不是在里面呢？我们要 不停的去创建这个路由。好，行啊，我在这个地方呢，先跟大家把这个函数呢，咱们先定义了，那后面的这个处理思路呢？我先暂时跟大家注视，因为我们一会的处理呢，要看情况来定啊。 好，我现在在里面呢，相当于定义了一个函数，一会我们递归调用，你就不停的调用这个函数就行，明白没？嗯， 好，那个有朋友问到说，我当前 api 啊，数据怎么样用？我们的数据一般情况下都是在那个 low 的 js 里面真实定义的啊，就是有一些小伙伴呢，如果说你要是考虑到以后走全站，那我建议大家呢，可以掌握一门 后端语言，当然后端语言的比较多，但从我们前端开发的角度来说，学习一下 low 的 js。 这个我们前段时间也跟大家聊到过全站开发呀。啊， vivo 三里面咱们如何去？ 比如说数据的真善改禅，是不是 load？ js 里面如何定义相关 api 接口，然后呢？前端如何去调用？哎，如何去读取数据库的相关资料？哎，这个数据信息，然后呢把它返回给那个前端，这个呢？我们在 应该是上个月吧，上个月是不是有跟大家都聊到过，所以有些小伙伴你们可以关注一下啊，因为有时候我们可能会跟大家聊到就是你们需要的一些知识内容的时候呢，可以来我们的直播间啊。 好，那，哎，对，就是刚才林哥小伙伴你提到的问题，上个月我们有聊到过啊，就全站开发有不是用的这个模拟数据，用到的是路的 js。 嗯， 好，那我刚才跟大家写到这个位置之后，我们现在在里面呢，具体要对他进行这个地会调用，想一下你看我在里面要怎么样去做？ 既然我们在这个位置要不停的去调用的话，也就是说，呃，在这个位置啊，我来，我来这样跟大家写啊，来，好，我想一下我在哪个地方写，上面写到了一个无限极，我在这个地方写啊，现在呢，我们就是地规的这个函数调用吗？是不是？ 好，你在里面要调用，调用的是谁？调用的就是他啊？我现在相当于在我们的路由里面一进来以后你就要不停的去调用这个函数， 那在我们的这个函数里面大家要传参数，我们一般传哪哪一些参数，也就是说我现在要把这个导航菜单的数据循环，然后在我们的路由的这个配置里面生成多个求准，再加求准，是不是我现在要的数据呢？是这样的， 好，那我们现在再给大家添加进来的时候，第一步是不是要先考虑把我们的这个数据结构给大家传过来呀？对不对？哎，你要先传数据 第二步呢，我在里面还要告知你当前的数据要存在哪里，所以我在里面传两个参数，一个呢是我们的首页，另外一个呢就是所有的数据结构，记住这个位置传的参数，把这两个参数呢传进来。 好，传进来了以后，你看啊，在我们里面就很好写了，那第一个呢是你当前的这个数据，第二个呢可以理解为相当于是我们的根。哎，就最开始或者有些小伙伴这个位置不好理解，你就可以直接写我们的这个首页， 其实它相当于就是我们子集。哎，就是我们里面因为你要把这个数据放在哪里？放在我们的首页，或者说我们要在里面不停的去添加这个子集，是不是好？行啊？我在这个位置呢，给大家把这两个参数呢都已经放进来了， 那么放进来了以后，我接下来要干的事是不是开始要对它进行循环便利了呀？啊？我们就是在它里面去不停的这个循环便利，好，我在这个位置循环便利的时候，比如说我们拿到了这个相关的数据信息。啊，那我在里面呢先把这个位置都给大家写好， 但是我们想一想，我在循环便利的时候，我们的这个数据是不是应该追加在我们刚才传进来的这个奇尔的爱传在它里面，那有些小伙伴说这段代码我们就可以直接放进来了吗？因为你循环便利便利的它， 但是呢我们要考虑一点，因为有可能你的子集里面加了奇尔的，因为我们最开始添加的时候，只是在我们的 home 里面添加了奇尔的， 比如说它循环便利到它的下一级的时候，它实际上这个位置是没有七二的，对不对？那有些小伙伴说这个位置咱们怎么样去写呢？我决定在这个地方这样给大家写，里面呢定义一个 o b j， 这个 o b j 呢就是我们现在看到的这个内容，来把这个内容呢我直接给大家放进来啊， 稍微等一下啊，咱们在这个地方呢给大家处理下面这一块呢，我们就可以删掉了，哎，因为我一会要去循环便利的数据结构是不是就是这样的？我们在里面拿到的相关数据呢？实际上也是它 为什么我要在这个位置这样写呢？因为我想在里面添加一个判断条件，如果说你现在传进来的这个 home， 或者说我们其实在这个地方应该准确的跟他啊写成是他的这个子集，哎，可以理解为应该是我们的这个子集 obj， 我 觉得这个写法呢相对来说会更加的清晰。 下一级的对象我们在不停循环的变力的时候，他都会去寻找他的下一级对象是不是？那我们的下一级对象你要先判断他是不是什么数组，哎，在这个位置我们是不是要通过这个 instance of， 通过它来判断它是不是数组？对这个位置的话，有些小伙伴要记得啊，这这个代表的是什么呢？就是是否是，哎这个数组。 为什么有些小伙伴写到这个地方的时候，很容易忽略我们里面添加的一些判断条件，他说为什么我在里面要写这么多？ 因为如果它要不是一个树组的话，我在这个地方就需要去对它进行判断，如果说它现在是一个树组，那我们的处理思路就很简单了呀，你就直接啊发现它里面呢是一个，对不对？那我这个时候在里面呢，我就直接的铺写，把我们刚才的 obj 呢添加进来， 这个代表的是什么？就是如果它是树组，那我们就直接，哎，直接的相当于这个 追加 o b j， 是 不是跟我们刚才在外面写到的一样，那万一它要不是一个数组呢啊？因为你要不是一个数组的话，我在这个位置调用我们直接写到这个复写方法，它实际上是会报错的。好，那如果说我现在它要不是一个数组，我要干的事是什么？ 如果它不是一个数组的话，相当于它就是一个对象，那我在里面就应该给大家添加一个，哎，这个求求准，然后呢我再去谱写我们的 obj， 哎，我们的写法是不是应该这样去做这个才是对的， 但是在这个位置呢，建议有些小伙伴继续的去添加一个判断条件，如果你刚才写到的这个子集里面啊，咱们要是没有这个求准它的存在的话， 建议大家在里面呢先定义一次，避免出现一些不必要的这个报错。我不知道这个写法跟他写完了以后，大家能不能明白，为什么我们要在这个位置非要添加这个判断条件，不直接的去在它里面破袭数据呢？ 因为我们的数据是一级一级的动态生成配置的，那里面你肯定是没有去添加这个丘准，所以说我们的第一级数据里面的丘准是我们自己手动最佳的， 但是到了第二级、第三级、第 n 级的时候，这个丘准的值它默认情况下是没有的，所以你在这个地方添加这个判断，只是为了让我们的代码更为严谨。 如果它是一个数组，那很简单，我们把数据呢直接的往里面追加就行。但如果它要不是一个数组，就它里面要是没有这个丘准，那我们现在要做的事就是在它里面呢，把这个丘准添加， 添加完了，求准，我这个时候就可以在它里面直接的复习数据了，能明白不？好，简单的问一下，就是我们刚才写到的这个循环便利中这一块为什么要去判断它是否是一个数组？这个写法能理解的小伙伴可以小一回复一下。嗯， 对，如果说这个要是啊，有什么问题呢？你们也一样的可以在我们的直播间提啊，就刚才跟他写到这块，这个思路能那个清晰不？对，能清晰的小伙伴简单回复啊，可能有同学说，这写的啥呀？如果你是前端开发 这个写法呢，咱们一定要了解啊，这个是咱们前端开发必备的积累，对不对？好，刚才跟他写到这个位置呢，咱们要看清， 那我接下来呢要干的事就是咱们要干大事了，因为你说要递归吗？对不对？那什么时候咱们要递归呢？我刚才在里面只是追加数据，接下来我要干的事就是判断一下 你刚才拿到的这个数据里面是否拥有子集。记住，我们这个时候的判断是根据数据来的，哎，我们数据里面的奇尔的，但是我刚才跟大家写到的这个呢，是我们的路由配置。对，有些小伙伴要分清 这个地方判断的是什么，就是判断我们的数据是否有这个奇尔的，对不对？ 如果说我们的数据里面要是有效的，那你就又一次的要去调用这个方法了，哎，所以在他这一方我们是不是就开始了自调的过程？这个就是大家熟悉的帝龟的用法，自调自己调自己， 那我们在写自调的时候，一定一定要记得添加一个判断条件，因为你的自调肯定要有结束，什么时候结束？如果数据里面没有欠儿的，那我们就不要自调，有欠儿的你就开始自调。 那我当前在自调的时候，我们里面是不是要把每一级的这个子集数据呢？一步一步的给它传，你在这个地方怎么样传先，它传的就是咱们的这个子集数据。 第二个呢？我在里面要传的是谁？记住了，把我们刚才写到的这个 o b j 传过来，对，把我们的这个谁 o b j 刚才给大家写到的呢？传过去。 好，行啊，写完了这一切之后，是不是代表我们刚才给大家路由里面配置的这个动态数据咱们就可以了？ 其实我刚才跟大家写到这块，很多小伙伴都知道，为什么说权限管理咱们前端会很麻烦，为什么说无限极，咱们前端处理起来挺复杂， 实际上都很多情况下和路由有关系，因为他又要递归组建，又要递归数据，是不是挺麻烦的啊？如果说还涉及到动态数据的各种处理呢，更麻烦。好，那我现在把这些写完了以后，我们来看一下我们的这个数据呢，是否可以正常 点击首页统计管理，财务管理一级是可以的。好，接下来我们看一下我们的二级，二级我在点的时候，你突然会发现他跟刚才有点不一样， 刚才会出现空白，现在咱们的空白没有，你看我点的时候他没有空白，但是路由并不会发生变化。那为什么我们刚刚写到这块有问题呢？来给大家瞄一下啊，看一下我们当前写到这个位置究竟哪个地方有问题哦。好，来我们页面的先给大家那个刷新一波啊， 你会发现他这个地方的问题来源来源于什么？你看我们再点，有些小伙伴看到右边我们的报错啊，这个位置一定要先看懂，当我点击订单管理的时候，他给我们报的错误信息是能看明白吗？我们导入的这个 主键没有办法映射，是不是你映射不了？为什么会出现这种情况？你看在这个地方他告知我们这个映射不了， 那也就说我们刚才写到的代码中这一块出现了问题，那这一块是什么样的问题出现的呢？相当于你的这个主键我们没有办法去加进来，所以说导致了我们在点击的时候，这个内容呢，我们看不了， 我要接下来跟大家说一个非常重要的啊，也是我们在 vivo 二和 vivo 三里面不一样的地方能听懂的小伙伴一定要听懂，听不懂的那咱没办法，因为这个呢是我们在 应该说 vivo 三里面针对于路由如果有多级必须要处理的，也是我们在面试的时候比较喜欢问到的一个问题， 那我由于在给大家添加的过程中，相当于他这个时候呢识别不了，是不是没有办法去识别？所以我们要想一个办法，就是先动态的把我们刚才在主键里面就是我们要映色的这些主键先全部都添加进来， 然后呢这个时候我们再去把，哎相当于一级及寻找的时候找到我们具体映色的主键， 所以说你在这个地方由于我们没有办法去那个导入，对不对？就是相当于他在就是刚才的那个报错呢？大家一定要记得啊，有些小伙伴要是没有看清我们的这个报错，再看一眼这个报错， 你在以后开发的时候，只要涉及到你的这个动态组建，就路由里面的配置这个问题是一定会出现的。以后大家再看到这个问题，记住了 他代表的意思就是说相当于我们没有办法去找到你要印色的这个子级主键。但是你要是说我们刚才的这个写法有问题的话，那为什么我们的一级他是可以的？ 说白了就是当你的数据里面要是有多级的时候，我们相当于是没有办法找到他印色的主键的，对不对？那我们怎么样解决呢？好，我接下来跟大家那个写一下我们的解决办法。 解决办法呢就是第一步啊，我们先动态的导入所有的这个组建，哎，把所有的组建呢我们都导进来，但是我们在导入所有组建的时候，似乎似乎有一点点这个大动干戈了，对不对？那我在这个位置我要导的是谁？ 我们的所有主键都放在这个 view 里面，所以说这个地方我们相当于要给大家导的是谁？是我们的这个叫哎 views， 当然你的名字要是不是这个这个地方的写法呢？它会不一样。好，那我现在在里面要导进来的话，我们怎么样去写呢？ 六三里面它导入这个子的模块写法是这样的啊，好，首先我在里面呢给大家定入一个，哎，这个模块，我们导入呢要通过的是这个叫什么？ input 导入，然后在这一方要跟大家写到的是 made， 然后我们要写到的是这个叫 global， 这个相当于就是动态的导入，你要导入的这个路径我们要把它写进来，在这个位置我们要写，首先你看我在这一方写的话，是不是它的上一节，然后你在里面是不是会拿到我们的这个叫什么 view， 对 不对？然后在这个地方大写的时候就可以这样写了， 这个能明白什么意思吗？你看到的这个写法呢？它代表的是什么？哎，对，以后大家如果看到这个不是注示啊，它代表的是什么？是所有，也就是说我现在把我们看到的这个就是你当前在的这个文件， 哎，它的上一级的这个 view， 这个文件夹，所有所有咱们的这个 index 点好，比如我后面跟大家写细一些啊，咱们的这个 view 文件呢，全部的都提前先导入进来，明白没有？相当于我刚才在印刷的时候它找不到，那我就做一个， 先把这些文件提前的都先导进来，那你一会儿是不是就找得到了？明白没有？哎，这个位置一定要明白啊，我们在里面呢先把它呢全都提前， 但是这个地方的写法呢，它并不是固定不变的，它会根据你的项目的这个结构包含不同，我们在写的时候这个位置呢会有一些变化， 比如说你当前不是放在我们的这个 views 文件夹下，或者说我们里面呢可能会包含更多。哎，这个欠套关系。那所以这个位置写的时候大家要记得，反正我们写的时候不一样。好，我在这个位置写进来，其实这个里面应该是有多个，我加一个 s 啊，这样呢会更清晰。 那我们要是把这些模块都已经导入进来了，接下来在我们的这个组间里面，我们应该怎么样去写呢？他的写法就不在这个位置呢去导入了， 你相当于就是直接从我们的这个模块里面去获取，能能懂意思不？好，这这个啊，来在在这个地方再跟大家写一个啊，这我们相当于在这个地方就是 从我们的这个叫什么模块里面。哎，你看啊，我现在在这一方这样跟大家写，就是你的这个组建的来源是从我们的这个模块里面去获取，其实这一方也不用跟大家加一个括号，我们是不是直接这样写就行？嗯， 好，我不知道这个地方在跟大家写的时候意思呢？大家能不能明白为什么会出现这样一种情况啊？啊？有一些小伙伴可能会问，为什么会出现这种情况， 那是因为简单的说啊，相当于就是说我们在那个去加载 所有这个如果是有层级关系的应用的一些页面的时候，相当于我们的路由文件里面默认情况下呢，他是不会去把所有的这个主键呢全都去加载。 所以说你在这个地方相当于先要匹配我们所有的页面模块，这样的话我就可以在导入的时候从我们所有的模块里面寻找他的子集以及子子集， 否则就会出现刚才的报错。好，我们把这个问题写完了以后呢，先给大家看一下是否能解决这个问题，或者说是不是由于这个问题而出现到报错来，页面再次刷新， 好，我先给大家随便点击别的，哎，你看我，哎，我们这个地方突然出现了一个 object promise， 对 不对？好，我因为先刷新以后，我们来看一下啊，你看它在这一方它解析的还不对。好，再给大家看。 哎，它这个地方的话，现在呢里面是有一个这个报错，那也就代表我们刚才跟大家写到的这个位置有可能哪个地方出现了，比如说一些问题没有解析，对，是不是？好，我来给大家看一下啊，为什么这个位置呢？我们会出现这样的一个问题， 来，先一步一步给大家看，因为我在这个位置解析的时候，我写到的是一个什么，是一个函数，里面是一个方形，我们来把这个地方呢再一次给大家变化， 我相当于直接的以他的这个变量来获取，是不是？我是不是在里面直接以变量的方式去获取？好，我们再来啊，来在页面刷新点首页，是不是首页可以了？财务管理可以了。好，我们来见证一下这个位置啊， 订单管理发现可以了没？可以了，继续向里面深入会员列表终于出现了会员详情，也可以创建管理员在这个位置呢也一样可以了。 所以刚才给大家写到的这些报错还有吗？没有了，那么也就是说你要是想在这个位置，如果以后动态的去处理无限级的这个路由我们的这个模块，那么他的写法就是刚才给大家写到的， 不是有很多小伙伴你在面试的时候，别人都要你写这个位置吗？那我现在跟他把这个位置写完了以后，你的思路清晰了没？ 也是我们 vivo 二和 vivo 三里面不一样的处理方式啊，大家一定要记得遇到了报错，我们要先知道为什么会报错好，也不知道这个位置跟大家写完了之后，我们左边的导航菜单，如果以后大家要是涉及到无限极， 我们就需要刚才的处理，并不像有些小伙伴想象的这么简单，你只需要在里面呢一个一个去追加，不是的，我们要处理两个方面，一个呢是我们的导航菜单， 另外一个呢是路由配置，处理完可以了，这这个时候你在里面怎么样点击那咱们的任何子集是不是他都可行？好，所以无限级的导航菜单处理完了，明天呢我们要跟大家再继续的说面包蟹 多页签爱这个导航。把这块一说完，我们的通用模块呢，基本上就已经差不多了，由于代码呢是一步一步跟大家写的，所以有些小伙伴建议你呢也可以自己尝试一下这个代码呢，咱自己可以多写一写， 写完了以后你可以收获很多，那像有些小伙伴你再考虑一下，如果是以后大家把这个数据一改，把我们的背景一改，把我们的样式一改，那这个位置不就变成了另外一套了吗？所以其实想去开发后台管理系统， 像这些公共的一些通用模块，咱们是一定要会写的，甚至于你在里面呢写个那么一两套之后，我们后面说白了就不用再去啊，就每一次在构建的时候，只需要在里面呢添加一些，比如说子集内容，否则这个呢有时候都会浪费我们一两天的时间，是不是 好行啊，我不知道刚才在给大家聊的过程中，小伙伴们呢对这个处理的方式跟思路呢，大家是否了解，由于时间的关系呢，咱们今天没有跟大家去全部聊完， 明天我们将会继续的再跟大家说到。哎，这个面包蟹和我们的多叶钱导航这个位置呢，会涉及到刚才在我们直播间有小伙伴提到的，别说霹雳呀，他的具体运用啊，是不是哎，包括我们里面的一些路由的一些运用啊，好，这个我明天说啊， 左边的导航菜单我再一次呼唤一下大家，还有没有小伙伴有什么不清晰的地方，这个应该应该给你们都要处理啊，有些小伙伴一定要记得，并不是只需要处理一个， 对，既要递归我们的组建，又要递归我们的路由配置，记住没？好，非常棒啊，那如果大家没有问题的话，我们今天的直播内容呢，就先到这里回放呢，一会会给大家上传。需要回放的小伙伴啊，你们一会也同样的可以找我们的管理员那个领取就行。 好，那如果有问题的小伙伴呢，可以提问题啊，原码没有给大家分享啊，因为代码呢，本来我们就是一步一步写的，所以说有回放没有原码给大家分享啊，建议有些小伙伴呢，咱们尽量自己多写一写。好，如果是没有问题的小伙伴，那我们今天的直播内容呢，就先给大家说到这来下课喽！

好，小伙伴们大家早上好，今天是二零二五年十二月十号早上的十点零一分星期三，那我们今天呢将会继续跟大家聊到 vivo 三的经典企业通用实战。嗯，昨天呢是聊到了上部分啊，我们今天呢是继续下部分的这个讲解。 好，先欢迎一下大家来到直播间啊，刚才也看到很多小伙伴呢在我们直播间的各种问候，呃，如果大家的听课环境没有任何影响的话，咱们可以小一来一波。好，进入到直播间的小伙伴啊，如果听课环境呢，没有任何影响哎，可以小一来一波。好，我，我先给大家来一波。小一啊， 好，很多小伙伴的这个问候我都已经 get 到了啊。好，既然大家的听课环境呢没有任何问题的话，我们先把昨天跟大家写到的代码运行一次啊，然后呢，我们再来聊一聊今天我们要涉及到哪些相关的知识点。 嗯，先给大家看一下啊，因为我们提到这个像一些后台管理系统的通用模块，我不知道大家在大脑里面首先想到的是什么， 我们其实不管你开发什么样的这个管理系统，他都会有我们的左边导航菜单，对不对？你想一下，每一个管理系统导航菜单他都有的，只是说咱们的导航菜单的内容呢，他不一样。 第二个呢，面包蟹那肯定也是要有的，是不是第三个呢？就是我们看到的这一块啊，这个位置呢叫多页签导航，这个呢也都是有。 那除了这些以外，其他的可能就是比如你点首页的时候，首页可能展示的是，比如说表格呀，对不对，或者是什么表单呀，或者是矮图标啊等等其他。 但是那一块呢，我们是没有办法去对它进行约束的，因为毕竟我们选项不同啊，你在里面展示的这个内容不同。但是呢，刚才跟大家提到的 我们的左边的导航菜单，面包蟹和多叶签导航是每一个后台管理系统必备的一定要有的，是不是？所以我们跟他把这块呢聊明白，那你要明白了，你可以把它作为一个模板，以后我们在开发后台管理系统的时候，直接就拿这个模板来开发， 哎，写入里面，哎，就修改我们的数据啊，包括改一下我们具体每个页面的模块不一样啊，是不是一套完整的这个后台管理系统呢就可以了。 所以我们今天跟大家呢也是继续的去聊到面包蟹还有我们的多叶千导航它的实现，因为昨天已经跟大家把我们左边导航菜单的无限级处理已经聊完了啊，这个呢是非常重要的，好，行啊 啊，那既然把我们左边的无限极那个已经跟他聊完了，我们现在先考虑一下这个面包蟹，哎，对面包蟹他的具体实现方式跟思路又是什么样的？好，我先问一下大家，就说平时我们在开发的时候，这个面包蟹大家用的多不多？面包蟹我们应该说 开发的过程中啊，涉及到的那个还是挺多的，是不是？好，那为为什么要有这个面包屑的那个存在呢？啊？管好，我来问大家一个问题啊，就说我们的这个管理系统中，面包屑他的这个作用啊，有有小伙伴对这块 有那个去考虑过吗？好蛮多小伙伴说了说用的特别多啊。啊，刚也说了嘛，后台管理系统都有，除非我们去开发一些移动端，如果说你只要是这个后台管理系统话都有。先简单的跟大家说一下，面包蟹在我们的管理系统，无论是我们的后台管理系统 小程序的，哎，别说管理后台，还是说我们的一些企业级的，这样的这个像一些什么，哎，别说开发平台，是不是，那么这个面包蟹呢？它其实相当于是一个导航，可以理解为我们的一个导航组建一个导航栏， 那这个面包蟹它是可以清晰的展示我们当前在的这个啊，菜单的一个层级位置，对不对？比如说你现在在我打是我，我要是点击了这个统计管理，那我在这个地方就会展示你在的位置呢？是统计管理， 你要点击的是财务管理，那这个地方就是财务管理。如果，当然我们刚说的都只是，哎，别说一级嘛，一般情况下一级的话，它的显示是首页后面加上你点击的，比如统计管理就写统计管理，财务管理就写财务管理。 那如果我现在里面包含了有更多的子集，我们在这个位置要是针对订单管理的话，它的显示是这样的，首页产品管理，订单管理， 明白没？哎，对，他是一级一级。那如果我现在要是针对的是我们的会员管理里面的创建那个管理员，他在这个位置展示呢？是这样的，首页 会员管理，创建会员，创建管理员，所以面包屑他是会明确的 清晰的展示我们当前在的这个菜单的成绩位置。是不是对有朋友说了啊，说像路径呀，哎，包括还有一些小黄那个小伙伴提到的啊，就是说我们可以相当于通过他能查看到我自己当前所打开的这个菜单， 对，是的啊，是这样一个作用。好，那他在我们实际开发的过程中，这个，哎，就是要完成的话，我们怎么去做呢？来先给大家把相关的代码呢，我们先打开。 第一个呢，我们要先跟大家打开的是我们的这个文件啊，就是相当于是我们的布局，把我们的 indexview 呢给大家先打开。昨天我们写到的是这个叫什么 level， 对 不对？好，今天我们继续啊，那我现在打开了以后面包屑呢？在这我们先把相关的这个面包屑组件呢给大家，哎，捞出来 默认请，哎，就样式的话，这个你们可以自己写也行，或者有些小伙伴说我借助于这个 i m 的 那个组件去完成也是可以的。 我现在在里面呢是跟大家写到了有第一个首页，第二个呢是企业管理，所以我们的面包蟹在展示的时候他是这两个。那你说我在这个位置如何能做到？我点击统计管理的时候，他就知道你点了统计管理了，我点财务管理的时候他就知道你点财务管理了。 有一些小伙伴呢，在这个位置会考虑用到本地存储，就是相当于把我们当前点击的这个存储起来，完了之后你在点击的过程中获取缓存的数据。但是呢，这种方法有点不太好的，是 因为我们他会有层级关系，就像刚才给大家说到的，哎，有更多的这个子级，比如说你现在点击的是创建管理员，那我还要拿到他的父，哎，创建会员，我还要拿到他的父的父，哎，还有会员管理， 那像这种存储呢，对于我们来说是不好存储的，如果说我的面包屑展示的是你点的是谁，他就是谁，那这种方式咱们可行。但如果像刚才提到的有层级关系，我们就不建议呢，直接使用这个本地存储，除非你在本地存储里面 能够去把我们前面的这个路径，哎，就是他的负啊负啊，能够获取，那我们就可以，如果说这块没有办法获取呢啊，本地存储呢？其实存了之后我们也没有办法能去对他进行展示的是不是好，所以我们先要考虑到的第一个问题就是面包系的数据究竟从哪里来 啊？如何去处理这个面包蟹的数据？好，刚才在直播间有小伙伴提到说这个回放的问题啊，呃，简单的说一下啊，如果是在我们，因为我们星期一到星期五早上的十点都会有直播吗？每一次直播的时间大概在八十分钟，每一次直播的内容呢，可能会不太一样 啊，基本上围绕的都是前端，然后星期五呢是红牛开发。那如果有些小伙伴想获取相关的回放啊，或者是哎一些其他的资料， 你们可以直接的找我们的管理员啊，跟管理员的留个言，如果有回放呢，他会发你，哎，如果我们有提供资料的话呢，也会给你那个分享，当然有一些没有那个办法提供的，这个也希望大家能理解啊，对，直接的加一下我们的管理员就行啊， 好像刚才在我们直播间啊，这个二五三八幺七小伙伴提到的啊。好，行，那既然刚才跟大家提到了咱们的这个面包蟹，它的重要性呢，也已经非常清晰了，那你说我在这个位置怎么样去展示它呢？记住了， 面包蟹的展示实际上跟谁关联呀？因为刚才有小伙伴提到说它是一个相当于导航组件， 那其实我们只要提到跟导航相关的，是不是应该和路径产生关系，对不对？所以说我们这个时候在里面要把它那个实现出来的话，我们来想一下， 当我点击统计管理的时候，我的路径是不是会发生变化，当我点击财务管理的时候，我的路径是不也会变化？所以说面包蟹他跟我们刚才提到的路径直接产生关联。 好，那既然这个思路清晰了，我们接下来回到我们的面包蟹啊，我们来看一下，在我们的面包蟹组间中，如果要获取哎，就是路由的一些相关信息，我们在里面呢怎么获取好？由于我们在里面要拿到这个路由的一些数据吗？是不是 啊？我在这个位置呢，先跟大家把这个路由的相关数据呢导入进来啊，我们先导一下，那你在里面呢先写一个啊，这个由 root user root 对 不对啊？都来源于我们 vivo 里面的 路由，先从路由就先把我们的路由呢导入进来。好，那个注，是呢，我有些地方跟大家简单的写一下，导入我们的路由对象是不是好？路由对象导入进来以后，由于我这个时候想获取路由信息， 大家一定一定要记得啊，如果说你在里面只是单纯地想获取我们的路由信息的话，我们可以直接通过这个叫 userot， 对， 通过它它的作用呢就是相当于我们在里面可以拿到这个当前啊路由的一些信息， 比如说你路由的这个 u i l 地址，包括我们传像有时候路由可能要传参数哎，通过什么样的传那个参数，包括我们在路由里面定义的所有属性，都可以通过我们的这个路由信息呢去进行获取。 那像我上面跟大家写到的这个 user root， 它代表的是什么？是我们的相当于局的路由实力，可以理解为就是我们的路由对象是不是，那如果是你要跳转哎或者等等其他，我们就可以选择用到它了。所以有些小伙伴一定要把这两个呢分清晰， 毕竟我们在路由哎就是我们的组间里面使用这个路由呢非常多。当然面试的时候这个问题呢也会被经常问到啊。刚才跟大家提到这块，如果是最近有面试的小伙伴啊，建议大家呢可以用一下心， 因为面试他实际上不会问你平时非常关注的问题，或者说大家都提的问题，不会他更多的去问到我们在实际开发的过程中可能没有太留意的一些问题。比如我刚才跟大家提到了路由里面的路由 root 和路由 root， 他 问究竟有什么样的不同， 还会问，哎，我们在那个 vivo 里面， vivo hook 你 用过哪一些？其实像我们现在写到的这些，它都是属于 vivo hook 的 一个运用，是不是所以平时大家可能在开发的过程中没有太去在意的，面试的时候很容易被问到。 好，那我刚才跟大家把这块写完了以后，我们现在要干的事是什么？我一进来以后我就要拿到我们的路由信息，对不对？好，来先给大家把这一块呢，我们先写一下啊，因为我一进来以后，我要先获取我们的这个哎路由数据信息，我在里面呢跟大家加了一个 on mounted， 那 monty 的 添加完了之后，我们来想一下你当前的这个处理思路是什么？就是我一进来以后，我就要把这个路由的数据信息呢先给大家获取。那有些小伙伴想一下，我们一进来之后要获取相关的路由数据，那我在这个位置如何去拿到它的这个路由数据信息呢？ 好，我们在这个位置可以跟大家这样写在我们的路由里面啊，当你输入完了以后，我们可以看到它里面包含的相关属性。 第一个呢是完整路径，我们的哈希，还有比如说哎这个 much 的 much 的 就代表的是我们的路由信息对象，包括你在路由里面如果写到什么 made， 哎，前段时间不是跟大家聊到了这个路由里面添加，比如缓存呀，是不是我们是不是用到了 made？ 还有刚才说到的 哎传的参数，比如说 plums query 对 不对？还有我们的哎具体路径 pass 在 这个位置都有，那如果你要获取到路由的具体那个数据信息的话，我们通过这个 match 的 呢，它是可以拿到的，在这个位置你可以就理解为它代表的就是我们的路由具体数据信息了， 我把这个给大家拿了以后呢，我们来通过啊这个控制台呢，先给大家瞄一眼啊，刚才我们在写的过程中，路由的数据是否有获取，那我页面刷新了之后，在这个位置呢，我们实际上是可以拿到的， 由于我现在点击的是谁，点击的是我们的财务管理，对不对？那大家会看到，哎，财务管理由于我们的路由中给大家配置的是它的父呢，是我们的 home， 然后在里面我们拿到的那个子，所以说这个时候你可以获取到两个。哎，就是我们的数组里面有两个对象，是不是一个是他的父，一个呢是我们当前， 所以他这个位置呢，其实是非常符合我们做那个面包蟹的。好，如果说我现在在里面要是跟大家点的是订单管理，来我同样的页面刷新，有些小伙伴可以看一下我们这个时候获取到的数据呢，他是几级？三级看到没有？ 第一集呢首页，第二集呢是我们的产品管理，下面这个呢才是我们的订单管理，那也就是说我们的面包蟹其实可以直接的展示你拿到的这个数组对象就可以了。好， 那这个位置的数组对象，我们一旦获取到那个之后，我们就可以把它呢直接的展示在我们的这个。哎，就是刚才写到的面包蟹的这个 标签里面。好，我不知道这个位置刚才给大家在说的过程中，小伙伴们是否能理解，如果有问题的同学呢，可以提问题都理解的小伙伴，哎，咱们可以小易回复一下，就是我们在实现这个面包蟹的时候，大家一定要做到的是思路清晰，面包蟹的代码呢并不长，但是呢它里面涉及到的一些知识点呢，还是挺多的。 好，非常棒啊，那刚才跟大家把这个说完了以后，我们现在要做的是不是要把面包蟹的数据，哎，就是我们拿到的路由数据付给我们的 这个面包屑在里面定义的某一个变量。好，既然在这个位置呢，我们要定一个变量，那我在这一方就直接跟大家写到了一个例子的啊，默认情况下，很明显他应该是一个什么数，那个数组，这个呢就是相当于我们可以理解为，啊，好，我来跟大家这样写啊，啊，面包 啊，我看一下面包馅，面包馅的那个数据对不对？好，我们在里面呢跟他把这个数据呢定义好，那这个数据呢，他应该等于什么？等于你刚才拿到的这个路由信息。好，我在这个地方的话我就直接跟大家这样写了啊，那， 哎，等于的是它，哎，我们在里面呢把这个数据呢已经获取到好，获取到了之后，我现在在页面里面是不是要对它进行循环便利啊？有同学问到说，我们的这个烂 u i 用的多吗？现在用的不是特别多，对，以前的话用的还挺多的啊，现在用的不是特别多， 我们现在如果是后台管理系统的话，一般情况下用到的都是 amd plus， 哎，用到的是比较多的， 如果是移动端呢，现在用的 want 会比较的多。对你说到的这个 lan u i 呢，相对而言不是特别多，但是呢，我们也不是说完全不用啊，只是说啊概率问题，再就是呢需求问题。好，刚才我们的这位六三八九小伙伴提到的问题， get 到没 get 到，你可以小一回复一下啊。 好，行，我把这个位置能写完了，以后该循环便利的，我现在在里面就给大家循环便利了啊，那我不是在里面已经给大家定义了一个这个叫什么 list 的 吗？对不对？好，我们把我们的 list 呢先给大家写进来，哎，你说这个地方我们要是拿到一个那个 相当于唯一的纸，是不是可以获取他的路径？哎，不知道这个地方的小伙伴刚才看我们的数据的时候，大家是否有留意好，完了以后我在这个地方要拿到的数据，你看他应该是什么啊？ 由于我们好，比如我这一方先给大家写一个名字吧，就是我刚才在页面给大家打印出来的时候，他的数据其实来源于谁？来源于我们的路由，路由里面我们昨天给大家这样写，也就说他的数据其实是来源于他的， 但是你说我们的这个数据来源于他吧，我在里面并没有去添加中文，我只是写了一个名字，我们先把这个名字呢给大家简单的展示一次啊，你看我页面刷新的时候，我们可以看到 这个面包蟹的数据呢，是有变化的，看到没？好，比如说我这个时候点击了统计管理，哎，但为啥我在点击统计管理的时候他并没有变化呀？看到没？那我我现在点财务管理，那他也没有变化，就是我们刚才想到的思路，好像这个地方突然之间有点卡住了， 我们想的是通过路由的变化，面包线呢，直接的获取我们的路由数据，那你在里面有几级我们的面包线呢？它是直接的展示那个几级就行， 但是你看我现在跟大家已经把路由的数据拿到了，我们在不停的对这个，哎，就是路由改变的时候， 我们的面包蟹的数据却并没有发生变化。问一下大家，如果我们在实际的开发过程中碰到像这种情况，哎，你说我们应该怎么样去解决啊？你看刚才跟他说到这块，我现在来点会员管理呢，我们的路由变了吗？已经变了，但是呢面包蟹的数据呢？它并没有变化， 哎，为啥会出现这种情况啊？有没有小伙伴知道？如果有小伙伴知道的话，可以简单说一下，你说为啥会出现这种情况？我刚才觉得思路还挺清晰的啊，突然之间就卡住了，为啥？ 强调一下啊？因为这个位置我们用到的是 unmonty 的， 它代表的意思是啥？ unmonty 的， 大家一定一定要记得，它是只有我们在第一次进入的时候，就是初次 我们进入这个主键的时候，他呢是会被去执行，但是当我们比如说你这个主键在不停切换的时候，这个位置他会执行吗？他实际不会。为了验证刚才我们说的对不对， 我呢在这个地方选中了某一个哈，比如说我们现在选的是这个会员列表，我页面呢，刷新一次你会发现我们的这个内容是不是已经发生变化了，对不对？ 所以就是因为我们的 on monkey 的 它仅仅只是在我们初次进入主键的时候才会去执行，导致了我们的 u i l 发生变化之后它没有执行了。那像这种有没有什么解决的办法呢？有， 所以在面包线里面，我们一般情况下不会选择用到 on monkey 的 来进行，我们要选择用到的是什么？用到的是 watch 监听。好，来，刚才给大家说到这个位置呢，我们简单的写一个啊，为什么在这个位置要用到 watch 监听？因为我要实时的监听路由的变化， 同时路由一旦变化了之后对它进行负值的处理。好，所以我们在这个位置呢，把这个监听给大家先添加进来。哎，等一下啊， 好，我们把这个监听好，那我在这个位置要跟大家写到的是卧起监听，对不对？卧起监听，你要监听的是谁的变化？我们要监听的是陆游的变化，看明白没？对，在这个位置的话，有些小伙伴一定要看懂你要监听的对象是谁。 哎，我们当前监听的是陆游。好，那监听了陆游之后，我在这个位置呢，是可以拿到他的新的纸， 这个呢，可以理解为是我们以前老的值，记住没？哎，我在监听的时候，因为你监听某个对象，你可以发现哦，他从一变更为了二，那么我们的新的值就是二，老的值就是一，是不是这个很好理解。好，那我同样的也对我们的这个数据呢进行重新的赋值， 那我在这个时候赋值的过程中，我们拿到的就不再是路由的这个数据，你应该拿到的是他变化之后的新的数据， 其实这个变化之后新的数据也是我们路由里面获取到的新的值，因为你监听的是路由的变化。好，我们把这个写完了以后呢，同样页面先给大家刷新来一次，然后我们点击的看一看我们的面包线是否会随着我们的 url 变化而去发生变化。 你看我这个时候在点击的过程中， url 变化之后，我们变了没有？面包屑是不已经变了，哎，你不相信，你看我在这个位置一二三三级我们再来啊，你看在这个位置一二三四级有四级点，它点每一个是不都会有变化？好， 所以刚才跟大家说到这个位置面包屑会随着 url 的 变化发生变化已经可以， 但是呢我们要的最终效果还没有达到，是不是？那这个位置我们继续将应该怎么去做呢？好，接下来我们再来继续跟大家说一下刚才在写的过程中，面包蟹的，哎，这个相当于他的监听已经完成，我们接下来要做 还有两件事啊。第一个呢，是我们面包蟹的内容变更为跟我们的导航菜单一样，是不是还有呢？就是我们在这个位置呢，还需要去思考一下代码的一些优化和，哎，比如说如何简洁， i want you to。

我们正站在一个关键的转折点上，前端工程的范式正在发生深刻改革。传统的开发者编辑代码模式面对日渐增长的业务需求和 ai 的 冲击，正逐步向 ai 或用户生成配置、前端引擎负责运行的新模式迁移。 这不仅仅是技术战的更迭，更是我们工作方式和价值定义的根本转变。 是什么力量在推动这场深刻的改革？首先是业务需求的爆炸式增长， 企业数字化转型加速，后台系统营销活动、数据分析看板层出不穷，而且变化极快，传统的一人一页面开发模式，效率瓶颈暴露无疑。 其次，低代码、零代码平台的成熟让非专业人员也能参与到应用构建中来，个性化配置化成为必然趋势。最后，也是最激动人心的是 ai 生成能力的突破。 大模型不再仅仅是回答问题，它们能理解我们的自然语言描述，直接生成结构化的代码或配置， ai 正成为最高效的配置生成器。这三股力量汇聚，共同指向了配置驱动的新范式。 让我们清晰地对比一下这两种范式。传统模式下，前端工程师的核心产出是具体的组建原代码，比如点 view 或点 jsx 文件、 输入式需求文档和设计稿过程是将这些需求翻译成代码逻辑。而新星的配置驱动模式产出物变成了结构化的配置，通常是 json 或特定的 dsl， 构建者也更加多元， 包括 ai 智能体、使用可适化工具的业务用户，以及我们前端工程师。我们负责提供源资组建和物料体系输入，可以是自然语言描述、拖拽操作甚至是业务模型。 核心过程变成了 ai 解析或用户操作生成。配置运行时的核心不再是单纯的框架渲染引擎，而是强大的配置解释与执行引擎。最关键的是变更成本大幅降低，只需修改配置就能实现热更新或快速发布。 为什么配置能够成为连接 ai 与前端的桥梁？这源于两者各自的优势。 ai 天生擅长处理结构化数据生成符合特定模式的 jason 是 它的强项。而前端框架，尤其是物，天生擅长处理试图状态和响应交互。 那么配置，特别是 jason schemer 就 扮演了完美的中介角色。对于 ai 来说，他需要做的就是生成一份描述页面结构属性、数据绑定和交互逻辑的 jason。 而对于前端运行时来说，任务就变成了如何高效准确地解析这份 jason， 并将其映设为对应的组建实力属性和事件监听器。这就是配置驱动饭时的精髓所在。 现在让我们聚焦 vol 三，看看它提供了哪些核心能力来支撑这个配置驱动的未来，我们将深入探讨四项关键技术， import meta glob、 defy a sync component、 component is 以及 suspense。 它们不仅仅是 api， 更是构建下一代配置驱动系统内核的关键源语。它们分别解决了资源发现、资源封装、动态执行以及异步副作用治理这四个核心架构问题。 先来看 import meta glob。 在 配置驱动的世界里运行时，要根据配置动态加载各种组建。这就带来一个挑战，我们不能像传统应用那样在顶部静态音 port 所有可能用到的组建， 直接用字母串拼接路径再 import 是 非常危险的，存在安全隐患，构建工具也无法优化类型，支持也差。 import meta globe 就是 在构建期扫描指定目录下的所有组建，建立一个契约。 它就像国土测绘局提前摸清了我们有哪些可用的组建资源，绘制了一张精确的资源地图。 它设定了安全边界，告诉构建工具哪些模块可以被动态引用，从而启动代码分割、 tree， shaking 等优化并生成静态映设，为运行时提供高效查询的基础。 在领马 spa 这样的平台中，我们利用它来构建平台，组建仓库和业务组建仓库，生成组建名到加载函数的映设注册表。 有了组建地图，下一步是如何高质量地获取并使用这些组建。这就是 define scene component 的 舞台。在传统的单页应用中，它主要用于路由览加载，关注点是减少手包体积。但在配置驱动的 a pass 运行时中，它的角色完全不同。 每个可配置引用的组建都是一个独立的可延迟加载的资源单位。 define a sync component 不 仅加载组建，还管理其生命周期，提供 loading， error， success 等状态，甚至允许我们配置加载策略，比如延迟超时重试。 我们可以封装一个 create advanced sync component 的 函数，加入预加载重试逻辑和日制记录。 结合 import meta 到 globe 生成的组建列表，我们可以构建出完整的组建资源仓库。通过 resolve a sin component 安全的解析并返回一个经过良好风装的异步组建对象， 它就像组建资源的精装师和管理员，确保我们以最佳方式获取和使用每一个组建。 of 的 模板是声明式的，但配置驱动需要动态声明的能力，即根据数据决定渲染什么。 components 正是这个动态能力的语法堂，它的 e 子属性可以接受一个自附串组建名或者一个组建定义对象，这正是我们所需要的。 在配置运行时中， components 扮演了翻译官和执行器的角色，他接收配置节点中的 type 子段，比如 search， 把通过我们之前建立的组建资源仓库找到对应的异步组建定义，然后将其实力化并挂载到 dom 上。 一个基础的 configurer 组建核心就是使用 components 来递归渲染配置数。 为了更精细的控制，还可以引入组建代理的概念，通过 create component proxy 包裹实际组建，注入平台级能力，如性能监控、统一错误处理等，而无需污染业务组建本身。 component is 就是 配置驱动系统的翻译器和执行器，是连接静态配置和动态界面的唯一桥梁。 在动态加载大量组建的 a p a a s 页面中，异步是常态，一个页面可能包含数十个异步组建，它们各自独立加载，完成时间不可预测。 如果用传统的 v ef 加 load 状态管理，会导致状态分散，体验割裂，错误，处理复杂。 我们需要一种声明式的方式来统一管理这种异步依赖集合 suspense 组建就是为此而生。它创建了一个异步边界，会自动等待其边界内所有异步依赖的解析。 在应用入口或路由层面，使用 suspense 可以 轻松实现整夜切换时的平滑加载体验。对于复杂的配置页面，可以将其拆分为多个模块，每个模块作为一个 suspense 边界，独立加载，互不影响。 suspense 还提供了 resolve、 pending 等事件，允许我们在模块加载状态变化时执行特定逻辑。 它与 define a sin component 的 协调工作形成多层次的加载与错误处理策略。组建，即用 loading component 处理微加载状态边界，即用 fallback 处理宏观加载状态。 suspense 就是 异步副作用的秩序管理者和体验协调观，确保在充满不确定性的动态加载世界里，用户界面依然稳定。可预测。 将这四项核心能力整合起来，我们得到了一个强大的运行时引擎，可以称之为凌马 spa 平台的大脑。这个引擎接收来自 ai 或用户的 jason 配置，然后进行一系列关键步骤的处理。 首先是类型解析，根据配置中的 type 字段，从我们之前建立的组建资源仓库中找到对应的异步组建定义。 接着是属性求值，配置中的 props 可能是静态值，也可能是像双花括号 user name 这样的表达式。引擎需要结合当前的运行时上下文 context 来计算出最终传递给组建的属性值。然后是事件绑定， 将配置中描述的事件，比如点击触发提交动作转换为雾的事件监听器，并关联到上下文中的具体 action 方法。 此外，引擎还能进行依赖分析，静态分析出页面所需的所有组建，利用浏览器空闲时间预加载非关键组建。 最后是优先级调度，对市口内或即将进入市口的组建赋予更高的加载优先级，结合异步组建的 low 顶和底类配置，实现感知加载，提升用户体验。 除了核心的配置解释与执行架构上，还需要考虑其他几个关键方面。首先是样式隔离，因为配置驱动的组建可能来自不同来源，必须防止样式冲突。 可以采用 css 运行时注入加强 scope css， 或者使用设计令牌机制，通过 css 变量统一主题。 其次是统一状态管理，维护一个局的响应式 context 对 象，包含局数据、页面状态等，所有组建的动态属性都基于此。求职 还需要一个事件总线或动作层，处理组建发出的标准时间，比如调用 api、 更新状态、跳转路由等，使业务逻辑也能通过配置描述。当然， ai 的 协调关重要，包括对 ai 进行训练和微调，让它生成更符合规范的配置。 利用 ai 生成初步配置，并提供实时预览与调整，还形成生成反馈优化的增强循环。 wu 三的这四项能力， import、 meta、 glob、 define， a sink， component， components 和 suspense 共同构成了一个精妙的面向配置驱动时代的源语集合， 他们不是孤立使用的，而是被有机的组合增强，形成了一个坚固而灵活的运行时内核，这个内核之上可以生长出多种形态的应用。面向业务用户的是直观的可式化搭建体验， 面向 ai 的是稳定可靠的配置执行环境，面向开发者的则是强大的组建生态和扩展能力。 他们分别解决了资源发现、资源封装、动态执行、副作用治理这四个核心架构问题，共同支撑起配置驱动的未来。 这场从代码到配置的范式迁移对我们前端工程师意味着什么？我们的角色正在发生转变，从过去的页面制造者转变为体验引擎的架构师。 我们不再仅仅关心一个按钮的颜色或一个请求的持续，而是需要更关注如何设计一套可扩展、语义清晰的配置协议、如何构建一个高性能、高可用的配置运行时引擎、 如何打造一套丰富、稳定、可组合的组建物料体系，以及如何为 ai 提供最佳的生成预览调试工具链。这不是技术的倒退，而是抽象层次的又一次胜利。 它释放了我们更深层的创造力，让我们能够站在更高的维度去定义人机交互的构建方式本身。 当然，乌三提供的其他特性也在该架构中扮演着重要角色。比如 provide slash inject， 它能实现跨组建、跨层级的数据共享，是解决配置化组建间数据孤岛问题的关键。 组合式函数则有助于将复杂的配置解析逻辑、状态管理逻辑封装成可附用的单元，保持核心代码的可维护性。 对于需要极致动态渲染控制的场景，渲染函数与 jsx 提供了比模板更底层、更灵活的能力。 而自定义指令则可以作为一种轻量级的扩展机制，将一些行为直接附加到 do 元素上。 这些特性共同丰富了我们的工具箱，帮助我们构建更强大、更灵活的配置驱动系统。当然，构建这样的系统也面临挑战。 例如，当页面由 jason 配置动态生成时，传统的基于源码的调试会变得困难。我们需要增强运行时元信息，开发专用的配置调试面板。 动态的 type 和 props 也会减弱。 type script 的 类型支持需要通过严格的 schema 和构建期类型生成来弥补， 同时需要建立针对配置运行时的性能监控体系。但展望未来，这种配置驱动的范式带来了极致的灵活性、强大的生态、对 ai 的 原生友好以及可持续的演进能力。 最终，前端工程师将更专注于构建强大的引擎设计、优秀的组建体系和定义卓越的开发者体验。这不仅是效率的提升，更是前端技术价值的深刻远近。

大家好，这里是和前端小组一起学 view 三原码系列课程。本章节将讲解 dom 系统的第一章， runtime dom 设计。 view 它其实是一个响异式的一个 ui 框架，开发者描述界面应该是什么？ view 负责将这个描述变成真实的 dom， 但是 real 它其实并不仅仅只是一个限于浏览器渲染，它希望能运行在任何的平台。这就引起了一个核心的架构设计，就是渲染什么和如何渲染进行一个分离， 而其中渲染什么就是 runtime core 和如何渲染就是 runtime dom。 runtime core 就是 定义的 diff 算法以及组建生命周期以及通用逻辑等等。而 runtime library 它其实是定义的 dom 操作事件绑定， 这就是浏览器特有的一些行为。这种分离带来了非常巨大的一个灵活性，就是同样的 run time query， 配合不同的平台，实现可以渲染到浏览器的 dom canvas， 原生移动端甚至是终端平台。 而本章节我们将聚焦于浏览器平台，看看 run time dom 是 如何将 view 的 抽象渲染能力落地到一个真实的一个 dom 的。 每个 view 的 应用都从 create a p p 开始，这也就是我们日常最常见的一个 api。 那 么 create a p p 变后代码到底发生了什么啊？我们可以看一下它这个原代码的一个实践。在这一中我们需要注意的是 app 它里面它调用的 ensure， 它是什么？它是它。其实 ensure 它保证了渲染器只创建一次，并且它是一个惰性创建的过程。对，在这它是一个惰性创建的一个过程，只会去创建一次，然后它会返回一个 app， 并且它还会去将 mount 给重写的，就 app 的 mount 好 像是给重写的，它里面去增加了一个容器解析，就 memorize 清空容器，做一些数据属性的一些标题，去做了一些这样子的一个动作。这就是个 create app， 它内部的具体的一个实现。为什么它是要通过 ensure 这个函数去做处理呢？它是它采用的惰性触式化渲染器，只在第一次调用 create app 的 时候创建，它主要是为了一些 tree shopping 就是 如果用户只使用响应式的 api 而不需要渲染层， 那么渲染器代码可以被完全的移除，大幅度的减小了包的一个体积。又提供了两个创建应用的函数，一个是刚刚我们提到的 create app， 一个是 create ssr app。 二者的区别其实非常简单，就 create a p p 使用 ensure render， 它挂载是清空容器， hydrating 就是 force a create a p p 就是 使用 ensure hydration render， 就 保留保留的容器内容，就是附用 h t m 的 hydrating 就是 true。 在 之前我们提到的 normalize container 就是 容器解析， 在这里它其实它 mesh container， 它支持自创选择器 dom element shadowroot， 同时这的 result resultroot name space， 它是会自动地去识别 svg 和 mass massmail， 去确保紫元素在创建时使用的正确的。 create element name space 这里我们需要注意的是，这个 memorize container 自动选择器就是我们最常见的方法，就是井号 a p p 会使用 document script 去查找元素，而 element 是 什么就直接传到 dom 元素，比如说 document 点 get element 百 id a p p， 然后 shared root 是 什么？就是支持挂载到 shared dom 中，而这对于 web browsers 是 非常重要的。 o p s note o p s。 是 run time dom 的 核心，它封装了所有底层的 dom 的 操作，大家可以看到它其实它这边暴露了非常多的一个呃 dom 的 一些方法。 insert remove create element test set element test parent node nest parent data 它其实它只是对一个 dom 的 一个 api 进行一个二次的封装，去结合 view 的 一些内部属性，为什么要去封装它们呢？ 这是为了去做一些跨平台的一个抽象能力以及命名空间的处理，还有特殊元素的处理。在这里我们可以看到它其实内部，它 其实内部它去做了一些将平台无关的 carry 逻辑与平台特定的 dom 进行操作。就渲染器它需要两类操作，就是 node op 就是 元素级别的侦查改杀 patch proper 就是 元属性级别的更新，而这两者进行一个有机的一个结合，去将平台无光源 query 逻辑与平台 dom 的 dom 操作去 结合，而这里就是通过 instant 去传递给 query 的。 create render run time query， 它其实根本不关心节点是 dom element 还是 canvas 对 象，它只调用住读的 note a p s 接口， 就是 render， 就是 渲染层，它其实是 core 加 node ops， 而对于 dom 就是 浏览器来说， node ops 其实就是 runtime core runtime dom 在 刚刚我们可以看到 我们是有一些特殊的一些 dom 的 一些操作，那其中这里面会有个非常重要的性能，就是我们性能优化。我们面试中经常问到的就是编辑器，它会识识别模板中的静态内容，就是我我们之前他在编辑器中提到的静态提升的一个作用， 它其实它会去将它们提升为自常量。自创首次渲染就是解析 html， 自创 tabloud 缓存命中的时候，就是后续渲染就直接会刻入 node， 就 大幅度提升了大量静态内容上的性能。 需要特别提到一点， destet types 就 安全策略，而这个一点我们会将下一个章节会着重去讲。现在的浏览器，它其实支持 trace trishtypes， 这是一种防止叉 s s 攻击的安全机制，它要求所有处理 in the html 的 值都必须经过性能处理。在这里我们可以看到 view 它其实做了什么，它其实它是输出 web， 就是 如果浏览器支持的话，它其实去创建那个一个名为 view 的 trishtype 策略。 当设置 in the html 的 时候，通过 serve to trishtype 来去包装值，这里这里返回的 create html 实现 是简单的，返回的原值就是 real， 它其实是假设传输的内容是可信的，就是来自编曲生成的静态内容。如果 c s p 策略不允许创建重复的策略名，它会去捕获到错误，并在开发中去反警告。 real 三中对 reference 它其实有非常友好的支持度，就 define custom element， 可以 将 real 组建转换为文原生的 cost element。 大家可以看到在这个章节中就 it's cost element， 它其实就定义的就是 如果当在 view 中使用第三方 costemaster， 需要配置编辑器，告诉 view 知识原生标签不需要尝试解析成一个 view 的 组建，而这里它有个非常，而这个就是一个缩减器创建 流程的一个核心，那个逻辑就是 create a p p in sharer 不 存在就可以的去注入 node o p s a patch， purpose 等等，然后包括它的 a p p 重写， mount， mount normalized container， 清孔笼器，执行挂载等等的操作。 time dom， 它是位于浏览器 dom 之间的一个桥梁，它通过 node o p s 封装底层的 dom 操作，通过 patch proper 去处理属性更新，将这家平台的相关实现注入到了 runtime core 的 通用渲染器中， 并且它 create a p p 的 延迟模式对程序员非常友好。这些分层的设计其实是使得 feel 具有了跨平台能力，同时在浏览器平台上保持了高效的盗木操作。而下一章节，我们将深入地去做 hash proper， 去看 cast trace 是 如何被高效地进行更新的。 那我们有些思考题就是用什么 create a p p 设计成以延迟创建缓存机制，它是何时失效的 close shared route 的 问题。 好的，那本次节目就我们到此结束了。好的，本期内容就到此结束了啊，欢迎大家订阅分享以及关注我的频道，我们下期节目再见，我是前头小猪。

用 webpack 手动搭 voe 二项目时， input 点 voe 文件直接报模块及失败。当然这个用 voe 的 脚手架 voe c l i 能很快地跑起来， 大多数时候也是这么用的。实际上这个脚手架就是包装了一下 webpack， 也就是不用脚手架也能跑起来。先讲清楚， wordpack 本身是不认识点 voe， 当文件主键，必须靠 voe load 来解析，它能把点 voe 文件拆成模板、脚本、样式三部分， 分别交给对应的工具处理。当然这里是有要求的，一、 vue load 要安装十五版本，专门解析一点 vue 文件，用十五版本是为了适配 vue 二 啊， v o e templar 的 兼容要和 v o e 二版本匹配，直接用同一版本就行。比如 v o e 版本是二点六点一二，那么编辑器也就直接用二点六点一二就行，这个是负责编一点 v o e 里面的 templar 的 模板。 三、 css 楼的处理一点 v o e 文件里的样式和之前配 css 的 逻辑是一致的，这个少一个都不行。好话不多说，上代码，第一步安装依赖命令行输，这个就行，版本不要错了。 然后第二步，配置 wordpack， 点 com 贝克，点 gs 核心。四、加点 ve 的 解析规则，还要引入 ve loader plug， 代码如下。第三步，写 ve 主键和入口文件，代码如下， 执行 npm run build， 再在 disk index 点 html 里引入版本点 gs， 打开页面就能看到 v o e 渲染的内容，就完美跑通。那验证一下，页面正常显示 wordpack 加 v o e r 跑起来了， 样式也是指定的绿色说明点 v o e 文件解析模板编辑样式处理就全身下了， 这里就是闭坑要点，一， v o e load 版本别错， v o e r 必须用十五版本装罪行的版本会直接报错，它是解析 v o e。 三的啊。二，必须将 v o e load plugin 上了这个插件， v o e load 是 完全不工作的。 三， v o e templar and comforter 版本要和 v o e r。 一 致，不然模板会变异失败。

在 view 中，可以通过内置的 keep alive 包裹动态组建实现组建缓存。它的作用是当组建被切换隐藏时并不会被销毁，而是保留在内存中，下次再次显示时直接从缓存中恢复， 避免重复创建和数据重新加载。使用方法很简单，只需用 keep alive 标签把要缓存的组建包起来即可。例如在路由切换或 tabs 切换场景中包裹 router view 或动态组建就能让页面保持状态，比如滚动位置、 表单输入内容等。还可以通过 include 和 exclude 属性指定哪些组建需要缓存，哪些不需要避免无谓的内存占用。被缓存的组建会多出两个生命周期，勾子 激活时 activated 和停用时 deactivated 可用于替代 created 或 mounted 的 中的逻辑，比如在激活时刷新数据。需要注意的是， keep the life 指对直接自组建生效 且适用于状态需要保留的场景，合理使用能显著提升用户体验和性能，但过度缓存也可能增加内存负担，因此应根据实际需求选择性起用。

动态路由的具体处理方式？动态路由呢，大家在处理的时候先回到，记住了啊，先回到我们的这个路由文件， 我们的路由文件的数据来源呢？来源于刚才写到的同一组公共数据，哎，所以把我们的这个公共数据呢，先在路由文件里面呢导入进来，记住没，他们里面来源的是同一组数据啊， 好，导进来了啊，导进来了以后，你说我这个时候在里面应该干一些啥呀？啊，我们来想一下 你现在看到的这些，这些实际上你看啊，我们一直到这，哎，准确的说应该是到这啊， 这个数据呢，相当于都是我们现在在里面静态写的吗？我其实希望的是现在把它呢变更，为什么变更为动态的， 所以说我们在这个位置一会是不是要把它全部都给删掉，但是我在删掉它之前呀，简单的我们先注视一次啊，先不给他呢，哎，删的那个太多，因为我一会还有一些地方要参考一下，我们保留一个吧，对，跟他把一个呢保留下来， 这样呢，有些小伙伴能看的比较清晰啊，这样我们的数据呢，它是这样的，在里面呢添加这个子集，然后子集里面包含的结构呢？它是这样的。好，我现在先把这块能看明白。 那么我们的这个路由的数据配置呢？有些小伙伴知道他放在我们的这个叫什么叫 rose， rose 呢，说白了他是一个数组对象， 也就说我们的这个路由的配置像呢，实际上是一个数组对象，是不是？那我现在拿到的这个数据要在里面动态的去配成路由的这个数据，我们想一想他应该怎么去做呀？啊？在这个位置应该怎么样去做好我们接下来要干的事。就是啊，根据我们的这个数据 生成我们的路由配置，对不对？好，那我现在在里面呢先要把，哎，就是说白了我们要把这个首页先给大家选出来， 因为有可能我们里面还有别的页面啊，就是我刚给大家看到的里面只有一个首页，没有什么登录，你万一在里面还有登录页，我的页或者别的页， 包括四零四五零零，是不是？所以我们一般静态的这个路由里面呢？它会包含一些，哎，就是其他的一些页面， 那我现在要添加针对的是我们的这个首页，所以我一会再选的时候，先把我们的首页呢选出来。 那我在首页里面是不是要添加子集呢？要手动的添加一个求准进来，对，要把我们的这个求准添加， 那么求准里面他是不是一个什么？是一个数组，然后呢我们再循环便利数据，把这个数据呢放在我们的求准里面是不就可以了？好，有了这样一个思路呢，这块我们在写的时候就很好写了啊，来先给大家写一写啊，那我们第一步呢应该是先 筛选我们的这个哎， home 对 不对？先把我们的这个哎，就是 home 页呢，先给大家筛选出来。好，那写到这个位置，我就边跟大家写的时候，我们先把这个配置呢先给大家写出来啊， 好，这个呢针对的是我们的首页的路由配置，首页的路由配置在选的时候，根据我们的这个路由配置项是不是根据它啊？那我在这个位置呢，直接跟大家写到了一个叫什么哎 feel， 我 们根据它呢来进行相关筛选， 那你说我在筛选的时候这个位置怎么样筛选，筛选我们的这个路径是不是？我是不是要根据路径，它一定要等于等于这个哎？ home， 哎，要等于的是它，好，我们把它呢写进来， 那这样筛选完了以后，我们其实就已经可以拿到了筛选的这个首页模块，那这个首页模块拿到之后，我想在它里面添加一个求准，我们现在筛选的它呢是一个什么受阻，所以我在里面呢取了它的第一条， 完了之后我们接下来要干的事就是在它里面呢追加，好，我们来给大家写一下，就是哎，添加这个，瑶瑶，等一下啊，好，添加求准，是不是把这个 哎求准属性呢？添加进来，好，我们刚刚写的时候它里面的这个哎求准，你直接的添加，默认情况下呢，它就是一个什么？是一个数组， 好，那把这个写完了以后，我接下来要把我们也就是说获取到的公共数据循环便利的全都在我们的 q 准里面增加， 那你如果拿到的数据有十条二十条，我们的这个 q 准里面是不是又应该配个十条二十条？所以说我第三步要干的时候是干什么在里面呢？循环便利，哎，我们这个时候相当于啊，就是那个， 好，我这样写啊便利数据，是不是哎，然后呢？追加，追加到我们的求准，哎，把它那个追加到里面来， 好，我们要便利的数据，便利的是不是他？我在这个位置呢，要不直接跟大家写到的就是咱们的 for 一 起循环便利啊？好，你看我在循环便利的时候要干到瘦瘦干什么？ 因为我们要把这个数据给大家追加进来，实际上你要追加追加的是他吗？所以说在里面呢，你就直接的咱们这样写就行。那我具体要追加的这个数据结构是什么样的？哎，就是你刚才看到的，那在这个位置你就把这几个呢依次的都给大家放进来，放完了以后我们上面这一块就可以写了， 因为我们要那个处理的数据呢，一定要符合我们的路由的这个数据的格式要求，所以大家一定要记得以后你里面的数据配置有多少。 实际上我们进入到这个路由以后，看到的仅仅只是这几个，别说里面就只有一个首页，其他的它都是属于什么动态的生成。 好，那我现在要把这个数据动态生成的话，它是不是要变更为我们需要的这个格式啊？啊？里面拥有这个 u i l 的 值，对不对？好，在这个位置呢，跟大家也写一下咱们的这个，哎，我看一下这一方我写的名字叫什么？瞄眼啊， 我们的名字呢，还不是这个 name 啊，他取的是他的什么？哎，这个标题的纸好行啊，在这个位置呢跟大家写一下，然后呢在我们的数据里面还看到另外一个就是我们还会处理他的主键， 因为这个印色的主键呢，他肯定不会是固定的，所以在这个位置有一些小伙伴写的时候也一定要留意啊，稍不留意的话，你在这个地方可能会把我们的这个主键信息呢，哎，就是那个添加错 前面的结构呢，咱们实际上都不会发生变化，变化的一般都是谁，是他是不是把他呢给大家改变一下啊？好，我在里面有我们取到的这个纸张在里面呢，给大家写入进来。 好，我这样写完了以后，如果我们的一级数据要是可以了，那就证明我刚才的动态添加方式呢，是对的，来给大家测试一次啊。好，我们现在点击首页。哎，你发现首页是不是有了统计管理、财务管理是不都可以，所以刚才写到的这个循环便利 已经把我们的一级数据呢，动态的在我们的这个求准里面添加了。所以有一些小伙伴你要对比一下我们最开始的写法和现在的写法， 现在这个写法它是不是灵活了很多？因为我们在处理这个数据的时候，如果说它里面要是突然之间多加了一条， 我其实是不需要在路由里面去干什么事的，对不对？你多加你就加呗，路由里面反正它是循环，你就算多加十条，我的路由也不会有变化，因为我会自然的添加十个配置项， 甚至于你在里面对这个数据进行减少了，我也不会有任何处理，因为我们是爱动态的去处理这个数据。好，那我现在跟大家写到了一二三条，但是我们的这个产品管理的订单管理， 包括会员管理里面的子选项，我们仍然不能点击，为什么他不能点击呢？因为你刚才在那个循环的时候，我们里面实际上是没有处理这个子级的，就继续的后一级数据是不是？好，那前面的一级数据处理思路一旦具备之后，我们接下来就来看一下， 我要是在里面循环或者是递归去调用的话，这个位置咱们怎么去做？同时呢我也要跟有一些小伙伴们强调一下，就是以后你只要看到无限极，有一些后端是这样的，他说 我把这个数据给你分了层级给你，那你前端开发不就是直接的选那个展示我的层级数据就可以了吗？其实这个是一个误区，就是服务端如果是把我们的数据已经变成了有欠套层叠关系的，就这种层级关系的， 实际上我们前端在处理数据的时候也是要对他进行循环、欠套循环或者递归等等处理，而并不说我直接的显示，因为毕竟你的数据里面有可能要循环第一个的，第二个的，第 n 个的，对不对？好，那如果是服务端他这个时候返回的数据没有去处理我们的这种 层级欠套关系的话，那实际上我们前端也是需要把这个数据先处理完了以后，然后再不停的循环或者是递归调用。好，那既然刚才跟大家写到的一级呢，咱们已经清晰了，那你说我现在在里面要是处理 无限极啊，我们接下来怎么做呢？好，我们现在要给大家看到的就是便利这个数据追加，但是我们要考虑到什么？无限极他的这种处理方式。好来给大家写一个无限极，说白了就是我们要递归嘛， 先把这个呢先给大家写在这，然后我们思考一下啊，我既然现在数据里面的结构都是相同，但是呢，里面可能会有 n 个这个子集的出现，是不是 啊？好，我先回复一下我们啊这位小伙伴的问题啊，他说什么时候讲登录和这个霹雳呀，霹雳呀呢？我们明天会讲到登录，我想一想啊， 嗯，权限管理里面就是刚才在我们直播间问到的这个权限管理里面呢，我们是都有的，对，你可以找我们的管理员要一下权限管理，你提到的登录页还有我们的霹雳啊处理 这个内容呢，在我们的权限管理里面咱们都有聊到。嗯，权限管理，不知道最近有没有跟大家去安排，反正本周没有啊，如果说你需要这块呢，直接找我们的管理员可以领取一下这个权限管理相关的。 好，刚才在直播间问到这个问题的小伙伴，哎，就是好，那个月当空小伙伴， ok， 你 get 到没？嗯， 好，呃，然后呢？再就是啊，你说怎么样领取啊？好，我先回复一下上面啊，有小伙伴说想找一个写代码的开发网站，那我们现在跟大家聊到的就是这种管理系统， 是不是好，这这个这样的人多啊，挺多的啊，如果有些小伙伴有相关的一些其他问题的话，来，我在这个位置跟大家写一下。嗯， 对，比如说有些小伙伴那个想要领取，就是有一节叫权限管理啊，刚才你提到的问题啊，你直接的加这个管理员，加了我们管理员以后，然后呢，你留言啊，留言，你这样留就是领取这个权限管理的这个资料， 权限管理资料里面有说啊，哦，我们的管理员啊，有些小伙伴不知道这个管理员怎么样去加，是不是来给大家写一下啊？ 啊？九二零 i t i t 九二零，对，你直接加了就行啊，加了以后呢，然后直接的跟管理员就是留言，你就留这一个这一句话就行啊，领取权限管理的这个资料，要不然像有些小伙伴你加了之后，你不留言，具体领取哪一个我们 不好跟你分享的，因为大家都知道我们在不停的产出，特别是像有一些小伙伴说我要领取 vivo 三资料，这这个范围太广了，是不是每天给大家产出的都是 vivo 三的，那我们也不知道你具体需要的是哪一套的？嗯，好，明白没？明白了可以小姨回复一下啊， 领取资料哦，我现在跟你说的这个领取呢，是不需要任何米的啊，免费的你就可以分享给你啊，你要需要的话你直接的加那个管理员了，以后呢，这个是免费领取的啊， 好，那刚才跟大家说到这个位置呢，我们现在的这个呢，是满足不了这个无限极的，是不是？所以我们接下来呢要把它变更为这个无限极的处理，我们来看一下啊，无限极的处理如何去做？

当然要考虑无限极，那我在这个位置地规地规的究竟是谁？有些小伙伴先把这个问题呢放在这，咱们想一想。 好，我们再来把这个二级就是有子级的数据呢，给大家放开，上面这个是没有子级的啊，大家一定要记到。好，你说我现在在这个地方 就是我们展示的这个菜单，它要么呢有子机，它要么呢没有子机。你不可能说我的这个数据又有子机又没有子机，这句话好像说不过去，是不是？那像这种又有子机又没有子机，我们在里面的判断条件应该怎么样写？ 我们是不是根据刚才看到的这个七二的来进行判断呀？我在里面呢写一个 v 杠 if， 那如果说你当前的这个数据里面没有其二的，代表的就是我们没有子机，是不是？那它在里面呢代表的就是有我们的其二的，哎，我在这个地方呢给大家添加一个 vega else 就 可以了。 好，我们其他的一些写法呢，实际上都是一样的，比如说你当前的这个，哎，就是 index 的 值。好，包括我们在里面写到的这个动态的图标，对，大家一定要记得这个位置呢是一模一样的。 还有就是我们在里面的获取到的这个名字的值是不是跟大家一样的？写好，写完了以后你会发现这个位置我们又要跟他添加的时候，有没有小伙伴看到和我们上面的代码它实际上是 一模一样的？那我肯定不可能把同样的代码在这个位置呢又一次写一遍。所以说我们需要在这个地方要干的一件事是什么？对，有同学说的非常好啊，就是地归 主键爱，对，我要对这个主键呢进行递归。那你想一下，我们现在要递归，递归的是谁？递归的是不是他自己？ 自己调自己吗？是吧？递归是不是这样的？好，我现在要调的是谁？调的是你的这个哎， live item， 对 吧？我要调用的是它，我们把它呢先写进来。 那我当前在调用的时候，由于我们的这个子集数据里面，它也同样的是一个啥，是一个数组，所以我在这个地方我就跟大家这样写了， 你拿到的应该是它的七二的值，然后我在这个位置呢，直接地跟大家获取到它里面的 url， 同时我们在这个地方还要跟大家传参数，但是它的参数呢，跟我们刚才在这个 level 里面传的就不一样了，你传的相当于是负的这个地方，我们传的是它的子的内容。好，把这个写完了以后，我们再来看一下我们的导航菜单， 我不管你里面，哎，你看好我们当前写到这个位置呢，给大家瞄一眼啊，有没有这个子集的在这个位置就是无论是你多少层级，我们是不是都可以展示了？ 所以有一些小伙伴就说，我们的这个导航菜单，如果要是啊，比如在定义的时候可以无限级的去添加的话，那在我们的这个菜单处理上面，咱们应该怎么做呢？刚才给大家说到的就是我们的处理思路， 这你看现在的数据，一级，这个是二级，这个呢是三级。哎，你要是在我们的菜单里面，就是我们刚才看到的数据里面继续的追加这个子级的话，他的子级数据呢，是一样可以添加的啊，比如说我现在在它里面追加子级， 那具体的最佳方式在哪里？在这啊，比如说你现在要在首页里面添加自己，只需要在里面呢写出一个什么 char 的 就行。好，假设我们要在 char 的 里面继续添加自己，你在里面呢同样的方式，它里面呢添加我们的 char 的 就可以了。 把这个子集添加完了以后，在我们的导航菜单里面他是可以直接看到的，简单的给大家演示一下啊，你看，假设我现在在这个地方要跟大家这个放入我们的子集菜单，你看在这个位置我们是不是有写，对吧？好，我现在里面的要跟大家写到的。是啊，咱们的啊，巧呦，等一下啊，我们的这个叫什么？ 七二的对不对？好，七二的呢，它是一个数组对象，我以这种方式呢，直接给大家往后面去放，当然在里面，像我们的这个路径呀，哎，包括里面的什么，比如说标题、名字呀这些你要变更的一样得变更，你不变更的话，它这个位置呢是会出现冲突报错的。 好，你看我再点，我们的产品管理、订单管理，大家是不是看到了有子集，所以你只需要去改变我们原有的数据，我们的结构，它会自然变化，要不然现在跟大家说要把这些写成公共， 那到时候啊，就是像你在开发的过程中也好，咱们就是在接活的时候也好，如果因为别人的导航菜单肯定跟我们现在的菜单不可能是一模一样的，图标也不可能一样，那我其实把这块一旦写好了以后， 我们以后只需要修改的是什么数据就可以了，是不是啊？你现在在里面你要看到的数据是其他啊？那咱们就改变这个数据，改变图标， 其他的方面你要改吗？咱们是不需要改的。好，我刚才说到这个位置，我不知道小伙伴们呢是否已经 get 到了，来，如果 get 到的小伙伴，希望这个地方大家可以小意回复一下。经过了我们一系列的处理以后， 咱们的无限级的导航菜单呢，已经可以正常展示了。还是那句话，要改变他的层级以及我们的数据结构，你只需要在模板里面就是我们的数据模板中改变数据即可，我们的结构不需要做任何处理。是不是 好，非常棒啊，先感谢一下呢，咱们直播间小伙伴能送出的小心心啊，还有我们点亮粉丝团。好，你们的小心心点亮粉丝团呢，我这边都已经 get 到了啊，刚才说到这块有没有小伙伴有什么疑惑的？ 那没有疑惑的话，我们接下来是不是导航菜单就已经完成了呢？很多很多小伙伴觉得导航菜单没有什么复杂的呀，就像你的导航菜单，他还有一个作用是什么？就是 菜单吗？你在点击每一个选项的时候，我们还需要右边同时去展示他的这个子内容，那我刚才在跟他点首页统计管理、财务管理的时候，大家发现这个位置展示的都挺好， 我们继续来跟他再向后面去进行点击啊，好，假设我现在在里面点击的是订单管理，你会发现空白页了， 我们再来点一下，会员管理里面的会员列表仍然出现了空白，我们继续点击啊，会员详情也没有，包括我们在会员这个创建会员里面的创建管理员也一样的发现呢，什么都没有。 那为什么会出现这种情况？就是我只能前面三个去点，说白了就是没有子集的，我可以去点， 一旦我们里面有了这个子集，我就不能点了呢？这个是什么样的原因造成的呀？啊？有同学问我说，咱们讲的是 vivo 二吗？啊，我们讲的是 vivo 三啊，不是 vivo 二。嗯， 好，问一下有些小伙伴，就是我刚才在给大家聊的过程中，为什么我们只有前三个点的时候，我们的右边可以正常地去展示我们的这个内容， 但是我在点击，比如说那个有子集的产品管理，会员管理的时候，他会出现空白，有小伙伴知道这个原因吗？哎，如果知道原因的小伙伴可以简单的说一下，为什么会出现这种情况？嗯，对，想一想为啥会出现这种情况呢？ 对，有坨说的是对的啊，路由没配，是不是路由没配好，我们再一次给大家呢，回到我们的路由，在我们的路由里面，因为我们只配了这几个，所以为什么说咱们权限管理很复杂，包括我们的导航菜单处理起来挺麻烦， 因为你的导航菜单他需要和我们的路由配置完全匹配的，说白了就是这样的啊，就是说你的导航菜单里面如果有三个菜单，那么我们的路由里面就应该配三个， 如果你的导航菜单有子集，那么我们的路由里面的配置他就应该有子集，这句话不知道你们能否明白， 因为我们在处理的时候，他的这个层级关系和我们的路由里面数据的配置层级关系是完全相符的。好，那我刚才跟大家说到咱们的产品管理，我们也来测试一下这个啊，把这个测试完了以后，有些小伙伴看明白了，后面咱们就清晰了。好，刚才给大家写的过程中， 我们来写一下我们的这个产品管理里面的订单管理，来把这个路由给大家配一配啊。好，你看我们的产品管理在哪一个啊？产品管理呢？他是在这个，是不是由于我现在在里面呢只配了一级，所以我们在点击的时候子级呢是看不到。 那有些小伙伴说，你里面要是有子集的话，我们需要做到的就是添加一个球准，然后把我们相关的这个配置呢直接的放进来。好，你看我在这个位置呢来给大家放一个啊，我们里面呢没有子集了，这个球准呢我就给大家删掉， 但是并不是说你复制粘贴完了之后，这个位置呢我们就可以正常展示了。刚才在给大家点击的时候，你们可以看到我们的这个路径的地址，对，要把要要把这个路径的这个地址一定要记得放过来， 这个名字呢，小伙伴们只需要记得你在起的时候不要相同即可，究竟在这个位置起什么样的名字呢？都行。好，包括我们的这个路径啊，那我在这个位置呢也要把自己路径给大家添加好，添加完了以后你看我们再来啊，我页面同样的给大家刷新一次， 我们原来点击产品管理订单管理的时候，他是会出现空白，你看我现在点的时候，在我们的主体这个内容中，是不是已经可以正常的显示订单那个菜单管理了，对不对？你看财务管理、统计管理首页，但是我们这个时候点会员管理他就不行。 有同学为什么会员管理里面不可以呢？因为在我们的会员管理里面，你写的时候只有一集，你想它里面要是拥有这个子集，我们要用同样的方式在里面呢，添加求准，然后再把我们的路径呀，包括我们映射的相关组建信息都写进来， 那由于我们的这个里面还有子集，包含子集对不对？你看在这个地方他会麻烦一点点。首先会员管理里面有创建会员，创建会员里面还有创建管理员， 所以相当于他这个地方的包含的就是不停的去嵌套啊，一个嵌套，嵌套，嵌套对不对？他是不是应该是这样的一个关系？好？当然这个位置我们肯定不可能像刚才写的时候一步一步的跟大家去写，那万一我的菜单数据现在发生变化了呢？ 你又要在这个位置一个一个去变更吗？大家一定要就是我们在写这个数据的时候考虑到一个问题， 如果这个数据是由服务端传过来的，那我们的处理方式和处理思维上面是不是会有一些不同？是不是这个呢？大家需要考虑啊。好，那刚才跟他在说的过程中，对于我们的路由配置一旦了解，接下来我们要干的事就是 把路由里面的这些数据全部都给大家删掉，变更为动态的处理。根据我们的数据，我们会动态的生成路由的配置， 比如说你的数据里面写到的是无限极，我们就配置为无限极，你要这个位置只有一级，那我配的时候就只有一级，你里面有十条，我就配置十个，你里面有一百条，我就给你配置一百个，并不需要我们自己在里面手动去完成，这样的话， 我们到时候导航菜单的数据和我们的路由配置数据完全来源于同一种数据，是不是就满足了我们的要求，对不对？好，所以刚才说到这个位置，如果说都了解了，我接下来就要把这块给大家删掉了啊，删了以后我们要看一下动态的处理 好。我不知道这个位置跟他说了之后，小伙伴们呢是否能明白，因为有一些小伙伴以为说，我看到页面上面已经把这个导航菜单展示完整了，就代表我们这个位置已经可行了。不是的啊，因为你还要点嘛，点完了以后我们的路由里面还要去配嘛？ 而且呢，我们肯定不可能都写静态的，那万一数据变了，你在里面又要手动的去改，这样的话挺浪费时间，而且也不制冷，是不是？好，我们来看一下。

new 开发的兄弟注意了，是不是一座大数据表格就卡成 ppt 实时数据，想加个高量还得手写一堆大 m 代码？今天给大家分享个宝藏，组建 s t k table view， 专治表格性能拉胯，高量难搞的问题，直接分神。 先看这性能，传统表格渲染上千条数据卡到没法用。它内置虚拟列表，只渲染格式区域，上万条数据滚动都丝滑如得福。而且 view 二点七和 view 三通知 老项目不用重构，直接用。最香的是实时高量一行代码就能给变化的行单元格加动画，颜色，时长随便调，不用碰原声档，完全贴合 build 的 开发习惯。 官网还有在线 demo， 点开就能改代码看效果，新手也能秒会，感兴趣的赶快去试试吧！觉着有用的话记得点赞收藏关注我，专注分享有趣且实用的互联网科技资讯。

嗯，好的，我们现在在这个视频可以给大家来介绍一下这个 view 的 一个新的特性啊，就是依赖注入啊，假设我们现在这里有一个 demo 主键，对吧？ 好，然后我们这个叫做 demo， 对 吧？然后我可以给他来一点点的样式， 加一个这个颜色，然后我们把这个主键给引入进来。 好，行，呃，这个 nice 的 话我们不用它。 行，然后可以加一个圆角吧， 啊，这样看着会舒服一点，不用那么大。嗯，好的，然后呢？我现在又有一个主键叫做，呃，可以说是 demo 的 一个直主键，我们就叫 demo demo 吧。 然后这个时候呢，我就希望啊啊，我这个 demo 主键在这里面。那首先我们导入一下这个 demo 主 demo 主键啊，我们在在这个这里面。 好，我们把这个 h 的 颜色也改成这个，那我们改成这个颜色啊。行，这个就是我们弹幕弹幕组间里的。那我现在有一个需求， 就是在这个 app 点 view 这里，就是希望我 app 点 view 的 一个，比如说我的 gs 参数 啊，就是我这个这个 demo 的 一个副主建里，那也就是 demo demo 的 一个。呃，你可以说他的爷爷主建嘛，对吧？ 我希望在这个主键里把这个参数呢传递给这个弹幕弹幕里面。这里，那我怎么实现呢？那其实很多人在就是看过前面的视频，你已经有思路了，就是那我可以把这个参数先传递给我，先传递给我的这个弹幕主键， 然后再通过这个 demo 主键再传给这个 demo demo 主键。啊，有一点套啊，然后其实这样我觉得会让你有点累吧。嗯，所以这就是我们要解决的一个问题， 然后关于这个问题的解决方案其实并给我们了啊，我们可以使用依赖注入啊，我们用这个 provider 我拍的，然后我们首先这里要有一个键名，然后再把我们这个参数给参数给传进去，这个是我们的键名，然后这个是我们的参数，就是这个变量，然后在这里我们 inject inject 叫注入嘛，然后这个叫做奈，它，其实你可以把它当做一个参数来去接收它。 好 啊，然后我们现在用这个模板语法给渲染出来，怎么样？这个 name 它就直接传过来了吧， 我们中途呢？嗯，中途呢，其实也没有依靠这个 demo 主键，只有只只写了这一个 provider， 对 吧？然后就把这个变量给传传递到这个 demo demo 这里啊，事实上啊，你 demo 的 一个执主键也可以通过 呃，这一层 inject 来注入，怎么样？是不是觉得非常的爽呢？嗯，当然啊，其实在这里有一个最佳的实践， 你有没有觉得这样写这个 name， 呃，好像可以，但是又觉得不是特别的好啊，万一我在这里，我知道是 name 啊，但是我有一个习惯啊，我把喜欢把这个 name 大 写，首字母大写，是吧？ 啊，就是万一你哪时候不留神，那你可能要花个时间找一找，这样会让你有点累，对不对？然后这里有一个最佳实践，我们可以把所有的这个键名都放到一个文件夹， 那我们就叫 single 点 ps 吧，然后我们可以用这个，我们可以把我们的这个键名，比如说就叫奈给导直接导出，当然这个，呃，然后我们可以直接在这里用， 当然这么多个奈，其实啊不是特别好啊，我们改一个标签嘛， 我们叫做，呃，要不就说 swibn 吧，其实就是 simbo 的 意思嘛，然后我写了个简写， 好，这样我们导入是不是就永远不会写错了，对吧？然后我们也直接在这里注入，这个 看，其实这样的用法是一样的，只不过这样更方便我们管理。当然其实你在这里用制服创呢，其实也不是特别的好，我们不是有一个数据类型吗？叫做 single， 它其实就是给我们做标签用的嘛，这个不用用啊， 我们我们这样，这个其实就是我们的一个最佳实践了，这是我们 es 六的一个啊， es 六之后出来的一个东西啊，应该就是 es 六出来的 啊，这个就是我们关于依赖注入的一个最佳实践啊，然后依赖注入的内容其实也是非常的简单嘛。啊，然后这个视频就介绍到这里，拜拜。

权限管理呢，是我们在开发的过程中，应该说后台管理系统必备的那个功能对不对？那这样一个比较高频的需求，我们在实际开发的过程中具体要去做一些什么呢？所以我们今天呢也跟大家来聊一下权限管理 啊，用到的是 vivo 三和那个 android plus 的 一个结合，然后呢想去跟大家详细的聊一下动态路由以及我们的多角色权限管理它的具体处理 啊，由于那个权限管理呢，涉及到的文件或说我们涉及到的相关的一些处理会比较的多吗？那所以这块呢，会给大家分为上下两个部分，如果有些小伙伴想了解这块的话，今天明天两天呢，我们将会给大家聊到这块啊， 好，那提到这个权限管理呢，先给大家简单的说一下，究竟什么是权限管理啊？有一些小伙伴就就会问嘛，说，哎，究竟我们如何去理解这个权限管理来先给大家呢，通过这个文字我们简单的说一下啊，好，我们刚刚提到了一个非常重要的问题，就是什么是权限管理，嗯， 为什么在面试的时候会比较容易被问到这个权限管理呢？先给大家简单的聊权限管理，他也就是说我们在可以这样理解，就是 你相当于那个登录啊，我们的这个管理系统的时候，哎，当然并不见得一定针对的是我们的管理系统，比如说各种应用 app 是不是，那他的这个权限是不一样的，对不对？这个呢相当于就是我们的权限管理，那简单跟他说啊，如果说你要是以这个哎管理员的身份，我们要是以管理员那个身份 这个时候登录的话，可能会看到的一些，比如说啊，能够拥有什么删除啊，编辑啊，哎，包括添加呀，或者是等等各种那个权限。 但如果说你要是以其他的身份，我不是以这个管理员的身份，我要是以其他的这个身份登录，那我们看到的会不太一样，这个就是典型的权限管理系统，对不对？好，那我刚跟他说到这一块，就什么是权限管理系统？ 权限管理系统就是权限是不一样的，那如果以管理员的身份登录，哎，比如说我们现在登录了以后，可以 啊，拥有那个，好，我随便跟他在这个位置写啊，比如说真啊山改茶，对不对？那如果我要是以其他的这个身份啊，要是登录呢？可能只哎就是只能查看 这个，是不是就是比较那个典型的，当然我们在跟他说到这个位置的时候呢，仅仅只是针对于我们刚说到的真山改茶， 那除了这个镇上改查以后，我们刚说到的权限管理，他还包括哪些呢？权限管理呢？比如说我们的这个菜单，哎，就是菜单权限， 什么叫菜单权限啊？比如说我现在啊，要是以这个管理员的身份登录进来，我们可能看到的这个菜单会不一样 啊，如果你要是以其他的身份登录进来呢，那我们看到的还会，哎，更加的不同，是不是会少一些啊？肯定管理员他的这个身份呢，会更多。好，那说了这么多，对于这个权限管理，我们现在有了一个大概的了解之后，接下来呢，我们来给大家看一下相关的有一个需求啊，有些小伙伴呢可以看一下这块 啊，在跟大家把相关需求打开以前呀，我们现在呢先来给大家看一下，就是针对于我们后台管理系统具体页面以及我们的这个角色。 刚才我们提到了两个角色吗？一个呢是那个叫什么管理员，另外一个呢是其他会员，对不对？我们现在的角色呢给大家分为了有三个， 第一个呢叫超级管理员，第二个呢叫 vip 会员，第三个呢是游客。所以在我们很多很多管理系统里面，其实对于这个角色呢是比较常见的， 比如说你现在想开发一套这个啊，就是管理系统，那么我们希望有老板的角，那个角色，然后呢有管理者的角色以及有员工的角色，对不对？那就是我们现在提到的三个不同的这个角色， 也有可能我们的角色呢会变得更多啊，甚至于呢还会把这个管理员呢拆分为啊管理员，可能他的级别等级不同，是不是审核管理员呀，或者有的管理员呢？是啊，那个有一些其他的权限的。好，那刚才跟大家说到这块，也就说我们现在从登录页 先在输入你的这个用户名和密码信息的时候，会有一个判断角色，看一下你的角色呢，究竟是超级管理员还是会员以及游客。 那我们要是以三个不同的角色登录进来了之后，我们进入到的首页会在展示上面有什么不同呢？当我们进入到首页之后啊，首页呢，我们现在会根据三个不同的角色展示不同的那个菜单， 如果你要是以超级管理员的身份登录的话，我们能够看到的那个看到的菜单就是首页统计管理、财务管理、产品管理、订单以及会员管理， 这个呢是超级管理员他的权限能看到的，那如果你要是以会员的身份登录呢？我们只能看到首页统计管理和会员管理。 说白了就说你要以超级管理员的身份登录，我们可以看到六个菜单，你要以会员的身份登录，我们只能看到三个，那如果我要是以游客的身份那个登录进来，我只能看到一个，看到一个首页，对不对？其他的呢？咱们都看不到，好， ok， 这个图能看明白的小伙伴可以小一回复一下 啊，如果有些小伙伴这个图看的不清晰啊，或者说有什么样的疑惑呢，可以问啊，因为一般我们要做这个权限管理，像这样的一个流程图呢，我们是需要先看懂的，能看懂不？好，非常棒啊，看到了很多小伙伴的这个小一回复，哎，这，这个应该能看懂，对不对？ 好，那也就说我们刚才给大家展示的这个图一定一旦看懂了之后，接下来我们就要结合我们的这个，哎，就具体的一个效果呢，去给大家展示。 好，现在你们看到的是我们的这个项目效果，项目效果，因为刚才跟大家演示就是我们看到这个图的时候，里面实际上是有两个页面，一个呢是我们的登录页，一个呢是首页，所以当我们进入到相关效果之后，先给大家出现的是登录页， 登录页呢，其实不管你是以超级管理员还是以会员，或者说我以游客的身份登录进来， 我们的登录页都一样的啊，他不会说啊，你是那个超级管理员，你的登录页不一样，那不会啊，都一样的。那如果是啊，不过我跟他说到这个位置呢，有些小伙伴你要明确，就是我们作为前端开发， 我没有办法通过这个用户名和密码直观的判断他是超级管理员还是会员或游客，这个咱们前端是判断不了的，那这个判断他是由谁来判断呢？肯定是发送请求服务端来进行这个，哎，就是判断处理， 那如果是我们的这个项目变得比较复杂的话，相当于我们首先拥有的第一个权限呢，是超级管理员， 你以超级管理员的身份登录到我们的后台管理系统之后，我在里面是可以去配置我们的会员和这个游客的，明白没？哎，就是你相当于在里面呢可以去创建，比如说会员或者是创建游客，那么我们创建的这个身份是什么？ 你在里面登录的时候，他的角色呢，就会按我们创建的来。好，所以刚才给大家看到的这个呢，是咱们的登录页， 那登录页完了之后，我这个时候因为不同的这个角色啊，我们可能看到的这个菜单选项不一样，所以我们进入到我们的这个首页之后，如果你要是以超级管理员的身份登录进来，那你现在看到的就是我们这样的啊，里面呢有一二三四五六个啊，六个这个菜单。 那如果你要是以 vip 会员的身份登录进来，我们这个时候看到的菜单它只有三个，同时你要是以游客的身份登录进来，我们现在看到的只有一个，是不是看到没，哎，是不是只有一个？ 好，那个有小伙伴在我们直那个直播间呢，问到了 n g 啊， n g 例子的问题，那我是我们是前端啊，跟大家聊的是前端相关的，像有些小伙伴呢这一块建议呢 可以去啊那个查询一些，比如说后端开发或是运维开发相关的。好，那我刚才跟他说到这块这几个呢，就是我们的具体界面，包括我们刚才提到的整个啊，就是不同的一些角色，不知道小伙伴们呢是否已经清晰。 由于我们的那个后台管理系统没有比较复杂的去啊创建这个会员和游客，所以我在里面呢把三个啊，我们现在看到的三个角色呢，先给大家那个简单的固定一下。好，我们刚才提到了这个角色的问题， 哎，来给大家说一下这块，就是我们现在呢有那个角色呢？是有三个角色啊，哎，有三个，那么哪三个角色呢？第一个呢是刚说到的超级管理员，对不对哦？管理员， 第二个呢是我们的这个哎， vip 会员，第三个呢就是游客，是不是哦游游客啊，好，我们先把一二三三个那个身份呢给大家写进来， 那么三个身份写进来了以后，由于我们没有这个后台管理系统去创建，所以有一些小伙伴这个位置呢，我们大概的先记一下， 如果你要是以超级管理员登那个登录的话，我们啊我们的用户名密码呢，就是相当于我们的名字呢，就是艾米，记住了，这个呢代表的就是就是你在登录的时候，你要是以艾米的身份登录，那么代表的就是我们是超级管理员。 那如果我现在要是以这个 vip 会员的身份登录呢，记住了，我们在里面呢登录的用户名，哎，他是李四， 李四啊，就是我们的 vip 会员，好，那如果我要是游客呢，我们在里面登录呢，名字就叫王五，大家先把一二三三个角色，哎，这个记好。但实际我们在那个开发的过程中，像这个位置呢，我们是需要发送请求，服务端他来进行验证的，但是由于我们现在没有这个过程， 所以说我们先把三个角色呢给大家先固定好，到时候你要是以 id 的 身份登录，我们就是超级管理员， 你要以李四的身份，哎，就是 vip 会员，要是王五，那咱就是游客。好，刚才说到的一二三个角色呢，大家现级的， 那我们既然刚才跟他说到这块，对于我们的这个哎，就是比如说你具体的啊权限的这个身份了解了，然后我们以不同的角色登录进来了以后能看到的页面呢，就是菜单，咱们也明白了，那我们接下来要干到说说干什么。 首先第一件事呢，就是先要确定服务端会为我们提供什么样的接口，好，我在下面展示的这块呢，是那个接口文档啊，也就是说我们第一个呢是要有登录， 因为你必须登录了，这个时候我们才能拿到相关的这个角色信息，是不是？好，大家可以看那个先看一下我们的第一个接口地址，这个呢是我们登录 pos 请求对不对？然后我们需要在里面传的数据呢，大家先看好，第一个呢是我们的账号信息，第二个呢是我们的密码信息。 好，第一个那个完了以后，第二个呢就是我们要获取相关的用户资源，什么叫获取用户资源呢？因为我们以不同的角色登录了之后， 在我们的后台管理系统中，像刚才看到的这个菜单，比如说六个、三个、一个，那这些菜单究竟有哪一些？这一些我们也是让服务端呢传过来的，所以我们的第二个接口呢是 get 请求， 在里面我们可以拿到，比如具体的用户信息，包括，哎，比如说里面还要拿到一些等等其他的这个数据啊，在这个位置呢，我们都是可以看到的，所以我们一会再跟大家聊的过程中， 具体数据展示成什么样，都是由我们现在看到的接口它来决定的。好，那如果在里面我们还需要一些别的接口呢，在这个位置呢也同样可以添加。好，刚才给大家说到这个位置呢，我们先把整个需求啊给大家聊明白， 如果明白的小伙伴，那接下来我们就要开始写具体代码了，来详细的把这个图啊给大家，能放在这。好，如果说这个位置要是有问题的小伙伴呢，你们可以提问题啊，没有问题呢，我们就要开始跟大家接着往后聊，那我现在要干的说说干什么？第一步先进入我们的后台管理系统。 好，我现在跟大家打开的这个呢是我们后台管理系统的登录页。哎，也就说我们现在要实现管那个权限管理， 先从我们的登录页开始，因为我要不从登录页开始，我没有办法知道我的这个角色是不是，哎，就是我们以什么样的权限角色去登录。好，那前面这块如果都了解的小伙伴呢，接下来我们就开始呢，继续跟大家往后面去说了。 好，刚才跟大家呢，已经把我们的权限管理啊，整个的一个需求呢聊明白了，现在展示的是登录页， 那我希望的就是你在里面输入完了用户名密码，当我点击登录的时候，我们会跳转到首页，先跟他把这个首页呢，我们手动的跳转啊，哎，会进入到我们的首页。 好，那当然在我们的首页里面呢，也会有，比如说退出啊，是不是？然后首页里面现在默认展示的有以下三个菜单，首页统计管理以及订单管理。 每一个菜单在点击的时候，我们现在还没有让他去那个具体的，比如说啊，主体部分的渲染，这个呢，我们还没有去处理啊，哎，一会呢会跟大家聊的时候慢慢处理好。好，那当我点击退出的时候，回到我们的这个登录页。好， ok， 这个逻辑呢，咱们是清晰的，那也就说我现在要干到瘦瘦干什么？ 先在登录页里面输入用户密码，点击登录了之后，我们拿到用户角色，然后再进入到我们的首页，所以说了这么多。