00:01
好了,各位同学,那我不知道你们还记不记得老师带你们的时候,我说过一句话。整个项目当中最重要的几个地儿,第一个扉页。第二个登录注册的业务,第三个支付,所以说啊,这是咱们到的第一个非常重要的一个地儿,就是一个分页器的功能。对不,那咱们呢,在讲非热器之前啊,你得先想明白,就是为什么很多电商类的平台当中,它需要。啊,这个咱写的就是用的是阿里图标库啊阿里啊图标库对不这块呢,老师呢,稍微呢,去写写笔记吧,好吧,这是二。你要想明白一件事,就是店。很多电商品牌说很多。电商平台他为什么需要用分页?就这样子,你先想明白。
01:01
就为什么很多电商平台举个例子,淘宝。京东,比如说像这个贴吧,为什么很多电商类的平台,它需要用分页的功能?这个你得想明白,他为什么很多电商平台他需要分页。也不是说好的用户体验,也并不是说呃,这句话说的可能说半对啊。你要想明白一件事,为什么很多网站他用这个分页,举个例子。就比如说你是一个电商平台。你展示的数据,假如说有100万条。100万条,就假如说100万条,那如果说你不用分页好。用户一上来,你这块加载100万条数据,老师问你,你会出现什么情况?你会出现什么情况?你是不是会出现这个这个加载很慢很慢的情况,你琢磨琢磨是不是这个道理。
02:01
对不,那他为什么要要要分页。那为什么要分页?因为那就相当于假如说100万条数据,我分页,我给他来个500万页,那每页只展示两条数据,比如说用户每一次访问的时候,他只加载两条数据,它可以不让它出现卡顿现象。这个能懂不?这玩意儿你正常想它也是这么回事。对不对吧,所以说一定要注意在前端当中有几个东西很重要,第一个轮播图,这就不用说了,第二个扉页,第三个就是日历。对不?也有很多电商平台是要需要自己封装日历的。如果说你们感兴趣,后期老师有时间,我带着你们手写一个日历。所以说这三件套。哪三件套轮播分页日历是你必须要会的?
03:00
说老师这扉页多简单的,饿了么UI不就有现成的吗?是饿了么有现成的,但是老师问你,现在咱们前台项目用饿了么UI吗?没用。对不?那当然,如果说你用饿了么UI,我告诉你写这个扉页so简单。但是你要明白啊,你得会分页的原理啊。对不因为将来什么,将来产品经理他给你提什么需求,你就可以写什么样的分页。对不啊好了,那所以说啊,咱们接下来呢,去搞一下这个分页,但有一说一分页这块呢,可不简单。OK吗?但不管别的。你最基本的一件事,你得先把分页这个静态先给他搞好。对不,而且还要注意一件事,什么事了,就是这个分页啊,它也是一个全局组件,这都是为什么,你看啊,你看这。首先说在search模块下有没有用到这个分页。用到了,看这。看这在色模块下用到了谁用到了扉页,你看啊,还有个地儿就是我的订单这里,呃,老师给你登一下幺三七三四五六七八九十十一走123456,你看这我的订单的这里,他也用到了粉页。
04:16
所以说分页的这个功能,它不仅它不就它不是只用一次就不再用了。是在很多地方都会用到。那所以说你猜咱们接下来要干什么?老师问你。你说咱们要干什么,你是不是要把这块分页的功能给他摘出去?给它变为一个什么,变为一个全局的组件,因为将来有很多地儿要用。就这能不能想通?这能不能想能可以想通吧。啊,那所以说咱们分页器这它这个结构咱就不要了,那也就是说咱们现在在这个咱们的项目当中,是底下是没有分页,分页结构我给他删了。对不?那所以说咱们在这老师给他干掉,在咱们的compment资我他压下。
05:06
你还得来一个全局总监,全局总监就是谁,就是飞燕。分页一般叫什么?叫page nation叫PG。以后咱见到这个单词,你得知道是谁,是分页。见到这个单词,你得知道是谁,是轮播,这个叫啥,叫page。对,不是不是,将来它也是一个全局组件。那所以说咱们得来一个静态的这个分页的全局组件,先给他整好。对不,那咱找一下吧。是complement之下的这个page,对不?那咱们这里面给他来一个组件index.view,对不,那叫啥VIEW1。咱们这里面就先给他写上一句话,说我是分页器,对吧,我是分页器。
06:01
哎,别的咱们先什么都不搞对不?那当然这块咱也给它起个名字叫pay啊page。OK吧,那所以说这个组件就是飞射器组件,你得回到哪,回到咱们的这个命点GS当中,你还得注册一下。所以说到现在为止,咱有几个全局组件有仨了。轮播图。对不,商品分类的三级列表,再加上一个分页器。Import,谁呀?咱们叫做pageg nation。对不?Forum从谁那里?是从咱们的艾特杠cons下,它为啥没提示呢?叫啥叫page?对不,所以周二咱一起给他补齐叫呸。Nation,他终于出来了。那所以说咱们给他注册一下叫voe,第2COMPLEMENT名字叫啥叫page。
07:02
page.name。对不以及哪个组件。Page。对不?那咱们呢,先回到咱们的设置路由当中,先用一下咱们的这个这个这个这个组件。不在哪,是不是在这那这块你只需要写上一行代码,就是叫pageg nation,对不单标签或双标签都可以,那你看嘛。在咱们的设置路由组件底,是不是就出现了一个非热器?你自己看是不是。那当然。那咱们写非二器,你先不用考虑有多少种情况啊,有多少业务逻辑啊,怎么复制,你这先不用考虑,你先把静态先搞定。对不?那静态呢,咱们是有的老师告诉你们,在咱们的前台这个资料的课件当中。有一个地儿是有的,就是哪咱找一下子就找这个page的这个静态组件。
08:02
咱们看一下就是结构样式咱们就不写了,直接捞过来了,好吧,啊,稍微让他加载一下,这里面东西还是挺多的。来,咱们看一下在哪,咱找一下子啊,找一下咱们的page啊,Page nation找一下,呃,Foot不是这往底下找找Mo Mo咱也讲这不这呢吗,这不这呢。通用的分页组件page,对不?这是它的静态组件。静态组件这里咱就直接捞走了。对,不比为结构样式,咱就不写了,直接捞走。给它复制走。要放到咱们的这个分页器这个组件当中。走到这儿,给它扔进来替换一下。对不,咱们格式化一下。那也就是说咱们分页器的静态组件就搞定了。那咱们回首看一下他这个静态主页有没有问题。刷新看一下。
09:02
首先说有几个问题啊,你看这儿啊,有几个问题,第一个排序问题。首先说上一页的前面应该有一吗?不应该有一吧。所以说咱们这个静态组件你还得倒饬倒饬,上一页就是这个按钮应该是第一个完,紧随其后才是一这块你要换一下。对不,完了之后一点点点完了之后什么什么34567对不,那当然这块你看它写的是啥。老师说你你说这块应该是上一页还是下一页,是不应该是下一页。所以这块它是上,咱给他改这个改成改成下。OK吗?改成谁改成下,所以你看这回是不是就正常。对不,而且还要注意咱们的这个分页器啊,应该是居中,就让他在中间。所以说啊,咱们给咱们这个最外层这个大盒子叫page这个类名。你给他再加一个样式叫啥叫T的杠,让他居中。
10:02
Center。对不,那这样咱们分页的静态组件就搞定了。就这能不能懂,能懂给老师扣一个六,这边啥都没干。就是捞了一些结构,捞了一些样式,稍微改吧改吧,咱们的静态分页的静态组件就有了。能不能搞定,搞定的给老师扣一个六。可以吧,所以说这个老师呢,给他也评一个评。
我来说两句