Layui中如何抽取通用html

hi， 这里是 alex， 今天呢带各位上手一款叫做类 ui 的组间库，那么这个组间库呢，首先它的原版是只针对原声的 gs 和前端三件套的 好，当然可可能很多人呢其实用过这个东西，但是呢，这个组间库其实在之前有过一次大的迁移，并且呢他现在也提供了这个 view 的版本。当然要注意这个 view 的版本呢，并不是官方自己写的，是开源社区自己维护的， 那么在国内比如 b 站的话呢，相关的视频要不就是说这个东西啊，下架了啊，这是乱说，他只是说了一个声明，然后迁移了一下自己的官网，并且呢 全面拥抱了开源，要不然的话就是这种二二年甚至二一年的这种很老的视频了。 那么现在的话，它其实有了这个 vivo 版本，当然也没看多少人讲过。嗯，当然各位可能还有一个疑问，就是既然它是一个针对原声三件套的一个做监控，那么为什么它不能直接 写在这个 react 中的，对吧？那我们呢就来实际上手看一下，为什么他只有原声 gs 和 view 的版本，而不能用在这个 react 上。 那么来到官网之后，点击开始使用，这里我们就同样的分为三个版本，也就是原声的 g， s， 然后 view 和 react 来尝试使用这个组建库，同样的我们创建一个文件夹 the ui， 首先是我们的原声，也就是 malina， 这里我们通过 cdn 的方式来写好，这里的话呢，是需要写一个 gs 文件的， okay， 然后呢引入这两个东西复制一下， 一个是 gs， 一个是样式保存。 我们直接来到这边的左边的组件中呢，找到一个表单组件，然后呢打开他的代码，把这里的东西呢都给他复制 一下，当然可以看到它这里的话呢，其实已经提供好了一些对应的东西，其实我们直接复制这个文件就可以了，复制 ok， 然后呢我们把它的 g s 代码给它抽出去，我个人不是很喜欢写在一起。 ok， 然后呢在下面对他进行导入， 那么就是这样一个项目，我们使用 life server 打开 okay， 那么它自带了一些表单的教验，比如这里有点击的话呢，它就会简单的给我一个提示， 然后它的 g s 的话呢，这里就是它为什么不能改写为，或者说不能很容易的改写为 react 的版本的一个具体原因。就是它这里的 g s 逻辑的话呢，可以看到它是强依赖于自己的这个 le y 的 g s 库的， 他并不是提供纯粹的一些组件，他所有的这些逻辑的话呢，都是基于他自己的这个类 ui 的逻辑的，比如这里有一个事件，对吧？然后呢这里有他一个独有的类 ui 的函数，所以呢你想要把它从人生 gs 迁移到 react 其实是比较困难的， 并且呢可以看到它这里保留了一些以前的，也就是 e s 六之前的一些 javascript 的老的习惯，这里还在用 var， 现在 现在的话呢，肯定是推崇用 let 和 const， 对吧？ ok， 那么原声的 gs 呢？就到这里我们来看一下 view， 那么 view 的话呢，你可以直接使用它的 html 模板，当然我们现在已经有了它的 view 版本，那么现在的话肯定是 portrait 这样做的， 我们就使用 v 三 view the ui， 然后呢我们来到这个 lay view 的官网，那么这个社区的版本的话呢，它是在二二年才发布， 算是一个比较新的，只不过呢它的文档我觉得还是有些差，写的这里我们安装一下。 ok， 这里我把多余的东西呢都给他删掉。 那么需要注意的是呢，他需要我们进行全职注册和下面的这个自动按需引入， 我们来到这里的 main jazz 复制一下，并且呢还需要来到我们的 vite config 这里安装这两个按需引入的插件， 然后呢这里需要添加这两个 plugin， 这里我们 截个图吧，就把这三个东西呢给它复制一下， 然后是这两个插件复制在这 plugin 后面。 ok， 完成之后呢，我们才可以使用它的这些组件。同样的我们来到这里的表单 在展示，这上面有一个表单。 ok， 那么就是这样一个表单，和刚才的话呢啊，稍微有一点不一样，直接复制这里的代码就好， 我们把这里原来的这些组件呢都给他删掉。 然后呢创建一个我们的自定义表单组件粘贴一下， 那么可以看到它使用的是组合式 a p i set up 的语法，这点话还是比较的不错的啊，至少没有使用 v u r 的那种选项式的语法，所以呢要简洁很多。 ok， 那我们把它引入，引入到我们的 app view 最后运行。 那么需要注意的是呢，这里我们官网给我们提供的这个表单的例子呢，他用到了一个弹出， 弹出层应该直角也就是这个 layer， 所以呢这里会提示我们是否安装这个 layer， 我们要手动安装一下这个 layer 的话呢，其实在官网就能够搜到 啊，这个搜索有有点慢，稍微 ok， 那么就是这个这个东西，那我不知道他这个官网的这个文档到底是怎么做的，他可能是把这个 layer 单独的抽离了出来， 和这个官网的整个项目呢，好像不是同一个，所以呢需要我们手动的去安装，也就是这个东西， 它是独立于我们这个 layui view 这个仓库中的。 ok， 我们手动安装完成之后呢，再来运行 应该就没问题了，那么结交之后就会有这样一个弹出层，对吧？ ok， 用的话呢，是没问题的，只不过呢，这里确实有一点坑 啊，不是很直观。那么接下来呢，我们就来试一下 react， 看看能不能把这个 le y 用在 react 中，顺便给各位解释一下，为什么这个东西没办法用在 react 中。 ok， 我们这里的话呢，删掉多余的东西， 回到我们的 leoi 的官网，那么这里的话呢，这个表单组件，首先我们给它复制一下，我们只复制这里的 phone 的东西。 然后呢来到我们的项目中，创建一个 components 文件夹， 创建我们的表单组件， 那可以看到这里，我粘贴之后呢，我的 pretear 它是没有办法正常的进行格式化的，这是因为呢，我们的 react， 它是必须要你的单标签以这个自闭合的这样一个标 签结尾，它才能够正常的解析，不然的话就是会报错，比如这个 input， 它的后面的话是没有这个自闭合的标志的，对吧？我加上之后呢，它就消失了，那么这里的话有很多 input 都没有加上这个自闭合的标签， 而且非常重要的一点就是呢，我就算加上了这个字笔盒的标签，这里这么多，我就算给它全部都改过来，之后呢，它下面的 j s 的部分，我也没办法把它修改为我们 react 中的写法，因为它是自己定义的函数，我也没办法 参照他的这些逻辑，只能呢自己理解他的逻辑之后再转换为 react 些，这样做的话其实很麻烦，对吧？所以呢，我们干脆就不做这个 gs 版本，我直接把它删掉，并且呢，这里这个官网我们刚才写的这个原声 gs 的版本呢，我们可以看一下，它其实还存在很多遗留问题， 我们把所有的该填的东西呢，先给它填上， 那么可以看到它这里官网自定义的这样一个看 slog 语句呢，它其实有很多命名上的问题，就比如这个 steps 啊，这个明显就是以前的遗留的习惯，现在的话肯定用 gender 要规范一些，对吧？当然了，他这个官网其实还提供了这个深色模式，只不 问提供的方式我个人觉得不是很优雅。就在这个官方网站的生态这里找到有一个深色模式， 这里的话是一个 get up 链接，这个链接的用法其实很简单，我们就直接导入他给我们提供的这样一个 css 文件就好，然后就能够实现深色的模式。那么他切换这个明暗模式的方式的话，其实，嗯相当的不优雅， 他提供的样例就只是一个简单的动物操作，当然从这个思想上的话，和他的原本的类 ui 这个官网的话呢，还比较相似，大家都是用原声的方式在写， ok， 那我们来试一下，找到这里的 diss 的目录下这个类 us 电影 dark 这样一个文件，复制一下文件名， 然后呢创建一个 c s s， 复制这里的 c s s 代码，然后呢在我们的这个 index 中引入它 官网的例子的话，是要给它加一个这个 id， 对吧？我就直接选成这个 thing， ok， 那么添加好之后呢，我们来到这里的网页，可以看到呢，它的主题就变成了暗色，对吧？那么修改它的话，我们就需要动物操作来修改这个 ref 它的属性。 ok， 那么到此呢，我就带各位简单的了解了一下类 ui 的使用方式，以及它的明暗模式，还有最新的社区维护的 view 的版本。 那么可以看到，虽然他已经全面拥抱了开源，并且呢啊做了很多的改进，但是呢问题还是很多的， 至少作为一个国内的项目来说的话呢，他还是对 view 的包容性，或者各位对这项技术在 view 上的运用还是更 积极一些。 react 的话呢，可能是国内的环境使然吧，没有看到各位对这个东西在 react 上有投入太多的热情。 ok， 那么这一视频的内容呢，就到这里，我们下期视频再见。

就是今天给大家就是录一下，就是一个前端的框架，一个适合就是后端成员， 就是去写的一个前端框架，就是相对来说入门比较简单吧，他的名字叫就是 let u i， 这个叫 a u i， 然后官网其实是在这里了，就是直接在 b 里面去搜 nui， 他就会出现官网。 然后我们其实可以去看一下他的就是官网上的例子，比如说他里面有开始使用提升方法， 然后布局之类的，然后里面就是他的官方文档，其实还是比较就是详细的，它里面还有就是视力，你可以在里面去就是去做编辑，然后看他这边的就是预览的一些效果， 然后他这边有独立组建什么的，然后其实内外的话他怎么说呢？你若是喜后喜后当成员的话，如果是想更快的去， 就是去看前段的一些东西的话，你可以就是从这个框架去入手，其实是相对来说比较好的，因为它里面就是相对来说他需要引用 东西还是比较少的，然后里面官方呢相对来说比较清晰。 然后我我这边刚好里面就是做了一个项目，刚好是前段这块也是用的就是 ndy， 应该叫内外。对，然后这边就是主要几个大的模块，就是科室管理和宾区管理、人员管理、整张管理、医疗组管理，然后它里面 功能就是一些正山改茶之类的，还有一些就是查询，模糊查询，可以根据这个科技名称去做模糊查询。哇，他这边可以 可以去做，就是映射这边可以自己去新新家映射科室之类的，然后点返回，然后他这边还做了一个就是修改的功能， 然后点删除的话，他其实是一个逻辑删除啊，他只是把状态变了，然后这边也是可以去查他的，根据科室名称去查 编剧管理，其实也是一样的，也是正常改查，相对来说其实是一个比较简单的一个正常改查的一个功能， 这边也是可以根据人员去搜的模糊查询，这边新增的话是其实也是可以的 啊，诊断管理的话一样的，他这个拼音是根据他的诊断名章去去做匹配的 啊。手术管理、医疗图管理， 这边退出应该是做的是一个假的退出，行登录的话应该是真的。然后我们其实如果是真的想去深入了解这个框架的话，可以去看他的官网，因为他官网里面其实写的相对来说就比较详细， 里面还有常见问题，我们如果是想看他的一些圆码，可以直接去他的 号里面去搜，它里面可以点一下，然后去搜， 然后大概就是这些内容，拜拜。

现在赖又爱用多么？几乎没人用。你们都是特别小型的项目，老项目还在用它维护啊，新项目的话一般就不会用了。杭州前端刚开始工作，多多少才合适？一万块钱左右吧。我们就把杭州当成一线企业去咳嗽了啊。因为杭州其实应该是顶替到现在的广州啊，应该是北上广深。应该是这么个工资水平啊。 开发电脑要配置高吗？高，老子能不能帮忙推荐一下哈？然后写代码的话，二五六的固态或者五幺二的固态，然后加一个第十代的一个 cpu 芯片，银泰尔的。但这个呢，只能保证一般开发起来没问题，但实际上当你运行多个大型软件之后就发现不行了。

hello， 大家好，我是韦昌源，这一期给大家带来一个非常性价比很高的课程啊，昨天我刷到了这个东西之后呢，我果断呢就买了这个课程，这个欧洲小镇呢， 它是一个纯纯的游戏课程，先说一下它的优点呢，是很纯纯血的 csgo 流程啊，它一定是 csgo 的 一个忠实粉丝啊， 无论是从他的这种贴图，贴图的 u v 也好啊，还是这种面片的衔接，还有这种 box 的 衔接啊，都是非常完美的。 还有其他的呢，他在找参考读的上面呢，花了很大的心思啊，他都是专门去找这种摄影作品啊，对吧，找一些比较 现实的。在这趟课程里面呢，无论是这个花，这个花的参考呢，还是这个灯的参考，还有这种穿插的细节的参考，他是全部都放在了里面， 还有这种比较小的这种细节啊，线缆呢，还有藤蔓呢，都放进去的，要不来看一下他的这个课程的一个细节， 无论是从面塑上面呢，和这个贴图的质量上面呢，都是无可挑剔的，重点是他的流程没问题，让我们看一下竞技又一般的小学生其他的作品，因为我刚开始认识他的时候呢，是看的这个作品， 这作品已经很震撼我了，这个作品很厉害，然后他他专门去会制的一套自己的贴图，要写写材质啊，还有最后做一堆自己的资产呢，就大家想做一个专业的游戏地编呢，可以去， 真的可以去买这课程，还有他的这个，他的这个场景，嗯，稍等可以看到啊，他这些道具啊，都是一些比较低面数的，但他的贴图质量呢，是绝对的拉满，贴图质量非常的好， 物品的时候呢的流程特别清晰。呃，他不像其他的课程的话呢，是堆资产在摆资产呐，他更多的是用自己的这个贴图啊，他在这个课程的百分之八十以上都是自己的模型和自己的贴图啊， 可能是英国那边的原因吧。呃，这外国留学生的一个习惯呢，就是比较少用资产，在使用这么少的资产情况下呢，还是能做出细节满满的场景，这个是非常难得的，很推荐留学生去购买这课程。还有因为我们只要学习的这套流程呢 就可以去做他其他的案例了，他这个案例呢也是按照这套流程的这套课程的流程去制作的，就这套流程，这个流程非常好， 有一弧网真的很卷啊，这个这个一百九十八，然后我买的这个这个呢两百多块钱，七十个钟啊。然后我再说说缺点呢，这课程的缺点呢有以下的地点呢，就是他。 呃，当然这个也是我的缺点了，他缺点的话就是讲的太长了，他有七十个钟啊，就是很难看的下去。 然后其次呢他真的是不断的录屏，不断的解说，把这个做完了，再把这个做完了，就他慢慢的把每栋楼都做完了。呃，其实我更 我更推荐的是先把所有的技术要点给说出来，比如说藤蔓的蓝图啊，对吧？还有这种管道啊，先把所有的模型找到之后呢， 我再去做一个搭建，先把所有的技术点列出来，不然的话呢做一点点再说一点技术，做一点点，说一点技术，这看的会比较比较枯燥啊，这我都看困了。 那翼虎网真的很厉害，把这个价格干到这么低。我记得之前有一个很高很高价的一个也是虚拟人呢，好像是八千多都买不到，这才八百九十九啊，而且质量是绝对在线的， 说白说白了，其实这种都是流程上面的问题啊。好，然后大家话不多说，可以冲这个课程啊。这个优惠券呢？我还没争取到啊。这链接呢，我就放在评论区了，大家可以自行购买。

好，最近因为一个机缘巧合的情况下，我买了一个程序化生成场景的课程，因为我搜索这程序化建模呢。呃，这个的话呢，这个的话好像什么都没有啊，它的结构也很简单， 目前呢是只有这个做的比较好。为什么要搜索这程序化呢？因为我目前发现我所制作的游戏很多都是需要去程序化去建模的，包括我遇到的这个死亡回归啊， 他的他的这个解包文件里面都是这个程序化生成的，这个文件夹在附近的引擎。好，那我们现在开始这个课程， 我来我来解说一下这课程里面说了什么吧，他是说了一个什么样的技术要点，加上我会考虑很多综合的因素啊， 评价呀，配套文件呢，还有他的一些，然后评分很高啊，我们来看一下他的技术要点。他没有用任何的资产呢，所有都是用蝴蝶尼的程序化建模，别看他是有一些小贵啊，七百多块。 他后面教 sd， sd 完了，他还教你制作所有的这种资产固定，你去制作这种资产，加上他的这个，他教你写台词，他的所有的这些路，什么路啊什么全是自己写的，才 最后的最后的搭建，他把一整个固定你的程序化生成模块都给你讲清楚了。 我以前是报过一个弗丁尼的班呢，我觉得弗丁尼是一个对于来说是一个非常难的，我报了一个迪士尼总监的那个试校班，专门是做那个特效的，那特效跟这个的难度完全是不同的， 就我这个，我你只需要跟着做呢，你就可以去做出来啊，这个优点还有个优点，就是呢， 这个胡胡安黄老师呢，是正统的游戏制作人，做过程中呢，他会将这个面塑啊，还有这种什么规格会处理的非常好，特别是在这规格的处理上呢，我前后观察了几个大厂的一个文件 处理规格上面呢，我一般接手一个项目，我最喜欢看他的项目是什么呢？无论我去哪家公司啊，什么大厂的，我都会先看他的一个插件， 看他的渲染预设接下来是什么，看他的 oodle engine， 还有他的这个材质球，我发现他的规格跟大厂的没有任何区别，就我怀疑大厂都是搬的他这套啊， 他的在这个功能上面的一个预设呢，是差不多的。其实胡安黄老师是一个高手，但他很低调啊，只是说他多年从事技术，他是大厂出身的 肯，我还很看不起这种程序化建模，但是后面呢，我逐渐呢就使用了这套流程，因为如果你用建模去建这种线的话呢，还有这很难去进行一个修改和编辑的 字出身的，所以我们会比较去在乎这个搭建的一个构图啊，还有它的光照啊，怎么去设计啊。 但实际上面你跟游戏策划聊完之后呢，哎，你会发现，其实玩家他并不会这么去在意这个游戏的一个美术啊，还有这个游戏的这个搭建， 他们更在意这游戏好不好玩和美术呢，只要看的顺眼就已经很 ok 了，在欣赏反思呢，我这个课程好像是是一个非常完美的课程，但是他缺点是有的， 我们先看一下他的缺点，他最后的一张哦，他前面的技术都没什么问题，但他到最后的一张从这里 突然之间他跳跳成这样子了。就我相信很多人大部分的愿想的做一个图集，去投递简历啊，或者去干嘛的，但他中间这种过程呢，全部都是没有的，宣传片呢，是将这些所有都搭建好了。你这种章鱼啊， 这个 csgo 这个场景，这个课程之所以为什么从这样变成这样呢？因为我们做美术的更需要的是一个创造力，还有一个你的想象空间的能力， 所以他更希望你们去重新去制作一个这样的东西，并不是说跟着教程一步一步走，让你们很容易会 我偷偷的变成一个案例，你们应该是用你们的技术去创造出自己的东西，而不是一味的往外抄。所以在这个过程中你会发现这种很多审美上面的缺陷，也不是审美上的缺陷了，那就是一个自己的风格。 当然到课程的最后你们需要解决一个什么问题呢？需要解决一些穿帮的问题，比如说在这个位置， 这个木头的结构，这木头应该是在里面的，这木头呢，这么就是这么去搭建的话，是架不住的这个东西，这要去把这种东西都穿帮给处理一下， 而这种位置是比较突兀的，就在一个物理层面，对吧？你下雨啊，还平时的磨损是不会磨损到这个位置的，就这种我们需要去处理一下，这个是比较明显的穿帮。 要说韦老师你们那么闲，什么课程都看一下，包括我的网课就有四千个区，而且这个是我已经删减过的，因为我的工作就是看各种各样的网课， 然后就出一个规格和一个流程，就让团队少走弯路，我也希望这课程让你们少走弯路。 后呢，我还是觉得这个课程的技术呢是讲的非常完美的，他花了很大的心思，流程都扒的很细，就是希望他的地边呢，还有他的策划能更好的去看上面的参数。那最后呢，这个是他的一个优惠券，这十十六号到二十三号的优惠券，现在多少号？ 现在已经是十九号了，因为这课程我看了两天了，还是要需要花很多时间，他整个课程有三十六个钟，刚刚好两天我把它看完。 然后呢，他跟以往的课程都不同，他是一个技，主要是技术上的课程就是在这个白盒的搭建，同时呢他不是说只能做这种模型，当然你可以制作城市模型，还有一些道路的一些模型， 因为我之前接触的开放世界项目呢，我们所有的地边都是手动搭进，这个真的是一个花费很大心思和心机的东西， 如果真的是我能早点接触这个流程的话，也不需要去花费这么多的心思和时间，所以这套流程对我的帮助是非常大的，我也会把这个流程给学下来。

这期出一个免费聊天方法，不用摸未必。首先我们先点进去点，我再点 a p i 设置，因为这里主播用的是荣耀，所以可能会有一点不同，然后再把模型提供方改成轨迹流动，改完模型提供方再点击获取模型秘钥，这里要稍微等一小会儿， 然后再点击模型广场旁边的三角小漏斗。点进去以后你去找价格，有价格的话就选只看免费，如果没有价格就在模型广场里找，你要往下翻一会才能找到免费的 这里找到以后点击它，然后再点复制， 复制成功以后点右上角的三条杠，点进去后点击 api 密钥，点击新建密钥，把刚刚复制的粘贴进去。密钥创建成功以后，再把新建密钥的复制一遍， 然后再退出浏览器，返回 level， 再点 ipip， 把刚刚复制的粘贴进去，因为我原本就输过一次，所以要删了。重新粘贴。 这边的话，它粘贴完会自己给你选模型，然后你把使用默认余额换成自有 a p i。 这边的话退出，看看能不能正常发消息。随便选个人物发消息， 如果你发的出去就等人物回复消息，如果你发布了，那就重新选模型。你选模型的时候呢？多试几次就好了， 他回复就代表成功了，只不过会慢点。他这会有一个弊端，不能听语音，不能转账，如果人物发了语音会跳出一个充钱界面，你不想看把界面往下滑就可以了。这边的话人物转账给你，你也不能收。好了，拜拜了。

本期是 r 一 零第一章个人网站实践部分的答疑，大家可以按需直接拉到自己有疑问的章节位置查看。好，我们先来看通用部分，现在的 html css 都是前端，后面会讲后端吗？啊？会先前在后 会讲什么语言？会讲某某语言吗？必修课我们讲 java script， 其他主流语言在选修课，原因可看先导课。第五节 以后会收费吗？课程内容永不收费。编程领域是讲开源精神的，知识本应该免费，我们学的语言、框架、技术等等都是免费的。网上还有无数公开的学习资料，我只不过是用我自己的理解讲了一遍，更容易让零基础同学听懂而已。 可持续性由大家的三年作业等支持。毕竟我不是全职，完全看心情，数据越好，粉丝越多，夸奖越多，我就越高兴，就更有动力更新嘛。完成项目是你们的正反馈，而这是我的正反馈。学历低，年纪小，年纪大可以学吗？完全可以，不要给自己设限， 努力就行。一遍看不懂就看五遍，查资料再查一百遍。同学们各种各样都有，有九岁的，有五十八岁的，有计算机系科班的，有其他行业转行的，有在职程序员，也有小学学历工厂打工的啊。我的教育是平等的，但机会永远是需要你们自己把握的。怎么学 啊？我也不知道为什么有很多人问这个问题。看视频多实践，交作业，学院能获得什么？能独立开发商业级项目，你可以到各行各业去利用技术加速数字化。我不推荐互联网大厂啊。 第一节，编程的本质部分，编程有没有更直观的解释？编程就是编写程序，也可以说是用计算机的语言告诉计算机你要他做什么，并把你要他做的事的过程、逻辑和数据告诉他，然后他告诉你结果。函数更直观的解释是， 函数相当于一个功能和行为，任何复杂的程序，功能和行为都可以被拆分成很多单一功能的函数。 函数分为三段结构，接收参数、处理逻辑、返回结果。两个例子啊，做饭函数，西红柿、鸡蛋、油盐等是参数，先用什么，再用什么，处理多久时间处理动作等等都是这个函数的处理逻辑， 最后输出返回的结果就是成品，可以把结果再交给吃饭函数去处理。吃饭函数的接收参数又可以是做饭函数的结果。写作业函数，老师喊你写作业，写作业是一个你的函数，喊你这个动作叫调用，调用你写作业，调用的同时还传给了你参数，喊你写编程课的作业， 你接收到这个参数后，就用写编程课作业的方法开始处理，完成后输出作业结果返回给老师。 参数更直观的解释，去调用函数时，传给他的东西都叫参数。参数可以是数据，也可以是函数，就比如说前面那个做饭函数里菜和调料都可以说是参数。写作业函数中老师的话也就是要求也是参数， 同样的输出结果可以是数据，也可以是函数。乘法函数没有听懂，简单说就是调用了三次加法函数，这个不求甚解就行，文字描述比较复杂，后面用代码，非常简单。 关于函数的部分，我们第二章才正式学习，我们第一章主要其实就是一个大概， html 和 css， 这些都是参数。第二节第一行代 码，代码里的那些符号是什么意思？它们就是 html 标记语言的标签符号。浏览器会把不同的标签渲染成不同的画面，有文字，有图片等，它们就类似于书，名号括起来就代表给一段内容打标签，左边代表开始，右边代表结束。 多一个斜杠，标签内也可以再嵌套标签，类似于嵌套一堆这样。 html 标签大部分是这种结构， p 标签中间的字母就是标签的名字，也有单个标签，比如图片标签以麦子是开头和结束在一起， 也和课文的标点符号一样。比如你看到句号就说明一段话结束了，再后面就是另一句话。搜索 html 标签，可以查到所有标签以及它们的作用。我们后面边看边学， html 不是 编程语言啊。是的， html 并不是编程语言，它是浏览器函数的参数，没有函数的功能，但它确实是代码 参数，也是代码参数，在编程中也很重要。 html 是 我觉得最适合零基础同学的第一行代码，你能看到它在网页上出现了，后面几期我们扩展了一下不就成网站了吗？没有看到点 txt 和点 html 后缀或者文件管理器的样子，和我不像。 需要你前往文件管理器的查看选项，勾选显示扩展名。不同系统可能有所差异，需要你自行搜索。例如 win 七查看文件扩展名。 修改后缀后图标没变，打不开，打开还是记事本。实际上是没有修改到扩展名，仅仅是把文件改成了文件点 html， 勾选显示后缀后会是这样，文件点 html， 点 txt。 另外要确保是英文字母点，而不是句号点 html， 中间和后面不能有空格，打开后中文乱码啊。这个是我的疏忽。 部分老版本浏览器不支持自动识别字幕，在后一节课有解释，暂时请下载最新版本的 h 浏览器或 chrome 浏览器使用。 hello world 是 程序员的浪漫，是用来检测环境。 那我打的你好，世界不也是吗？这个其实不是重点啊，更重要的是环境配置对于小白来说非常难，它们有各种各样的电脑和系统， 很多人安装个环境能卡好几天，一点都不浪漫。你会不代表所有人会。我后面一期演示了一下 vs code 的 安装，本来想着这已经是非常简单的一键完成，但还是出现了很多问题，下载失败、安装错、电脑不支持、看不懂、不会用等等，导致我后面就不用 vs code 的 演示了。 对于在第二节出现以上所有情况的同学，我这里表示道歉。我自认为简单其实也是一种自以为是的思想，没有提前注意大家的不同情况，后面我会对这个更严格一点。 配置环境难是不可避免的，有耐心才能做程序员我不赞成这句话，不是说你有耐心才能去做程序员，而是你做了某些事后，慢慢的锻炼出耐心。我们每个人并不是一开始就各方面优秀，都是成长起来的， 所以最重要的是动起来去做某些事，才有可能成长，变得有耐心，有毅力。比如这里啊，一个人已经学会写一点网页了，那么他后面再去安装环境就会更有耐心啊，因为配置环境难而放弃的概率就会大大缩小。所以前期尽量起步要简单，后续才有无限可能。 第三节入门 html 系统不支持新版，一直浏览器下载的时候一定要选择正确的版本，它有选项是 win 七、 win 八、 win 十、 win 十一。 mac os 不 同的要还是不行，可以试一下下载 chrome 浏览器， 实在实在不行的话， qq 浏览器、三六零浏览器也行，但别选极速版。 vs code 的 问题，这一期我收到很多同学关于 vs code 的 问题， 各种环境系统问题都不一样，我就暂时不用它了。后面的演示都直接使用浏览器和记事本，所以大家可以先用记事本写代码，把浏览器中的修改写到记事本就好，注意使用英文字母标点。另外也可以使用在线工具编辑尝试，比如菜鸟 html 编辑器 code pen， 在这里编辑好后，用记事本打开 h t 秒文件复制粘贴进去保存即可。还想尝试的同学，我下面再列几个常见的问题解答。一个是无法下载 vs code 啊，使用这个链接加速 或者搜索 vs code 国内下载地址下载的 vs code 是 英文搜索 vs code 配置中文教程，网上有很多教程，就是安装一个 chinese 插件即可。 vs code 里的中文是乱码啊，同样可以搜索教程右下角有个编码小开关，选择 utf 杠八可解决。 输入 html 没有和我一样显示提示你要确保你是在 html 文件上右键用 vs code 打开这种方式打开的，你的文件格式不对，它就不会提示如何确定文件格式。前面有解答， 视频中我的代码突然变长到十五行了啊，我勾选了保存后自动格式化，它会自动美化，你可以搜教程，我后面专门做一期 vsq 的 配置和使用教程。 图片不显示，这个问题太多了，首先要确保同级目录，确保字母标点正确，确保后缀格式正确。一般都是这三个问题， 比如说你要把图片和 html 文件放到同一个目录，然后图片的名称，如果是 apple 点 png， 那 么你就要在图片标签中这样写。很多同学的问题是不带点 png 这样的后缀拓展名，或者 apple 点 png 多了一个双引号。 还有的是图片标签写错 i m g 打成了 i m g e 啊，这些都是粗心的错误，要仔细看视频，仔细看代码 路径问题在第四期有解释。手机怎么写啊？使用在线工具，比如菜鸟 html 工具，或者 guido pen， 或者这个，还有些 app 是 可以，我也不知道哪个好，你们自行搜索，但最终还是建议用电脑。手机写，写 html 还能将就，后面就很难继续了。手机端能打开开发者工具的浏览器， 我目前只找到了一个 kui 开发者版。电脑推荐什么啊？电脑不看配置的，预算内就可以。如果啥都不懂就买小米的， 台式的话就搜那种有名气靠谱的，不买联想就行。写代码可能有问题，手机写代码不显示图片。手机系统的权限一般很严格，不会让你的 html 访问图片，所以在手机上学习尽量使用网络图片链接，比如这样子的，能打开看到图片的链接。 vs 和 vs code 有 什么区别？ vs 很 大，使用稍微复杂，限阶段不推荐使用，而 vs code 比较简单，现在这个用的人最多。第四集， html 实践 网页地址复制给别人能打开吗？啊，不能，因为现在的网页地址是你的文件系统地址，他人的系统上没有你的文件，你需要发给他你的 html 文件才能让别人打开。 自己电脑上的图片插入进去，别人看不见，只能现在用网址上的图片别人才能看得见吗？啊，是的，别人无法访问你电脑上的图片，或者我把别人电脑上照片的路径写上去，那别人打开会不会有图片显示啊？有， 讲太快了，有些地方不懂。本章的目的是尽快进入，能够部署上线你的网站，所以会快一点，我后面会慢。另外，我强调鼓励大家去搜索，这样得来的知识才是你的。 浏览器中的修改一刷新就没了啊，在开发者工具中的任何修改都不会改变原文件。上节课有讲，在开发者工具中多尝试，随便尝试不同的属性，不过想要保存就右键复制 html 代码，再用记事本打开 html 文件去粘贴。第五节， css 入门在 vs code 里如何编辑 css？ 和浏览器一样，要么添加 style 标签写在里面，要么直接写在 html 标签的 style 属性中。外部 css 引入和 link 标签是什么？ 关于外部 css 文件引入就类似于引入图片一样，使得外部文件中的 css 规则可以在此 html 中生效。图片文件的标签是 embed， 那 么 css 文件的标签就是 link， 是 这个格式。 link 是 用于引入外部资源的标签。 r e l 是 relationship 关系的英文缩写， h r e f 是 地址，类似网址和 s r c type 是 类型的意思，指固定。当然 link 还可以引入其他文件，比如浏览器图标这种或字体等 更多的内容还可以自行搜索 link 标签暂时也不需要知道太多 css 选择器三种方式的作用， 最方便的就是直接在 html 标签上写 style 属性，但是有时候相同的属性太多，比如说我要是所有段落的字体都是蓝色，那么每个 p 标签上写 style 太麻烦，这里就用标签选择器选所有 p 标签，就能一行 css 应用到所有 p 标签了。 而如果是不同标签的相同属性，那么就用 class 定义一个规则，然后给那些标签加上 class， 就 可以同时把相同的 css 属性应用于多个不同的标签上。现在我们用了一个 html 网页，不需要外部样式表， 但是如果我们写了一百个网页呢？同样的 css 都写一百遍，是不是太麻烦了？于是单独出来，每个 html 只需要用另一个标签引入相同的那个 css 文件就可以了，该方面不需要了解太深啊。暂时直接在 html 标签上写 style 属性就好，别的后面再说，感兴趣的自行搜索学习即可。样式不起作用 啊， style 要写对啊，这个 s t y l r 经典案例第六节 css 布局如何保存浏览器中的修改 啊？右键复制 html 代码，再用记事本打开 html 文件去粘贴。操作太快了啊，是我的问题，录视频的时候说的太快，手没跟上，剪辑了一下可以尝试变速放慢，后面看空闲我再改一下我视频中点加号插入的样式，没有在 html 中看到复制了不显示 视频三分五十五秒的时候，下面样式点击加号的操作是干什么的？要设置背景颜色，直接在第一栏 style 那 里添加不可以吗？ 啊，那个加号是浏览器样式插入 css 的 class 样式的快捷键，相当于一个不需要引入的外部样式表，不会改变 html 的 内容，忽略即可啊，你直接写在第一栏 style 那 里也是可以的。呃，后三分之一看不懂。 那块主要是用了 flex 布局那个。前面那里我建议大家去搜索 flex 布局，然后学习，通过 flex 小 游戏练一练就学会了。没看的到这里确实会闷，暂时可以照猫画虎做出来。为了下一期的上线 css 学习资料推荐自行搜索即可。网上资料很多，这边推荐几个 关于 flex 布局的很多疑惑，我过几天专门做一期 flex 教学，第七节上线。无法实名怎么办？无法实名认证的同学可以使用那期评论区的网址，爱钻研的也可以搜索 get up 部署静态页面或 get e 静态页面等。 腾讯云上传不了文件出现错误，火狐浏览器使用腾讯云会有问题，更换 h 或 chrome 浏览器就大概会出现这样的。 手机上传文件名变了，试试换个浏览器，比如手机版 chrome 或 edge。 这个是他们的问题，实在不行还是用电脑吧。 访问网站四零四，首先要确保 html 文件为 index 点 html， 有 同学的 html 文件名带了中文，有同学写成了 i n d e r 经典案例， 图片不显示啊，音频视频等也是一样，图片等资源放在云上时注意同时修改。 html 内的引用路径为相对目录服务器没有 c 盘、 d 盘。一般来说，如果对路径的概念理解不深，就一律放入同级目录，引用时直接用文件名如 s， r， c。 同样的，再次注意后缀问题，这个反应的太多了，要仔细看视频呐同学们，网站托管显示只免费一个月，实验完你可以把这个环境删了，当然这个也不贵，好像就几分钱，你不想用随时停掉就行。我后面联系一下腾讯的朋友，看能不能把这个给你们免掉。 答疑结束，大家有任何问题发评论即可啊，我看到会解答并输入到每章的答案中，帮助所有同学，也会在第二季内容中更新你们的疑问、评论、理解和作业其实就是 r 一 零一的一部分。

前两天有个需求，就是要在网页里面去显示对应的代码，显示对应的代码的话有这个标签，这个标签的话就可以显示对应的代码， 他就原样输出了，原样输出的话我们就可以把代码写在上面，因为如果不写这个的话直接就解析掉了。那我们来看一下我们的这个，把这个先打开 加个东西， 好，就是这个需求，那代码块要出来，然后还可以复制，这个是 类约里面自带的几个功能，它的话就可以只要把类约的那个 c s 跟 g s， c s s 跟 g s 放在里面，然后就可以了， 他使用的时候也非常简单，只要在 gs 里面去写对应的，就是把你需要啊写的这块放在里面就 ok 了。 我们也写了对应的这个，就是按照他的去写对应的这个样式，写完之后他有一个属性，就是可以配置他的那个 主题，他有一个深色跟浅色，浅色主题的话就是刚才显示的这个样子，就是长这个样子，我们使用了一个深色的主题，看这是深色的主题，看起来 还可以，然后可以复制，复制的话就可以把对应的这里面的文字复制出来，可以看一下这对就是复制的吗？就非常有用。 呃，如果你在网站中需要这种功能的话，可以尝试使用一下类外的这个，这这个电脑预览组件， 嗯，相对来说还是方便又简单，用起来。呃，只需要一行代码就可以搞定好，如果能使用上的可以去试试，拜拜。

来，今天继续做什么呢？继续做这个，这个新系统消息做完了，然后接下来的话就做这个全局搜索。全局搜索这块的话，在实际项目中他做的时候，嗯，实际项目中做的时候，这块 后台，后台他可能会用一些这个，嗯，用一些这个这个这个 框架去做啊，有专门的框架去做啊，然后他可以搜索这个系统功能啊，这是一个还可以搜索系统里面的一些数据啊。 但是咱现在做时候是没有这个后台的，相应的一个支撑，所以说这框架信息做不了，业务数据也没有啊。所以说直接搜一下这个系统功能，一个菜单就完了。简单演示一下如何去做就可以了。然后把这个声音音频调一下，音频调一下， ok， 然后回到咱的界面，然后咱先建一个什么呢？先建一个这个，嗯，直接建个组建啊，萝卜扫尺吧。 global search 啊，就是全局搜索的一个组件啊，全局搜索组件，让他让他展示这个一个弹弹窗框展示这个可以搜内容啊。然后先把这个内容拷贝过来，直接用一下。然后再在 bus 这里加个试键啊， 加个典型事件啊，加个典型事件，可雷克等一个什么呢？等一个这个萝卜素吃啊。 现在有可能不对啊，这个无所谓了， 教一下 global search 的一个设儿，让他就把这个弹框展示出来就完了。但是在在下面定一下这个 glover search 的一个组件啊，叫 constance 一个。这个什么 glover search r e f， 让他默认默认 r e f 上去。然后这个是全局搜索的一个组件啊， ok， 然后再把这个组件引进来一下，叫一个 global search， 刚才定义的这个组件引进来，引到咱的这个 top bar 怎么样？ 如果是用赛踏尾这种方式写的时候，他就不需要你去注册一下，直接引进来就可以了。如果你用这种 组合式的 ipr 的话，呃，选项式的一个 ipr 的话，它是需要你你这个手动的把它声明注册一下，注册一下它，然后用 set up 的话，就不需要这样子去注册了，直接引进来自动注册了。然后这里面的话二月份指定一下，二月份等于 global such 这个实力给他定义在这个地方，然后让他展示出来。然后这里是什么呢？全剧搜索的一个全剧搜索界面， ok， 然后然后在这块写就写完了，然后进来了之后进到这 global search 里面来了，把这个改一下，这个改这个标题改成一个全区搜索啊， 然后嗯，按钮的话是需要的，然后宽度什么的正常走，然后里面这个内容的话需要重新做啊，这个是之前的一个内容，直接删掉他啊，有点 style 也不需要， amy 的事件的话也不需要。然后这个 amy 的事件需要，这个需要， 然后 ustory 这些都不需要。然后这里面的话他就没有这个搜索编辑一项了，直接把这个搜索这个按钮给他去掉，不要他。 然后的话再下来的话就是什么呢？再下来就是这块的一个这个数据加载啊，然后里面包含几个内容呢？第一块内容的话就搜索框吗？ search search 搜索搜索框的一个内容，再下来的话就是他的一个内容的一个展示啊，叫 content， 当然下再下来的话，还应该有一个内容，就是一个这个 如果内容比较多的话，其实应该还有一个配置的，还有一个配置的啊，但是咱那一个因为是只搜菜单吗，所以说用不着这个配置内容啊。如果说是可以搜业务数据的话，肯定是能遇到能用到这个配置信息的，进行分页数据加载， 因为数据量会很很大的啊。因为因为业务数据的话，搜的时候数据量会比较大一些，然后只搜菜单的话就那么几个，所以说我不加分页了啊。搜索框这里面，这里面的话直接放一个什么呢？嗯，输入框啊， 就跟那个是这个什么系统消息那块是很类似啊，直接放个搜索框，然后呢让他搜一下就可以了。我把这个直接拷贝一下， 直接拷贝过来，直接改一下就完了，我就不重写了。这里面是请输入搜索内容，然后这里面这个 ctrl 这里面的话需要放一个什么呢？放一个这滚动条，因为这个不知道界面有多大，所以说你这种动弹的内容的话，最好放一个滚动条， 让他能够有一个滚动的一个状态。然后里面数据如果过多的情况下显示滚动条，而这高度的话，用可乐可进行个计算，应该是一百百分之一百。然后减上一个什么呢？ 剪上一个这个六十吧。先这样子写完了之后再做一个调整。里面的话也是一样的话，你要考虑无数据跟有数据两种情况。 无数据的话放一下这个空组件啊，这里他有内压，有一个空组件的，把它直接放过来，就是没有数据的时候，按这里的话需要把这个数据定义出来，叫一个什么 deta， 就是当前的一个结果数据啊，用 rector 定义一下 x， 我定义对象比较好一些啊。然后这里面没有封页，所以说直接放个数字啊，搜索结果数据啊。 ok。 然后这里面的话，呃，什么时候显示这个空空的一个条件呢？就是 v f 啊， v f 一个代词，点一个 let's 小于等于零的时候，就是没有数据的时候展示这个完了之后再下来就是展示他的一个这个搜索结果的一个展示啊，给个什么来，给个 vi 方， v four， 呃， vl 是吧？ vivl。 然后再写一个 v four 循环啊，然后把这个 div 结束写一下，然后里面 循环一下这个袋子数据啊，阿特米什么来袋子。然后在里面的话展示这个内容，然后整体给他一个阿特姆斯的一个这个钥匙，然后分两部分，对前面的一部分的话，给个这个什么， 给个这个 ico 里面展示展示具体一个图标。然后这里面的话用 la la 什么来 ico 进行一个进行一个处理啊。 啊，这里面的动态指定它一个 tab 就可以了。这个 tab 的话直接拿一下 it， 点一个什么 ico， 然后这是一块内容。接下来的一块内容是什么呢？它左边的一个这个标题啊，叫 title 吧， 抬头就直接取这个菜单的一个名称就可以了。这样子他基本的一个逻辑就写完了。也是比较简单。完了之后还需要写一下。他的一个方法，就是教一个 lost 带走一个方法，或者说 low the dat 加载数据的一个方法，然后让他从后台去加载这个数据，后台去加载这个数据啊，这里是一个数据加载。 然后里面的话是正常加载数据啊。完了之后设置这块的话的话，让他也也让他触发一下什么呢？触发一下这个 load 带他直接叫直接叫这个 load 带他吧。就点击搜索按钮的时候，让他正常直接触发一个这个搜索时间就可以了。完了之后再在什么呢？这个音铺子上加一个称职时间啊， 加个趁着时间啊，就是趁着时间也让他直接加载数据啊。 ok， 这样子就可以了。然后再再加载数据的时候加载数据。这一套的话，咱从 message 里面拷贝一下，他是直接加载就完了，也是比较没有什么太复杂了。从这个 message 里面拷贝一下过来啊， 那他要加载一个列表数据过来吗？然后然后把它拷贝一下。嗯。然后这里面的话应该是什么 global search 啊，就全局搜索啊，全局搜索啊。 这里面传一个什么呢？传一个 q r 的过去啊， q r 的。当然这里没有定义啊，需要把它定义一下。 constant 是一个什么呢？ constant 是一个 q 二的， q 二的等于二一情况下，它肯定是个空的吧，对吧？空字不串啊。然后有内容了之后通过 model 进行一个绑定的搜索内容啊。 嗯，搜索内容啊。这里是一个搜索的内容。然后把这 k y 的什么呢？ k y 的传递传递过去。然后这里面取，需要取一下它的 y y y 六值啊。不要把这个传递过去，因为它是一个响音式的，直接传递过去有问题啊。然后数据加载到了之后，这个代词啊。 把带刺点一个扑是一个什么呢？扑是一个 rs 点一个带刺点带他，然后把带刺点一个这个，那那死等于一个零啊，直接让他清空掉，然后再把数据加过来就就可以了。 ok， 这是前端的一个完整逻辑。当然这块的话还需要写一下什么呢？写一下这个哨的一个。这个 加载数据的一个方法。然后格勒不是设置的话，需要在 apr 里面把它定义一下，最后再把它暴露出去啊。然后我是通过这个整体的方式来写这个数据加载的啊。当然你不这样子，这样子写也行啊，无所谓啊。 然后这个的话应该是一个什么呢？应该是一个盖的，或者 pass 都行啊。用 pass， pass 请求吧， pass 请求吧。因为这块儿它是一个。这个数据加载有参数啊。然后这里是全局搜索啊。这里面传递过来的是一个什么？ 传递过来的是一个 k word 的一个参数啊，就搜索的一个关键词啊。然后这里面的话，走走这个根部路下的一个格罗布斯二车，然后再把它暴露到外部去啊，暴露到外部去。 ok？ 然后然后这是前端的，应该就写完了。然后接下来就写后端啊。后端的话应该再进入到咱的后端啊。后端这块的话直接写在 index index index 里面去啊。在 index 里面写一个什么呢？写一个 partsprs 的一个方法，用于实现全局的一个搜索啊，它是用 parts 的去做的啊。然后这里面给一下什么呢？给一下这个全区搜索，全区搜索。 然后这里面需要加载一个参数。加载一个参数叫一个什么来？ k word k word k word 的一个参数等于二。 a q 点包， 因为 pass 的方向去传了嘛，所以用包里的方式去拿。拿到了之后还需要从这个 menus 里面去查找所有的一个数据啊。所以说咱把这个 menus 引进来一下。嗯， menu 带他， menu 带他。 这个地方他引不进来，我拷贝一下。游子里面拷贝一下他去。人家应该是单独定义过这个这个这个这个这个这个满意的事件的。 ok， 满意的。单词里面的话，用语音下载他这个全局搜索一下， futile 一下。因为这块没有数据库啊，所以说直接模拟的啊。 艾特们点一个什么来内蒙，内蒙点一个 index so， 我是用 index so 进行一个查找的。当然这块的话，你是应该是需要需要一个什么呢？需要一个这个判断一下这 q 二的是否存在，是否传递了。如果没传递的话，应该是全部的一个数据， 然后把它传递过去。然后如果说 qq 传递了之后没传递的情况下，我就都认为他是否要求的。如果说这边是 嗯，这边传递了，传递了的情况下就判断一下这个应该是我是我是我存在啊。等于等于负一啊，不等于负一啊，不等于负一的时候是个错。然后其他情况下不管他。 ok 之后得到一个这个结果数据啊。 当然这个地方其实有一个问题啊，有个小问题就是什么呢？他把所有的这个结果数据都搜索到，但是正常情况下咱是咱是只能搜索到用户能访问的这个数据啊。所以说这个地方其实应该还需要加个判断，加个过滤啊。 加个过滤。过滤什么呢？过滤用户的这个啊，过滤用户能访问的这个角色啊，角色，把它过滤出来才是， 是符合咱的要求的。不然的话所有数据都拿过来。其实有点不对的。其实有点不对的，把这个右转也拿一下。因为进到这里来的话，他应该是应该是什么呢？应该是已经登录了的用户才能进行全云搜索。所以说这个地方他肯定是这个。 嗯，有点能拿的到。如果账号不存在，直接报一个异常，如果说没有权限，也就返回一个，返回一个空啊，然后摘下来的话，正常走，正常走。然后获取到所有的这个结果 啊，获取到所有的这个结果数据啊，然后从通过这个结果数据里面进行一个过滤啊，结果数据里面进行一个过滤。当然这里就不用这个什么了，不用这个重新定义了，不然重新定义他会有一个冲突的。 ok， 这样子的，后端也就写完了。然后咱试一下，咱把前后端都启动一下，然后看一下这个效果啊。进到咱们这个界面里面来，刷新一下，重新登录一下， 重新登录一下系统，重新登录一下系统。然后这里面的话，应该是这个后端没有起来吗？嗯，后端好像是报错了，没有启动成功啊。看一下哪里报错了。这里面说是这里有一个这个地方有问题啊，就 index 这里， index 这里少了一个这个， 这个地方应该少一个括号，少一个括号，把它这个括号给它加一下。 ok， 然后再再重新重新登录啊，三三二四啊。 我们现在登录成功了，点击这个全局搜索，它应该能弹出一个这个框，但是这里没弹出来。没弹出来的一个原因就是应该是在这块 lair 没有引进来。把它引进来一下，这个组件。引进来一下，它是 layer 的这个弹出界面的这个组件啊，要刷 进一下，然后他应该就能加载到什么了。加载到这个全新搜索 ipi 也没有引进来啊。这个这个漏了好多东西啊。然后都需要把它引进来一下。引进来之后才能进行一个使用，不然的话他就会爆有各种各样的一个异常。这个就是比较麻烦的一个事情， api 引进来。 api 引进来的话，再刷一下，再刷一下，然后看能不能行。 ok。 现在他的一个全球界面是能展示出来的。但是有一个问题是数据没有加载到 drive。 看一下是后台报错了，还是说是前端报错了。找一下这个原因啊，然后这边的样式下来，再做一个调整。先不调整他的样式。 先看一下这个问题。哪里报错了。这里是后台报错了，报了一个五零零那个异常。五零零异常是后台报了一个错，是如来袋子没有找见。如来袋子把它引进来一下， 因为这里没有引进来这个 led， 导致他没有找见啊。把他引进来一下，引进来一下，后端就会重启啊。重启完了之后重新登录啊， 重新登录系统。咱看这 global search 管用不， 四四八七啊。然后再再点开啊，再点开，现在数据应该就能加载到了。他没有爆异常，没有爆异常，肯定数据加载到了。看一下，看一下这个，这个内容里面的话，数据加载到了，但是数据没有展示出来。没有展示出来，应该在 global 赛纸这块儿。 嗯，这块写这个数据加载的时候，我们直接直接铺实了。先点点点结构一下，结构一下，把这个两个两个进行一个合并啊，两个速度进行一个合并啊，这样子他就能展示出对应的一个内容了。但是现在钥匙是完全乱掉的，下来做一个调整啊。如何去调整呢？首先整体给他加个拍点，让他有个 不要跟边框挨着啊，这是一个处理啊。然后整体上加个边距啊，这里面的话全部用一个 div 把它包一下啊，包到一个 div 里面去。然后这里面给个什么呢，给个这扛凳子或者扛天轮都行啊。 好贴。那就是容器啊，容器的一个处理。然后在容器里面给他给他加个拍脸。上下左右的间距都给他加一下，但是上下的间距应该是自带的吧。看一下，上下间距是自带的，左右的间距是没有的，左右间距需要加一下。 加完了之后这块就可以了。完了之后这个高度是有问题的。这个这个这个一 v i 值几啊？如果 v w 百分比的话， c c l i c 啊， clark 拼对了吗？我怎么感觉老是拼不对这个呢。就是这个滚动条的一个这个高度啊。这个高度的话 需要动态设置一下啊，动态设置一下，这里面应该设置的不对啊，这个汉字的话应该是没有设置对啊，可乐可可乐可对啊，这样的应该就可以啊。然后再把它展示出来，看一下这个高度如何去调整一下。 现在高度的话他是展示出来了，但是他的高度是减的有点小，减的有点小。如果用一百分之一百减去的话，是不是好像如果用 vh 的话，其实不是特别好，因为是弹出框里面吗？ 百分比的话它不生效。那我就用 v h 减吧，因为百分比的话它负容器里面也需要进行一个设置。减去一个两百，两百六的话试一下看它能不能正常粘上。 两百六的话差不多，但是还是不取不完整。然后减个三百六吧，三百六应该就能正常的把这展示出来。试一下啊， 整个刷新一下吧。然后里面的这个样式啊，然后这里加个 flex 啊，让他进行一个左右的一个布局啊。然后然后他小的话给个 flex 的一个这个 item， 然后占整个容器占多数啊。然后这里面给个 item， item 给个样式 item， 给个 bottle bottom， 给个下标 bottom， 一匹克斯啊。然后再再再给一下什么呢？再给一个拉汉的，拉汉的就是给个行歌，行歌他给了三十个像素啊。方式赛子也设置一下方式赛，方式赛子话给了一个十六像素，让他转成一个 r e m， 然后的话在它下面的这个什么呢？ ico， ico 的话给它单独设置一下位置，给它设置一下四十像素啊。 text alt 给一个什么呢？给一个 center， 然后的话再给一个这个 discipline， discipline 的话给一个 flex， 让它进行一个垂直方向的一个居住啊。 just a just a lemon 呃呃 atom 给一个 center， 然后来整来重新点一个三叉，这样他在垂直方向上也就可以进行个居中了。哎。你设置拉开的这个是文物，他应该也是可以居中的。大家看一下这个效果能不能正常展示出来。刷新一下， 我点击一下这个全局，搜索这个界面的话是正常的。基本上可以啊。然后在界面上把这个高度调整一下，这高度剪的时候这个剪的这个这个这个 多剪一些，让他的滚动圈消失掉 这么多吗？ 嗯，应该是高度是六十 vi 乘的，因为六十剪上一个剪一个好一些啊。那无所谓了。就这样吧。然后让他让他正常完整的做一个展示就可以了。 四百八十五啊，四百八十五，正常的给他一个高端。然后这里面的行高其实还是有点不对啊。然后每个行高他展的有点少，其实展感觉上占位还是有点少。然后让他上下加个这个拍点啊，上下加个拍点处理一下。嗯，上下加个十个像素的一个拍点，然后 的话再加个 power。 就是这鼠标旋风了之后让他有个这个变动啊，这边的话变一下这个颜色啊。开了的话取开它的外值啊，取一下这个框架自带的这个颜色，知道不要自己写，自己写了之后可能暗黑色，或者说调整主题的时候可能会有问题啊。 直接直接用这种框架的这个颜色就可以。这里给个什么呢？给个 hover， 给个号玩就可以啊。完了之后再看一下这个效果啊，弹出来看一下， ok， 鼠标悬浮，它就有一个动静了。然后这里面的这个 ico 的话也给它这个钥匙稍微给给大一下这个字体的话感觉有点小，这里面的话应该是个 i 值啊， i 值的话给个防晒子，这个防晒子的话也给它一个十六啊，十六个像素啊，十六个像素就是 e r e m 就是跟一嗯 r e m 的一个单位。完了之后这块应该就可以了。可以了，我点击时间没有加下来，加一下点击时间。还有一个问题就是上面这块的这个按钮，按钮跟什么呢？按钮跟这个的输入框，这个高度应该是没有匹配啊，就是有一点变动，只把它稍微调整一下。 relative top 等于个这个负一像素啊，负一像素啊， 让他能够进行一个这个匹配啊。然后再试一下刷新也是可以的。搜索一下这个一，应该是啥数据都没有， 这里怎么还是我搜出来了，应该是有问题啊，如果搜出来呢，就是有问题的。这个首先看一下这个参数有没有传递过去啊，如果数据不对的情况下，就需要看一下这个参数没有传传递过去啊。这里应该是格罗布 钻石的时候，参数没有传递过去啊。看一下这个什么原因啊。这块这个 q 二点的话应该是传递了，然后取他的一个歪脸，然后进到这里面去的话，用 past 方去传。咱没有写这个这个纸啊，需要把它写一下才可以，不然他传递不过去的啊。 我再刷一下，再看一下这个效果啊。 啊，现在点击现在点击他就应该就可以搜索了。我搜索个一，他应该搜索不着数据啊，没有数据。然后再搜索个工作台啊， 工作台他就能搜到，这样子就可以了，这个就是全军搜索的一个功能。完了之后下来的话还要加一个什么呢？加一个处理啊。加一个处理就是鼠标悬浮的时候，他显示一个手型的这个，因为表示他能点击啊，不然的话他是有点奇异啊。然后下来的话还要设置 一下这个点击时间啊。点击这个 atm 的时候，让他能打开什么呢？打开一个菜单啊， click。 因为这个什么呢？ open 一个什么？ open 一个 open 一个 menu， open 一个 menu 的一个初恋，然后这里面把这个阿特们给他传递进去啊，然后这个 open menu 给他自定一下这个时间啊。完了之后在 tour bar 里面监听一下他监听一下这个时间啊，就是他的一个 open menu 的一个初恋，然后把它这个用， 并且用监听函数接听一下。接听一下。这个处理完了之后，让他等一下，等于 amy 贴一个什么， 也应该是一个自定义的一个世界啊，因为要传递到 home 里面去嘛。然后然后再把这个里面的话把这个阿特曼给他传递进去啊。这个其实就相当于参数的一个传递啊。然后在 amyt 的时候自定义这个参数啊，传递到 home home 里面去做一个这个数据的一个打开啊， 这里面叫一个什么呢？这个 home home 里面加一个什么呢？加一个这个拖把里面加一个什么呢？拖把里面加一个什么呢？加一个这个 menu。 oppo menu 的一个处理啊。但是 oppo menu 打开菜单的这个处理啊， 这个跟之前那个写法稍微有点不一样的，跟之前那个太补关联，关联的时候跟这个慢扭的时候，这个稍微有点不一样，咱需要调用什么呢？调用这个菜单里面的打开菜单的这个方法进行一个实现啊。这里面传递过来的是一个什么？传递过来的是一个那个艾特吗？就是一个菜单啊。 这打开菜单啊，手动打开菜单啊。然后这里面调什么呢？调一下 manu bar 的一个这个 oppo oppo manu， oppo manu 试键啊，让他进行一个这个这个这个这个处理啊。 其他这种时间是不管用啊，直接掉一个 oppo mini 啊，然后把这个 item 传递进去啊。然后这里个应该在 tour bar 里面重新实现一下。应该没有这个方法的，需要重新实现啊。这个方法 就打开这个选中的这个菜单都专门写一下。这里面的话 oppo man 有 oppo man 八 d 吧，暴露一下。然后写在前面吧，写在前面跟 oppo man 这块一个地方来，方便这个蹲印啊。 卡斯的这个 oppo man。 然后这这里面的方法名就冲突了。然后把 id 啊写上，然后这里面传递一个参数，传递一个就是 manu 的一个 id 的一个参数。然后传递进来了之后，我需要先把这个 id 对应的这个菜单找见， 找见完了之后再做一个这个打开的一个操作啊，这样子做一个处理就可以了。然后这里面的话应该是这个 slack 点类似，咱不完全一样，跟这个默认选中这个有点类似啊。默认选中这块拷贝一下吧。 然后进到这块来，进到这块来，进到这个界面里面来。然后这里面传递过来这个 menuid slag， 就不等于 router 里面了。应该等于一个什么呢？等于这个通过 id 进行一个判断， id 进行一个判断，判断一下他的 menuid 啊， ok， 找见了之后，直接调本地的这个 oppo 美女方法就可以了。这个通过按键，通过按键打开什么呢？ 对应的菜单啊，打开对应的菜单， ok， 然后再需要把这个方法暴露出去啊，暴露到外部做一个调用啊，不然他是没法调用的。我看这里暴露出去了之后，再 在 home 子里面需要把这个修改一下，叫 oppo money 八 id 啊，放在这里面需要传递 id 进去啊。啊，这样子就完成这个全部的一个工作了。完了之后接下来试一下这个能不能行啊。 我现在做一个搜索，比如说我点击通用详情，他能自动打开这个界面，这样子就可以。这样就可以完了之后让他点击了之后，自动把当前这个界面进行一个关闭啊。那这里面的话应该需要处理一下， 可立刻的时候需要监听一下这个时间啊，要做一个处理啊。然后的话，他先是处理这个完了之后把 vizbovizbou 等于一个 first 啊，当前全区搜索进行一个关闭啊，然后试一下这个效果。 当然如果是业务菜单的话，你要自动的转到这个对应的界面去啊，并且把它这个打开，把这个数据搜索出来啊。当然这块的话就 直接简单来做了。 ok， 这就是这个全新搜索的一个功能的一个视线。这块一做的话，这这主页基本上就完了，主页基本完了。然后接下来的话可能是需要做一下这个工作台界面的一个处理啊，包括骨架品啊，还有这个这个这个收起来，这个样式的一个处理啊。 呃，这个接下来再做啊，今天的话就暂时到到这个地方，但是这块的话，嗯把这个调一下吧。就是把这个 收菜单收起来了之后，菜单收起来了之后，他这块的这个选中这个样式稍微有点问题啊。这个是来源本身的一个问题啊，把它需要调整一下， 抓一下他的一个班，他应该是在这个地方，这里面他应该是多了一个什么呀，多了一个这个拍你还是啥看一下，或者说多了一个位子，这个位子的话就不能直接是百分之一百了，应该是需要计算一下，一百减去 去一个十个像素啊。因为什么呢？因为他这边加了个拍定， left 等于十个像素，所以说这块的话需要剪掉这个，他高度就能对的上了。 把这个加一下，这个在全军样式里面去加的，因为这块他是弹在这个包底里面的，不加在全军的时候他不生效。把这个处理一下， 哎，我看丢失了，这现在找不见了，把它重新弹出来一下这个，而且这个弹出来也是比较麻烦，你需要右键，然后因为鼠标稍微一挪动，他就丢失了，需要右键，然后再进来，这样子做一个处理，他才能抓的到这个包，不然他这个包都抓不见啊。 我这里面进来的时候是夹在这个地方的，这个地方的话应该是拷贝过来，拷贝过来给他一个这个宽度，宽度的话可乐卡可乐可以百分之一百减上一个十个像素，这样子他就不会说超出这个内容了。 呃，这是菜单这块的一个这个问题的一个处理啊。我现在再看一下，再看一下这个处理，然后他是不是还是超出的。我看没有超出，说明没有问题啊。 呃，这就是这个，这个全新搜索，也就是主页的一个调整。然后今天就先到这里，明天再继续做。啊。继续做什么呢？继续做这块的一个，这个后续的内容包括主页的这些内容，骨架屏什么的，继续做。嗯，今天先到这里啊，拜拜各位。