00:00
好嘞,各位,那在这一小节呢,咱们给大家讲一个带有网络请求的案例啊,回到课件里面,咱们先看一下效果啊,在第四章的4.2里面有一个github用户搜索案例,在这呢有一个输入框,可以输入一个关键词,随后呢,你可以去点击这个搜索,然后呢,你就得到了一个用户的列表,来我们整体播放一下啊,比如说我输入的是test啊,然后呢,点击搜索这个按钮,诶,我就得到了一个用户列表,然后这里边啊,各位,每一个用户都是在GI这个网站上真实存在的,哎,并且能出现在这里的用户的名字呀,多多少少跟你输入的这个test都有点关系,哎,就这么一个搜索的案例来吧各位组件化编码的第一步拆分静态组件,整个来说呢,肯定是APP,那接下来里边的你想怎么拆呢?啊,我直接说说接下来我会怎么拆啊,我会管这一块呢,叫做search组件,什么意思呢?搜索,因为你想嘛,各位关键词的输入框。
01:00
等搜索按钮是不是都在它这儿呢?诶再说下边这儿,各位整个的这个区域是不是都是展示用户的列表啊,所以说呢,我就管它叫做list列表组件,OK啊说老师里边还拆不拆这个item了呢,对吧,每一个人它也是一个组件呢,同学在这儿呢,我就不拆了,当然你可以选择拆,这无所谓的啊各位,我就是因为todo list那个里边我拆item了,那在这呢,我就不拆了,OK,所以说分析来分析去,只有两个组件,一个是search,一个是list。好了,各位回到我的代码当中,那你就得建立一个文件夹喽,Components,对吧,存放组件的,那么第一个组件呢,叫做search.view还有一个叫做list。好,里边这个固定结构啊,咱给它写好括号V,诶点一下啊尖括V名字呢,给它起一下name list,至于里边的结构和样式,一会再说啊,复制一份给谁呢?Search好OK了,来给这个呢,关掉,然后同样的套路啊各位,这个结构和样式呢,不可能让大家自己一点一点写是吧?诶给大家准备好了,这个静态页面在这儿呢,给大家的这个资料里面有一个零四静态页面,这里边呢有一个user配置,就是咱们所要用的这个啊,我用这个文本编辑器呢,给大家打开,在这里呢,我用到了这个第三方的样式BOO strap,这个大家应该知道吧,哎,然后我自己呢,也写了一点样式啊,然后这个呢,就是整个页面的结构了,来咱先整体看一下啊各位浏览器中打开走。
02:30
哎,这就是他这个样子是吧,给你写好了,这些东西都是写死的啊,一会儿我们都得删掉啊,图标用的都是view这些,OK,来吧各位啊,我们的套路啊是这样的,不在这里边分析,哎,说哪个结构是哪个组件的,我在这里就把那个最大的div给它复制走,然后放在哪儿呢?放在APP里边,我们之前做那个todo list是不是也是这么做的啊,这里边儿的东西来吧,这个结构不要了,换成我的啊,缩进不对,你得调。OK,折叠起来,下边这些呢都删掉,只留下一个就是name啊,这个A设呢也不引入,一会儿需要的时候再说,哎,OK,写完了,然后再往下,各位这个样式你是不是得拿过来呀?哎,全选复制回到这个APP里面,就咱现在也不知道这些样式都是管哪儿的呀,反正先放在APP里边,先搬运过来啊,这个浪呢,要不你写上你就写CSS,要么就干脆别写是吧?哎,样式呢,粘过来,然后缩进的也调一下。
03:28
空行的删掉,OK好了,折叠起来,嗯,那这东西都来了,但是还有一个东西你没有引入啊,是不是这个BOP呀?啊是这样,我先不引入BOO strap,然后看看目前是什么样子啊回到这儿啊,这是正常的样子,看看我们这个拆完组件,当然我还没拆呢啊脚手架里的样子,来走看一下,我不缩放啊,也给它调为100%,不放大也不缩小,好那你看一下对比一下差哪儿,是不是差头部那一块啊,其实这块已经差不多了,是吧,各位来吧,差的就是这个bootrap诶然后有同学说,老师我明白,全选复制,然后来到APP里面,然后在这儿呢,同学,哎,老师打开,嗯,然后一回车一粘贴,同学不要这样做,你听我说啊,这种点view文件里边,你所写的样式往往都是程序员亲自写的,没有人把第三方库直接往这个点view文件里边去粘贴,那你想啊,各位你说你在这个里面直接把boop粘进来了,那不知道的还以为这些东西都是你写的呢,对不不便于后期的维护和升级。
04:28
如果有一天人家说,哎呀,BOO升级了,我们换成那个BOO7吧,是不是,哎把这个东西呢,给它替换一下,那咋的还得找这些东西一点点改啊,哎,所以说同学一个正确的做法是你把第三方成型的样式放在一个公共的位置,对吧,大家都能看到的位置啊,那这里呢,就有两种做法,先给大家说,第一种你可以在src里面建立这么一个文件夹啊,上一次叫做静态资源,咱之前见过,我带着你分析脚手架的时候,各位是不是在这儿,嗯,是不是看见过他,哎,那这里边的同学可以配置一个文件夹叫做CSS,因为静态资源可能有很多嘛,音频视频图片啥的,对不对?哎,然后你就把你的这个boat stra摁住,给它拖进来。
05:11
松手就可以了,这只是说我搬运过来了,那我得怎么引入呢?同学,两个地方你都可以去引入啊,第一个地方呢,就是你在这个命点GS里面可以去引入啊,但是不太推荐大家在这引入,因为min.GS是入口嘛,对吧?各位一般来说呢,我们是在这个最根的那个组件里面去引入,就是这个app.view不往这写,哎,但是在这里边引入,那接下来我就写一下,走着写一个inport引入什么呢?当前目录下的components,哎,不对了,是静态资源下的CSS下的boatp,哎,是不是大家觉得一引入就可以了呀?啊,那来我们看一下啊,看行不行,回到这,诶同学完了看这儿,他说编译失败,然后说呢,有一个字体找不见,看这他说有一个点EOT文件,就是字体文件找不见,同学,我好像没有用过这个字体,那这是怎么回事啊?说一下你没有用过这个字体,但是boot strap源码里边用到了这个字体,不信呢,你把这个东西给。
06:12
复制一份,回到这个bol stra里面,你去搜索啊,CTRLFCTRLV同学,你找一共有六个用到这个字体的地方,你点一下向下的箭头,同学你看就在这儿呢啊,你看人家写的是点点杠,也就是说以当前文件夹作为基础,往外翻出去,有一个放文件夹里边应该存放着这个字体,但是同学咱就别说字体了,咱连这文件夹都没有对不?那请问接下来怎么办?说我是没有就没有吗?他为什么报错呢?各位你听我说啊,如果你通过import这种形式去引入样式,那么脚手架呢,会做一个非常严格的检查,就是你这个点CSS里面只要你用到了不存在的资源,那就是这个后果。啊,说老师我之前用咱没出现过,同学你之前都是在HTML里面,哎,通过link标签去引入,那当然没有这个检查了呀,如果你用这个import引入,那就有这个检查,那怎么办嘛,各位说说怎么处理吧?啊有同学说老师啊,那就这样呗,我就建立一个放文件夹,我就去下载这个字体,都给它配好了,那不就得了吗?诶那我跟你说呀,各位你想把这些都配好了,你至少得用到八个字体,而且我还告诉你,在我整个的这个布局里面,同学我没有用到字体,我只是用了一下boat stra的这个卡片视图,我只用了一下这个东西是不?所以说你犯不上啊,同学你为了一个警告,为了一个错误,你就把这么多字体都拿过来了啊,还有同学说老师删了不就得了吗?哎,同学那万一有一天要用这字体呢,你看这就很纠结了是不?哎,所以说同学啊,一般来说像这种样式就是里边用到了第三方的资源的啊,如果这些资源呢,你还不去用,就目前不用,那就不推荐大家呢,在赛这个里面配置了,因为同学。
07:58
你只要写在这儿,那你就得通过inport的这种形式去引入,你只要这么一引入,那就有严格的检查,对不?啊,那怎么做呢?同学来这么做,听我说啊,不是这么写,这种方式不好,是因为Bo strap里面用到了不存在的资源,然后人家检查的时候发现的对不对?哎,所以说正常来说,如果你Bo strap里面没有用到这些奇奇怪怪的资源,你当然可以这么引入啊,啊,只不过在这儿就不太适用了,说老师那怎么办呢?诶还有另外一个引入公共样式,也就是第三方样式的这么一个技巧,就是在PA这里啊,建立一个CSS文件夹,随后呢,你把你的Bo stra放到这儿松手。
08:34
移动这不就过来了吗?然后你在这个页面里面进行引入,同学我问你啊,不管你写了多少个组件,所有的组件最终编译完是不是都放在这个div里。那既然放在这个div里,那我问你各位,是不是所有这里的引入的样式就都会生效啊,哎,那在这儿呢,同学来吧,写一个link啊,然后怎么写呢?你当然可以直接这么写,说当前目录下的什么CSS下的谁可以,但是同学你看人家在这不给你打了个样嘛,对不,不要用这种相对路径啊,用这个东西base URL,人家给你设计的这么一个特殊的写法,然后在后边呢,不要再写杠CSS了,没有这个杠,你看人家去取这个偏图标的时候,人直接写,你在这儿呢也直接写,哎,然后是CSS下的,来把这名字呢,直接给它复制过来,全选复制放在这儿,这回就可以了,来写好一个注释啊,叫做引入第三方,哎,这个样式,OK,引入完了吧,这回就没这错误了,但是你别忘了各位,这个文件夹目前没用了,是不是可以给它删掉,还有就是你别忘了APP里边是不是不要再引入了呀,OK,保存回来刷新一下,你看看效果,这是正常该有的样子,这是目前的样子,同学是不是完全。
09:46
一致啊,哎说老师好了,那我就写完了呀,没有啊,各位来借助5U的开发者工具,你瞧一眼,在你整个这个布局里面呀,只有一个APP组件,同学你这不是假的吗?没有拆组件呢,所以说来吧,啊,接下来分析结构,找到APP这个组件,那接下来呢,就由我告诉大家这些东西都是哪儿控制哪儿的啊整个这个section诶是头部的那个搜索,然后下边整个这个大的div,诶就是红色区域是整个list区啊,然后这个绿色的区域呢,是整个的那个search搜索区,所以说我们需要做的呢,就是这个,把这个section呢给它剪切走,取而代之的是search这个组件,对吧,写一个杠,然后找到search,把这些结构呢,给它粘过来,缩进的调一下好保存,然后给这个呢就关掉了,然后整个这一堆各位都拿走,是list组件啊,然后也跟大家说啊,如果你要真觉得拿我这样式吧,让你很烦,自己可以写一写,顺便。
10:46
那再练练那个布局和C3是吧,各位OK,那在这儿呢,找到list组件,再把这一堆结构给它粘过来,不要觉得多同学,这个结构呢,很多都是重复的啊,缩进的调一下走这回就对了,然后把这个呢关掉,但你别忘了呀,这两个组件没有引入也没有注册是不是啊,接下来引入第一个呢是search,引入当前目录下的components下的谁呢?Search,那同理,再来一个,这是什么呢?list.view文件啊,所以说这个呢,可以给它删掉了,诶然后这呢叫做list,接下来呢,去注册他们components走,那这是一个search,好,那这呢是一个list,引入完了,注册完了,对吧?各位来回头看一下效果啊,刷新一波看APP下有了search和list,但是你的样式还没有拆回来,接下来拆这个样式,样式就很简单了,我直接告诉大家,就是我自己写这点样式啊,都是控制那个列表区的,所以说在这儿呢,你就不用操心了,这些东西给它删掉,找到list啊在下边。
11:46
给他写一个样式就可以了,这些都是管这个list的,怎么证明呢?哎说老师你说管list,那就管list的,一方面是你可以看看我这些选择器是不是都是list里边在用,还有就是同学加个这个呗,SCO pd,如果这些样式不是控制上方结构的,那一旦你加上了这个东西,样式是不是得丢啊,嗯,但是在这儿呢,它不会丢的,因为我写的确实是list的样式,那么search组件呢,跟大家说一下,它就没有自己的样式了啊,或者说呢,我没有自己去写样式控制它,我用的都是那个BOO strap里边自带的啊,你像这个你看诶什么hiding都是那个boop里带的,所以说我把这个呢就给它,诶删掉了好了,整体看一下效果啊,刷新一波各位APP下有search和list这静态组件,咱们不就拆完了吗?啊,但这里呢,有一个细节上的问题啊,各位,就是你看APP这个组件最外侧那个容器是谁。
12:39
哎,同学你看它也叫APP,然后你别忘了呀,我们这个HTML里边,同学它是不是也叫APP呀,你这就不太好嘛,我们可以这样回到APP这个组件里面,把它最外侧这个div啊,就给它脱掉了,来给这会儿呢删掉,这会儿呢也删掉,然后缩进呢,往前调一下,这回就可以了。同学,跟之前的效果是一样的,你省了一层结构啊,并且这俩结构的ID还是一样的,我们尽可能得避免,对吧?各位,哎,回到页面里面,我们刷新一下看效果,你看都是一样的,和你最开始的这个写法你看一点也不差,对不?各位,好了,那静态组件呢,我们就拆完了,那这一小节呢,我们停。
我来说两句