00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成PU列表的展示。那咱们呢,先看一下的已经写好的这个项目。那首先说啊,咱们的注意力啊,放在po管理这个模块当中。那么用户啊,可以选择一级分类。也可以选择二级分类。但是要注意,当三级分类确定的那一刻,那么会向服务器发请求。获取到咱们PU列表数据进行展示。那么这个请求什么时候发呀?是应该在三级分类确定的那一刻要发请求,获取到进行展示。那当然,发请求一定是需要接口的。所以说呢,咱们呢,去找一下子咱们的swa当中的这个接口。那它应该是归属于商品PU接口。
01:02
那这个接口是谁呢?其实呢是最后一个叫做admin product配置和limit。那首先说配置和limit是带给服务器的参数。配置是什么呢?代表的是当前第几页?比如说你的分页起是第六页,那你就带第六页,你带第九页,那就你当前是第九页,那就带第九页。那么limit是什么?代表的是某一页当中展示多少条数据?其实啊,这个接口所能携带的参数呢,有很多,而你的配置和limit是必须要带的。其实还有一个参数也需要携带,就是三级分类的ID。那所以说啊,这个接口需要携带三个参数,分别是配置limit和谁和咱们的三级分类的ID。所以说啊,咱们呢,去写一下,咱们相应的接口应该是PU。
02:01
那所以说啊,咱们的得一点点来了,第一个你是不是得引入咱们二次封装的那个对不瑞。Quest。从哪引,是不是从咱们的U下的那个request文件。对不艾特杠。U qes下的2EESTT,对不?那咱们呢,得一点点来。那这里啊,老师呢,做一下笔记,那这块是干什么,是获取PU列表数据的接口。那咱们呢,把人家的地址啊给人带过来。那以及是什么请求的?对吧,是不是钙的请求。那以及需要携带的参数呢?是三个,分别是配置。Limit和CAT3AD。对不?
03:00
那所以说咱们呢,一点一点的去搞一下子。哎,搞一下。这个老师呢,给他关掉一下。关掉一下。找到这个文件,它一直在加载是吧,看着难受,那咱们呢,去写一下子。那首先说。对吧?Cost,那咱们起个名吧,就叫re EQ PU list。那这个函数呢,需要携带三个参数,分别是谁呢?是配置。以及limit,以及还有一个是三级分类的ID,叫CAT3。ID。那以及咱们的request,那你得书写了request,这没有提示很难受,老师呢,先给它关掉一下,那回到这老师呢再给它拖进来。那应该是谁呀?应该是request。
04:01
对吧,那以及咱们的URLURL是谁,是不是就是他。但是要注意路径当中所携带的参数是有两个,一个是配置,一个是limit。那一集还有一个就是它的请求方式是盖的,那一集还有一个参数。那你会发现另外一个参数,它在路径当中没有出现,所以说呢,咱们呢,通过para参数给它携带过去。而且KV一致省略微。那所以说咱们获取po列表的接口就给它写好了。对吧,那接口接口写好了之后,那回到咱们这里,那咱们看一下接下来干什么。就是这个请求何时发?那是当你三级分类确定了一刻,你是不是要发请求展示这些数据?那所以说找到咱们的组件,那应该是product下的po这里。
05:03
那咱们呢,去把没用的地儿,哎,老师呢,先给你怎么的呢,我先给你折上,结构啥的我都先给你折上。OK吧,结果啥的我都先给你折上,你看这啊。什么时候发请求呢?是当三级分类确定的那一刻,对不?它会调用get po list这个函数,那是不是获获取s po列表的数据?那所以说咱们可以在这里进行书写。对吧,那就是this.dollar api.pu点叫re EQ啊PU list。但是你要注意。这个函数在发请求的时候是需要携带参数的,携带三个参数,第一,第一个配置。对不,第几页。对不?那每一页需要展示多少条数据,以及还有三级分类的ID?
06:04
那么对于我们目前而言,三级分类的ID是有的,而其余这两者是没有。那没有怎么办?很简单,你可以去对当中初始化这些参数,比如说配置默认是第一页。以及limit。默认是三。那所以说这个代表什么,代表的是分页器。当前第几页对不?那这个代表的是什么?代表的是每一页哎,需要展示多少条数据。对吧,那所以说那咱们在这儿可以解构出相应的数据。分别谁配置?以及以及cat。个瑞3AD。对,不等于。那所以说你可以携带这三个参数配置。以及cat。
07:01
3ID。那当然,咱们需要等待他成功的结果,Away。这里你就要书写和think。那咱们呢,可以接受一下它返回的结果对不?那咱们呢,老师呢,还是先给它擦掉一下,这个没有提示,还是比较恶心的刷新一下。看这那咱们呢,去打印一下这个造。对不council。第二,Log result。看一下的服务器有没有返回相应的数据,对吧。那咱们呢,看一下。打开咱们的控制台来。图书电子书刊电子书,OK,数据有返回,那也就说咱写的没有问题。对吧,那咱们呢,看一下他返回的数据,哪些是咱们想用的。那首先说2RECORDS这个字段对应的这个数据是咱们想要的,因为是要在这个table当中进行展示的。
08:00
对不?你想咱table要的是不是全是数组对吧?那这三个分别是什么?是每一个每一个po进行展示。还有一个地儿,咱们需要存储,就是TOTAL1共有多少条数据,那为什么要存储这条数据呢?因为咱们的分页器是需要用的。对不?咱们的分压器这块需要偷透的。那所以说咱们再初始化两个数据,一个叫做reco。Rds,那这个是什么呢?是咱们的存储PU列表的数据PU。列表的数据。那一节还有个是photo。咱们都需要存储一下,默认是零,那这个是什么,这个呢是非热器一共。需要展示数据的条数。对吧,那么当服务器的数据回来之后,咱们就可以进行判断了,对吧,比如说如果你的result。边扣的。等等于200,那你要干什么呀?你是不是要存储这两个数据?那一个是this.total等于点date.total。
09:09
以及this.record等于result点背的点record。咱们呢,先别着急,你还是调试一下咱们的开发者工具,你看一下数据有没有有再去搞对吧,那所以说呢,看一下咱们的开发者工具对吧。对了,你会发现咱们的这个组件应该叫做SPU,但是你会发现在这调试的时候,你会发现它的名字叫什么,叫做trademark,这是为什么呢?这是由于你这个组件的name写的是trademark。对不,这个name决定了你开发者工具那个组件叫什么,所以咱们叫PU啊,改一下po。那这回呢,咱们呢,再调试一下数据。对不啊,看一下数据有没有,比如说图书。电子书刊电子书,那咱们呢,去看一下有没有相应的数据,这是有的。
10:02
对不,这是有的,那有了之后就容易了一点点来,那也就是说有数据之后,那咱们是不是得用table去展示了。对不,那也就是说给咱们的table找一下咱们的table。来看这啊,找一下咱们的table,那你是不是要给他数据了,那就是谁贝。Date,为什么?二、Co DS recall这个数组里面放了三个元素,分别是三个s po,对不?你看这不就OK了吗?对不?哎,走。走对吧,那以及PU的名称。以及PU的名称,咱们呢也是需要展示。对不?那咱们看一下的应该是哪一个字段,对不?那咱们呢,还是得调数据。图书。电子书刊电子书,那咱们看一下子,你得看一下records当中这个每一个PU的那个字段了。
11:07
那你po的名称应该叫啥,叫po内?那所以说咱们第二列应该展示的是哪个字段,这个prop是不是得改成咱们的Q内。那咱们呢,调一下数据,你看一下对不对,对吧,图书电子书刊电子书没问题。那以及还有描述的那个字段,描述是谁?看一下子应该是description。那所以说咱们呢,把这里给它换成谁。对吧,那它也有。对吧,那咱们呢,还是得调试一下。对吧,哎,当然有的描述是没有的。那要注意这四个按钮,咱鼠标放上去是没有提示的。对不对,那所以说咱们得用到咱们当年封装那个hi的button,其实饿了么UI当中的EL-button呢,也可以有那个提示,就是加上开头属性,但呢咱呢还是自己封装一下。
12:10
那所以说这四个button呢,咱们要替换成咱当年封装那个hi button。对吧,全局组建。那所以说找到咱们的complement当中,咱新建个文件夹就叫做t button。对吧,那这里面呢,咱们呢,新建一个组件,找一下子components下的kind button。咱来一个呗,Index will。那这块呢,不以E。那这个名字啊,咱们就叫做hint but。那这块呢,要注意将来啊,这四个按钮是一排一排的,就是全都是横着排,你这个外层你不能放div了,如果你放div,那就是一行一行的,一人占一行了。所以说咱怎么办这么办,A标签就直接套个A标签。那他呢,是需要有那个鼠标仪上有提示的,就是抬头。
13:03
那这个title呢,由谁决定呢?咱当年也说过,是不是由他的父亲给他传过来pro?PS pro为为。对不,那所以说这块就可以写谁写咱们的开头。那以及里面应该写谁一杠八。对吧,但是这个八是咋的是活的。那所以说这块呢,咱怎么写来着,我当时说过是不是得用V杠啊,V-B不能用啥,不能用母号。对,不等于什么,等于咱们的Dollar at t RS。到了at t s是什么?是负组件给这个子组件所传的属性。对不,那以及咱们也可以保事件就是we告谁啊,等于什么,等于Dollar listeners,那如果说你那个单词忘记了,咱们呢,可以在这MOU。Monkey的对吧,你可以在这里面打印一下,就是z.Dollar a,呃,Dollar叫listen Li就是它。
14:10
如果单词错了没关系,到时候咱们再改一下对吧,就是他。而且呢,还要注意将来每一个按钮之间啊,是有距离的。对不对。对吧,这块一定要注意,将来每个按钮之间是有距离的,那所以说啊,咱们给这个A标签,你给它加上加一个样式style。对不就给他来个margin,上下左右来个实相符。那这块呢,别忘记了,你需要给他注册为一个全局组件。那所以说回到咱的命点GS当中,那么咱们呢,去注册相应的全局组件。对吧,那咱们呢,就找一个地儿在这儿吧。对吧,那咱引一下子引part对吧,没提示了,没提示咱给它关一下子吧,这没提示还是比较恶心的。
15:01
走。那这块呢,咱们写一下子,Inmportt应该是谁,是咱们的hi button hit。From从谁那里是爱的杠?对吧,I的杠,哎,没提示,那咱自己写吧,I的杠com compments下的hi。对吧,那以及注册为全局组件,那就是view.comp,对不,就是hi button的name以及hi button。对吧,那咱们先看看名字对不对,对吧,万一名字没对就错了k but,没问题。那这样咱们的全局组件带提示的这样的一个组件就OK了,但是呢,咱们得测试。他已经是全局组建了,所以这块你就可以写谁写hit button。对不,Hi but。对吧,那这块咱也给它改成谁改成hit but。
16:00
而且要注意这些属性,咱们的刚刚封装的这个组件可以通过到a tr。S拿到。对不,那以及别忘记得传啥,是不是传title title是不是那个提示的文字。对不,那所以说咱们来一个呗,那就是谁抬头。Title叫什么?那咱们得看一下人家已经写好的这个了。对吧,咱们看看这叫啥,这叫添加SKU,那咱也来一个叫添加。添加SKU对不?那咱们先测试一下O不OK,如果有问题,那咱们呢,需要修改一下图书电子书,看电子书对不?那么暂时应该是没问题的。对吧,以及看控制台也没有错,也没错,那就说明没问题。那以及还有一个title叫啥,咱们看下叫做修改s po,那这块呢,咱也给他改一下子也加个title。对title为什么修改?叫啥SK?
17:01
是PU还是SQ是PU?对吧,哎,修改po应该是。对吧,那以及这块看一下查看当前类的所有的实例,对不?那这块咱也给他来一个开头。Title就是查看。当前类呃PU全部的实例SKU列表。那以及最后呢,还有一个叫啥叫删除PU,删除某一个类,所以说这块也给它来个title。对,不叫删除SP。那所以说回首来看一下咱们写的这个,再刷新看一下。对不,咱们这个是不是也带提示。对吧,这是没问题的。那以及啊,咱们呢,也把底下这个分页也给它搞定对吧,那虽然说咱们找一下咱们的这个分页这块的,看一下是不在这呢。
18:04
那首先说当前是第几页,你不应该写死的是六了,应该谁是配置?对不,那这块改成谁改成配置。那以及每页有多少条数据不应该写死,咱们应该写成谁limit?对不,那以及还有这这应该是哪个,是不是就是咱的那个total。对吧,那咱们呢,刷新看一下对不对。所以说现在的这个数据呢,都是活的了啊,都是动态的了,看一下这是没问题。那以及当你点击第四页,你是不是应该获取第四页的SQ列表展示?你点击第六页,是不是获取第六页的列表时进行展示?所以说当你点击第几页的时候,会触发carrying change这个方法。对不,那所以说咱们呢,给他写一下子。那当然咱们现在目前是没有这个回调的。对不,那所以说咱们在底下写一个回调。
19:03
对准了,那先把它先给它折上。对吧,那咱这样吧,在顶上在这写吧,看这。这啥是不是点击分页器啊的。第几页啊,第几页按钮的回调。对吧,那咱给他来呗。那这个很简单,这块呢一定要注意,当你点击第几页的时候,它会把参数给你注入进来。而这个参数是什么,就是你点击的那一页。对不,你点击第六页,那它就是六。比如说人家饿了么UI已经给你封装好了,人家会给你咋的,人家会给你注入的。你可以看一下。对不?你点击四是不是第四页,你点击六是不是第六页。那所以说咱们需要怎么办?很简单,你需要修改参数,Face掉配置等于配置。对不,哎,配置以及再一次获取最新的P列表,就是getp list。
20:03
对不,那这样不就实现了分页的功能了吗?咱们可以看一下。对吧,比如说点击第二页。对,不是不是第二页,我点击第六页,是不是第六页。其实啊,这个函数呢,可以怎么呢,可以用一个函数搞定。你没发现吗?其实这个回调他做所做的事,无非就是再发一次请求吗?对不,而且你点击地下,它会注入参数。所以这块咱们可以怎么办呢,你可以这么办,老师呢,把这块呢给他干掉了啊。这给你干掉了,你可以怎么办?你可以这么办。就是你把这个I盖的po list作为这个事件的回调印象,他不就是发请求。对不,所以这块呢,你可以怎么搞,你可以这么搞,就是让谁让咱们的get。Po list作为回调,但是你要注意,当你点击某一页的时候,它会注入参数。
21:01
对不,那咱们这块呢,要注意它默认是第一页。对不对吧,那所以咱们给来个叫配置资吧,等于一。对不那么假如说什么叫默认参数,来老师一会儿再给你们解释一下,你看这儿就是这条配置等于配置字。啥意思呢,你看一下子。首先说你看这儿。当老师没有点击分页器的时候。我没有点击分页器的时候,要注意你获取的是不是第一页的数据。是不是用的是默认参数,对不,那么当你点击四的时候。那么默认参数的这个一就没用了,变成几变成四,那这不是在改参数再发请求吗?所以说咱们的完全可以用一个回调解决了,就没必要再写两个了。啊,这个套路咱们前面也用过,所以这块要注意一下子。那一集还有个业务,什么业务呢?你看这儿。就是可以让它的配置size发生变化。就这。
22:03
对吧,那假如说我现在选的是五页每页五,你是不是应该展示每页五。对不对,对吧,那所以说还需要完成他的这个回调。当每一页某一页的这个呃条数发生变化的时候,还是一样修改参数咋的?是不是发起?那当然咱们呢,没有这个回调,那咱们呢,在这儿呢,你再给他搞一个。这是什么。就是当。分页器。配置,也就是说每一页某一页。某一页展示数据的条数发生。变化的回调。对不?那当然啊,这个回调呢,会把什么注入呢?会把你选择中的每页展示多少条数据给你,返给你传递进来。咱们可以打印一下limit。你可以看一下。走,还是得测试。
23:01
对吧,那比如说你看老师来个五,你看是不是每页五个。十每页是不是十个,所以还是一样,你只需要做一件事,啥事?修改参数。对吧,再次发请求。那这个咱要改的参数是不是这点。Limit。等于厘米。以及face掉。Get。PU list默认是不是第一页就完事了?那所以说啊,咱们的可以看一下,再测试一下图书。电子书刊电子书对吧,第六页。没问题吧,那假如现在每一页五个,你是不是应该回到第一页,每一页是不是五个?对不,所以这是没问题。所以说啊,咱们完成了PU列表的展示数据的业务。OK。
我来说两句