00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成SKU模块数据的展示。那咱们呢,先看一下已经完成的这个项目啊。那首先说啊,当你看到这个结构的时候,你应该能感觉到比较简单。那虽然说顶部这样有一个table。以及table呢,是有12345677列。以及底下呢,也有相应的扉页的功能,其实咱看到这种结构的时候,应该感觉到莫名的简单了,对吧,那所以说啊,咱们呢,先把它的结构给它搭出来。那咱们呢,去找到咱们的SKU模块,那这呢,咱们呢,先来第一个是咱们的表格。对吧,哎,表格table。那咱们呢,给它来一个EL-table。那当然对于我们目前而言啊,是没有数据的,对吧,那以及table呢,是应该有咱们的边框,所以说咱们给它加一个border。
01:06
那以及啊,咱们的每一列一共是几列呢?一共是七列。对吧,那么老师呢,给他调一下位置。那这七列呢,现在已经有一列了,还缺几列呢?还缺六列。那所以说啊,咱们都可以复制一下C,再来六个对吧,第二个第三个第四个第五个以及第六个对吧,全都跑偏了,咱们呢,格式化一下。那首先说啊,这七列啊,他们的label的名字啊,都是不一样的。那咱们呢,也需要耐住性子,一个一个去给他改一下子。对吧,那咱们呢,都分别的去看一下的这七个的label都叫什么老师给他对个题。对吧,那咱们呢,去看一下。所以说第一个是序号,序号这个比较好整。比如序号呢,咱们就不需要proper对吧?来一个type等于谁呀?等于in desk。
02:06
以及序号,那这呢得改成谁,改成咱们的label,是不是改成咱们的序号,以及啊文字让居中a Li为什么呀为center。对吧,那以及让它的宽度呢,老师呢,让它小一点八十。对吧,那咱们呢,去看一下。那么第二列呢,应该是谁啊,是名称,那咱们呢,也给他来一个,这个呢叫做名称。哎,明称。那以及啊,还有什么呢,看一下的描述和默认图片,那这呢,改一下的是描述。以及底下这儿呢,是默认图片。对吧,哎,这是这俩以及还有谁呢,重量和价格对吧,那这块呢,咱给他来一个叫做重量。以及啊底下呢,还有一个叫做价格,哎,价格当然咱们还缺一列。
03:01
那最后一列呢,应该叫做什么呢?叫做操作。对吧,哎,操作,因为操作当中是有几个按钮的嘛,所以这个咱给他改一下,这个叫操作,那咱们呢,先回首看一下咱们自己的这个。对吧,但是咱们看下已经完成了这个啊,那首先说对于序号。和默认图片以及价格,这几个宽度是比较小的。那所以说啊,咱们呢,把序号改成80,以及图片呢,老师呢,给他来个一百一吧,啊一百一以及重量呢,老师呢也给他来个80吧,价格都给他来个80稍微小一点。对吧,啊这样。那咱们呢,去看一下咱们自己的这个啊,对于这样的一个结构呢,应该是没有问题的,对吧,那以及啊在底部呢,还有一个什么,还有个分页器。那在这呢,咱们也做一下笔记,就是fair页啊,Fair页那就是谁啊,咱们的EL-page。那首先说,对于分页而言啊,这两个世界应该不陌生了,咱们呢,先给他住上。
04:04
对吧,那以及啊,咱们的这个老师呢,给它折上来。那么以及啊,咱们这几个参数都给它写上吧,当前呢,比如说是第一页先写一个假的数据,省得报错。一这里面的咱多多来一个三啊,对吧,来个三五和十。三五十。那以及啊,每一页展示的数据呢,咱给他来十个吧。对吧,十个,那比如说啊,一共呢,有有20条数据。那以及咱们看一下它的结构来还是看一下吧,那这个飞热器呢,应该是居中的,那咱给他来一个样式style。对吧,Style之后呢,Test杠为什么呀,Center。那当然对于非二器的这个结构啊,Total和配置size应该是在右侧的,那所以说啊,咱们呢,这个小套路又用到了一个箭头谁呀,Size以及。
05:03
那当然前边这两个就不要了。那所以说到这里为止啊,咱们呢,已经把相应的静态啊,已经给它完成了。对吧,那咱们看一下哪里出现了一个错误啊,看一下子,呃,K对吧,那咱们呢,看一下是不是哪里删多了啊,咱们呢,退一下退一下。对吧,之后呢,咱们呢,再保存一下,这回呢,咱们的啊,这儿少了一个逗号啊,少了一个逗号之后呢,咱们呢,去看一下咱们的静态的结构,静态的结构呢,其实就已经完成了,对吧?那当然咱们前边的total和side是不需要,那这个呢,咱就给它干掉了。对吧,这块已经挪到后面了。那当然。那你静态的结构已经有了,那你当然需要向服务器发什么,是不是发请求获取数据,展示数据对吧?那咱们呢,看一下的已经完成了这个项目,他所用到的接口是谁?那咱们呢可以看一下。
06:05
对吧,刷新。那么它所用的接口啊,叫做什么?叫做product list对吧,而且带有参数。那咱们呢,去看一下咱们的SWG。它们应该是属于SKU吧,咱们找一下对吧,应该就是这。它呢?是什么叫product list,获取SKU列表的数据对吧?需要携带参数,这两个参数你也应该不陌生了。第一个参数呢,代表的是当前第几页,第二个代表的是每页有多少条数据。那所以说啊,找到咱们的API,找到咱们的SKU,那这里面呢,需要书写咱们的接口了。那咱们呢,写一下子这个呢,是SKU模块了。那咱们呢,需要引入咱们的这个二次封装的这个A,咱们就直接给它捞过来了。对吧,CTRLC以及啊老师呢,给他带过来CTRLV。
07:01
那咱们呢,先写咱们的第一个,这是SKU列表的接口。对吧,Xport,那以及咱们就叫做什么呢?咱们看下这个接口。把这个接口啊,老师给他呼过来啊,复制过来走。呃。给它扔到这,那这个咱起个名字吧,叫做re EQ,叫做SKU list。当然是需要携带参数的当前第几页以及每页多少条数据。那当然需要返回服务器返回的数据,那咱们的URLURL呢就是它,但是你别忘记这块呢,需要有Dollar对吧,进行模板字符串拼接。那以及是什么请求呢?是钙的请求。对啊,Get请求。那么接口有了,那咱们就得写咱们相应的,呃,函数的调用,捞取服务器的数据。那也就是说,当组件已挂载完毕之后啊,要发请求,但是要注意这个请求只是发一次吗?可不是,因为当你点击分页的时候,这个接口呢,还会再次发请求。
08:09
所以说呢,同样的套路。那咱们找到咱们的组件,挂载完毕,这里mounted mon t mounted。比如说啊,咱们呢,来一个叫做获取SKU列表的方法。哎,列表的方法对吧,那咱们呢,给它来一个,比如说叫做get SKU list。对吧,那当然咱们目前而言啊,是没有这个方法的,那所以说回到咱们的methods meth ods里面去书写咱们相应的方法,比如说叫做get,对吧,这选项的这个呢,是获取SKU。列表数据的方法。那就叫做get SKU list。对不?那这里要注意,咱们要发请求了,需要等待服务器返回的结果。
09:04
this.dollar API点叫做SKu.REQ叫Su list。但是你要注意这个接口呢,是需要携带参数的,就是得带当前第几页以及每页多少条数据。所以说啊,咱们呢,可以初始化一个默认参数。咱给他来一个一个对象。对吧。那这个呢,配置啊,就是配置一般默认代表是第一页对吧,这个呢是代表啥,代表当前第几页,以及还有个叫做limit limit,咱给他来个十吧,这个代表的是什么呢?咱们以前经常写三,这回写个十吧。代表。当前啊页面。有几条数据?那所以说啊,咱们这里面呢,需要解构出数据,哎,解构出默认参数。
10:00
解构出默认的参数,当然解构啊,叫做解构。结构。行,那咱们来一个to。分别呢,叫做什么呀?叫做配置以及limit。那当然,你需要把这个参数呢带给服务器配置和limit,那当然Z呢就得来个think,那咱们呢需要获取到服务器返回的数据伪造。对吧,哎,那咱们的格式化一下。呃,那咱们呢,去先去打印一下,先看一下服务器返回的数据是什么样子的cons.log。造。好了,那咱们保存一下,刷新看一下咱们的这个对吧,哎啊,当然它这块呢,你得从谁那解构,是不是从咱们的这次这里解构这对吧。好,格式化一下。那咱们呢,去打印一下子,看一下子有没有相应的数据啊瞄眼对吧,数据是有的。
11:04
那咱们呢,要看一下的需要存储哪些数据。那首先说date当中的这个total是需要存储的,因为你得知道整个飞跃器需要有多少条数据。第二个record这个数组,这个数组呢,就是相应的SQ列表数据。所以说啊,这两条数据咱们得存储。那所以说啊,咱们在这儿呢,初始化一个叫做re Co DS,其实这个字咱们见过。这个呢是存储写一下。存储SKU列表的数据,哎,列表的数据以及total它呢,默认值是几的是零,那这个呢,是存储分页器一共啊一共展示的数据。那所以说咱们这呢就可以判断了,比如说如果你的result。哎,点扣。
12:01
点扣等等于200,那咱们的要存储相应的数据,那一个是z.total应该等于result,点贝点total。以及z.record等于result.date点。那咱们呢,先看一下组件的身上啊,有没有相应的数据,有了之后再去开发它展示数据,对吧,那咱们呢,去看一下是有相应的数据。那所以说咱们分页期这块的数据啊,就可以换为真实的数据了,那这里呢,就是咱们的头头。对吧,那以及像这呢,当前第几页,那就是配置,那以及这里啊,就是咱们的limit。对吧,哎,米好了,这是它。好吧,那咱们呢,先看一下它刷新对吧,那一共是两页,那一共是16条数据,两页嘛,每页十条嘛,所以说用两页展示嘛。那接下来啊,咱们就把table的数据啊给它展示出来,虽然说那咱们的table呢,需要展示数据,那这里呢,咱们就得给你写谁了,是不是date。
13:10
展示的是谁,是2CDS对不?那咱们看一下table呢,应该有相应的,哎,数据的结构。那接下来咱们看一下数据对应的名称的数据的字段叫做什么,给它展示出来。看一下的。名称呢,应该是SKU的名字对不?那所以说这一列好展示叫做SKU的name,也就说这名称。对吧,那以及还有什么呢描述,那应该叫做SKDC。对吧,那咱们呢,给它带走叫做SK。那一集啊,还有咱们的默认的图片,默认的图片呢,它呢应该是用图片展示的。所以说啊,咱们呢得用到作用于插槽,那这块呢,老师呢,把这块就干掉了,Proper字段就没意义了。
14:01
展示的不是字符串对吧,需要给他传结构,那这个老师给他提上来。这呢也给它提上来,那所以说这里面啊,咱们需要用到作用与插槽slot。对吧,啊,那当然,那这里面的肉就是每一个SQ的信息。对吧,哎,肉以及Dollar in desk。那这里面呢,咱们需要一张图片,那咱就给它来一个image,当然src是动态的,应该呢是肉点。呃,咱们看一下子,它这个动态的值应该是谁啊,应该是咱们还是得盯义眼数据啊,当然咱们先把这个肉啊,先给它注释上,就这啊先给这个呃,Image先注上。咱们看一下展示的数据的名字应该叫做什么?它的应该叫做SKU default image。对吧,SKU default image,那咱们呢给它打开,那这块呢,应该是点SKU,呃,Default image,那么图片呢,应该是挺大的,咱们刷新看一下对吧,那所以说啊,咱们呢,给图片呢来点样式style。
15:08
Style style之后呢,宽度啊宽度咱们给它来一个80吧,以及高度,高度咱也给他来一个80像素,哎,80别忘了P叉二这块呢,给他加个P叉。好了之后呢,咱们去看一下咱们的一个结构啊,刷新看一下对吧,这是没问题的,以及还有相应的重量和价格,那咱们也得看一下数据。重量是谁呢?是V价格是price对吧,那咱们搞一下子那重量的,那就是what。价格呢,就是谁呀,Price price price对吧,那咱们呢,看一下刷新应该是没有问题。那以及操作这里啊,是有相应的按钮的,但是操作这里呢,咱们要看一下的。对于某一个SKU,你看啊,它这块是有四个按钮,但是你会发现你看这俩颜色不一样,为什么呢?因为这个第一个按钮啊,可以进行这个SKU的上架与下架的操作。
16:10
对不,那以及还有这个修啊,还有这个修改,修改当然就是弹出一个信息叫正在开发中。以及这块还有个按钮会弹出一个啊,会弹出这样的一个抽屉效果以及删除。咱们主要先完成它的静态结构,那也就是说这一块的按钮应该是几个呢?应该是五个,为什么?因为第一个你看啊。它是不是可以进行切换。谁显示,谁隐藏?对不对。对吧,啊,那所以说咱们就去搞一下子,这那也就是说这里啊,比最后一列这里。操作这里应该呢是有五个按钮,那咱呢还得用到作用插槽,那这块呢,也也有相应的什么是不是相应的肉哎,肉就是每一个SKU以及索引值。那咱们呢,去来五个按钮来看一下,第一个EL杠,Button。
17:00
那这个呢,应该是什么主题的呢?什么类型呢,应该是成功对吧,这种绿了吧唧的,那咱们给他来一个success。Sus以及它是有相应的icon。那么icon呢,咱给他来一个吧,Icon呢,它是冲下的箭头。那咱们找一下饿了么UI当中的icon啊,找一下。咱就收到。你看它有没有do,哎,Don大有吧,它应该有四个,那咱们都看一下,第几个是像它就是一个小箭头。对吧,那咱就可以来这个嘛,对吧,不一定非要用他的,那这个咱就叫当德了。大,那咱给他来一个。那以及啊,大小个头啊,Size,咱给它来一个mini,哎,等于mini mini。除了有冲下的,还有一个是冲上。对不,那这个呢,咱也给他来一个,那这个呢,其实就简单了,那这个呢,咱就给它来一个叫up颜色咱就不改。
18:02
好吧,但是那现在这块呢,应该有两个按钮。对吧,一个是冲下,一个是冲上,大家感觉这俩怎么是一样的呢?看一下它是不是叫up啊看一下。呃叫呃E啊,这个对吧,这个咱的冲上应该是它对吧,那咱给他拿过来,这个是冲上。诶删多了对吧,那这个咱们给他替换一下,这个是冲上对吧,那咱们再瞄引啊瞄引对吧,啊一上一下。这个是冲下,这个是冲上对吧?那以及还有这个主题为primary主主主要按钮的对吧?以及还有后面还有三,那咱们呢,接下来那这个呢,也是EL-button啊EL没提示了是吧?那咱们重新借一下啊。那以及啊,还有一个按钮,那也来叫做EL杠,Button。
19:03
在这拐一下。对吧,EL-button主题颜色,那以及啊它也有是icon icon是一个,我看一下是什么icon的,应该是一个修改的这样一个图标,对吧,那就是EL-icon-E编辑嘛,对吧,E Di,那以及啊,它的大小啊,个头的大小啊,咱也给它来一个size,为什么呀,为mini。对吧,Mini这样呢,咱们呢,看一下子。看下咱的这个。对吧,哎,这个EL明显写错了,对吧,我算一下。保存一下,再刷新看一下子啊,刷新走。对吧,这是它。那以及啊,还有一个是应该是信息查看信息,那这边咱再给他来一个EL-button。那这个咱就复制顶这个吧。还有俩,一个。一个两个再来一个对吧。
20:03
CC。微对吧,这呢后边呢,还有两个按钮,这两个按钮呢,分别是什么呢?一个应该是阴否那种的那种灰了吧唧的啊灰了吧唧的,记住了是这种阴否。好,那这块呢,咱给它改成info以及它的icon啊,其实就是这就是ino对吧,如果这些你记不住,可以看一下它的文档。对吧,咱们先看的对不对。对吧,看看咱的这个。那么以及最后一个呢是山竹,山竹是红色的,红色应该是D。哎。DA,这样定,那以及这块呢,应该是delete的删除be delete。这样呢,咱们呢,看一下咱们的结构应该是没问题的,对吧,那以及啊,咱们呢,也把咱们的分页也给它完成,对吧?那这块呢,咱们应该熟悉了,那首先说当你点击扉页这个一二的时候,触发的是哪个事件呢?是这个事件carry change。
21:02
那咱呢,给他拿过来。那这个套路呢,咱以前应该用过,比如说当你一点击,比如说第一页,一点击第二页是不是还会再发请求,所以说你还是用这个这个函数作为它的回调就行了,所以说这块呢,咱给他搞一下子,这块咱们就是用谁呢?就是用这个get SKU list作为回调就行了。但是你要注意这个事件的自定义事件会把你当前点击的那一页给它传进来,所以说啊,咱们这呢,第一次发请求时应该是第一页,咱们就配置资吧,等于第一页,那么当你点击这一定要注意,因为mount的时候已经发了一次请求。它获取的默认是第一页,但是当你点击分页器的时候,比如点击六,它会把六注入进来,那咱们呢,再修改一下参数发请求不就行了吗?Face配置等于配置资对吧?所以这个套路得得得得学会了啊。那咱们呢,看一下吧。所以说默认了获取的是第一页,当你点击第二页的时候,是不是也会获取第二页的数据?
22:04
对吧,一共是16条嘛,那当然这块呢,也有相应的事件,对吧,那这块呢,咱们也搞一下了,就是哪个事件就是这个事件对吧?Set change当。每页显示条数发生变化的时候会触发。对吧,那这个呢,咱们是没有方法的,那咱们呢,得去写一下这个方法,其实这块套路跟以前几乎都是如出一辙了。对不,那这块呢,会把它的size注入,就是咱们的limit,那这块呢也是一样,修改参数。修改参数再发请求就行了,这点limit等于limit,以及咱们的this,点这个,这个叫get SQ啊,List就可以了。那之后咱们的回首呢,去测试一下子走,你看这比如说每一页展示20,呃展示呃三条对吧,没问题,展示五条应该也没问题,对吧,第四页。
23:01
OK,那所以说啊,咱们完成了SK模块的数据展示,以及菲尔也给他完成了,那接下来呢,咱们呢,去完成操作的业务。
我来说两句