00:00
好,那下面我们来看就是上午说啊,上午我们已经能够去分页显示了,下面我们看一下这个功能。搜索分页的功能,也就是说啊,来,我们来试一下。比如说现在默认是不是按名称搜索呀,假设我在这里面输入一个关键字P。应该有部分匹配的,对吧,来走你。能看到不当搜索以后是不是也可以继续分页的吧?啊,也是可以继续分页的啊,那除了按照名称搜索了,它还有一个按照什么呢?描述搜索,这里有没有上描述吗?啊。能不能看到啊,是可以进行搜索的,当如果我这里面形成了两页。那我是一个带搜索的一个翻页吧,比如说我这里是一,这里是二,对吧,如果点压的话,是不是还是可以。
01:04
翻译的过程中,这个东西不能丢吧?能听到吧,你就翻译过程总是看到满足条件的呗,对吧,这个要注意啊,好来这个地方就涉及到我们的接口,我们现在看一下接口。先看记录,这里面有一个搜索产品分析列表。现在收到数据了吗?List为空,数组没有,是不是来说一下,来看一下这里面的信息。啊配11是不是获取第一页是吧,配size是。每页显示几条?两条,你最多获取两个数据是吧,好,这里面有一个。这个是根据什么来说呢?描述好,我这就写个T。
02:02
应该有数据才对。有数据吗?啊,总共满足条数就两条对吧,我当前返是返回来是不是就两条啊。好,那除了现在是根据描述的,是要根据产品名称来说,怎么说呢,这个地方稍微的说一下,这地方这个参数名有变化。这一次啊,应该不止匹配两条。一共是不是三条吧,能看到吧,一共是三条,只是我当前啊,当前给你返回了几个数据,两个数据,因为你不是告诉他只要两个数据吗。那一共形成几页?应该有两页吧,因为三条数据了,每一页只获取两条,之前是两条,不三页两页吧。能听到不,我一共是三条数据,你一页之前只获取两,你每一次获取两条数据,那不得分两次啊,那你看我把这个改成。
03:10
这个现在不是一一吗?我给他走里,现在剩应该剩下一个。能看到吧,嗯,行,注意啊,这里面参数名。参数名是有变化的,对吧,一个叫product name,一个叫product e DC,一个产品名,去搜索一个产品描述。好,那下面呢,我们去写一下。接口的请求函数。那这个写起来稍微有点麻烦,我们来看。我们先简单的实现是把它定义成两个接口函数。啊,搜索。商品分页列表IQ啊,设计product跟前面是不是有变化?
04:15
是一个搜索啊好来了请求地址呢,应该是固定的一个值。看一下。就是我们前面问号之前的这些路径,别把那个斜杠丢掉了啊,最左边的斜杠千万千万别丢掉。关键就是参数的问题,因为它的请求方式,什么请求get后面是不是就是个请求参数的问题,对不对?好,我们来看请求参数,它有三个,我分别来写一下。看好了。有两个是比较简单的page number size,只要是分页是必然有这两个属性。
05:04
对吧,有这两个数据,那我这边是不是需要啊,那需要是不是传过来。多数据,我这一次啊,我用对象来封装的。佩吉配什么?还有一个呀,对不对,除了这两个,基本上还有一个什么。还有什么呢?那这个就不好说了,有可能是。大等于一个什么值?这个值。是不是需要告诉我啊搜索的关键字吧,那这边是不是得告诉我搜索关键字。能听到不?那我叫什么呢?叫STEM什么意思?搜索的名字叫什么是不是,呃,这个名字搜索的名字是不是就是我这个参数值。
06:05
对吧,只是说有一个事情,我有可能是这个样子,那也有可能是这个。对吗?这能听到吗?如果我给它写成两个方法,这个好写。说白了,一个是根据名字搜,一个根据描述搜,比如说上面根据名字搜,下面根据描述来搜,那我这个要取两个方法名是吧,假设一个加一,一个加二,我先随便取一个。能看到吧,那这个时候这一个啊,这一个就是根据什么来说。是不是产品名称啊,或者叫商品名称对吧?呃,下面是根据商品名说的吗?不是,是根据商品什么描述。
07:02
能听到吧,那这个是我能不能合并成一个呢。合并成一个的话,就是说你有可能是根据商品名称,也有可能是根据什么商品描述,那也就是说到底根据谁是不是不一定的。对不,那也就是说这两个值我用哪一个,是不是你得告诉我。来,看着再传一个参数,我叫他search type。什么意思?搜索的类型,也就是说可以根据名字来搜,也可以根据什么描述来搜,呃,这个设计type的值。是什么字啊?那可以设成布尔值,我们来判断可不可以来确定用这两个名字哪一个嘛,是不是更加直接的,这里面最重要的就是它啊。
08:07
就是搜索的类型啊,搜索的类型它的值就两个,我不是用。我是用这两个字。可能是叫,也可能叫。你说我这个该怎么写呀。这个就不要了。是吧,这个不要了。我是不是要将他的值,这个参数名的值,这个参数的值作为我的这个属性,这么写对吗?对吗?对还是不对?不对,你这么写,你的参数名是设这个串是吧,我是要这一个名称,这个变量名的值作为属性名,得用什么中号,这个就很讲究了。
09:16
能不看到,当然用写成两个接口函数,肯定要看起来更懂一点,更好懂一些。但是这一个东西按说大家应该也要懂。就是我想让一个变量的值作为属性名的时候。得需要在这个上面外面加个什么中括号。那也就是说,现在的属性名是这个文本吗?是三开吗?不是三开什么值,而且这个值只能是这两个中的什么某一个。这能不能听到?那也就是说外面得传给我几个数据啊,四个,那此时比较方便的方式是不是传一个对象过来。
10:11
这个没问题吧,没问题啊好,那接口情形函数定义好以后,下面我们就去写。我们的这个组件呢。那最终肯定要去发请求了吧,那我可以先把这个组件给他什么,把个接口形函给你引入是吧,接口情形函数,哎,引入过其中一个,再来加一个IEQ设计product明白了吧?好,那下面我什么时候去发请求,调用那个接口请求函数,点击什么搜索的时候是不是,但是在点搜索前。你的这个input的数据要不要收集起来,你的的数据要不要收集起来,要把哎,前面我们讲过一个。
11:06
概念啊叫什么呢?受控组件。那受控组件和非受控组件的区别在哪里?简单说是不是它是不能实时收集数据呗,对吧,还是说我点按钮的时候才手动收对不对,一个是实时收集的自动收集对不对,一个呢,是不是手动收集,当要想自动收集是不是得需要绑定啊欠监听,而且还用状态来接收这些数据。我们现在不有两个数据收集,一个是搜索的名字。一个是我搜索的一个类型,到底是按名称来搜,还是按什么描述来搜?
12:02
对不?那此时我应该有两个状态,这两个状态其实是跟我的这两个接口是有对应关系的,一个是我要收集一个什么。Search,这是我输入的吧,我手动输入的一个搜索的关键字叫search,开始有输入吗?还有孔串,这是搜索的什么关键字?你是关键字名称吗?这能听懂吧,还有一个。就是我要决定到底是根据这一个收还是根据DSSO吧。所以这一个值也需要收集吧,而且默认我们怎么说呢。是不是商品的名称?真的啊。根据。哪个字段注意。
13:02
自然搜索啊。好,来,这个得给个墨子。听懂不?我们默认是按照名称来收,那就应该等于什么?这能随便写吗?不能。这能听懂吧,能听懂好。看好了,那下面就要说我的这个state里面又存在两个新的数据,对吧,一个叫search type,还有一个叫那个是跟这个的关联起来,这个是写死的吗?不是是哪个词啊。设table的对不对,这能不懂,而这一个随便写吗?不是名称是对应的,是对应的是哪个呢?对应的是他来看好了。
14:00
是不是对应的什么name。是不是,而这一个放在我们的第二个open上面对不对。是不,那现在有问题了。我想是不是我一选中的时候,来把这个先写一写啊,写一下我再跟大家说,来先写一部分。这个音input的应该是写成它的value是多少了。是不怎么看到,可以吧,可以,但是啊,我们此时此刻肯定是大家看一下我们现在暂时的样子还没到位啊,先写一部分。你看你上面默认是不是显示根据名称来搜索。原因就在于我的初始值写的是对的,是不是我要写成一个R了?他还能默认选中某一个吗?不是选择某一个吧,我直接显示我不对,是不是这能听懂吧,听懂啊好。
15:05
啊,包括这一个啊,这个也是这个现在我没有任何显示,是因为我的初始值为什么为空串是不是。那下面问题就是当我选择某一个的时候,当我在输入的时候,看现在我的输入输不了,我动不了,你知道不知道为什么动不了吧,就我想输输进去。就是因为我这里面指定了我的这一个input的value为谁,但是这个状态值在发生改变吗?没有。我们要想实现受控组件要想自动收集,需要加一个什么监听,还记得不对,On。这个能听懂吧,要接受一个unchang的这样一个监听啊一个。那的change,它的这个回调函数是个什么样子,我怎么去看呢?是不是得去看文档啊,来看一下文档啊,看下文档,我里面没写东西,所以他报错先不用管它,找到我们的select。
16:17
准备下列表吗?好,我们看直接去看文档,找到uncha就行。来它那个是按照一定顺序去写的,我们就找到它啊按倩解这个怎么半呢?来看一下按间解这个右边就是他的回调函数的声明吧,这个参是什么?是不我选择的那个op的值啊,那得这个很好做。这样说的话,那就是说value箭头。行吧。那我这个函数里面干嘛呢。
17:01
直接就写得了Z点三的更新谁的状态值。Search。改为多少呀?改为多少呢?嗯。是它值多少,改是改折关键是。值是多少啊?哎,这里面什么回事。我是不是应该看一下。啊,这边写值,值是多少呢。我选的那个值,那个值告诉我了吗?就是扭,它不是歪扭是啥嘞。这方角不就是我选的那个O形的值吗?他已经传给你了。听懂了吧,在这个地方这个value,那你不说这个value不是这个value,那是哪个value扭呢?肯定选的某一个O形的value扭了。
18:04
这个地方能看到吧。选中option的能看到吧。那个不就是我想要的吗?是他或者是他是不是。那吧,好,那下面好像我们这个input好像可以同样的搞法去搞完是吧。也就是说我们同理呀,也加个什么。安。是吧,等于啊,我们现在道理不就是应该把这个扣比过来吗?只是改的是谁?对吧,但是不对。现在我的千是不给我回调,还传了个白,但并不代表会传。
19:00
你得去看一看用户的是不是给你传到白里能听到不,毕竟是不同的组件,不同的组件它的行为不是完全一样的,所以我们现在去找谁,找input。去找他的陷阱。是什么?我们用来代表谁,那也就说他给我传的是,为什么,不好意思,不是,是,那也就是说你不能直接写外流,你写外流存的是。是不是,那是不是代表我发生这个事件对象啊,我如何得到这个input的,值了点什么,他给他点。
20:01
就说嘛,你不得。想当然的觉得就应该这样。什么事情都是根据文档来的,对不对,我你不用背啊,你不用记住啊,谁是传达value,谁是传英文的,这记得住。不差记住,不差备注。有文档看的清清楚楚。这个能懂吧,那也就是说一个什么事情,现在啊,现在我的这个主线,它能够自动收集数据,我们看看,我选择按描述搜索,我输入ABC,好,现在我问大家我如何看到我的数据到底有没有收益。我现在去看代码能看出来吗?看不出来,看什么才能看的出来。对的工具是吧,看组件是不是就可以。
21:00
看我们组件,哎,找到我们的product。是吧,点击它。来看一下我们当前的state等于多少?ABC type等于什么product de。可不可以?能不能看懂啊,其他的是我们前面的数据是吧。这个一定要有这个能力,你要知道我现在要通过谁来去调,来去看,确认好以后,我再去写搜索代码,也就说下一步我们是不是要真正进行搜索了,数据都准备好了,对不对。就差临门一脚了。来什么,等于。练习点,我们是不是要再去定义一个。
22:01
回掉函数去操作呀,好,这个时候我想就用这个函数做。听懂了吧,而且我们一点搜索是不是应该搜索显示第一页,这里应该传奇。是不是一,因为它需要传的配嘛。答案,这么写对吗?这么写对不对不对。什么问题来着,外面的包一个函数,这又是同样的问题啊,就是你碰到同样的问题,你能不能马上反应过来,这个很关键。这个其实就考就反映了你前面到底有没有写明白,你要写明白自然就知道。这能不能听懂,只是我的这个里面有判断,到底是一般的分页还是搜索分页吗?没有下面的问题是不是就要去判断去,也就是说我有两个函数可用,一个是它一个它对不对,调用它是不是一般的。
23:06
分页对不对,调用他是不是搜索分页。那好了,我是不是应该有一分的问题,那到底什么情况下面进行一般分面,什么情况下进行搜索分页呢?其实很简单。非常简单,只需要我取出数据。哪个数据了。当然这个数据等会也要。好什么意思,如果这一个有值。说明什么,如果啊,关键字是吧,搜索关键关键字。
24:01
有值说明我是不要进行搜索和验是吧。这能听到不,否则那是不是就一般分页了。那这个地方,也就是说我应该调谁去re EQ设和。传的是个什么类型的参数?对象,对象里面要指定什么呢?四个字,Page number,有吧。还有什么?Page size是多少呢?我是不是有一个量来着。还有什么?Certainly。以及什么,我这有什么先后顺序吗。没有。
25:00
因为我放在对象里面了,属性哪有什么先后顺序,名字不能错对吧,属性名不能写差了,你写差他取不到数据呢。对一下,你的属性有生顺序可言吗?没有。那这个时候是不是返回得到了一个,来一个是不是就可了,当然每一个是不是都是一个。Result。那给办们这是不是一万分对吧。好,那我怎么做呢?应该把这个吧,提到什么呢?外面去,因为结果是统一处理的,听懂了吧,结果是统一处理的。而且应该用net写。
26:00
看到了吧,也就后面你跟后面怎么处理,跟你是搜索风险还是一般风险有关系吗。没有。正常处理。那得到数据后隐藏它隐藏了以后,后面是不是要将它更新状态进行显示,取出分页数据更新状态。显示分页列表。就这么个事。那我们现在就来看一看,看看行不行,好吧。看下。来,这是我们的。先根据名字来搜一搜,比如说输一个A吧。走你有没有有吧,有输入一个T啊,输入大写T啊走你。
27:00
是不是有啊,哎,我们这一次吧,没有一直没有形成分析的效果不太好,我来我来去把那个数量。给他改小一点。我们不有一个的这样一个产量吗。是吧,比如说看到行一。每页显示什么一一条,当然在在最终肯定不会这样,是不是主要我们现在数据不太多是吧。我们来看一下啊,注意现在是搜索分页还是一般分页。一般分,因为我这里面输是不是好,比如说我现在呢,输入一个,输入一个刚才有有一个T吗来找你。有没有有吗?是不有啊,而且在翻译的过程中是什么。翻译过程中是大搜索的。
28:01
搜索条件一直没丢吧。这个都能懂能懂啊,那也就是说现在呢,我们就可以进行啊搜索,当然如果我把这个去掉,我去操作。大家看着。是没带搜索的,飞搜的数据明显多一些吗?咱应该是一共十条数据是吧。能看到吧,因为十页嘛,咱每页显示一条,那十条数据。那当然我也可以根据什么描述来说啊,输一个T轴你。这一个结。两页看到了吗?一共是两页,能懂吧,两页就匹配了两条记录吗?当然这个大家看到我输入一个一按一下摁键啊,再按NT键走你。Gray。可以的吧。这不可以吗?这个快速跳转这个输入框也是可以用的。
29:02
嗯。就这么轻松搞定啊。搜索并。啊,这里有几个难点,第一个难点是我们用一个接口平函数。搞定了两种搜索的请求,是不是,诶这个希望大家要。懂这个技术,你说单问这个技术啊,你可能也懂,但是你可能想不到。啊,这是一个,还有一个就是我们这里面要选要进行搜索,需要去,诶定义这两个状态。因为我们最终是不是要做一个受控组件,那受控组件肯定得定义状态,并且绑定什么监听on监听,在on嵌间里面将最新的值更新到状态里面去了。嗯。而且还一个select,和input一样吗?
30:03
不太一样,这个不用背啊,背的没什么意思,因为文档已经写的很清楚了。也就说白了,你最后比如说老师你不让我背,最后我记住了,那那怎么办呢。那记住了就记住了啊,那个叫自然记忆,也就你写啊,写对了,写好了,那感觉来了,诶刚好老子好使就记住了啊,记自然记忆没什么问题啊。其他的说实话没有太大的一个难度,再一个最后就是这个判断,这个其实没什么,就是要判断我的设计有没有值。嗯,这是这个。
我来说两句