043-尚硅谷-尚品汇-Search模块根据不同的参数获取数据展示

好嘞，各位同学。那么咱们呢，刚刚是把这个测试模块底下这一部分商品展示列表已经给它完成了。那接下来呢，咱们呢，还得继续开发设置模块。那老师呢，先问第一个问题。就是咱们的这个测试模块，它发请求的次数只是发一次吗。就比如说，那如果说用户我现在搜索的是奶粉，你一点击奶粉，你是不是还得发请求，在获取相应的产品的列表进行展示。对不，或者说我再搜别的，我再搜钟表下的这个南表，那你是不是也得发请求再捞取南表的数据，是不是进行展示。而咱们现在的这个请求只会发几次，只会发一次，为什么呢？因为咱们放在当中。咱们应该知道，Monkey是属于组件，挂载完毕，它只会执行几次，只会执行一次。

而咱们的色尺模块会根据。参数不同，向服务器发请求，返回不同的数据进行展示。所以说咱们前端无难事，为什么？因为后台已经把这些数据给咱们准备好了。你只需要带着这些参数给服务器送过去。那服务器通过一些查询的命令给咱们返回相应的数据，对不？你看你看一下咱们上线的这个项目，举个例子。我现在搜索的是手机下的这个手机，那你看是不是发请求了。那你是不是要带着手机这个参数给服务器送过去，那服务器返回手机的信息是不是进行展示？对不？那假如说用户在这搜索的是华为，你看你看进度条会不会动，他是不是还会再发请求，服务器一看啊，你晓得要搜华为的数据，好，我给你返回华为的数据，是不是进行展示。

那当然你还可以选择别的，比如你选择母婴下的这个米粉，当然咱后台老师没有给咱反馈数据，但是你得注意你是不是还得发请求。获取米粉的数据是不是进行展示？对不？所以说你要注意一件事，什么事，就是咱们设置模块下，他发请求的次数，不应该仅仅只是一次。他应该随着参数的不同而再发请求。对不，那当然，咱们现在开发到这个阶段，你会发现咱们的请求只会发一次。你用户怎么筛选，你看举个例子，我现在买手机没问题发了，因为monkey是不是执行了一次，那当用户在筛选的时候，比如我现在想买华为，我一点他不会再发请求。为啥？因为咱们应该知道，Monkey是属于生命周期函数之一。

咱们学了生命周期函数，目前咱们学了八个。那你应该知道这个叫什么，这个叫做组建。哎，挂载完毕执行一次，它只是仅仅执行几次一次，那所以说你把咱们的请求放在这是不对的。也不是说，也不是说不对，你上了是应该发一次，但是将来我再发请求，你是不是还得调用这个X再发请求。而且咱们现在带的参数是很傻的，只带了一个空对象。你要根据不同的参数。对不？你要给人服务器带过去，返回不同的数据。但是咱们先不管这个参数，你先想明白一件事，什么事。就是咱们派发action这里能放在这，不能因为啥，因为你放在这儿，它只能发一次。那所以说咱们这一次发起就跟以前都不一样了。因为这个请求可能发多次，根据带的参不同而捞取不同的数据进行展示。

那怎么办？很简单，你看。怎么办？你可以把它封装成一个函数里面。对不？咱们学过函数了，函数声明一次可以多次调用。那比举个例子，比如说你将来再发球，你再调一个这个函数不就行了吗？对不？所以你看老师给这起个名字对吧？先做一下笔记，这是什么？这是向服务器发请求获取测试模块的数据括弧，哎，根据参数不同。对不呃，返回不同的哎，不同的数据进行展示。对不，那所以说咱起个名字叫啥叫get date，叫获取数据或者获取次数都可以，对不，你把它一放在这不就可以了。对不，那你将来想在哪调用，是不是就可以调用，因为咱们应该知道函数声明一次可以多次调用，那我现在在这先调用一次呗，对吧，比如说this.get did。

你看嘛，那现在的效果还是跟原来是一模一样，你上来调用，对不，但是你现在还是一样，你再。点他也不会发请求，不会跟着你筛选的这个参数变化而变化，对不。因为咱们刚刚也说了，Monkey只会执行几次，只会执行一次，就到这儿能不能懂。对不？哎，所以说你看，那哪怕举个例子，我在这再调一次，这次点get date，那我问你这个函数会调用几次，是不是会调用两次。那你写1000字是不是就用1000字？对吧，所以说咱们给它封装成一个函数，老师在这写一下，所以说把。这次请求封装为一个函数，那么当你需要在调用的时候，那么调用就行了，对吧？哎时候调用即可。

哎，这是它这是第一个第二个。咱们要根据带的参数不同捞不同的数据，但是咱们现在很傻。咱们带给服务器的参数，它就是一个空对象，这是咱们最开始为了测数据带的一个空对象，因为咱们应该知道这个接口老师最开始也说了。它默认至少带一个空对象，我不管你里面有没有别的参数，但你至少带一个空对象，但是你现在的这种写法是很傻的。对不，那么就算你要带你带哪些，那咱们的接口当中，老师带着你们看你看。也就是说，你这个接口带的参数最多是多少个？是十个，你先不用看这十个参数是什么意思，但你得知道它会根据不同的参数返回不同的数据。举个例子就是这个，呃，分类的名字，那你带的是手机，那我返回是手机的数据，你带的是奶粉，返回的是奶粉数据。

你会根据这些参数带的不同而返回不同的数据。对不几个，你数是不是十个。所以说咱们现在这里的写法是很傻的，只是带了一个空对象。那所以说咱将来你带的这个参数，你只要发生变化，我捞不同的数据不就行了。那咱们把这个参数，它底下有个例子，咱先给它捞下，咱看它这块写的是几个，它这块写的是八个，你数数2468，没有CATEGORY1ID和2ID。那所以说咱们这块呢，你不能这么写，你这么写太傻了。而且你要注意将来这个参数，就是你带的这个帕参数，它的属性值能不能发生变化，能。对不？对吧，你用户选手机，那我带手机，你选奶粉带奶粉，所以说这个带的参数就是带这个对象的属性的属性就能发生变化，那这里怎么整，很简单，你看这。

咱们可以给它定义为一个响应式的数据，那咱们应该知道响应式的数据是不是会发生变化。而且还可以监听到。那所以说咱这来个啥叫做search para，那这个是什么？这个就是咱们带给服务器的那个参数，而且它将来它的值可不可以发射标，当然可以。对不，所以这块老师标记这是啥，这是带给服务器的参数。那一共有多少个呢？是十个，那老师呢，把刚刚那个我先给你粘过来。这十个是什么，你先不用管，老师一会儿会一个一个解释，但你得知道至少是十个，但目前是几个，是八个缺两。缺谁缺1ID和2ID对不？所以咱给它复制两个，对不，一和二，那当然你这里你得咋你得改改对不？那这块是几ID，是1ID和2ID。

那你要注意一件事，你是上来带来这个参数就有有有有初始值了吗？是没有的。对吧，有一些是有，有一些是没有，就举个例子，这个商品分类的名字，那难道说你现在一进来就是展示这个手机吗？你不一定啊，你比如说我现在点的是，我点的是呃，厨具，那你是不是就得是，比如说除一下笔记本，那你是不是就得是笔记本。对不，所以说这里面的初始值你不能上来就有，咱让他上来干啥是空。对不，就比如开EID，它是由谁决定，是由home路由跳转，你比如ID，你到底点的是谁呀。你点的是钟表，那钟表比如说你点的是纸巾，那是不是417，你点的是呃手机对吧，你点的是，比如说你是手机下这个手机，那是不是61。对不，它是根据后传过来的那个参数而决定，那它是不是也是一样。

对不，他也一样，初始值都给它制空。对不啊，那以及这块咱也给他指控，但是这个参数呢，老师先说一下。这个叫做配置，No代表的是当前分页是第几页。OK吗？配置O代表是当前是第几页，你要注意它的默认值就是一。OK吗？你带或者不带，它获取默认的都是第一页的数据。OK，不就是咱这个给他带一个默认值是几是一，就是你带与不带都是默认都是一。OK吧？那以及这个page side是什么，是每一页你有多少条数据，就比如第一页咱现在默认是不是十对不，那举个例子，现在老师带的是谁，带的是这个叫鞋呀，叫做呃，Face，第2SEARCH para，那举个例子，我现在带的是三，那代表每一页只有三条数据，那你看刷机你看是不是只有三条数据。对吧，那咱从头跑一下，你看是不是只有三条数据。

啊啊，这个不行，这个咱得得得得找个手机的对带数据，因为有的是没有的。对不行，那咱们给他跑一下，那以及等会啊，老师先把这也先干掉，这也先给他干掉，这些参数咱们都会一个一个去解释的。对不，那老师呢，给他重跑一下，你看一下对不？那当然这些参数都需要解释的啊，咱们就先看一眼。但是你得至少知道一件事，什么事根据参数带的不同，它反映的数据也是不同的。对不？你举个例子，我现在选手机下载手机，你看是不是就三条。对不，所以说你根据带的参数不同，就是带给那个接口的参数不同，它会返回不同的数据。所以说这两个值你得有对吧，因为默认是第一页，那咱这个先的默认每页有三条。那咱们都分别说说这几个玩意儿都是是什么？那首先说这个是什么。这个是一级啊，分类的ID。

对不说老师，那将来一级分类这个ID怎么获取到，很简单，咱不说了吗？怎么获取到，你看当用户点手机那是不是二。那我问你，咱是不是已经路由传单通过query是不是已经传过来了，对不。所以这个是能获取到那以及二级类。这是二级分类的ID，那当然也能获取。对不也是从home跳转路由时候通过快传过来，这个是什么？咱说一下，这个是三级分类的ID。对不？那以及这个是什么，是你用户选中那个，呃，分类的名字对不？你点的是手机还是奶粉对不。那这个是什么呢？这个不就是咱当年写那关键字吗？就是用户在这儿是不是可以进行路由跳转，你是不是带着关键字过来，对不。对不说这个是什么，这个咱们想这个是关键字。这个数据也能获取到，因为咱们通过路由传参，通过帕这不传过来了。

但其余的这几个，那咱们也说说这个是什么。这个是排序，说老师啥排序，你看啊，这是排序，因为你想想看这咱们这边是不是可以进行排序，你看看这个已经上线了，这个这块是不是有排序的功能。对不，有可能是价格升序，有可能是价格降序，你得告诉服务器我是升序还是降序。对，不是不是，这个咱们目前先不处理，这是排序用的，而这个是什么，这个是代表这是分页器用的，分页器用的参数。它代表的是当前，是第几页？对不，那配置no代表是第一页，那举个例子，当老师在点击第五的时候，你是不是得捞取第五页的数据，是不是进行展示，对不，你点第七页，你是不是捞取第七页的数据，是不是进行展示。对不，那这个是什么，这个代表的是每一页啊写一下。

这个代表的是每一页展示数据的个数，对不？咱们现在是几是三。对不啊，那已经看着正是啥。这个是平台。哎，平台售卖属性的操作的带的参数啊，带的参数，举个例子。举个例子。你就比如说这儿不就是平台售卖的属性吗。就举个例子，你一个手机，手机可能说有什么属性，有内存多大。对不，你是什么系统的。你你你是你是多大像素呢？多少像素呢？那这叫平台的售卖属性，以及有相应的属性值，那举个例子，我现在选的是小米，那小米有4G，有8G，你是不是也要带着自己的参数给服务器，是不是送过去，是不是进行筛选。这能懂不？所以说这个参数针对的是谁？针对的是平台售卖属性操作带的参数对不。

在这块是咱说trademark是什么意思，是品牌对不。咱就举个例子，你现在搜的是手机，那手机有好多牌子，那比如说我点苹果，你是不是得告诉服务器，诶，我现在搜的是不是苹果手机。那假如说你现在点的是小米，诶，你是不是得告诉服务器，你捞的是不是小米的数据。所以说这些数据你得先给我看懂了。对不？那接下来咱们回首看咱们的这个项目啊。就是现在咱们默认展示的是三条数据。那你这块你得琢磨呀，你看现在老师搜手机没问题，你展示的是不是手机叫什么什么好几个五，那假如说我现在搜手机下的华为。那你是不是得带着华为这个参数，是不是给服务器送去展示华为的数据，但是现在咱们请求只会发一次。也就是说咱们现在你不管怎么玩，你带给服务器的参数。都是初始的状态，你看。再找一下这个例子，你看你带的参数是不是都永远是是这些初始的状态。

所以说你将来要修改它们的值，把它们的值带给服务器，会返回不同的数进行展示。那举个例子，我现在用户搜的啥？搜的是手机，那你是不是展示手机。那假如说我现在搜的啥是厨具，那你是不是应该展示厨具啊？所以说你现在的参数没有变化，所以说展示的数据永远是这些。对不，那所以说咱们得一点点来了。对不？那举个例子，我现在搜的是手机，没问题，你是不是展示手机，那假如说我现在点的是厨具，你是不是应该展示厨具？在你进入到就是从home路由跳转到设置路由这一瞬间。你是不是得把这些参数带给服务器，服务器告诉你，哎，兄弟，我查到数据是不是给你进行展示。那也就是说你带的这个参数不能是这么写，这是死的。

对不？你应该在发请求之前把这里面的参数将个值得发生变化带给服务器，对不？你应该是在服务器发请求之前把这些参数进行变化。你只要在169行之前，你看就是在哪在你要写一下。就是哎在发请求之前，哎之前带给服务器的参数，哪个参数就是这个叫search。Para参数发生变化，哎，发生变化，哎参数啊，参数发生。变化对吧，就是说白了就是咱咱得把它有值啊，有数值带给谁啊有。数值是不是带给服务器？对不？你只要在发请求之前，你把它的值发生变化，那捞的数据不就不同了？对不，那这里当然你可以在这写发生变化，当然咱们这里面要复习一下子生理周期函数。

生命周期函数呢，咱们一共学了几个呢？学了八个。对不，比如说选了谁。Before created。Before mount mounted，对不？Before update updateed，以及销毁对不？所以说在mounted之前还有几个生命周期函数，还有三。你看叫比方。Created，对不？这不就是在mount之前吗？发请求之前吗？还有谁created？对不，还有他。对吧，还有谁。比方。叫before month。那这仨不都是在monkey的执行语句，就是语句执行之前吗？但是你这里要注意一件事，你不能在这儿搞，为啥？就是为什么不能在这搞，因为你在这里before created是获取不到这个小时数据，这个咱们在学生命周期的时候应该学过，你要举个例子，老师给你打印一下。

cons.log叫啥叫this.search promise。你看，你根本获取不到详实的数据。那你就根本没办法修改。这不应该是不是按底方。你在create和created和这个比方都可以，所以你千万别在比方，呃，Created这里写。对不，所以咱们选择谁选择比方梦。当你在组件挂载完毕之前，它会执行一次，这是啥？这是当组件挂载，哎，挂载完毕之前执行一次，它的执行顺序是先于谁，就是就是先于啊，先于咱们的这个monkey之前。对不，Mon提提mount之前对不？所以说你在发请求之前，你把这个参数一改，诶代表服务器那捞的参数不就不同了。

对不拉的数据就不对吧。所以你看嘛。当老师选择手机，那你是不是应该捞手机的数据？那我点厨具，你是不是应该捞厨具的数据？所以说，你应该在发请求之前把这个参数进行整理，带给自己。那咱们就举个例子。你就举个例子，咱就比如说从home跳到谁跳到这个色。那举个例子，你点击的是手机对吧，比如说你点击的是手机，老师问你手机的这个参数，手机名字和ID能用哪。能为啥？因为咱们是不是通过query参数路由传过来。所以你看咱们在这里是可以拿到的，你看嘛。Console。对不？哎，点log谁叫做this.dollar root，点这谁是query参数，对不？你看吧。在monkey之前，你能不能拿到要带给服务器的这些术语你自己看，能还是不能你自己看。

你看吧，能不能拿到可以对不？那比如说我选择的是厨具，你看是不是厨具。对不，那你看比如说老师选择的是，呃，食品饮料，你看是不是都能拿。所以说呀，你在比方ma之前，你得改这个参数。对不？那当然你是可以怎么这么干。对不，因为你要想明白啊，从home跳到咱们设置这，你可能点击的是一级目录，也可能是二级目录，也可能是三级目录。所以你改的时候，你这块要注意，你得都要改对不？那就比如说这点，咱们先说复杂的写法。啊，先说复杂的写法。啊，写下叫做复杂的写法，你就举个例子，This点设置para.category eid应该等于是等于this.dollar root。对，不到了，Root root点。Query，第二，Category e，对不？那如果说用户点击的是一级目录，那是不是一级的ID要带回去？

对不，那还有啥，你还有可能是2ID3ID，因为用户他也不是傻子，他可能点二级目录或者三级目录。那所以说这块可能啥，可能是二，可能是三对不，那这是不是也是一样。对不？而且你要注意，那除了ID，你要你要捞的那个，比如说你捞的是手机，你是不是得把手机也带过去，就category name你看吧，是不是这。对不？你可能是手机，你可能是奶粉，是不是也得带？你是不是也得写？你这么写这么写吧，this.such para点，啥叫cat green name等于啥？等于this.dollar root点。Query，第二，Category name对不？那除此之外，你要注意从色尺。就是从home跳转到search的这个过程，你除了三级菜单还有谁还有这。那假如说我没点这，我就搜这，我搜的是华为。对不？那你是不是要把这个关键字带给服务器，告诉我要捞华为的数据？

对不？那所以说这块你还得写写谁，就是如果是关键字你得带过去，就是this.such para.keyord等于它是para函数，对不？this.dollar root.para啊pers点谁点por对不？所以说你要把这些参数都带给服务器。而且是在发请求之前，你看咱们现在已经完事了，你看吧，举个例子啊，你看啊，现在老师选择的是手机，手机没问题。对不啊，先看下这个这个这个应该是网络问题。对不没事，稍微等一下，这个网有点慢。行老师呢，重新跑一下刷新，你看现在老师点的是手机手机，你看是不是手机，那如果说老师搜的是华为，你看现在展示的是不是就是华为的啊点一下。对不，那咱们先看参数有没有带过去啊，这个网络可能有点卡没事啊，咱看一下。

来咱就先看带的参数对不对，你看明显对了。对不，但是一定要注意，咱们现在点是白扯的，因为咱们点的发的请求只能发一次，咱们一会再说，你先看一下那带的参数是不是对。对不对吧。所以说你看它根据带的参数不同，到的数据是不同的。对不？但是你要注意一件事，什么事就是现在这种写法太麻烦。当然你这么写可不可以，可以，但老师不这么写，老师怎么写，咱们用这种方法就是就是object点散的方法，叫做object obj object.as sin。他们是ES6新增的语法。对不啥合并对象。那这个老师都不用问了，对不？我说学过吗？没学过啊，忘了就说没学过，那所以说啊，老师呢，单独的给你来一个文件夹，咱们专门去讲一下的这个语法。

对不，咱们看一下子，你看这玩意儿是ES6当中新增的，可以干什么，可以合并对象。利浦你看咱们看一下子啊，老师给你拿一个叫inex.HTML咱们模拟刚刚的那个操作。就举个例子，咱们的组件的身上是不是有一个叫做search paras search这样的一个对象？那这个咱模拟就模拟的像一些这个对象长成什么样，是不是长成这个样子。咱直接给它捞过来，CTRLC。对不，那这块咱CTRLV给它log，对不是不是有这样的一个对象，咱格式化一下。那以及还有谁是还有一个叫做quary light的一个quary，它可能带的是谁？带的是不是叫做cat green e，咱就假如说是EE，随便来个数。对不，就比如说老师带的是categoror ID，比如说110带的名字是什么呢？叫做category name，比如名字是什么呢？名字叫做呃，呃，叫做呃手机。

对不，哎，手机你说白了，你是不是要把query里面的这个参数相的属性值是不是复制给顶上那个对象相应的属性的属性值。对不？哎，那这块呢，咱重新起个名字吧，它这有个小猴猴，那这个咱就叫Q。这不咱稍微格式化一下。那以及还有谁，你看咱看是不是还有个叫做。它有一个什么，是不是叫keyword，叫keyword，比如关键字咱们叫华为。你说白了，你要做的一件事是什么？是不是把query这个老师写下叫这应该是分行。Query，你是不是应该把query和帕里面的相应的属性的属性值。是不是给相应对应它的相应的属性，属性的属性值。因为你这category是E，那这块是不是应该是110。

你category name是手机，那这块是不是应该是手机，你这块是华为，你这块是不是应该也是华为？那当然，你用点语法一个改，从它们里面获取相应的属性值，通过点语法一个改可不可以，但是磨叽。咱们可以用谁可以用它叫做object点的方法。哎，叫做OB这个点三。他可以把后者这两个对象，它分别谁啊叫做呃，叫做search para这个对象。他要跟后面这两个对象query和人和帕进行合并。那也就是说你query和帕是拥有的相应的属性的，属性值会给它赋值给谁给测试帕，那咱们可以打印一下，对不来，这这个咱们跑一下，你自己看一下。对不？你看是不是给咱们的色，帕马斯身上是不是负一上。你自己看。

对不对。对不？所以这个小语法可千万别忘了，如果忘了赶快复习一下好吧，那所以说咱们这就别这么写怎么写，直接这么写叫做点。对不，哎，叫做A啊a object点谁就是this.such para和谁this。哎，点Dollar root.quary还有谁，This。点Dollar road.pas。对吧，单词笔做per Ms。对。那所以说它就会根据你带的参数不同而捞不同的数据，你咱回手测试一下。走，咱回到首页，举个例子，我现在选择是手机，手机，你看是不是手机。没问题吧，那假如说老师在这搜华为，你看展示的是不是华为。

对不，但是虽然写到这儿，但老师告诉你还是有问题的，什么问题你自己看啊。我现在搜的是手机，手机没问题。对吧，是不是有555555，但是我在搜华为，我点你看白扯。我再点白扯，他没有再发请求，为啥？因为咱们放在monkey当中执行一次。对不？所以你得明白，现在咱们做了一件事，什么事？在发请求之前，咱们把参数捞到了，带给服务器。第二件事你要注意，咱还没写完呢，就是咱们这个请求只能发几次，只能发一次。你会根据用户的行为参数不同而再发请求，但是咱们现在目前而言是只能发一次，为什么？因为咱们放在的是当中。对不？所以说这是咱们测试目前所完成的一个进度，但是一定要注意，现在还没完事呢，咱的请求只能发几次，只能发一次。