这个做完了之后啊★，接下来的话我们就还做一件事情啊★★，大家看现在你写出来的这个项目啊，就是这个样式啊，很丑，明白吧？基本上没有样式可言啊★★★， 一般来说的话，那我们在做开发的时候★★★，那这些东西这样式怎么做呢？要不要自己去写呢？不要，好吧★★★，好，那接下来的话我们再学另外一个小的字典，就拿一个呢★，就是未有见识的这个未有见识的这个什么的育儿主见啊， 对吧★★★？好，就在这个什么在使用框架做开发的时候啊，做开发的这个时候★★， 一般啊，我们是不需要啊，是不需要自己再去什么再去啊？写这种什么 cs 是代码进行什么进行页面的★★★，这种什么构建啊★★★？一般我们都是什么都是使用 使用第三方的啊★，第三方这个团队开发好的，什么开发好的这种意外组建库，明白吧？开发者只需要按照什么按照文档啊★★，按照文档 去组织什么组织这些什么组织这些遇外组建进行什么进行自己项目的，什么自己项目的构建啊★★， 明白吧？好★★★，那这育儿组件有很多啊★★★，常见的育儿组件，那第一个就把你们的育儿，明白吧？那这个我之前给他说过的★★★，这个是饿了吗盘的出来，明白吧？还有一个的话就是叫问的育儿★，那这两个育儿的话业的非常有名★，那饿了吗， 这个这个的话还是主要是做批次端的项目，明白吧？这个的话主要是做移动端的项目啊，好吧，好★★，那这 这个的话是有在公司出的啊，那我们就去用一下这种育儿组建库，那这种育儿组建库他跟我们有提供什么？提供很好的这种什么布局，要把界面，那我们怎么去用呢★★？好，接下来的话我们就去用一下啊，那我们在这边就去找到这个什么海里面的鱼饵啊，这个东西 好，找到了之后这个是的光网啊，那大家下去了之后可以看一下。好★★，那接下来的话呢★★★？他教你的啊★，他说了这个东西要怎么样去用，你就点到这里★，但这个指南大家最好下去了之后一直把它读一下，就从头到尾把它读一遍利来老牌ag旗舰，好不好 啊？点到这个主键★，然后他教你了，他说应该怎么去安装★★，怎么去使用★★，我们点到这里一个地方有个东西叫快速上手★★★，明白吧？快速上手了之后，他教你了之后在这个什么，就是在这个微有什么★★？微有 cla 里面★，然后怎么去用★★，明白吧？好★★，那在这边呢，我们就在这个地方， 大家可以看得到啊★。啊★★★，首先的话，第一步啊★★，就是要安装，肯定要安装啊，安装了之后，在你的项目里面★★，首先第一步你需要去导入这个什么导入 idmy ui， 明白，导入了之后，然后你通过这句话去使用一下，然后还导入这个 cs★★， 明白吧★★★？ 导入了之后，然后就可以用了，那我们就去用一下吧。好★，第一步的话安装啊，那我们就把这安装一下吧。好，那找到我们自己的这个项目。 好★，就这个项目啊。好，那点开，点开了之后，那我们要安装，安装的话点交流的第一步压 app， 然后再把这个 把你们的 ui★★， 这是一个主线库★★，就别人提供★★★。好的★，你只需要安装★，安装好了之后接下来的话，他说快速上手里面，他教我们来着★★★，点到快速上手啊，然后在这个地方你就干嘛呢？在你的梦点界市里面，然后引路。什么引路？这两个看到了吗？那就在下面，我就在这个梦点界 里面★★★。好，首先啊★★★，好找到这个闷点结实，闷点结实的话他说了在这个下面啊，那引路★，明白吧？引路了一个什么安利的 ui， 引路了一个 cs， 这个的话，就是 这个里面他就给我们定义了很多育儿组件，这个是育儿组件的样式文件，明白吗？好，定义好了之后接下来的话呢★★？啊，还要执行这样一句话，明白吗？执行这样一句话，就是 这句话的底层啊★，就这句话的底层★★，我告诉大家这句话的底层啊的底层的含义啊★，就是什么？就是 把上面啊★★★，把上面这个什么安利门的 u i★， 这里面的这个组件啊★★，就是这里面 定义的这个组件，把它注册到这个什么固有的这个全局，明白吧？就这一行代码的底层啊★★，他大致走了一个罗街，就这样一个罗街，就说这行代码的这个这行代码的 底层的逻辑，他的逻辑啊，底层原码大致是这样啊，好，就写了个什么，写了个微友点 compon ent★★， 明白吧？好，到时的话我们用一些组件★★，这个安利门的图案里面他有很多的组件，他尼罗还有这种巴腾这种组件，明白吧？ 这边的话他有一个名称，然后在这边就是按你们的点这个内幕，就说这个组件有一个名称★★，然后有一个什么一个组件对象★★★，明白。就是按你们的 ui， 他里面就跟我们把这东西设置好了的★★★，他底层就像这样注册★★★，注册好了之后★，等一下，在我们的什么稍后，在我们的什么稍后啊★， 在我们的这个什么在我们的代码里面就可以，什么就可以使用安利门的 ui★★★， 你们的 ui 啊★？提供的什么★★★？提供的那些什么那些主见，明白。好★，那按你们的 ui 提供了 哪一些组件啊？那我们在这边就去看一下★★★，在这边点他的文档★★，明白吗？好，做好了之后★★★，然后在这边有一个组件★★，组件好了之后再看他分成这个组件他分成了几类★★★？第一类的话叫基础组件，看到了吗★★★？叫掰四口，掰四口叫基本的，然后接下来的话有提供跟表单相关的，然后还有一个跟什么跟数据展示相关的， 然后还有一个的话是跟什么★★？跟那个消音体是相关的★★，然后最后的话还有些什么跟导航相关的，最后就是其他的，明白吗？好，就是他提供了这些的组件，那大家可以看到他的组件是有很好的一个分裂啊。好★，那要说我们家说想直接上手拿来用一下★★★，一般来说我们就先用一下他的这个八筒★，明白吗？ 好★★★，大家看这边的话就是他给我们写好了这个八筒，那这八筒如果要用怎么用呢★★？大家点一下，这个地方有显示代码★，显示代码的时候大家可以看得到他这边就有这个什么，就有个一啊八筒， 明白，就这个东西我们直接给他复制一下，掌握在我们的代码里面就可以去用了。好吧★？就他给我们已经写好了的，但是在这里面为什么能用这些东西啊★★？大家看其实就相当于他的底层肯定会写出类似这样一句话，明白吗？就在这里面这个一二内蒙，他就会相当于把这个八藤，干嘛★★？ 就是把这个八筒，是不是在这边就去写注册这样一个八筒★★，有吗？注册好了之后★，然后在这里面有一个八筒的一个组件对象，在组件对象里面他是不是要定义是个什么 t 一 t 一 m pl t 恤 他们那的★★，他们的定义好了之后，然后在这边他是要定义什么？定代码，其实五月份就是定义了一些什么，定义了一些这巴腾，因为他的底层肯定还是走的什么，走的我们原始的那一套吗？那这里面是放了一个巴腾在巴腾里面这个地方是不是要放一个什么？放一个插槽★★，明白吗？到时候调动者的话是不是根 根据这个调动者，你看调动者在这里面不是传了一些东西了吗？到时候这个东西是不是就放在这里呢？懂我意思了吧？好，那这个呢就是他底层的原理★， 这个原理了之后，接下来的话我们就把这张代码★★★，把这些代码全部复制一下★，复制下来之后去我们的项目里面用，那么项目里面哪哪里都可以用呢？那我们找到我们的页面吧，那我们在这边再去找一个页面啊？好，找到这个什么，找到我们的这个主页吧★，主页里面其实这里面的代码我们这些东西都用不上啊，那我就把这些东西都干掉吧★， 看到了之后我们去主页里面就去引流这些东西，对吧？好，这个主页我们也用不上了啊★。 啊，这样做好了之后★★，大家看现在在这里面我们就可以干嘛呢？就去主页里面就有这些按钮了啊，好，接下来的话★，那我们在这边再去好那个项目的话★★★，我再重新跑一下啊★，都会后续的。 王八号八零八零啊★，回车下啊，大家看现在我的页面上就有这些按钮了，你看你现在啥没干啊？你这按钮就出来了★，别人就给你写好了★，这 这个是挺方便的一些东西吧★★★？就是你用他的这些什么育儿组间库就可以做好的。好吧？好，但育儿组间库除了这种基本的这个按钮★，他还给我们提供了很多有用的东西，明白吧★★★？假如说你要用到这一些 比较稍微比较啊好点的东西吧，那像哪一个我们用的比较多啊？像这个日日历啊，日历啊★★★，日历的话应该是在这个里面叫这个★， 这里★，对，就这个啊，大家说我想用这样的一个效果★★★，我就说在我的项目里面★，我家说要放这个什么放这个日期选择就是类似这样的一个效果。那很多项目里面都有这样的东西吗？那你说你要用的话怎么办呢？大家看 你点开，点开了之后，然后别人教你的，大家是看在这边的话是不是有一个叫医药，是吗？这个你看看这样对吗？医药堆的皮革★★，然后这里面是不是有这样一个东西，你把这东西干嘛★★★？把它复制一下★，复制一下了之后是不是放到我们项目里面去好复制，复制的好了之后再看啊？ 他这个东西的话你要给他传点水线，第一个是蜗牛摸到明白，第二个是对的★，然后这个提示服，那这个东西到底放什么呢★★★？就是这个微摸到到底这里放什么东西？你就在这里面，你去看明白★★，你就点到这个蜗牛一吗★？然后在这边你去看一下他的这个蜗牛一，然后在这个地方， 好，外面也是个空串★★★，明白吧？那么你，你就在这里面，你就在这个地方★★，你是不是要写个对头？对头写好了之后，然后的话在这个地方，然后就蕊成一个★★。什么★★？蕊成一个对象★★★，这个对象里面的歪柳是不是一个空字？是不是做好★★，然后做好了之后这里加个逗号啊★★★？啊★★★？来看，你就只需要写上这样一行代码★★，那这个功能 就出来了，你自己都不用干什么事情啊？大家看在这边点一下，你看这功能就做好了，这个歪理枝的话，应该就是我们获取到的这个日期，明白吧★？就是我们的这个日期，我在这边可以通过我的调试代码★★，然后这边不是有一个微友吗？然后在这边你看我调试的时候， 好，大家看在这边★★，我点到这个地方，点了之后，这个的话不是有一个什么★★，我在这边就去看一下他的这个什么 他的这个信息啊★，你看在这边他就会跟我们生成这很多的这些东西，你就根据你自己的调试方式，自己在这里面去找你要的数据信息吧。好吧， 好，我们来 abb 组件啊， abb 组件里面，然后在这里面当前的这个激活的啊，然后在这里面我们去找到这个地方，大家看在这里面啊，好， 这东西你看这个歪掉啊★★，我们找一下我们的歪六一啊★，应该是有的啊，好，就那个歪六一就是我们的那个时间信息在这边 去调吧。好★，那这个呢就是我们的这个 ui 组件裤啊，你就通过这种方式就可以去用了好不好？好，在这里面有一个用的比较多的啊，就这一个★，大家看点到这个组件里面啊，这里面有这个 有个东西叫莱奥特布局，明白吗？这个布局的话就是我们去做开发的时候，我们要做这种什么布局的效果，你看做这种布局其实就是三个布局系统吗？你在这边就去找，找了之后啊，他好像有些常见的一些布局★★★，他给我们写好了的★★。大家看 在我们项目里面啊，做后台，如果是做后台的话，像这种布局是很常见的★★，就是左边一个导航条★★，右边的话一个选择，大家看这样做好，然后的话这个来啊★★，那就只提供了这这几种基础版的啊，还提供了这种版★★★，好吧★，那你就可以拿来去用了，这呢就是我们所说的 育儿组件裤，大家知道怎么用就行了啊。好★★★，用法很简单★★★，第一步你安装★，第二步的话你就使用这三行代码，然后最后的话就是找什么找里面的那些组件效果★，然后再把复制粘贴放到这里就行了，好吧， 好★★，我们先把这个 ui 主型库啊★，按你们的 ui 就给他讲这么多，后面我们做项目的时候就要用到这个，大家可以先去用一下啊。
好了，同学们，这节课呢★★，我们来做一下列表的最后一个功能，哎★，它呢叫做无限加载，什么意思呢？哎★★★，它其实呢属于我们加载下页数据的一个变形体啊★，跟那个 fair 差不多，我们过来看， 比方说现在呢★★，我们这个列表呢是可以被滚动的，当你滚动到底部的时候呢，他会自动把下一页的新列表呢给他加载回来★，加载回来以后呢跟我们的老列表呢做一个拼接★，形成一个新的可滚动的列表。哎，如此反复就是我们的无限加载★★★， 大家想要这个该怎么做？哈★★★，你说如何拉到我们新列表呀？哎，是不是可以把那个配置给它加一页就可以拿到下页数据啊★★？所以这个核心逻辑呢比较简单哈，我们只需要呢借助我们的这个 v 刚 infinite screw 指令监听一下当前呢是否满足这 处理条件，哎，就说呢，他是否滚动到我们的底路了，那如果满足了条件，咱们让这个页数呢加一位，哎，变成下一页，然后呢去加载下一页数据， 拿到数据以后呢，咱把这个新老数据呢给他做一个拼接渲染。哎，这个功能不就实现了吗？哎，他其实就是我们加载下页数据的一个变形体啊，跟 fair 逻辑是相似的。好了★★，那按照这个核心逻辑的话，咱把它拆分一下我们的核心步骤， 首先呢咱们去配置一下我们这个指令，看看呢★★★，这个指令到底如何来配置保证呢？他是可用的★★★，能够做到一个监听★★★，哎，监听我们的页面呢是否滚动到了我们的底部？ 他★★， ok， 以后呢，接着我们去写我们的逻辑，重点呢是把我们的页数加一，然后呢获取一下下页这个数据，对不对★★？拿到数据以后★，我们需要做的是 老数据和新数据的拼接，哎，希望呢，大家用我们原声的速度方法给他做一个拼接★★，拼接完毕以后呢，数据应该就渲染出来了，渲染出来以后呢， 最后一步，你得把这个加载完成时的一个状态给他结束一下，比方说呢，现在后端呢★★★，已经没有数据给到你了★★，那这个时候咱是不是就不用他再去监听了呀★★？哎，我们把它结束掉，整个流程是不是就跑完了★★★？好了★★，那咱们把这个结构呢给他盯一下★★★，咱就按照这个路径呢做一个实现 好，把它翻过来，我们先做一下，我们第一步配置一下我们这个指令，看看他呢如何来配置好。回到我们的官方网站点过来★★★， 在左侧呢有一个无限滚动的指令，我已经把它呢切换到这个页面里边了，我们看一下怎么来用哈。先过来看他的一个基础用法★★★，他说呢★★，要想实现滚 动，加载的列表上呢，你添加你添加一个 v 杠 infinite screw， 并呢复制相应的加载方法，可实现滚动到底部，看这里哈，自动执行加载方法。哎，它的作用呢，就是为了帮你去监听是否滚动到底部了★★★，打开的代码看一下怎么来用哈★★★。 哎，这里呢有一个 u l， 他在他身上呢写了一个这个指令，绑定了一个 low 的方法没了★★★，就这么简单。好★，那咱们也写一下呗，复制一下，好，回到我们的 cod 区域， 那咱们找到我们的果冻元素，是不是这个 body 啊★，这个盒子啊，然后呢，我们给它加上一个微钢 infinite★★★， 我们的 screw 后面呢，跟了一个方法， ok， 方法还没有★★，咱们给他声明一个叫做加载更多。 好★，我们来一个 load 在里边呢，我们先简单的 log 一下★，加载更多数据喽。 好★★★，保存一下，我们过来测试哈，看看到达底部的时候他有没有给我们，哎，打印出来这句话。好★★★，回到我们浏览器过来测试★★。 检查好，来到我们的 ctrl 区查询一下， 清空★，往下滑啊★★★，往下滑，看到没有？这里呢，打印出来了对不对啊？那证明呢★★★，我们回调呢就已经执行了，我们的监听呢就已经生效了， 接下来呢★，我们的第一步是不是就做完了呀★★★？好，回到我们 cos 区域呢，我们去做一下我们的逻辑★。第二步，加载页数★★★，获取我们的下页数据★。好，我们回来 过来★，在这里边是不是写逻辑了★★★，哎★★，获取我们下一页的数据，那给这个页数加一的话，无非就是我们的 i q date 下面的 我们的 page， 给它来一个加加，然后怎么办呢？哎，新老数据呢，给它做一个拼接★★★，首先呢★★★，我们把这个下边儿数据呢给它拿到过来 获取数据的接口现成的。那就把它复制一份呗★★，把它扔过来，拿到我们下一页数据。好，这里呢，补充一个 think 新数据呢，被你拿到了，来做拼接呗。拼接数组怎么做呀★？哎，要不呢★？你用我们 es 五的 contact 方法要不呢？用我们的展开运算符是不是也可以呀？好★，这里呢，我们用一下我们的展开运算符， 新老数据拼接，先写一下我们的老数据★，老数据呢★★★，是我们的 good list， 点 value， 先把它展开老数据，然后再把我们的新数据展开点点点★，是不是我们 i s 点 route 下面的 items 呀， 这样的话就会构成一个新的数组★★，咱们把它重新交给我们的响应式 list， 哎★★★，是不是就完事了呀★？ ok， 到这里呢，我们可以过来简单测试一下，看看它有没有生效，能不能加载下一页的数据★，好保存。我们过来 这次测试呢，我们点过来看一下我们的 network 区域啊，清空一下★★★，我们刷新好往下滑啊， 哎，看是不是多了一次★，再往下滑★★， 哎★★，是不是又多一次★，我们看一下这三次呢★★★，他们请求的自断啊，点过来配置为二， okay★★★， 点过来，配置为三，没有问题， 而且呢★★★，你会发现呢，列表数越来越长了呀，那证明他已经拼接好了★★，对不对★★★？好了★★，那么呢★★★，前三步呢，就都做完了，最后一步加载完毕以后★，你得给人家结束掉呀，那这个结束条件我们什么时候能知道呢？看一下，先看他的返回值哈， 看看里边有没有个字段，告诉我们什么时候数据全部加载完毕了，点过来你会发现好像也没有告诉我们★★★，没有告诉我们，怎么办呢？哎，我们就可以用这个 items， 如果没有数据了，这个 item 是不是空数组了呀？所以呢★★，我们可以用它呢做一个判断条件★★★，但是这个地方呢，在实际开发时候呢，也可以跟后端商量哈，到底有没有这么一个字段，没有的话，我们就用这个 item 判断它是否为空就行了哈。好★★★，回到我们的 cod 区★★，我们做一下★★★。我们最后一步 这个位置呢★★★，我们加载完毕给他呢★★，停止我们的监听，我们先做一个判断，那如果 我们的返回值 i s 点儿我们的 route 点儿 items， 它第一个 lens 等于等于零★，那是不是证明呢？已经没有数据了呀，没有数据怎么办呢★★★？要停止监听 听。今天我们看看这个组件如何来做哈★★★，不来★，再来到我们的组件文档里边看一下如何来停止监听。这里有一个禁用加载啊，就是它，其实我们看一下怎么来禁用★★★，往后翻， 大家看这里哈，这个地方有个字段，它这个属性呢，其实就是决定是否当前呢禁用我们的加载的★★★，哎，用的就是它啊。来，我们过来呢，给它玩一下，复制一份★★，回到我们自己的 cos 区域，给它绑定一下。 哎★★，给他呢★★★？绑定一下★★，后面来了个 disabled。 没有，没有的话我们给他声明一下。好★★，在上面呢★★，我们给他声明一个 disabled 的一个 raf。 一开始呢是一个 force 啊，还没有禁用， 等到你想给他没有数据的时候禁用掉的时候呢，你把它变成一个处就可以了。好★★，我们过来测试一下啊★，来， disable 的点 value 等于一个处。哎，这样的话呢，他就禁用掉了啊。 好，保存，我们过来测试一下看看呢。加载完毕时候他有没有生效过来。好，我们刷新一下。好，我们往下滑。好，我们就一直往下滑， 这些数据很多啊★★，大家耐心一点，应该滑到最后可以停掉，看。现在还有吗★★？嗯，现在还有 三百多条，应该有十几页★，哎，到这里没了哈，没了没了★★★，以后呢★★★，在这个位置 看这地方是不是空了呀，空了以后呢★★★，他就不再去监听了，看我们再下来也不管用了哈，他也不会有新的接口出来了，对不对？看对不对哎，就没有了哈★★★，那证明呢★，就已经生效了。 好了，那这小任务呢★，我们就又完成了★，回来呢，咱们做一个简单的小结★★★，看看我们做了哪些事哈。 我们呢，首先是跟大家说了一下，我们这个所谓的列表无线加载呀，它其实就是一个变形状态的分页呗★★，哎，也是为了获取新数据的， 那无非就是我们做到的事，就是监听一下当前页面呢★，什么时候滚动到我们的底部了，到底以后呢，咱们开始去加载下一页数据，把数据拿到以后，跟老数据呢做一个拼接，重新渲染起来不就可以了吗★★？如此反复。所以呢★★★，他 叫做无限加载啊。那这里面呢，我们要解决的事呢，有这么几个关键点，第一个也是最重要的，就是我们如何得知他已经滑动到了底部了★，谁来解决的呀？是我们这个指令呀， 这个指令呢，由我们 plus 版本的提供，它可以帮助你去监听是否触底了，然后后续的逻辑操作我们自己来写。这个逻辑里边的重点呢，无非就是一二数加一，拿到新数据， 新老数据拼接★，我们得会用我们的数组方法，最后呢，别忘了结束之后呢★★★，把它干掉★★，哎，干掉有属性呢，专门用来做这个事的哈。 这地方呢，我们也说了，如果后端呢，有一个字段明确告诉我们什么时候停止，那就用那个字段★★，如果没有的话，我们可以利用他的长度为零作为一个判断条件，是不是也行呀？好了，那这节课呢，我们就到这里 回来呢，咱们把这个代码呢给他做一个提交★。好，提交代码以后呢咱们列表的功能呢就完全给他做完了。 好★★，这地方呢是一个二级分类★，我们的列表无线 加载实现走。 ok， 好★★，我们先停一下★。
接下来我们看一下新闻资讯的分类★★★，这个是新闻资讯的二级栏目分类，那我们这边目前应该是还没有的★★， 在后台新增加一下★★， 这样我们就将资讯的内容调整好了，然后在这里去调用新闻资讯的分类★， 随后去调用此栏目，可以根据栏目的 u、 r★★★、 l 去掉用此栏目。 这边是新闻，就叫 news★★。 可以看到紫栏目返回的是有这么多数据★★★，选择标题★★， 这个数量是没有的，就暂时去掉刷新可以看一下，这边是有了， 同时将它的链接处理一下， 可以了。活动播报以及行业快讯 可以看到这两个分类，因为也是附用的 news 这个列表仕途，所以我们需要在这边去它的层级★★。 列表里面有一个面包线，它其实是一个数组， 我们就直接可以将它循环渲染，这样就能实现一个多层级的结构。 这个是面包蟹的分割， 这样我们应该就能显示他的一个面包蟹导航了★★。可以看到一级新闻资讯★★★，二级是活动播报。 ok， 这样没有问题，那分类这一块我们就处理好了。更多创新创意，敬请关注 mods。
好，然后我们来看一下怎么做。首先呢，把我们的这个刚刚建的这个工程导入进来， 就是这个吧，是不是这个？哎★★？给它导入进来，导入进来之后呢？我们该干什么呢★★★？我们 这个文件 wait， 点 configure★， 点 g s 这个配置啊★，我们按照这个的配置给它配置一下， 加了一些东西，是不是 这个 weight 点 config， 点 g s 从老师给你们的这个工程当中啊考过来，所以呢，第一步是 it 点 config ps， 直接就是全文拷贝就可以，明白了吧？ 然后呢，接下来是 i k 是点儿杰森， 这个不用管它。然后呢，就是 index 点 h t m l 这个是我做了一些改动， 我做了一些改动， 你看他原来是这个样子的，是不是★？原来是不是这个样子的，我现在给他改成什么呢？改成这样我把什么改了呢？ 底下我都没动，是吧？底下是不是没动？我把它的标题改为新闻在线了，不是 vit 加 vit 了，对不对★？这能理解吧？然后呢，我把这个 a p p 就是 i d 是 a p p 的这个元素★★，它的这个位置给改了， procession x lut left 零 p x top 零 p x★★， 它就在左上角★，绝对位置，对不对？不是居中了， 他就跑上面去了，懂吧★？ 所以说呢★★★，加上这么一段 style★★★， 能理解吗★★★？能理解吗★？能理解哈， 那么这一段加完了之后呢？ 它掉的是 s r c 下的慢点 g s 是不是？ 然后慢点 g s 又掉了 a p p 点 will 是不是？是不是掉了 a p p 点 will？ 那么在这里边的时候★★★，我们也不写这些东西★★★，把它全部删掉，而写什么呢？ 而写的是这些东西★， ul l i 的这个样式正常，它不是一个点一个东西，一个点一个东西，而且是一行是一行的吗？ 现在我们要求的效果是把点去掉，而且摆在同一行上，就需要这样写样式，这是我百度找的★，这是我百度找的，知道吧？然后呢，接下来 我们有一个 temperate 模板，开始，模板结束，这个是 voe 的东西，这也是 voe 的东西，那么我们来看一下啊★★★， 那么在这个文件之前呢，我们需要自己写这样的一个 actions， 这样的一个文件★， ctrl c★， 然后呢 按住 v 放到 s 二十一之下， 哎★★★， 跑过来了哈，这是啥意思呢？这是创建一个有关于 anxious 的一个调用的一个 方式，创建一个 service 对象，这个 service 对象是 actions 点 creat， 它的基本的路径是什么？什么★★？就是咱们的前缀呗， 对不对？这样的前缀， http logo host， 你是八零八零★，你就写八零八零，你是九零九零，你就写九零九零，然后这是后台的那个工程的那个名字★， 明白吗★★？啊★？这个是后台的那个工程的名字，然后这是端口，这个是主机名字★★★，然后呢★★， is part default service★， 它是默认导入的，然后呢，接下来我们最后一个文件就是它了啊，就是它了， 那么 u l i 是不是一个一个的从接口当中调用的这个值啊★★★？对不对★★★？那么这个 l i 我们要写 l i， 我看看啊★★， l i 要写的是什么呢？ v 杠 four★★★， four 是啥意思★★★？是不是跟循环有关★★★？是不是跟循环有关 啊★★★？那么就是 title list， title in title list 这个名可以随便起，这个名也是我自己起的啊★★★， title in title list， 然后呢？他的这个 k 呢★★★？是抬头对象的 mid★， 然后里面是放的这个信息是抬头点 menu name★★， menu name 不就是菜单名吗？对不对？ 然后你们说★★，老师，我的这个抬头 list 打哪来呀★★★？打下面来★，这不有个 data 吗★？有个抬头 list 对不对★？ 它是空的吧？一开始它是不是一个数组，是一个集合★★★？然后呢？我们用 service 点 get 去调后台的接口， menu★★， ctrler list★★★， 后台接口返回的数据是 response 点 data， response 点 data 是后台返回的数据，它是不是？呃， menu 全表，所有行，所有列★， 对不对？把这个信息存到当前最像的 title list 当中， 对不对★★？放到抬头 list 当中，然后呢？上面的时候，上面的时候★，你就这个抬头 list 就拿到了所有行★★★，所有列，一个抬头是一行还是一列？ 对★★★，一个开头是一行，这一行有 m i d★★★， 有 manual name， 好像还有 my type 还是什么呀？ 我看一眼啊，还有什么呢？ article type， 对不对★★★？还有 article type★★★， 就是说这个 menu 里有啥，那个 title 里就有啥， 它有 m i d， menu name 和 article type★， 对不对？ 那在这里边呢？为什么是这样的？我可以给大家调一下子， 调一下啊。 h t t t local host 九零九零一★★，这不是调出来了吗★？一条信息，它是不是有三个列， m i d， my new name 和 art hot type 几条信息★， 几条信息★★，是不是三条，对吧？三条信息★★，所以说 我们啊，在这里边，这个 for 就会被循环几次呀？三次是因为有三行还是有三列？ 因为有三行，对不对？是不是因为有三行啊？啊？那么这个抬头 list 拿到的信息★★★，这不说了吗？来自于反 返回的结果，返回的结果是啥呀★★★？不就是这些东西吗★？对不对？这些东西，然后呢，他循环★★★，为啥循环他有三行呢？他有三行呢？他一定要循环的。 v 杠 four 是一个 vivo 指令 啊，是微杠否循环的一个指令，循环三次★★，每次的东西都在胎头里，胎头里具有三列，有胎头点 m i， d， 胎头点 manuename， 胎头点 article type， 对不对？那么这里要输出的是不是胎头点 manuename 啊★， 对不对？现在是不是懂了一些了啊，流程也会了是不是？嗯啊 啊★★，咳， 看看啊，这都没动★★★。 这个应该是没动。然后 s r c 下新建一个 a x i o s 文件， a x i o s 点 g s 文件，然后里面放什么内容呢？就放 这个，如果需要调整的可以调整啊，这不是一成不变的★★★。 然后呢★，我们的 工程之下的 index h， t， m， l 和我看啊， a p p 点 will as as★★。 然后呢？接下来是什么呢？最后一步了啊，大家注意，最后一步是也是有点乱的瞅着哈， 我给大家这个再拍一下版， 第一步，第二步★，第三步， 第四步，工程之下的 index， 点 html 拷贝一下。 那么拷贝一下之后呢，就可以用了，怎么用呢 啊？ 选择运行下的★★★，运行到终端下的 npm 软 dev， 就这个运行。 现在这个是二二是吧★★？ 今天要看的是我的 news， 这个 iter 是吧？ n p m 不是最新的呀★★★， 我看看啊，掉没掉出来。 稍微等一下啊★★★，现在呢，正在进行安装咱们刚才建的这个工程啊， news big data， 下课休息吧。 呃，我们第一步的时候是修改了 wait， 点 config， 点 g s 文 文件。第二步的时候呢★，在 s r c 下新建了一个 action 点 g s 文件往里放东西★★，第三步的时候修改了 a p p 点 will 第四步的时候 工程之下的 index h m l 进行修改，第五步的时候呢，进入到倒词下啊，然后呢进入到我们的 newspac data 文件夹下，输入 n p m install 安装工程，输入 n p m run d v 啊★，运行前台服务，然后访问网站★★★，然后我们就看到这样的一个效果了，是吧？好，第一个功能点我们已经结束了。
那么这个视频呢★？主要就是承接啊，承接上一个视频 啊★★，进行继续开发★。那么在 spend boot 当中啊，在这个 spend boot 框架当中★★，我们如何去？呃，通过编码实现连接数据库★，访问数据库呢 啊，做一个访问数据库的接口啊★★★，显示一下就是新闻的啊。主菜单列表 我们开始做了啊， 开始做了啊★★★。呃★★，还是苗语朋你来做啊。在 java 目录下 java 的目录下★★★， 在 e d u 点喊应用底下咱们的代码一定要跟慢，在慢及慢之下，然后让慢控制咱们整个这个项目的一些代码，因为他要起一个启动的作用对吧？然后呢，我们 啊鸡右键 e d u 点喊应用鸡右键一起做啊。鸡右键 new 一个 class 扎瓦 class 第一项别往后找，写一个。呃， 按 tat 点 e n t i t y 按 tate e n t i t y 慢点打稳点啊，点 大 m menu m e n u 别回车啊。让大家看一看。打一个 intet 点 menu★★★。 此刻呢，就会在 edu 点喊应用的这个 包下建一个子包一 on tate★★， 在 on tate 子包下建一个类 menu★。 这不做完了吗？有没做的呀？带电脑的是不是？有没做的？ 回车是不来了？来了之后 我们回车啊★，要打的代码我给你们粘过来了★★。 private intaker mid private stream menu name private strength article type 然后呢，在第二行的位置哎★，删了干嘛呀？就这样的， 第二行的位置打一下 at data 大地第二行的位置就是行行号 public class 的上面对 at 就是那个 at★★， 不是 a t★★★， 也不是 it， 就是艾特谁 谁的那个★。大地 d a t a data， 你看它是不是 lobok 这样的一个。呃★，插件里的呀★★★。回车 对好。那么在这里边呢？我们创建了一个实体类★，这是第一步★★★。 实体类啊★，它主要反映的是刻画的是我们数据库表里的结构。我们现在数据库里有几张表 啊？徐彤彤数据库里有几张表，光粘了是不是几张表都不知道啊★★★？几张表★？ 说呀，仨表★，那表是你建的不？俩表吗？一个是 menu 菜单表，一个是标★，一个是那个文章表吗？是不就俩表★★★？第一张表我们先来做，先来做他的实体类。 实体类是我们真正编码的第一步★。假如说你数据库表里面有八张表，你要建立几个实体类？ 几个实体类是不是八个？每个表要对应建一个实体类，这是要做的事。因为他描述了表的结构对不对。 那么我们的表 manu 表★★，它的这个 m、 i★、 d 是不是整数啊？整数就给它一个包装类 integr， 然后还有一个 manus manunaim 是不是？ 是支付串类型的，是不是就给他死俊。还有 article type 是不是也是支付串类型的，是不是啊，对不对？那么在这里边我们看一下我我的这个表结构★★，给大家看一看啊★★★。 这是三列 m、 i、 d， manual name 和 article type 对不对★★？ m★、 i★★★、 d 是什么类型的★★★？ 整数吧，是不是整数，剩下两个是不是字符串啊★★★？所以说我们就建一个实体类★，跟表明一样★★。然后有同学说老师， 你表名叫 menu★★★， 小写的 m， 为啥让我在这里大写呀？类名的首字母不都是大写的吗？然后呢？这里面不有三个字段吗★★★？你就得创建三个成员变量啊★。 integr m i d stream menu name strenge 阿迪 co type 这个会了吧？ 会不会★★？如果会的话，如果嗯的话★★★，那么下一个表的实体类就要你们自己做了 啊★★★。一会如果还有点时间的话，我让你们自己做，我检查你们每个人的实体类有什么问题★★。然后这个艾特艾特 deter 这个注解一定要给上。 给上之后呢★？然后我们这里面就拥有了 get 赛的方法和抽死顺方法★★。一堆代码是不是都已经省了是不是★★★？但是有没有？ 是有的，但是省了由艾特 data 帮我们做★★。明白了吧★。这个是实体类。下面呢★★★，我们再来编一下第二集它的顶上。上面一集是谁呀？是 map， 相当于数据访问层。 然后我们现在再编那个再编啊， 前面往往往往前串一串，那个苗语蓬 窗口往后串，应该是往后串。我想看到前面的得往后串★。串不了啊★★★。 刚才还好使呢。现在咋的了？ 继续建 mapper 层。 mapper 的上一级是服务层★，服务层上一级是 controller， 就是控制层。然后咱们这个呃小流程就走完了啊。好了，咱走上一层啊★。实体类的上一层在 h y y 那个 节点上， e d 右对肌右键肌右键 new 一个扎瓦 class 叫做小 m mapper 点 mapper m a p p 一二 map 点 m a p p 一二，大家跟着敲啊★★★。 map 点呃大 m manual mapper m e n u 刚才那个实体类是不是都做完了？后面的四位男同学是不是都做完了对吧★★★？ menu 然后 maper 大 m 因为咱们是针对 mino 的 mapper， 所以说就是 maper 对吧？那么实体类上面的 maper 层什么？什么？ mapper 八个 表的话，以表名作为前缀★★★，以 map 作为后缀加起来进行命名 manue map 大 m 这么命名啊？大 m 打呀 map m a p p e r 然后选 interface。 这是接口★，不是类★★。就是这么要求的。在下一个视频里，我会对于咱们这一段代码呢进行一个详细的讲解。咱现在把它做出来，然后 interface 呃，双击双击 interface 对★★★。然后我们打上第二行★，打上注解大写的 at mapper at m 大 m 对第二个第二个，他给的第二个对了★。 然后这里面打一个方法★★★，第七行打一个方法★★。 public public 空格 dial dial laced l i s t 啊，类似的是吧★★？嗯，监括号就是用到了集合，还有范型监括号知道是啥样的吗？就是一个小于号★，一个大于号。 就各种各种括号你都打一遍是吧★。呃★★★，大 m menu m e n u m e n u 然后大大于号后面儿打一下。 least all l i s t 小 l 对 least 大 a 括号 a l l a l 打哪去了？ a 的后面打 l l 对后面打个分号，最后打个分号★。嗯★★★， 看看啊。 public 怎么还不认呢★？ 你把啊导入就行了。来我看看啊★★。 那出问题的地方是什么呢？就是它的 public 打成 p u b i l c 了，然后 public 都没认，后面的他也不知道怎么回事了，对不对。然后把这个改了以后之后呢★？然后 list 和 menu 它不在一个 包里，然后要倒包★★★。倒包是把光标落到你想倒包的这个所在的这个类或者接口的名字位置★★★。 out 回车，然后就倒进来了啊★★★，知道了吧。然后呢，接下来我们做一下 miper 这一层的这个叉 m l 文件。叉 m l 文件 那么我们在这里边啊，在 resources 下注意了啊★★★， mapper 这个 sm 文件的位置一般来说和我们的这个 mapper 的所在的这个包的层次位置关系都是一样的。 那么 mapper 层次关系是在 edu 的喊应用的 mapper 下吧，对不对？这一块很重要啊，有的同学做错了★，整个程序都不好使了，项目都不行了。 resources 下，击右键★， 你有一个★★★，你有一个 directory， 就是目录建一个文件夹对，叫 e d u 回车★★★。然后 e d u 下再建立一个喊应用。 呃， directory 跟住了啊，不能写 e e d u 点喊应用啊。告诉你们回车★， 它虽然生成的是点★★★，但是咱不能那么做，知道吧，那么做就错了。在 resources 下建一个文件夹， directory 叫做 e d u。 在 e d u 底下再建一个 h y y， 在 h y y 底下再建一个 map★★。 记右键继续记右键★。有位同学直接给我打上啊， e d 优点喊应用点 点 map， 然后也出现这个效果★★。但是成语就错了啊★★。这个很重要的一点，一定要注意啊，切记 m a p p 一二小 m 回车对。然后呢，接下来这个 map 文件。 这个 map 文件啊★★★，怎么去做★★★？你先把这两行给我考一下★★★， 两行给我烤一下。 如果在这个咱们的群里放的那两行 考到这个哪里去呢★★★？击右键★★★，在 map 这个夹子这儿击右键 new 一个 feel 叫做 manu maper 大 m 大 m manu★★★。 它的这个名字和上面那个接口的名字是保持一致的★★★，只是将 加一个 x m l 文件。 manue map 大 m 对对点叉 m l x m l 回车粘贴回车 打一个 map★★， 这个标签小于号对回车。 然后 map 这个后边打一个空格★。 map 大于号的，就前面打个空格第三行。 第三行不是不是。那你把那对 map r 空格 格 name space 对啊， e d u 点喊应用点 mapper 点 manu mapper 好啊同学们★。那么 mapper mapper 就是数据访问它呢？是在实体类的上面对不对★★？ 然后呢，他有相应的接口，还有 s m r 文件进行与之配合。 那么接下来我们还要做两层，一层是这个 呃，叫什么呀？一层是服务层，一层是啊控制层。 那么我们在 e d u 的喊应用下面建一个 service 点儿★★，上面上面代码那块★★★，代码那块上面左边左边往左走那是右 就是左边那个那个目录浏览的那个位置就是这个工程的浏览的位置。工程左边那个。这不是一左一右吗？对对对★★，往下 异地优点喊应用对击右键该建服务层了是不是？ 然后扎瓦 class e d 优点不对，这个是叫什么 service？ se r v i c e s e r v i c e service 服务城 s e r v i c e 点儿什么★★？什么 service★★？ 有没有默契啊？什么 service？ 你你现在处理的这个表叫啥名？ menu 吧。所以说叫什么 menu service 大 m that 然后呢★★，我给你们代码，你们拷贝一下这个你们还是要再做一遍的。做一遍的时候呢，需要自己从头到尾教 manual service 大 s 啊★★。再有十五分钟结束战斗了啊。 s e r v i c e 小写的回车上我们的群里口代码对 啊把第三哎，不对，没说完呢★★★。你这太快了★。把第四第六行到第三行删掉。对★， 然后粘贴，然后该那个导入的进行导入。告诉你们怎么个导入方法了吧★★。导对都导入的话就没有问题了。 at resource 对 menu★， 第一个 好了， service 就变完了★。是不是 service 变完了之后呢★★？ 我们这个 service 呀★★★，就是去上这个 map 层去找那个 list all 方法去调它 他来进行处理查询吗？在脉搏层对不对★？然后接下来最后一步。最后一步在异地优点喊应用的下面对，这回找着位置了哈。好了，越来越熟悉哈。扎瓦 class 啊★★★。 ctrl 点歪妞 ctrl c o n 小 c 对 c o n t r o 包名一般都是小写的★★，是不是 c o n t r o l l e r 点儿大★★。 m e n u ctrl c 大写命名规范，大家要能找着门道啊。这个细节问题咱们下下一周给你们讲★★。 t r o l l e r 好回车★， 然后把第三行到第四行删掉★★，我给你代码 啊，你正好练练脚包是不是， 来练练倒包吧★★★，这么多都要倒啊★★。 how 完事编完了，进到门。左边那个，左边那个对，找 m a i n 下面下边下边下面那个类★，咱最初编的那个类对点一下★★， 往下再往下一厘米对好点运行吧★。第一个功能我们的第一个 功能★★，我们的这个后台程序编完了。底下有没有错误啊？有没有错误消息红的 错了错了★★。往上往上往上看看，就是下面的那个错误，看看是什么错误。这个啊★★★，你那个 application 点 y m l 里面有有问题★★。 application 点 y m l 再往下一厘米，再往下一厘米。 application 点 y m l 文件有问题，往上你那个 e d u 点含应用点 mapper 往下往下往下往下再往下再往下一滴★★★，有点好用★。点你有是没有，我有★★，你有是你没有，你把它删掉。对， 然后上面最最上面放在最上面光标你那个是密码不对★，密码不对★★， password 不对。第六行空格对 粘贴。 r o t 你密码是啥★？你问我★★★。 我们就已经初步的对于后台的开发有一定的了解和认识了。 然后呢，我们已经开始编了一个呃，基于后台的一个功能对吧★？那么就是说从数据库表 menu 里提取所有的消息★★，所有的数据★★★，所有的记录，然后显示出来★。 那么我们现在怎么给他显示出来呢★★？当然用浏览器喽。大家呢★？看一下 看一下这个网址啊★★★。 h t t p local host 八零八零我打错了啊八零八零 new 字一 menu controller 的 list all。 然后就可以不用了，到你做的这个后台程序了。这是接口接口，他是后台做的， 后台去调数据库的一个结果。然后呢，前台去调这个接口，所以说称之为接口对吧？接口不就是像插座这种接口吗★★？是吧？能插一些电子设备吗★★★？对不对★★★？然后运行一下吧★★★。有没有效果我看看啊。我看看苗语棚的有没有效果， 他能不能拿到数据库里的数据，放到地址栏里，然后运行 回车啊★★★。转呐★★， 这回就可以了。为什么呢★★？刚才啊，就是说他的这个 a k k 神鸟 y m l 中对于数据库的配置端口呢？数据库的端口是三三零八，然后写成三三零六了 啊★★★。然后就显示了第一条记录 m i d 是一 menu， name 是学习 art article， type 是 text。 然后第二条记录是生活，是有关于视频的，然后娱乐有关于视频的。那么简单的总结 一下这个视频★。就是说讲了一下什么呢？就是基于上一个视频呢★★★，我们建立了一下这个 superboot 工程。这个视频呢★，就是具体写代码了，四个层包括这个 啊，我们写了一个接口★★★，代码就是类似的。哦★，是吧。然后呢，从底层的实体类做起，然后是 map 层，做了一个接口和一个 sm 文件★， 你是对应的★，然后是服务层★，然后是控制层。那么这个视频呢★，我们就录到这了。
常见的副文本内容有文章或者资讯这类内容，类似这样子的副文本★，除了基本的文字标点符号外，还带有图片★★★、字体颜色加出等一系列 html 标签★★。 这种格式的内容需要经过几期才能正常展示★，否则就是一堆圆码输出。这里有一篇文章★★， 点击编辑按钮进去看一下文章的内容，这是从网上摘抄的文章，用来做数据测试的， 可以看到文章有段落换行以及图片这种排版。现在要做的就是将后台编辑的文章内容在前台这个空牌页面展示出来，这是前台的页面文件新增 一个 div 标签，加上 id 属性，命名为 app★★， 再使个 rap★， 以实力化一个六。这个填上对应的 app， 艾特对象内定义一个孔灯的电量， 这里使用到没有生命周期的 creat 方法★，直接在这里获取文章内容。先定义弹力变量★★★， 依旧使用阿贾克斯来请求接口数据。 ui l 填上接口地址 tep we post 这里的 get 需要传参，参数是文章对应的 id， 指 将成功返还的数据打印，看一下就是文章的正文内容， 可以看到的是一堆 h t m l 标签。将接口返还的正文内容复制给变量 cantone， 这里创建个 div 标签★，使用六的指令 v 蛋 html 将文章的内容解析渲染出来，可以看到空白的页面，这时候就有了内容了，这就是六解析副文本。 如果不解析直接显示的话会怎么样呢？这里将代码改下★★★，将变量腾腾的直接显示，看下， 可以看到直接显示的就是一堆圆满★★，是没办法看懂的，所以对于副文本的内容，还是需要将其解析后再展示的。
今天给大家讲解一下文章列表以及文章详情，同样的文章列表的话，我们也可以直接在我们的右下角点击加号， 去拖拽一个自己喜欢的板块，然后拖拽过来进行编辑。那么这上面的文章分类在哪去添加呢？是在我们的建站的管理页面★★★， 直接点击文章★★，然后文章分类★★★，在这点击加号添加，我们输入一个分类， 然后选择最上层点击确定这里文章分类的位置的话，也是可以进行调整的★★★，可以看一下 包括子分类也是可以进行添加的， 但是添加了过后一定要点击保存更改，保存了过后我们到新闻中心的页面查看一下，刷新一下，可以看一下这是我们刚才添加的通知公告以及此分类。同样的，如果说不需要 这个子分类★★★，我们可以点击不显示保存一下看一下， 这样的话我们子分类就没有显示了★★★，或者直接把它给删除掉★。 那么这个文章分类里面的文章是怎么添加的呢★？在左侧 添加文章， 然后可以选择这个文章是在哪个分类里面， 然后在摘要详情里面都写好自己需要的文字内容★★★， 同样的也可以去选择一张图片★，点击立即发布， 这样我们再到我们的新闻中心里面查看一下我们刚才发布的内容★★， 可以看一下这是我们刚才设置的放假通知的内容， 在我们右 上角的参数设置里面的话★★，嗯，可以去设置★★，我们选择分类显示，如果只选择显示通知公告，那他就只会出现通知公告，也可以多选， 就是选择自己需要的分类就可以了，以及我们这些副标题也可以去进行一下编剧的调整， 包括分类样式我们可以关闭也可以开启★，同时调整这个分类样式的大小以及文本颜色★， 包括悬停的文本 还有悬停的背景 都可以进行相应的更改★★★，包括这个分类样式的编剧也是可以进行相应的调整的★★。 下面我们来看一下文章样式，首先是这个每页文章数，我们可以直接拖拽，然后来调整它显示文章的数量， 也可以去选择是否显示文章的名称，日期，摘要啊，图片这些可以直接关闭 或者开启。还有悬停的文本颜色也可以进行相应的调整， 以及悬停的背景颜色， 如果不需要可以给他显示成透明的★★★， 包括这个更多按钮★★★，就比如说我们这个有很多个文章的话，我们就需要一个更多按钮了，如果说只有这四篇文章，那就可以把这个更多按钮给关闭掉。 我们再来看一下这个全局的设置，全局设置的话就包括了新闻资讯文章列表的这一块的，整个的上边距下边距的调整★， 还有标题副标题的显示★★★，如果不需要副标题，那么就把它给关闭就行了，以及背景颜色的调整★★， 可以调整一下透明度， 也可以去选择上传背景图片 以及背景视频★，直接粘贴您的视频链接就可以了★， 如果说不需要图片视频直接关闭就行★，包括这个动画样式也是直接点击就可以设置的★， 不需要也可以关闭掉。接下来我们来看一下★★，嗯，就是文章的详情是怎么去设置的，我们可以看一下这有个跳转地址，一般的话我们都会默认跳转到新闻中心的详情页面，也可以选择新页面打开，或者说在原页面打开都可以自行去选择★。 那么这个文章详情的设置的话，呃，是在我们的左侧页面新闻中心点开有一个新闻详情★， 同样的我们这个新闻详情的话★★★，也是有模板可以直接去拖拽过来的，我们可以点击右下角的加号，点击文章详情★★★，直接把文章详情拖拽过来就可以了，这是我们选择的第一个样式， 我们也可以在这里去调整一下文字的颜色以及内容★，可以调整一下换成黑色，然后保存★★。 那整个的我们文章板块的话，也是可以直接跟刚才的页面一样★★★，可以直接去调整颜色呀利来老牌ag旗舰，背景的 包括是否去显示封面★★★，显示摘要这些以及文章的样式， 这个分割线的样式还有分页可以去选择是否显示文字，也可以调整，以及这个下面有一个返回的按钮★★★， 在整个的调整完了过后，我们可以先保存预览一下★★★， 点击我们新闻中心， 我们刚才调整了文字眼色以及这个分割线眼色过后，文章详情点击出来的话也会进行相应的调整★， 这样的话我们整个文章列表和文章详情就已经设置完成了。
那么在前面的课程当中呢，我们给大家讲了结构渲染啊★★，说结构渲染呢，包括条件渲染和列表渲染，给大家讲了条件渲染的一个例子，接下来呢，我们讲一个最简单的一个列表渲染的例子，那么 列表渲染呢，主要用到的是指定是 v 杠 four★， v 杠 four 呢★，有些类似于扎 screpe 当中的 four 循环结构★★★，在 vo 一点 g s 中， v 杠 four 指定几乎每个项目都会用到， 因为任何页面都要显示一系列的对象的列表★★★，就是表格对吧？有的表格呢，用这个 div 进行布局的，有的表格用什么 kibo 进行布局的，对不对★？ 那么我们来看一下要给大家讲的这个简单的啊， v 杠 four 指令的一个用法，是什么样的一个例题呢？我们来看一下， 就是这样的啊★★，来自于一个列表，然后进行一个便利★，对不对？那么怎么实现的呢？我们来看一下代码啊，看一下代码。 首先我们在编的时候先写什么呀？静态的布局和内容，然后如果有 c s s s 样式在写上，但是写的 时候最好是放到这个文件之外的文件★★★，独立的 css 文件★★★，对吧★★？啊，就是外部样式表，然后呢我们再加上我们的脚本部分， 那么整个呢，这是个 d i v 里边是一个 u l， 对吧★？无序列表★★★，然后里边的每一个内容呢★★，是一个 l i， 这里的 l i 呢，加上一个 v 杠 four 这样的一个啊， v o 一点 g s 的一个指令， 然后呢 item in list★， 虽然和我们的 javascript 的语法不一样，和我们的扎巴语法也不一样，但是原理是相似的，那么这个 list 呢， 就相当于一个容器，对吧★★★？这里有好多好多的数据★★★，然后每一个数据呢★★★，挨着牌的送到 atm 里，对吧？假如说 list 里有四项内容，阳光、空气、沙滩、草地★★★，那么这个 atm 呢★★，就被复制为四次★，是吧★★？ 然后呢， atm 的显示就在 li 开始和 li 结束中间这块进行显示★，这样的话呢★，就达到了我们的效果，是不是因为我们在下面 voe 管理对象在管理的时候有这样的一个啊？ 数据属性就是 list★★★， 对吧？这个 list 是一个名字，可以叫 list 一啊，然后这里复制为一个列表，所以说呢，就达到了刚才的效果，这个明白了吧？
搜索
中文
当前位置：
