00:01
啊。那当前我们要做的就是这一个搜索的组件。主见呢,好像已经有了,那没人用是吧,打开。好,我先把那个静态的模板和那个样式过来。啊,以及这个里面的样式。功能呢,前面已经说过了啊。好,这个里面呢,稍微的换一下这个,这应该是我们那个什么焊的吧,不叫焊的叫什么。
01:01
我叫小看的叫top,应该把这个组件给他,实际上是有一经是不是引入了呀,还有一个属性。还要传一个属性。嗯,应该抬,大家可以看一下。对吧,我要接受一个title,那个title是什么的呢。啊,就搜索吧,好吧。行。来,我们现在来看一下我们整个界面。啊,就这样的一个效果啊,现在这里面写的是静态的这一个列表啊,写的静态的。啊,下面呢,我们就来去做,来去做的话,大家想啊,我们现在相当于是在这里面输入一个关键字是吧,接着去点它去干嘛去。
02:02
是不是进行异步搜索发请求对不对,最终是不是要去显示一个列表。那如果没有搜索到了。那就显示一个提示对吧,说没有任何搜索的结果,大家可以看一下,比如说我搜一下。这个能不能懂啊,要能懂啊行,那我们去做,首先我们要想到我们搜索的那个搜索列表是不是应该通过VX管理起来。啊,这里面要写一套啊来,我们要去写接口,要去写我们的VX,接着才是写组件,是不是三个部分能不懂。好,来我们的接口。就要去写一个接负函数嘛,对吧?啊写过吗?啊,我们来看一下有没有啊,哎,还真是有是吧,这个是不是搜索商家商铺去了,哎已经有了,那既然已经有了,那我们就直接用它对吧?那接着写什么去写我们的VX相关的东西,对吧?能不懂,那在VX你先写什么呢?先要写state,先确定我们要去存一个什么样的状态。
03:29
这个能不能懂啊,那我们要去是是存储一个搜索的商家列表。那我叫他什么名字啊,前面已经有shops了,对吧,那你肯定不能用shops吧,这是一前面是所有商家的一个什么列表,是不是,而这个地方是一个什么叫设计。Shops。这是搜索得到的什么三加列表,能不懂啊,能懂那下面啊,就是写我们的那几个啊,先把这个mutation写一下吧,这个也比较简单啊,这应该是个接收信息对吧,接收相关的接收一个什么呢。
04:22
还是要去写一个设计。啊,这个是接收啊,前面不有一个商家数组吗?但是呢,这个商家数组的前面应该有一个修饰叫什么搜索的对吧。那么呢?好,这个比较简单,就是一个接收,那mutation好写,说实话mutation也特别简单,那我们就直接上头来写来,这个是。
05:04
再来一个。对吧,哎,名字啊叫receive。Search shops。啊,再写几个啊。这个是吧,OK,那他传过来的里面对象里面是什么。也是个shops吧,啊,或者你叫such shops也行,对吧,这样呢,能够写的时候方便一点。这怎么弄?好,那下面。我要去写这1ACTION,那下面我是不是要写一个异步的操作,对吧,写一个异步操作来写一写啊。快点睡。
06:01
算了吧,OK好,那我这个地方是get,或者直接叫什么啊,叫设各位。啊好,那我这里面啊,这里面啊,不需要这个了吧。我我先先看,我先不传参数啊,先看了再说,好,我这个是要调用一个函数去吧,那我要去引入那个接口请求函数,以及这个type啊这个。引入那个接口请求函数IEQ。对吧,好,那接着。我们在这里面不就是去调它去嘛,对吧,那调下去得看这里面是不是要传两个参数啊,能看到吧,要传两个参数好。
07:02
来啊传过去呗,那去什么不是吧是吧,那首先呢,这个它。这整过它在哪个里面,State里面再整合一下就可以,对不对,这个咱前面整过呀。咱最先的时候整过这个东西,就这个。对吧。对不懂好,现在缺一个什么Q我,而我是不是最先是在组件界面上么?所以应该怎么转,这是一个参数嘛。对吧,啊对的啊行。嗯,下面呢,就是类似的,嗯,如果result等于零,取出date作为。这为什么呢,叫。找search。
08:01
Shops。那传searchs这个写什么receives。能不能看懂啊好,那这样的话呢,我们的整个VX其实就写好了,那这个方法啊,这个方法是在什么时候才掉。点击搜索的时候是不是才会掉啊,啊没有问题,好。啊,那下面我们来往下看啊,我们接着就是要去写我们的当前的这个设想。因为它有一个音,所以我这里面,我这里面是不是来一个什么model,这是很自然的吧,那写个什么就写key word得了是吧。那我说明我需要去定一个什么date对吧,需要return一个对象keyword开始了啊空串是吧,没问题。
09:11
好。那接着是我们这个地方,这里面是不是一个按钮对吧,点击它的时候我们可以在这走是吧,还记得怎么做了是吧?啊点prevent等于就叫设计吧。搜索嘛,可以吧,啊可以,那你说我现在是不是有这样一个方法。啊,有这样一个方法来。那我需要去写ma。对吧,需要写一个方法。在这个方法里面,我们是不是要去得到我输入的搜索关键字进行搜索,记住了啊嗯,得到搜索关键字,搜索关键字下一步就是进行搜索呗。
10:11
对吧,正好的。啊,我还劝一下是吧,而且应该知道他应该是有值才搜索吧,要没有值去搜索那就没必要了是不是,所以稍微的什么是判断一下。对吧?那此时我应干嘛去进行搜索?This列什么?呃,叫多了福斯多。这个不懂好那人的话,那下面。需要查个东西是吧,嗯,穿什么,我的那个action的名字对不对,我刚才写的那个名字叫search shops。
11:03
需要传一个参数,也就是谁keyword。能不能看懂?啊,有人看到吗?好,那搜索完了以后,后面我的那个相当于VX里面是不是就有数据了。哎,我们先来看一下,我们这一步看他有没有数据啊,先别着急啊。也就是说什么意思了,来啊。这个下面不动啊,这个是静态的,这不用管,现在来看我们UX里面的。现在是没有数据的。能不能看到,那接着呢,我在这里面输入一个A,按正常情况下,根据刚才应该是有数据对不对来找你。有没有了,数据有了对不对,那数据有了,下一步就很简单,就是给他什么,是不是读取出来,并且给他展现出来。
12:04
这个能不能懂啊,能懂那行,那我们现在的重要任务就是去读,首先读要读状态数据嘛。所以说需要从VX里面引入map state对吧。那接着去写计算属性,这都是套路。来读一个什么叫search shops。这样的吧,好读这个来啊,我们读一下。读到以后是不是下面是不是显示。这个能不能能理解吧,能理解这个显示是不是要去便利。是吧,需要遍历来这个这这个遍历的这段模板,我就自己把它拿过来写一下,拿来拷贝一下啊就是。
13:05
这个我就不再去做了。这里面不过有一个小点要说一说。啊,我就不再一个一个写了,就写下稍微有点要花点时间,大家自己写,我写了好多好多遍了,这有意思啊,这个比有意思,你看。哎,这一个root-link啊,你看我把那个ii干掉看什么。但它这里面有一个非常有意思的一个属性。大家觉得是个什么概念,他?也就是说是一个什么呢?Root,但link默认不生成一个A标签吗?它现在相当于生成一个什么标签ii。这能懂我意思吧,当然他也可以还可以仍然去指定你点击以后跳转哪个里哪个路由去。能听懂我说意思不?啊,这种有时候也有用,你再用ii的话,是不是就是一个列表的一个效果。
14:04
这个专门用于啊,形成一个列表,带列表的一个多个路由路径。啊,这个需要去知道一下啊。好,还有一个啊,这里面还有一个,大家看到我的这个to呢,是是写成了一个对象,对象里面呢,有pass,有query query是什么。啊,我们是不是两种类型的参数,一个叫query参数,一个叫什么。他参数你说我不用这种对象表的话,我用字符串表的话,能不能写。不能吗?啊,我不用这个。我就不用这个对吧,你看我就我就不改了,我就直接在这写啊,假设我我的这个我的这个兔,我就写在这里吧,啊,我的冒号兔等于我用字符串的形式来写。
15:01
对吧。大家看到我很能写,这有什么不能写的?斜杠shop对吧?再是问号啊,它不参数名字叫ID吗?等于一个值。只是说等于一个值的话,那我就要去啊,加上一个IM点什么ID。可以解可以吧。可以。那实际上也就是说要显示某一个商家ID所对应的是不是商家的详情呢?但其实我们现在只有一个对吧,我们本身现在因为我们后里面的商家是模拟数据嘛,是某数据对吧。就能懂吗?啊,这种写法也是可以的,这种写法呢就拆开来写,而我们这个写法呢,是整合去写一个意思啊诶。这个需要去知道,其他的就是里面去里面去取数据了,这个我就不再一个看了,诶这地方需要有一个什么。
16:08
那个图片是不是有个需要有个基础路径呢?就咱写过这类似的,把这个基础路径给他搞过来。OK吧,好,现在我们来去看一下我们当前这个能不能能不能显示啊,当然我们这工作还没做完,开始没有是吧,开始干净的,接着输入一个A搜索。有没有,有吧,有。但是我们缺一个功能是什么呢?我们刚才说过搜索得到了显示这个列表,那关键是。失败没?能看到吧,就是没有那个提示看到吗?能不懂,那怎么样能够把那个提示显示出来呢。
17:03
这种类似事咱没做过。就我现在要去也搜索显示一个,没有收到任何结果这样一个文本提示。你看他设计有吗。是不是概念,那有人说老师这个这个这个这个不就是看我有没有数据吗?对不对。这个没有收到任何结果,大家看一下这个我们审查一下。这不就是有一个div吗?是吧,只是说这个div什么时候才显示。没有数据的时候才显示对不对。那也就说大家看啊,大家看一下,我们把这个去掉一下,把这个搞一下。哎呀,这一个是不是有数据才显示啊。它是没有数据,是不是才显示,但是有一个问题。
18:01
嗯,你就这么做肯定是不行的,你来看一下,你来看一下啊,你看我假设我写一个V啊v if写一个它有数据,有数据,那也就是说我们的我们不有一个数组吗?叫search shops,点什么认识是不是有值或大于零,对吧。那你下面是不是写else了?那很自然就写这个吗?但这样做你看对吗?来看下我们的这个还没搜索之前,他就显示出来了,你看到了吗。这不对呀。什么意思?因为我们初始的时候还没搜索嘛,对不对。但是如果你真正的要是你比如说我搜索到了。
19:00
有是吧,我现在再没收到。这个没问题对吧,问题在于什么?你现在这种搞法在初始显示的时候是不太好啊,我还没搜了,你就说我没收到,结果搞得我都没欲望收了。那不懂咋办呢?对吧,这个地方要额外有一个标识。变量来去做。就额外再设计一个标识变量啊,这个标识变量呢。嗯,比如说就是标识我搜索的结果到底有没有数据,到底是不是空的可以吧,到底是不是空的啊,我就写一个。譬如说no。啊。写个什么shops可以吧?
20:01
懂不懂,那你说一上来就处吗?不对,你上的是什么?这个怎么懂一上呢,是负好接着。那什么时候把它作为处呢?对吧。什么时候把它数,就是我搜索完了以后啊,搜索完了以后,我的这一个更新之后,当看到啊,我是不是先是读到的是一个空空的数组。对吧,接着他收入完了以后,是不是又给了我一个数组,又给了一个数据对不对。嗯。那我就去,你说我干嘛,我我什么时候去更新它,你说说是不用。我怎么去更新它。
21:00
嗯,那肯定要是在我可能看到那个数组的时候,对不对,看到搜索以后的数组以后。那我什么时候能看到这个搜索以后的数字呢?Monkey的行吗?不行对吧,那老师在这行不行。在这也不行,对吧,因为那个搜索是义务的,对不对哦,什么时候就能够知道了呢。啊。这个难道不知道,这咱们前面咱做过的一些事啊,只是做的功能不一样而已啊监视嘛。对吧,你减少了改变嘛,他改变不说明我搜索了吗。能不能?啊,也就是说我接谁去,是不是接着他,哎,对吧,它是不是得到一个最新的Y,对吧,那我怎么办。If,如果说value点认识。
22:02
是说明什么?是不是没有数据啊,那没有数据我怎么办?嗯,Z点它等于什么?是不是等于负?能懂,我说意思不好,那接着接着我我在显示的时候。大家看这写什么?他回去微博说。去吧。这不就说明他有数据吗?难道不对吗?啊,这不说明它为这个为负的时候,它是叫没有结果对不对。下面直接写个什么else,下面这个倒没问题,对吧,能看到吧?啊我们来看一下。
23:06
初始显示有没有问题,没问题吧。接着啊,我输入AA搜索出来没有。当然我点是不是能过去啊啊能过去,那接着我再记啊,看到诶走你。还有问题刚好啊。各位,接着我再收。哎。那不对呀。不对呀。是不是实验数据有没有有但不出来了,怎么。不出来,你要知道显示这个是什么原因。是不是他已经改了去了,那所以我在搜索之前。我在搜索之前,我都会先干个什么事。
24:04
等于Y等于佛三。我都进行搜索去了嘛,我先肯定要把它搞,为什么for嘛,对不对。能看到吧。我要不把这个假,假设他本来回去,那不一直回去了吗。这个地方来看一下,我这地方没改是吧,刚才刚才我这里面比如说把这个关掉啊,这个再搜索一下。我不去搜索A,我能收到吗?能收到是吧,再来看一下刚才是不是没问题啊。再试一试,开始没问题,接着输一个。呃,AA能收到吧,接着输入一个。按说应该能收到,接着我回去,回去的话,应该我的数据是会发生改变,他应该会改啊,对吧,看一下是不是啊。你看有问题好,有问题我们先看一下状态数据,我们前面说过,这个显示不了,肯定要是状态上面的一些问题,对不对,那我们去审查一下啊,别自己异端了,我们来审查一下,看一下看主见啊,看主件先看一下我这个搜人应该是可以搜到。
25:18
对吧,是过来了啊,再一个先看一下数据有没有。有没有?是不是有好有啊,有的话接着我们去看一下这个组件。他为什么他为触诶这个怎么奇怪,他为触诶我的这个卧。我坚持他的改变,他他改了呀。是不哦,他这个这个里面,这个里面,它我这个意思是看到啊,啊有没有数据能看到,我这里面说的意思是什么。
26:02
没有数据就改为数,那有数据了。没操作。对吧,有数据了,我改了什么,是不是改成或或者是或者是你在这做也行,你提前做也行,懂不懂。就是现在我们显示不了的原因,大家看到的组件,你都看到这个组件,你都知道现在是他的问题啊,他不对吗。是不是这个意思,他不对,是什么原因啊,大家想我们要也就现在我应该把这个处改为什么。改成for,那改成for什么时候改呢?对吧,有两种写法,一种穿这个。还有一种呢?在这里改都可以。其实。这能没有?你说你现在到了L说明什么?有值有数据对不对,那有数据是不是要把它置为,因为有可能本来是处嘛。
27:05
呃,这个说明什么,是没有数据对吧。能么看到好,我们再来看一下,刷新一下啊,记着输入一个A开始,对的啊A走你有吧,没有吧,接着在什么回去走你。有没有有了。能不能看到。啊,这个是没什么太大问题了,对吧。啊,这个事情转到前面没有太去做过这样的事啊,就是来去有一个没有数据的一个提示。好,那这样的话呢,我们就把这个搜索的基本功能给完成了啊。
28:00
好,行。
我来说两句