00:00
好嘞,各位,那这一小节呢,咱们来完善一下这个案例,有一个地方呢,写的不是很好,就是在这儿一上来的时候啊,你应该给我展示一个欢迎词,哎,什么欢迎使用之类的,还有就是在我输入了关键词,点了搜索数据还没有回来的过程当中呢,在这儿你应该给我呈现一个加载中,哎,稳住一下用户,你就比如说现在这个网速啊,特别的慢啊,我调到这SLOW3G就是慢的3G网络别调这个,调这个浏览器呢,就离线了,就断网了啊调这个,诶现在呢,我输入一个关键词,同学,我点击搜索的时候啊,你观察这个区域有相当一段时间呢,它呈现的是一个白屏的效果啊来321走。你看这个时候用户就很慌,诶发生什么了呢?这个请求到底发了还是没发呀,如果你告诉他加载中就能稳住一下用户嘛,对吧?各位啊,回到课件里面啊,来把这个呢调成正常的网速,看一下课件里面是怎么设计的,同学一上来呢,是欢迎使用,你看哎欢迎词输入关键词点击搜索,你看是有个loading效果的,随后再呈现用户的列表,也就是说经过我们的分析之后啊,发现这个list组件虽然叫做list,但是它所呈现的可不仅仅只是用户列表,它有可能有这么几个呈现,来我们捋顺一下啊,第一个呈现呢,就是这个东西欢迎吗?Welcome,那第二个呈现呢,各位,诶,就是数据还没有回来的这个loading啊,那第三个呢,就是我们最想看到的那一堆用户users,其实这里面还隐藏着一个第四个,不知道各位呢,能不能反应过来啊,第四个是什么呀,同学你想想你发请求就成功,哎,就没有失败的时候,不可能吧,所以说同学这个list的组件还有可能呈现的就是。
01:39
错误的信息,什么错误啊,网络请求错误,所以说还得设计这么一个东西,就是errorrrow对吧?哎,这么一分析才发现list其实有四种展示,那有些同学说,哎,老师我现在知道怎么判断了,很简单啊,就是看这,如果users这个数组的长度为零,老师,那我就展示loading就得了呗,你看数据还没回来呢,所以说users对吧,这一堆数组的那个长度为零,同学,这可不对,你想想啊,一上来还没有搜索的时候,这个users数组的长度是不是就为零?那按照你这么说,我还得展示welcome,还有就是你考虑,如果我发了请求,但是请求出错了,没有给我带回来这一堆用户,那users数组的长度是不是也为零,那按照这种分析,我还得展示AR呢,所以说同学,你通过users这个数组的长度并不能够决定到底展示welcome loading还是arrow,对不?那怎么办?我就得单独设计一个数据了。咱们一直都说数据驱动着页面的展示,那首先你就得把数据给它设计好。
02:39
所以说同学回到list里面,打开它一个users不够了,我得多设计几个,比如说我设计这么一个东西叫做A字first,啥意思呢?是否为初次展示,那默认值当然是true,一上来那当然是初次展示啊,在设计这么一个东西叫做is loading,啥意思?是否处于加载中?那同学什么时候处于加载中啊,你得点了搜索按钮,然后是不是在处于加载中?诶,那所以说它一上来的默认值当然是false,那还得再设计一个,就是存储错误信息,但你别叫这个啊,叫做is error,同学这就不太好,这就只能标识错了还是没错,我想体现出来错误的详细信息啊,到底是你请求资源未定位,还是说你这个断网了对吧?所以说别用A字什么什么了,A资什么什么,你的潜台词就是它的值啊,都是一个不尔值,就是成或者是不成是吧?哎,那在这儿呢,我用这个E2MSG就是错误的信息啊,在这呢,小逗号同学,这是一上来的初始样子。
03:39
对不对?那我就得根据这些数据来决定这块到底怎么展示,那写写吧,同学这个div展示的是什么?一个一个的用户卡片啊,那整个这个大的div呢,是整个这个list的结构嘛,所以说同学写一个注释在这写上叫做展示用户列表,然后同学什么时候展示这个用户列表啊,这就非常简单了,条件渲染嘛,我用这个ver show,那听谁的呢?我就听这个users它的长度,对吧?各位,那你想想各位USER4这个数组里面有用户,那你当然得去展示用户了,如果说点lines长度为零,那就没有用户,没有用户我为什么还展示这div呀,对吧?哎,虽说在这这么写没什么问题,那往下呢,再分析,同学还得展示什么呀,展示欢迎词,那还得展示什么?展示这个加载中还得展示什么呢?这个错误信息啊,虽然我们很不想看到它,但是你也得考虑到这儿是吧?哎,关联词那直接写呗,我就写一个H1,我就。
04:39
写中文了啊,欢迎使用啊,什么时候展示这个呀?听V-show的哪个控制啊,当然是诶这个it first1上来初初次展示嘛,那我就欢迎使用完了加载中呢,写一个H1啊,中文加载中,然后点点点,然后还得靠这个V-show去控制,听谁的呢?听is loading的,那么这个错误信息啊,同理各位写一个H1啊,你比如说请求出错了,然后呢,也写这个V杠受,然后这回听谁的呢?这个l messages对吧?各位,但在这呢,这么写不太好,同学,你别粗略的说请求出错了,到底什么错啊,咱们已经存下了这个错对不对?你要这么设计,那就这样呗,Aar就得了呗,是不?哎,既然已经有了详细的信息,就不要写这个了,对吧?差之语法把它丢在这,这不就可以了吗?啊,那以我目前的写法,同学一上来应该怎么的,是不是只展示这欢迎词啊,因为一上来你看他是false,他没有值,他还空数组,那当然就是来刷新,是不是欢迎使用,哎,那有同学说老师这我就写完了啊,那你看看我输。
05:39
读test的时候啊,老师你看我一搜索,哎,老师你看列表就出来了,多好啊各位你划到最后你看啊,有意思了,欢迎使用,还在为什么呢?哎,因为这个东西从来就没有变成过false,那也就意味着这个东西得一直呈现,然后你数据回来了之后呢,就把它放在了上边,它就顶在了下边,对吧?各位这不太好,也就是说你这四个东西得随着请求的发送啊,他得不断的发生变化,是不,各位你不能直接给他写死在这儿啊啊那你说接下来怎么办呀,什么时候去切换这些东西变成什么样子呢?大家想想,你说一上来是这样啊,我就不提了,那你说当我点了搜索按钮之后,但是数据还没回来,这些人应该都是什么值来分析,同学,你是不是点了搜索按钮,那就证明已经不是初次展示了,你都点了搜索按钮了,所以说同学应该立刻马上把这个is first变为false,那这个is loading呢?同学我点了搜索按钮,但是数据还没回来呢。
06:39
是不是is loading得为真呢?啊,那这个air message呢,请求都没回来呢,我哪知道请求错了还是对了呀,所以说air message咋的就为空就可以,哎,就维持住这样,那么users呢,请求还没回来呢,我哪有用户啊,所以说维持住空数组是不是就可以?哎,那我们再分析各位,如果请求成功了呢,A first肯定也得为false,同学,你觉没觉得这个is first呀,它就是个短命鬼,他就一上来欢迎你一下,以后呢,它就永远不会再出现了,对吧?各位啊,那你说数据已经回来了,这个请求已经尘埃落定了,我知道请求成了,那你说a loading得变为false是不是为假?那error message呢,没有,因为请求是成功的,没有错误,所以说他咋的依然维持住为空,那users呢,请求成功了吗?有用户了,存进去是不是变成这么一个东西了,里边就是诶有数据的这么一个数组啊,那剩下的我就不再分析了,对不对,请求出错怎么调,一会儿咱再说吧,来吧各位,也就是说这些东西也得听从谁的呢?得听从search,你说对不对?
07:39
哎,在不同的情况下,我得根据你搜索的情况,然后去更新这些数据嘛,那也就意味着在search组件里面,在合适的时候,你得去操作这四个东西,说老师那我知道怎么做了,这么做你把你刚才这个全局事件总线绑定事件的时候啊,再多绑定一个,这回不叫get users,老师这回你叫这个get is first,哎,完了,在这你收到is first啊,输出删掉老师完你这么写this,点它等于它,哎,那听你这意思,各位我还得再写一个叫get a loading,完这is loading啊this is loading等于is loading,同学,我这有八个,我得写八个事件的,你可真犯不上,各位没有必要这样写,我真的能写下去是吧,删掉同学用一个就够了,在这呢,别只收到一个users,哎,发送这个users的时候,顺带着把这三个也发送一下,你比如说各位第一个行参,我就直接用is first接是不行,第二个呢用它呗,第三个呢用它呗。
08:37
都收到了吧?那接下来说老师呢,简单了,This is first等于it first this is loading等于it loading啊,This message等于our message,那这块呢,就不说了,说老师这回多好呀啊,那在这儿呢,给这行也删掉,老师这回我不就能更新了吗?哎,也行,反正目前分析在这就多带几个东西呗。嗯,可以先这么写着啊,我没说这是最终写法,先这么写着,然后在这看各位get users,哎,叫这个不太合适了,因为你得到的不仅仅是users啊,对吧?各位,哎,换个名,我给它起这么一个名字啊,叫做update list,更新list的数据,这没问题吧?各位,哎,OK,来吧,这回呢,就能操作了,把这个复制回到咱们的search组件当中,各位,这是不是发送请求呢?那你告诉我请求之前是不是得更新list里边的数据啊,写好注释叫做请求前更新list的数据,怎么更新啊?this.dollar符bus.dollar符it。然后除。
09:37
发这个事件对不对?然后把啥带过去啊,同学想想吧,请求前is first得变为false了啊,然后第二个行参是什么?Is loading得变为串,因为数据还没回来呢吗?啊,然后再往后,同学有错误信息吗?没有,有用户吗?也没有,所以说这是空字符串啊,后边这是空数组对吧?各位,哎,然后再打开,那你说请求成功了,这回怎么办呀?把这个东西给它复制粘过来,那同学请求都已经成功了,那这个A字first是不是得为false,请求已经尘埃落定了,那你说a loading是不是不能再展示了啊?有错误信息吗?没有,因为我的请求是成功的,那用户在哪呢?当然是这个it是不是得放在这儿啊?那这一行是不是就不要了呀?啊同学,我先写到这儿,不能再往下写了,因为这种写法呢,它比较复杂,我先在这儿写着啊,各位看看能不能实现咱们想要的那个效果啊,回到页面里面刷新一波,一上来是不是欢迎使用啊,当你输入test的时候,来搜索啊,走你你看加载中诶数据是不是回来了,往下滑诶。
10:37
最后也没什么问题,说老师这不就实现了吗?但是同学你开发当中啊,如果写出这种代码那就不太好了,因为你想想啊,各位,当有人看到你这段代码27行的时候,别人肯定是懵的啊,或者看到第23行别人也懵,人就觉得,哎呦我天呐,这个false代表啥呀,这怎么的,这第二个就错了呢?哎哟,我的天空字符串,空数组,这都什么含义啊,对吧?各位这就很烦,也就是说你写的它不语义化是吧?还有就是这块同学你这个代码冗余量太大了,z.this点一直在这调,这些东西不能一个一个写,太烦了呀,同学,我这里边有18个,你怎么办?难道你写18行去?哎,所以说不太合适,说老师那怎么办呢?一点一点处理,先把这个事情给他处理一下,就是你得让别人看到23行的时候明白啊,原来false代表的是is loading了啊,那个is first完了,这个车呢,代表的是loading了,对不?各位其实都不是别人看你自己时隔两个月,你看这儿你自己可能都懵了是不?所以说我们这么设计啊,各位在这儿啊,你别用这些东西接到一堆对吧,就用一个。
11:37
哎,就叫做data OB BJ啊,一个数据的对象,哎,然后把这些呢先注掉,哎,然后在这呢,我给你来一个输出,输出谁呢,这个data OB BJ,你不要更新data吗?那我就得收到一个data对象啊,Data OB BJ好了,然后呢,啊,然后你这边就得传一个对象嘛,那在这同学别散着传了啊,删掉传有一个什么一个对象,对象里边有A字first,哎同学is first得变为false,因为你点了搜索按钮嘛,那第二个是a loading,如果你怕写错,可以从那边把这个东西粘过来啊load啊没错误,那这块呢是true,然后呢,同学是不是那个ER message它是空啊,然后在这呢,是不是还有那个users users,然后它是一个空数组,同学我知道这样写长,但是相对来说这样写语义化明确对不对,谁是什么样子对吧?啊,原来没有错误信息,它是一个空字符串,没有用户,它是一个空数组对不?各位好,那你把这一堆东西是不是还得复制一下,是不是往这儿再来一下啊各位,那这删掉,那同学你觉。
12:37
就觉得啊,我在这就没有必要一直告诉他it's啊,这个it's first way false就是你一遍一遍的告诉人家,其实正常来讲,同学你看一下啊,就一上来吧,你确实得欢迎一下我,然后同学你发没发现,只要你输入了东西,点了一下搜索以后,这个welcome to use就再也不会来到你面前了,以后展示的要么就是loading,要么就是列表,要么就是错误,你比如说我再搜索再点,同学你看从loading开始不会再欢迎你了,所以说觉不觉得这个it first在这个位置调完false之后就不用再去调了,那所以说在这同学我是不是可以给它删掉了,你不用总去说这件事儿了,对吧?那is loading同学这回得调成false,为什么呀?请求已经有结果了嘛,是不,Our message同样是空的,是没有的,说老师那这块你写不写呢,同学这得写着,因为你想啊,你得明确的告诉人家错误信息是没有的,对不?各位,因为以后这个错误信息有可能有啊,我刚才为什么把A字first删掉,因为同学我可以很肯定的说a first除非你刷新页面,否则不会再出现。
13:37
It first为真的这个情况了,对不对?哎,所以说这块呢,你得写这个users,同学来吧,别客气了,从哪写response.data.it是吧?各位,OK,这回不就写完了吗?那同理,来给目录关掉,把这一堆呢给它复制,那你说要请求失败了怎么办呀?A loading也得为false,不能再加载中了,请求已经尘埃落定了,那来看一下这这是不是得给他拿过来,错误信息就是arrow错误对象身上的message,那么用户呢?各位这块特别重要,一定要把用户清空,否则你这里边残留着的就是上一次搜索的用户,你说对不对,一次是一次的嘛,OK,你看请求前更新list的数据,那这呢,写好一个注释叫做请求,叫做成功后,那给这个复制放在这个位置,这叫请求失败后,对吧,这回不就得了吗?来咱看一下效果啊,各位回到页面里面控制台刷新啊,欢迎页面呢,它不出出任何的东西是不是来。
14:37
Test点击搜索走你啊同学你看啊,这一次输出是怎么个情况呢?就是我正在加载中,你看is first为false,当时的那is loading呢,为true,然后再往后呢,Is loading是不是为false了?RMEC是不是为空?哎,这回不就行了吗?那接下来你需要做的各位就是这么一件事儿,哎,回到这边,同学,这个data塔OBBJ你已经收到了,是不是得用这个data OB BJ去替换掉这个data呀?啊,就你这里面有什么,我就拿过来直接作为这个去使用了,那我得怎么写呢?各位啊,老师就写呗,this.data完了,等于这个data OB BJ呗。同学,你觉得你这样写对吗?嗯,我们可以通过this拿到is first is loading our message users,你能通过this拿到data吗?我们在讲基础的第三堂课好像就跟大家提过,同学们,从这个this身上来,我给你注掉,你能拿到啥呀,刷新一波啊,然后是test走,从这个VC啊,这个组建实力对象身上,你能拿到这些真正。
15:37
可以用的数据,但你拿不到data,也就是说你不能够批量的去替换这些东西,哎,有些同学说老师能在这儿呢,哎,下划线data哎,我这么写就得了,老师你瞧着啊,我在这来一个this点下划线data完等于这个,这不就可以了吗?啊老师你看着,随后呢,我再给你输出这个Z,老师你看看这回就行了啊,来刷新一波搜索,点击搜索啊,然后打开这块,同学看一下这个下划线data啊,果真是这个样子了,但是同学你这么一改就把东西给改废了,因为我们知道各位这个下划线data是view自己维护的,你写的是data,人家拿到你的东西是不是得加上get s人家放在这儿啊,你这么一写,同学你不把那响应式给搞丢了吗?你没发现左边已经不展示东西了吗?它不是响应式的了,可不能这么写呀,哪能这么写,This点下划线date,同学就可以这么说,在view里面我们几乎不会写出这种操作,This点下划线date,直接去读,直接去写,不会的,哎,说老师那没招了,那就只能这么写了。
16:37
那你看你这说来说去的this点那就这么写呗,等于完了这个对象里边的点啥is the first老师,那就只能这么写呀啊,然后那就复制呗,This点什么is loading our message什么等等users,那就只能这么写呗,哎,同学也不是你可以这样做啊,如果你想批量的去替换的话,你可以这样玩,各位你把这个东西给它剪切走,哎,在这写一个info,哎,就是信息,然后信息里边注意了各位,诶,它是这些东西啊,你看info里边有is first is loading,那在这你就可以这么写了z.info哎,等于谁同学把它拿过来不就得了,Data塔OBBJ对不对?哎,这不就批量替换了吗?啊,那前提就是上边这你也得改,各位你这A字first啥的,你在这儿是不是得来一个info点啊,那这就是info点,那这呢就是info点那上边变历的时候,这儿也得是info.users.lengths那这儿呢,也得是info.users对不?哎,这回不就对了吗?来这回呢,咱试试啊各位。
17:37
诶回到这边呢,刷新一下,比如说诶这有问题,说error message没有定义,那知道了,应该是在这儿啊,有问题了,Error messages在这也得加上一个音符点对不对?好了,保存刷新一波啊,你比如说呢,我搜索来test,然后走,你你看加载中,诶这列表是不是也能出来啊,那最后呢,我们去看一下它这个this啊,输出一下this,好了,回到这儿刷新一波,输入test进行搜索,走打开同学,你看这个info身上是不是有这些数据啊,而且最主要的是同学这些东西都有什么呢?Geter和塞你瞧吗?是吧,哎,它没丢啊,你的数据依然是响应式的,说老师那这儿呢,这是刚开始人家收集的对吧,也有info啊,里边呢,也有这些get set啊对不对,各位千万千万不要直接去操作这个下划线data,对吧,你写好数据,他去给你收集,收集完了之后他去给你数据代理,这不就得了吗?但是同学你这么写有点小问题,你知道什么小问题吗?你把一个数据给搞丢了,哪个数据呢,来借助比如开发。
18:38
这工具呢,我们可以去看一下,打开这个list,我刷新一波,同学一上来我问你list这个info里面有几个数据,四个,而message is first is loading和users对吧,然后你搜索了一下,你发现你就把一个东西啊给搞丢了走哎,什么东西丢了呀,Is first,虽然那个is first它的值如果你在这直接取的话啊,这个a first安de find,安de find呢也是为假的,然后这块呢,也确实没有展示,但是同学你把这个数据给破坏了对不对,东西没了那怎么办呀,两个办法,第一个办法就是你别嫌麻烦,这a first呀,你一直给人家带着对吧,在这一直给他带着,这回他就不丢了,诶你瞧效果吧,刷新一波,各位一上来是不是有四个,好了,我搜索一下,比如说是DEMO走,你同学你看这回东西是不是不丢,不丢是不丢,但是太麻烦了,因为在这咋的同学我没有必要去一遍一遍的写呀,在这儿呢,撤回来我就不想写嘛,对吧,嗯,请求后啊对,是在。
19:38
啊,那不想写那怎么办啊,说老师,那你这儿没招,那你在这你做了这么一件事儿吗?你拿到这个对象直接赋值给了这个音否,那可不,你这里边有什么,音否里不就有什么,那你这样的话肯定丢啊,同学可以不让他丢啊,就一种什么感觉呢?听我说啊,我这个info里啊有四个数据,然后你传过来的这个对象里面呢,比如说有三个数据,那我可以有这种操作,就是你原来的四个呀,我一个都不少,你不是给我传过来三个吗?三个里面可能包含着users our message和is loading,那我就把这三个拿出来替换掉这三个,然后这个东西is first我不让他动,哎,这样的话就可以了,那问题是怎么写呢?哎,那在这呢,就看你ES6熟不熟了,各位,你可以通过这种方式去写,画括号I代表对象,然后点点点this.info,然后再来个逗号点点点谁呢?贝塔OBBJ同学,这什么意思呀?通过字面量的形式去合并一下对象,对不?各位?
20:38
啊,也就是说他会把z4.info这个对象里的所有属性都摊在这啊,我说大白话摊在这儿,摊在这里边,随后呢,再把这个data obj里的所有属性啊也摊在这儿,然后重名的属性以后边的这个人为主啊后边这个人里边没说的,那原来是什么,它就是什么,这回就可以了,那你这么写就行了,来我们测试一下啊,刷新一波list,一上来呢,是有四个数据的,然后呢,我输入DEMO,然后点击搜索,你看各位是不是都不丢啊,啊,那我们心里明白,其实这个is first呢,几乎就不会再变成这个啥了呢,为真了,因为只有刷新的时候它才为真是不是?各位你看这确实是为真的啊,搜索一下DEMO啊,来走,加载中数据回来了,最后没问题,再搜索一下,比如说是test,然后点击搜索加载中回来了,这是不是没问题,你看这数据是不维护好了呀,哎还有就是呢,各位我这么写啊,也有一个小优势来把它删掉,什么小优势呢,就是在这儿同学你想到哪就可以写到哪儿,顺序无所谓。
21:38
你比如说我就想把这is first呢,给它放在最后行不行啊,当然可以,同学,只要你这个对象里面有这些属性就可以,那我在这儿呢,就可以把它拿出来,你说对不?各位,但是像你刚才那么一个一个传,那你可要知道啊,同学,函数传参可看顺序啊,你说对不?写着写着你顺序一乱,那我告诉你到这儿你接收参数那个顺序就也跟着乱了,就都不对了,是不?各位哎,写到这儿呢,这个案例呢,相对来说呢,就能完整一点了,是不?各位啊,那我们还得测试另外一个东西,大家别忘了什么呀,就是如果请求出错呢啊,来打开网络的这个选项卡,让整个浏览器呢断网,在这儿呢,Offline离线了,这回来你搜吧,Test点击搜索走network arrow对吧,网络错误说老师控制台飘红飘红同学,这个我们控制不了,那本来请求就有问题,人家飘过红还是怎么了呢?对吧,各位哎,这不是我们说代码造成的,是因为网络不通啊对不?各位OK,这回这个案例不就写完了吗?啊来同学你。
22:38
自己可以下去啊,这么测试一下,就是search给这个list传东西的时候,你可以不用全局事件总线,朱老师,那我用什么呢?哎,同学,想想用消息订阅与发布是不是也可以练一练?诶,那回头来看同学你发没发现啊,就只要当我们掌握了非常的这个组件间通信技术之后啊,从某种程度上来说,这个数据放在谁那儿好像也没那么重要了,对不对?哎,说数据我得放在search,我得放在list,不管你放在哪儿,只要你学会了任意组件间通信的这么一个技术,我就可以把数据传输给你,对不?各位,哎,好了,那这一小节呢,我们听。
我来说两句