26_尚硅谷_练习2_用户搜索_初始化显示.avi原创

好，下面呢，我们来去做一个跟请求相关的一个小DEMO。我们来看一下。啊，这个呢，是在get上面搜索用户的。那里有个输入框啊，到我点搜索的时候，下面进行搜索，搜索我这个关键字匹配的所有用户。当然也可以点过去看这个用户的主页。啊，我可以搜索另外一个关键字。能看到吧。啊，OK。去做这样一个效果啊。行，嗯，这个效果的静态页面呢，嗯，我也我们也可以直接用上。啊，切回到我们的这个应用的这个工程。好把这个呢放在这里，等会我们用啊，因为我们到时候拆分组件。啊，这一个呢。啊，可以给他打开看一下。

这是个精彩页面。这是写死的数据啊，现在他肯定是没有交互的。我说话肯定受不了。能看懂吧，好行。来吧，下面我们准备去啊，主题化开发了。那我先把这个呢给大家看下，这备份一个。这个是我们那个评论的是吧，写一个comment。放着放在了，把这整个里面的，这整个里面的都干掉。好，先来看一下我们当前这个界面需要哪些组件吗？那这一次我就不去切图了，我们来去用工具直接画一下得了。整个界面。APP是吧，既然是这个搜索部分这一部分是吧？啊或者整个或者是说这里面的这个都行，这个没关系。

还有一个就是下面的。对吧，其实每一个item是不是都可以做一个，但这里面呢，因为我们的重心是在请求的一个处理，异步的处理，所以我就简单点分算了。Item就不做了。那最外面是APP吧，啊，这个是什么，哪一个设。可以吧，这个来一个。这个得说啊，其实这个下面这个界面其实不止一种状态。能懂不啊，在搜索之前，搜索中和搜索的结果啊，其实好几个状态，那我叫他妹嘛。听懂吧，啊好行。那设计出来以后，下面我们把这几个啊组件给它创建一下。啊，这一次我为了简单起见呢，我也不去建组件文件夹了，我直接在这里面去建GSX啊，因为我们的重心是在上面。

好，再来几个。下面的search。对吧，还有一个是我们的妹。能看到吧，好。现在我们要去做我们的第二步，相当于我们现在的拆分界面已经拆分好了，拆分组件拆分好了，下一步我们要实现静态组件，说白了。下面我们要看它是1.0多了，这里面是也有木头吧。Put刚才是不是引过了，不用再引了啊，接着啊，这一次我为了简单啊，我这里样式也没多少，我这里简单直接把样式放在。这里也这样式，就不拆了。啊，这一次为了简单一点啊，因为我们重心不在这上面啊，Port点斜杠，Index CSS。啊，样式也不用管它，主要是看页面了。好拆页面怎么拆了？

打看见了呢。大家看到这这是整个div吧。这一个是什么？是不是上面的搜索部位，那这个呢。是不是我的面部分，那得了，那就把整个。看见谁？放到我们的什么APP里面来吧。好，这个里面写一个大写的D。好，这里写个他是吧。好，接着啊，需要改一些东西，对吧，把这里面的class。都改成啊看因为以前改过，所以他还有记录。啊，Play。能看到吧，好看一下有没有style。要不要要。这个style就得自己手动的搞一搞，一共有其实都一样的对吧，改一个复制粘贴一下，改一个就拉倒了对吧。

来怎么改呢，把这一个。那读了写两个什么大括号。行了吗？不行吧，下面写字不算，这里面说一下它其实你完全可以不用写单位。他会帮你加。很酷是吧，啊，OK，好。好来下面呢，下面其他的是不是都类似的啊，都类似的，那类似的其实我留一个是不是就够了呀。因为其其实这里面的都应该是什么。是不是根据数据来动态生成的？所以留一个拉倒，其他的给了什么干？能看到吧，好好了，下面把这一个部分，把这一个部分抽取到我们的什么。Search里面去。

这个吧，来角色。没问题。拿过来。OK吧，OK好下面啊，下一部分。是吧，看X来把它整到我们的里面来。嗯，叫没。OK是吧，把这个。怎么了？可以吧？好行，下面我的AP要做什么呢？这个你应该知道啊，引入那两个子主页面是吧，啊，OK，大写的色系from点斜杠色，还有一个叫may from点斜杠may。

下面。这里面写呗，对吧，啊哪一个。再来一个。开始不用穿什么。能看懂，好，那也就是说现在应该。要能够看待一个静态的页面了吧？啊，看看我们启动没有，没有启动NPM啊，NPM是大轴里。你不要直接打开页面啊，直接打开页面是看不到效果的。啊。哎，报错报错就要看一下它是一个什么错误，找那个APP找不到。APA这个地方来看一下我们哪个组件啊。啊，Index里面。能找到吗？

我们不是直接在这个component下面吗。是不是出来了，主要我现在是不是只有一个了啊，没有问题，你写多个，那自然也可以形成多个。好，那也就是说我们现在呢，形成了一个静态界面的效果，下面我们要干嘛。进度立即不大。第三步吧，对吧，啊，第三步要实现一个动态组件，这个动态组件又分为两步，第一步实现。初始化效果，这个初始化效果我们来说一下啊，大家看呢，最先初始化的效果是一个什么效果，大家看一下，哎，这个有点长啊，其实我把这个动画再打开一下，大家注意最先的一个改最先一个看到这个输入吧，开始的时候在我搜索之前，它是不是有个提示的文本说请输入一个搜索关键字对不对。听懂不，现在我输入以后，点击搜索以后，它是不是提示一个loading。

这是第二个状态了吧，第三个状态是什么？啊，显示我搜索的结果，其实还有一个状态，这里没有演示。就是搜索以后我要发请求，有没有可能出错呀。有可能吧，那出错了，我又有一个下面的提示文本。那也就是说我一共有几个状态，下面四个。初始搜索中，搜索结果成功或者什么失败有四个状态。啊。也就是说我当前这个main组件对吧，它有四个状态，而当前这一个是不是只是其中的一个呀。能不能啊，那我先把我的这个这个当前这个组件的状态设计一下，看着啊叫初始化状态嘛，叫state等于一个对象是吧。

那大看呢，首先第一个有一个，譬如说假设我写一个，写一个叫view。开始了。逃一处代表什么？这是最先，如果它为处，我就会显示第一个初始页面。就是请输入关键字搜索。能不懂？好，我还有一个叫lo开始的为for。什么是为数？我一点那个搜索按钮就应该改为数。它一旦维修以后，应该显示一个什么是loading的文本。就正在请求中的一个文本嘛，对吧，好还有两个。最后我搜索是不是有可能要得到一个数组显示列表啊，那我就因为我搜索用户的，所以我来个users。看到吗？我开始是没有子弹。看好，最后还有一个叫error，开始没有。

能不能看懂，如果它有值，是不是要显示这个值啊。如果我搜索出错了。请求出错了，是不是要给他赋一个值？看到吧，那也就是说我的这个render，这个return的结果是不是要看他们四个人。这四个状态，那我不管三七二十一，先把这四个状态给他什么取道嘛，反正都要的嘛。对吗？啊，来取到这四个状态。Users are error message。这是个吧，好，那我就依次的判断呗。If。如果说他为数。那我应该ta一个啊，假设我来个HR的标签，稍微不能写单一号啊，来个HR的标签稍微让它大一点。

写什么？不是请输入关键字搜索吗？是吧，我就写中文了啊，能看到吧？好，下面else是什么if？还有可能谁为数啊，Loading为数，那如果loading为数说明什么？说明我要返回一个什么呢？正在请求中，可以吗？啊，OK，就写个lo点点或者写个中文吧，这都写中文了，正在请求中点点点。没问题是吧，类似的意思好。下面是不是这两种用的某一个，那我先搞它好吧，因为这个好弄一点，先把容易的搞了。那如果他有值，我就这么写呗。那我就是吧，不就把它显出来呗。啊，能看了吗？

如果他有值就写上，其他情况就谁了，那不就它了吗？对不对，而这个里面返回的是不是要去变异它呀。知道不，那也就是说我的这个div应该可能有多个是吧，应该生成一个数组吧，那我应该在外面搞一个什么。大括号。是吧，现在是user是点map固定的，说实话这个东西都是。接着括号有者index啊，箭头啊，最后是不是要返回一个。标签呢？啊，返回整个这个对不对是吧，大家看到我怎么做的，我加一个小括号。放在这里就行，不用写大括号，你要写大括号的话，你还return。

懂吗？就是我这里面是用了小块啊，如果我用大号，大家想我要这么写。是不是那这样就多了好几个字符了。啊，OK。大家看到我是怎么做？加个小括号。看懂吧，那也就是说此时我的这个箭头有两个作用，一个代表是函数，一个代表是返回。听到吧，好。那里面啊，里面我该做什么呢。里面这个user者里面应该是不是有几个信息啊，对，我这一个是应该是我这个当前这个用户的一个地址，那也就说在user者里面是不是有他的一个地址，呃，我们写一个什么，就写一个ul。行吗？U的点ul吗？但是这样写肯定不行，是不是不知道不行啊，这个地方要写个什么大括号。

能看到吧。好，下面还有什么需要去指定的这个，这是不是那个我们的头像的一个地址啊，能看到吧，那也就是说它也是动态的。对吧，悠着点头像例子大家知头像总数嘛，啊有一个特别意思的一个单词。阿凡达ul。阿凡达是指什么呢啊？经常用于代表头像。啊，带来头像啊。OK。好，下面还有一个这。这个是什么呀。是不是那个用户的名称，那我就写了user者点什么name，也就是说我的user这个对象里面必须有三个属性对吗？有name，有ul，还有一个什么阿凡达ul。

能看到吧。好。那其实我们的这一个就写的差不多了，但是我们现在啊，去渲染一下看一下，诶是初始状态是不是就出来了。