00:00
好嘞,各位,那在这一小节呢,咱们来实现这个动态组件,首先呢,考虑一个问题,就是数据我应该交给哪个组件进行保管,所谓的数据啊,就是指这一堆用户是不?反正目前我有两个组件,一个红色的search,一个蓝色的list,那你琢磨一下吧,到底是哪个组件需要这一堆用户呢?很明显啊,各位是不是list这个组件,人家得拿着这一堆用户给你便利生成一个列表吗?所以说呢,我就把这一堆用户的数据啊交给list组件进行保管,OK,说到做到,你去找到你的代码里面的list啊,这些结构呢,先不看,折叠起来,在这呢,我得写一个data,然后给你的数据呢起一个名字,一堆用户,我当然可以叫做users,或者叫做user list是不是都行?诶,我选择用这个users值呢,是一个数组,如果按照我们之前的讲法啊,各位你在这儿呢,就得写点模拟的数据了,比如说我模拟一个用户,他的ID啊是001,然后他有名字,他有头像等等这些信息,对吧。
01:00
诶,然后呢,再根据这些假数据去遍历这边的列表,然后把这个代码写好,那在这儿呢,同学,由于我们已经写过一次这个组件化编码的案例了,那在这儿呢,咱就别这么墨迹了,各位不去写这些伪造的数据了,接下来咱们就考虑这个数据真正它得来自于哪里就得了,行吧,别再写那伪造的数据了,那回到页面里面,你分析一下吧,就这一堆用户数据得来自于哪儿啊,当然是拿着关键词发请求,你说对吧?各位,那新的问题出现了,我请求的地址,请求的方式不知道啊,诶在课件里呢,各位往下滑,在这儿呢,有一个接口地址,其实就是你请求这个地址,诶getb呢,就能给你一些这个用户的数据,而且这个地址呢,各位说一下,不是,我们写的是github这个网站提供的一个免费的接口,就是谁都可以用啊,不需要有任何的这个权限,直接拿过来就可以用啊,而且它是一个很普通的get请求啊,特别有意思,来直接呢把这个东西给它复制过来,地址拿到手了,那接下来呢,发请。
02:00
不呗,是吧,那你就得找到什么呢?Search组件,然后首先第一步是不得获取到那个关键词啊,就是在这儿嘛,用户不得输入一个关键词在点搜索嘛,啊那获取用户输入你就得找到这个input框,方法有很多啊,各位在这儿呢,我直接选择用这种方式,就是用那个VGA model啊,然后给他指定一个名字,比如说呢,叫做keyword关键词嘛,你教别的当然也可以啊,在这配置一个date keyword哎,是空来看一下能不能收集啊,刷新一波,嗯,借助view的开发者工具找到search,好输入一个test OK,是有反应的啊,那接下来呢,按钮绑定,点击事件发个请求就得了呗,回来找到按钮at for click起个名字啊,我就叫做get users,诶,或者叫做search users也行,对吧,把这个search粘过来,S呢,小写对吧,搜索用户,然后在这呢,就得配置一个MYS好search users是不是得用发请求啊,刚才呢,我已经安装。
03:00
通过了,所以说我在这儿呢,直接引入就可以了啊好get请求那就更简单了点,2GET那个地址呢,还得重新粘贴一下,剪切板被顶掉了。复制回到这儿,返回值呢,是一个pro实例,对不,但是你先别琢磨返回值,你看一下这个路径啊,同学这块儿呢是固定的,但是你看这是什么意思,是不是参数啊?哎,说的再直白点,Q等于叉叉叉,你得把这叉叉叉啊,换成你真正想搜索的东西,OK,而且我们发现地址里面带问号,同学这是什么参数,这很明显是get请求的query参数,对不对?哎,所以说在这啊,你不要写叉叉叉啊,那得换成什么呢?This点是不是keyword,但你这么写可就不对了,因为你这么写整个里面所有的东西都是字符串,它不会把这块呢当成这个JS去解析的,那怎么办呀?哎,各位可以这样做呀,是不是模板字符串啊,然后想把这个地方按照GS去解析,那你就得叨了,符画括号放里边去,同学,这可不是view的什么模板语法啊,这不是ES6里边的模板字符串吗?对不?各位哎,这回就把关键词呢带过去了,然后你得怎么着啊,点then得到数据吗?这就不多说了,指定两个回调成功的response。
04:13
和失败的AR来,如果成功了,那在这就是请求成功了,然后输出真正的数据,我就得response.data啊,然后在这呢,再来一个conslo,诶叫做请求啊失败了,然后呢,想输出错误的原因L,然后你得点message对吧,L是错误对象嘛,嗯,好了,各位东西呢,写完了咱试试啊,看看它能不能发出去请求回到页面里面刷新一波,这时候呢,就得来到控制台了啊,比如说呢,我想搜索的是test,然后接下来呢,我点这个search啊321走。稍微等一会儿,可能速度会有点慢啊,哎,你看请求是不是成功了呀,在这儿呢,可能有一些同学呀,会有疑问,诶说老师不对呀,你看啊,你所处的位置是http local house的8080,然后呢,你去给这儿发请求,那首先协议就不对,你上来来个HTPS老师,你这上来就违背同源策略了,那也就是说你来就应该跨域啊,这个数据不能够得到啊,这怎么回事呢?哎,说一下啊各位,既然github设计了这个免费的接口,既然github想让所有人都能用,那同学你就放100个心,Github呢,后端工程师已经通过cos这种方式啊,把这个跨域问题解决了,诶说的再直白点,你就正常发就行,人家给你了一些特殊的响应头,你的浏览器会把这些数据放行交给你的,诶,所以说同学这就体现出来了,Cos这种方式解决跨域才是一劳永逸的是不是,嗯,好了,那数据拿到了,分析一下数据呗,哎打开这里呢,我就告诉大家这些东西都代表什么含义啊要。
05:47
在公司真正刚开发各位这些东西,你说你得看啥,你得看接口文档吗?啊,首先第一个我直接告诉大家,这个呢,标识的是否是完整的数据,说老师没懂什么意思啊,那你看啊,你搜的关键词是不是test啊,那大家就想想,你说在get HUB上这么大的一个网站里边,跟你输入test的这个词相关的用户,那得老多了,朱老师一共有多少个呢?看这total count啥意思,总数一共有八万多个,人家不可能把这八万多个都给你,所以说这个false代表啥意思,我没把八万多个都给你,我只给你了局部的数据,那给了我几个呢?看这it几个,30个,哎,说老师呢,这30个它是按照什么顺序排序的呢?对不,一共八万多个,那这30个是怎么选出来的呢?各位它有自己的一定算法,其实它是根据这个相关性啊,等等很多的这个指标匹配的,你比如说你打开it里的第一个人同学,你看看他的名字叫什么呢?诶在这当然不叫name,叫login,因为我们知道啊这个GI这个。
06:47
网站的,呃,用户名,你在登录的时候,其实这个test就是你的用户名,对不?各位哎,所以说在这不是name是login这儿啊,各位你就别纠结了,人家后端工程师设计的就是login,咱用就得了,对不对,你看这个是test,诶相关性最强,你输入的是test,那这就是test嘛,但是这呢,我多说一句,各位你往下看看这蓝色的。
07:08
同学,你说它和test的有啥关系吗?如果你非说有关系,我只能说它这里边有T有S,但是没有test整个这个单词是不?哎说老师那这是有点毛病的,确实是好像有点小问题,但这咱别管那么多了,同学,那是他服务器的事儿,对不对啊,还有这个同学更过分,你看这里边没有T啊,没有有E是吧,但是没有ST是不在这就别纠结了,OK,好了,我们真正想要的各位是哪个IT4,那所以说呢,在这我取的再到位一点点it对不好,这回再看一下刷新啊,这回我换了搜索的这个是DEMO,然后搜索一下,稍微等一会儿啊,我这比较快,有可能你那会比较慢啊各位啊,打开一堆用户是不是就来了呀?各位,你说接下来怎么办?目前这一堆用户是打印在控制台上了,但我想问的是这个东西是在哪个组件里输出的呀?回头看一眼,是不是在search组件里面输出的这一堆用户啊?那我想问各位,这一堆用户目前在哪?在search里面,但是哪个组件想用啊?哪个组件想用?很明显是list的组件想用,你说对不?各位,那你说接下来怎么办?这就涉及到组件间通信了,对吧?各位你看这是search,你看这是list,它俩啥关系啊?兄弟组件他俩没有包裹关系,是平级的,那同学你就告诉我吧,红色的组件想把数据给蓝色的,你可以怎么写?我用全局事件总线行不行?可以,我用消息订阅与发布行不行?行,还有一个最笨的办法,同学啊,不太推荐,但是能这么写,就是我把这东西交给最外侧那个APP,完了APP呢,再交给这个历史组件是不是也行啊,但是犯不上了,所以说在这呢,同学我们直接把这个东西通过全局事件总线的方式交给谁list来吧各位啊。
08:54
既然想用全局事件总线,那就想好谁接收数据list,谁提供数据search,那么接收数据的地方我得怎么写来着,大家还记得吗?在盲的这个勾子里面,在这呢?哎,然后我怎么写呢?是不是得给那个this.dollar for bus去绑定一个事件呢?但是前提是啊,你得安装了全局事件总线,看一下命点JS里面A同学是不是一直在这安装着呢?诶,那这回就省心了,来吧,点儿Dollar了福啊,起一个名字吧啊,比如说就叫做user list用户列表啊,或者叫这个也行,叫做get users得到用户嘛。啊然后在这呢,怎么写来着?是不是可以写一个回调,直接写就得写箭头函数对不对?哎,或者是说你直接在这提前写好一个methods,然后this点,然后什么什么什么东西对吧?哎,在这我就简单写了,直接用一个箭头函数,嗯,然后呢,它会收到这个data啊,我就直接写吧,叫做users,别写data了,语义化一点,诶然后在这呢,来一个consolo输出,叫做我是什么呢?List组件,然后呢收。
09:54
到了数据,哎,然后来一个冒号,把这个users呢,给它做一个输出,OK,这不就写完了吗?嗯,那同样的道理,拿到这个Dollar bus,回到这个面,当请求成功了的时候,走,你别调那个Dollar on了,是Dollar for inmate去触发这个自定义事件,然后你这边叫什么名,那这边触发的呀,就也得叫什么名,然后你把谁给它丢过去呢?当然就是response.data.it,对不对?这句话呢,先给它注掉,或者说在这呢,我给它删掉,哎,把东西给它递过去好了,咱试试啊,各位来刷新一波搜索的呢,还是test,然后这儿呢,有一个注意点跟大家说一下,你自己在练习的时候,就是这个接口,你不要太过于频繁的请求它,如果你在一分钟之内你请求了很多次,有可能github就认为你在攻击它,然后你当前这个今天的IP地址呢,就不能再请求它了,你只能说重启一下你家的路由器啊,或者是手机怎么的开个热点,然后你再去请求,OK,就是不要请求的太频繁啊,你像我这还好,截止到目前我才请求了两次是不是。
10:54
来搜索一下啊,走,你数据回来了,诶,我是历子组件收到了数据,同学,那你说接下来干嘛呀啊,那此时不存更待何时啊,是吧?哎,在这同学users拿到手里了,那我就做一件事,this.users等于这边的users对吧?各位收到了数据存在了自身是不?哎,你想想各位,你说拿的东西你要不存,那不就没有用吗?诶,这回就存进去了,那能不能存进去呢?我们还得测试一下,刷新一波,然后再发这个请求test,我这回呢,借助VIVO的开发者工具去看一眼,打开这个list,一上来数组是零对不对?好了,搜索。
11:30
等会儿这里边已经有东西了啊,你切出去切回来诶它就有了,因为页面上没用,大家还记得吗?页面上如果你没用,这块不会有一个及时更新的,是不?各位好了,那数据已经存进去了,那我们得分析一下各位,这每一个用户里边有这么多的信息都代表着什么呀,是不同学不在这里边分析了啊,这里边看不全,我来到控制台这打开,然后呢,我随便找一个用户,比如说就这个用户同学他有很多的信息,你发现没?诶说老师这些信息怎么都变成这样了吗?大家忘了吗?你说你把一个对象存在data里面,人家肯定得给这些东西匹配上get塞对不?哎,他匹配他的咱不管,咱就说说咱们用哪个数据,各位首先说说三个东西啊同学,有的你不要去太关注了,咱也不用啊,首先这个我需要O维塔ul什么呢?就是用户的头像地址,还有这个我跟你讲各位我也需要,这是干嘛的呢?就是每一个用户的头像啊,能点你一点了之后呢,就跳到了这个人的github主页,哎,所以说这就是每一个人的那个github。
12:30
页地址,这个呢,就是用户的头像,还有一个是我们需要的就是这个login啊,Login其实指的就是用户的登录名,也叫用户名,就这三个东西我们要啊,这个头像和这个名字用于展示这个地址,用于点击的时候实现跳转,所以说同学接下来你知道应该怎么做了,回到这里边,上边这个结构啊,不要写假的了,要写成真的啊,这会儿呢,你也不要乱说老师啊,这东西太多了,各位你看这是一个div,而且它的类名呢,叫做car了,这又是一个,每一个card的都是一个用户,所以说一个两个,三个,四个,五个是不是一共五个用户,哎,那我把这些呢都给它删掉,我留一个是不就得了呀,然后我通过v for去生成这些东西是不就可以了,来一个v for,那遍利吧,同学,那我就写了user in哪呢user啊,然后大家都知道,只要涉及到便利了这个key啊,是不是必须给人家写上,同学不要用那个index,因为咱们有唯一标识,唯一标识你知道是什么吗?就是。
13:30
每一个用户的啥,那个login同学你说呃,一个网站上可不可能存在两个用户,他俩的登录名是一样的,那不可能嘛,哎,所以说在这儿我就用这个user.login它只要是个唯一值就可以,然后这个地址换各位,当你点击的时候跳转的时候,那怎么办?是不是得给它动态绑定啊来,然后用哪个呢?当然是user身上的哪个属性来着,HTML_URL刚才看到的对不对啊,那这个呢,也可以给它换一下了,给它删掉动态绑定,哎,那这怎么写呢?User第二那个头像叫做avaar,然后呢,下划线URL啊,维塔ul,哎,就是头像地址,那这块也简单了,各位差值语法对不对,你这里边属性值得动态绑定,那标签里边的标签体,那不得插值语法吗?诶这怎么写,user.login是不是就可以了,哎,来咱看一下效果啊,各位回来刷新一上来肯定是什么都没有的,因为是空数组嘛,接下来搜索了啊,Test点击搜索。
14:29
等会儿诶慢慢的是不是就加载出来了列表这不就出来了吗?啊,那你比如说你再换一个输入这个DEMO,然后再点击搜索走,诶出来的就是DEMO对吧?各位,那我们点一下这个头像,看能不能跳到他的个人主页啊来走点击一下这块呢,速度可能会有点慢,稍微等一下,诶是可以跳转的,对吧?各位,OK,这个搜索和一个基本列表的展示呢,我们就完成了,那这小节呢,我们听。
我来说两句