00:00
大家好,我是学习园地的特约讲师高国峰,上节课咱们完成了分类页面的交互,也就是我们点击这些对吧,分类也好,或者是学员卡也好,那会有一些呃ID和一个方法的一个设置,那我们能获取到当前的选呃选ID是多少,分类ID是多少,当前的选项卡对吧?排序条件是什么样的?那这节课呢,咱们来把数据加上,那加数据呢,我们首先呢,就得加一个数据模型,跟我们做首页的是类似的,那我们加上一个数据模型。加上。数据模型因为需要跟我们的呃,卷卡里边有多个页面,咱们还需要上拉加载更多,还有需要这样的功能,所以呢,先把数据模型设置好,那所有的获取数据呢,都围绕这个数据模型,页面展示呢,也是围绕这个数据模型,所以呢,我们通常有多个选卡的时候和多个页面的时候,咱们设置的数据模型都是类似的,新ST声明一个boos list或者是叫做部的商品列表都可以啊,起短点名称。
01:03
声明对象我们得用这个,然后里边呢,呃,我们加上几个,比如说按销量sal SE排行。然后呢,呃,里边得指定页数,比如说当前是第一页的对不对,然后数据列表放在这里边,按销量排行的数据,这里边儿呢,为什么说你写多个呢,你比如说销量排行的数据,还有正好我们括号隔开了。还有我们的按价格排行。PI还有按照我们的评论数,评论com评论数应该还有个下划线,Cont有没有S况应该是没有S,这会有一个S。这样的数据模型,因为数据是不一样的,你在三个选项卡里边显示的数据也是不一样的,所以呢,每一个通过这个获取数据的时候,获取的是按销量的排行,数据通过这个获取的时候是获取的是嗯。怎么按价格排行的数据,所以呢,不能把数据都放在一起,对吧。
02:04
数据结构是不一样的,然后我们有了这个数据模型,我们获取数据,将数据放到这个模型里边,我们页面摆放也按在这里边,当然我们的选项卡在选择的时候,选项卡在选择的时候在这里边。然后这几个就不需要了。那。在选项卡这个地方,我们点击这个按钮的时候,也就这一部分,你看摆放的数据它都是一个对吧,都是一个数据,一个数据呢,我们就通过类型来区分,排排序的类型来区分显示的哪个数据,所以呢,像这样的选项卡,我们需要做的就是一个什么,一个计算属性。通过计算属性我们来区分。所以呢,有了数据模型,我们还得做一个计算属性,这样的话,选项卡里边我们便利的时候就可以便利那个计算属性里边的数据,帮我们把数据显示出来。不然的话,你获取的是三部分数据,你能三部分数据都放在上边吗?肯定是不可能的,对不对。
03:00
所以我们要想用这个计算属性,我们就得。在这个里边我们的引入。计算属性,把这个拿过来,然后我们声明一个。在这个位置啊,销量那个sa ses啊,锁下边有一个波浪线没关系啊呃,如果出错的话,基能会提示我们容易刷新的时候就有,那我们把这个数据模型声明了,这个数据模型是不是我们也得。返回去,但是页面上不见得用,所以这个呢,返不返回去都可以。对吧,因为我们用的是计算属性,不是用的是这个,这个只是在我们组合API里边,这里边去使用,那咱们都返过去吧,然后这里边cos声明一个,比如说显示数据,显示区域只有一个吗?显示商品吗。然后通过计算属性com,就是里边加上一个回调方法,我们用箭头函数来完成,然后这里边直接返回I,返回什么呢?Root里边我们一定要显示当前的类型,因为我们在点这个选项卡的时候,已经获取了这个当前的排序的,这个别忘加V9啊,因为我们用的是if对吧。
04:09
那就能把这个值取出来,默认的这个值取出来,如果我们在不做不叠选卡的时候,就能把默认的这个取出来,对吧,然后把它的里边列表数据返回来,那如果我们点击这个切换卷卡的时候,就把这个类型给我们重新替换了,然后通过响应式原理,页面数据也会跟着变化,是这样的一个情况啊。然后我们积分属性,那这块我们在便利的时候。这块就可以加一个什么,加一个微杠后去遍离这个数据,通过这个计算属性,我们把数据遍离出来就行了,这块我们加一个,嗯,加一个微范后吧,微放后先变一下啊IDM里边的I通过这个计算属性受嗯。好像我们得把这个。返回去,你返回。不就可以了。然后我们在这个里边。
05:01
编辑它,那别忘了加一个什么加K对吧,有便利咱们就加KTM里边每个里边肯定商品这边都有个ID,你就有ID做这个K,让它不重复就行,然后数量。呃,数量呢,指的这里边儿,我们可以是按评论数或者是。这个数量指的是。Update,我没有这个方法。抓紧的。嗯,没有读取到属性。当前类型list。当前类型good,没有问题啊。这里边类似的,当然了,这里边属性没有,这因为我这里没声明啊,咱们后边没复持呢,所以这先不用管,我们先先不便利了,先不便利先放这。把这些去掉。先去掉。
06:01
来刷新一下。我们先不去变量,因为数据没获取到这块直接便历看有什么,但是你要知道这块我们便历的是那个计算属性里边的获取的每一个,对吧?我们先从数据库里把数据获取到,那获取数据的时候呢,页面加载的时候就需要获取一下默认的数据,然后切换选项卡的时候和点击分类的时候都需要获取数据,所以呢,我们把获取数据这个我们写成一个公共的一个方法,比如说初始化的一个方法吧。或者是得到数据的一个方法都可以,那获取这个方法,那我们就得去声明,你不能直接这么写,对不对,那我们通过init。Iit做一个这样的方法,应该不用加参数。先不加参数,那获取的时候呢,我们应该分别获取这样的排序条件,对吧,获取按这个排行的列表数据,这个数据这个数据所以写多个方法,那从数据库里边获取,所以呢,我们得找到网络里边,专门在这个里边去通过接口去访问数据,复制一个。然后我们就得到分类的gods,分类的数据,那我们看得到分类的数据,这两个接口肯定不一样,这个我们需要存参数,所以我们在这里边找一下。
07:06
参数如果按销售排行的话,我们加上这个对吧,如果是按推荐排行的话,我们按这个按价格排行,这个按评论数这个对吧,我们现在用的这三个参数,然后这里边也有分页。看到了吗?有分页,然后也有产品的分类的ID搜索的。那我们就得根据我们操作的条件,你是访问的是第几页,哪个分类,什么排序条件,我们得把这几个参数都加上,所以呢,我们需要在这个里边加上我们这么几个参数,比如说是排序条件O点你这写的前面,因这是我们经常操作的,对吧?SAS默认按销量排行,然后分类的ID默认等于零,如果我们因为数据库表里面数据都是从最小是一开始的,如果零的话条件不成立,那它呃接口里边是获取全部数据的啊,配置等于一,默认是获取第一页的,然后这里边我们加上这个条件,比如说分类的ID,我们看一下这个分类ID是哪个,是CT加YD。
08:00
N ID catg,当然你可以判断这个ID如果为零的话,就不加分ID也是获取所有的cat加YID,等于我们把这个ID连上CAD,然后呢,过去哪一页对不对,再把这分页加上pag,当然我们是下拉加给更多。那到时候我们只要设置这个分页,就把第二页的数据,第三页数据往我们后边加就可以了,在首页里边我们做过这样的功能,然后呢。再加上。嗯,重点是排序条件了,对不对?排序条件呢,是通过什么条件等于一才可以,所以呢,我们把加上这个or DR按这个排序条件,你得按接口的规则去写,比如说等于一,这样组合一个呃,URL就可以了,这样我们调用的时候如果不传递,用这些默认值传递的时候,按这个顺序传递。是按价格啊,比如说存价格,那这块就是按价格等于一,那就是按价格排序,对吧,存第二页就第二页的数据,比如说过去哪个分类就哪个分类,价格数据就可以了。然后拿过来,这里边呢,我们已经引入过一次了,获取全部的,我只要在这框里边再加上这样呢,我们在这页面里边就可以直接用这个方法,然后初始化的时候,在这里边我们就可以一个一个的分类去获取,对吧。
09:11
但这里面是固定的指向。这个方法不需要参数,第二呃,这个需要参数。需要你比如说我们是按销售SAS按销量排行这种,然后呢,我们传当前的ID,但是后边初始化的时候,呃,不传也可以,但是后边我们有可能用到我加上吧。呃,当前的这个排序条件,然后分页就不加了。别忘加V流,因为用if证明的一定要加上v Le这个值才可以啊,N,然后这里边res获取到这里边的数据。Re,点嗯,这里边跟首页里边获取数据一样,看一下这个直接看一天吧,看就是它里边的good是相关的数据。然后里边有当前页对吧,起始量结束量,然后呃,Date里边是它的数据对吧?Date,然后这个是下边date数据。
10:06
就具体哪个数据,咱们只要用这个就行了,所以res里边点嗯,good.dt date是这个数据,那把这个数据我们获取的参数指的是销售销量排行的数据,对吧,所以在前面。我们加上一个。Good就是我们声明的数据模型,数据模型里边的sal,它里的list,你看这样的话,我们就能将这个数据。将这个数据对吧。是不是相当于给这个里边例子附上值,那同样。再来一个。按价格price排序的数据我们放到price里边,还有按评论数,评论数是c cont平的数来同样也把它放在数据模型里边,就有m ments下线cot。Con加这个写错了啊,这样的话,我们一调用这个方法的时候,就会从接口里边获取这个数据,放到我们的什么,放到我们的数据模型里边去。
11:08
放到我们这个数据模型里边,然后数据模型里边通过计算属性计算对吧,返回具体哪一个值就可以了,那这个在哪调用呢?你看我们页面加载获取完所有分类的时候,可以在这块去调一下,对吧?当我们呃,点击分类的时候,点击分类的时候,在这块我们去调用一下,当然你不用传这个分类的ID,咱们嗯。第一个参数是这个。第二个是。第二参数是这个ID。第一个是排序,第二个是ID。第二,那我们这块。不是分类的。当前CIID对吧,当前ID。当前海底。当前黑点。这别存错了,因为我传那个是半天排序的那个了啊,然后在这块调用一下,如果。
12:05
是。这块。ID不需要啊。就是通过这个分类ID啊,这块我们通过这块,你看通过当前ID我们获取的时候,我们直接也是加上这个iid。放到这来就可以了。这样的话,我们在调用这个方法的时候,也就是在一点击我们的分类按钮的时候,重新初始化哪个分类下边的数据。你看这样的话,不把分类ID放到重新赋给内值了嘛,然后我们调用这个方法,分类ID能获取到这个值改变,这个值改变,那我们获取的这里边儿的。重新调用一下这个方法,重新获取这个数据,不就可以把这个值给我们重新改变了吗?对吧?就可以重新改变了,那当我们点击选项卡的时候,当点击选项卡的时候,证明用户在切换对吧?证明用户在切换的时候,那我们也得让他重新更新一下这个数据,当前选项卡下边的这个数据对吧?这个列表,那我们把这个方法。
13:09
随便找一个拿过来。放在这儿。知道点击这个选项卡的时候,把这个值改变了,也得重新获一下,更新一下当前选项卡的数据,不然的话默认是原来的数据,你排序的也是原来的数据,对吧,我们得更新一下这个有事件触发对吧,就得变换一下这个数据,然后重新排序,相当于。重新排序啊。当然了,你前面如果这块重新排序的话,这个地方。那你就不需要在这个地方初始化了,初始化只初始化一个就行了,当然咱三个都初始化了啊,你比如说在这个地方初始化,你只要初始化第一个默认的就可以,然后其他的点击学员卡的时候呢,在线排序就行了,当然这也无所谓了,这样写保险一点。那我们这里边点击选卡的时候,那我们一定得把这个分类变成谁呀,变成。
14:01
这个。当前的分类,然后把这个换成。当前的分类,这样的话,当我点击选卡的时候,这个嗯不是分类啊,排序的条件变了对吧,就把对应的排序条件附上值,然后通过计算重形计算的时候也是可以的,单独的,那初始化的时候,其实你就没有必要每一个都初始化了,对吧,只初始化一个默认的就行,在这里边调一个默认的,你就把这个方法你拿到。这个位置说话就行了。也就是在这个地方。嗯。只需要调用这一个方法就行了,不用在初始化里边把所有的都调用一遍。因为默认排序只按这一个排序,这里边有数据对不对。然后。其他的里边不用加对不对,但是你这也无所谓啊。把所有的。后退多了。
15:00
所有的排序都拿过来也没关系,那这样的话,我们现在点击员卡也会重新排序一下,然后ID和序列号都是这两个条件,那我们。呃,保存下好像有个错误。点。我当前那个。没有写错。当前video啊,这多了一个。符号。嗯,好,然后呢,我们现在就可以干嘛,就可以在这块去便利了,那还是使用我们什么V杠后,V杠后便利成it t便利我们的,呃,计算属性计算的当前的选项卡的内容,对吧?就可以了。In,然后呢,受呃,受不。那我们启动电量是不是15度。然后我们再看一下。将它返回返回返回了对不对,所以呢,计算属性。我们在这就可以用了这个,然后我们加一个K的值,然后有求循环,一定加KIT里边的,我们就用ID吧这块,然后这个数量,数量呢就是itemm里边的,你看咱们看接口里边这数据有一个是销量。
16:13
这是销量,那我们这块放的应该是放的库存。它这里边儿还。没有库存,这个是收藏人数,收藏人数。嗯。收藏人数评论数。没有库存,这里边获取数据的话,应该是应该里面写,但是数那个数据里面应该是有的,那我们就放一个什么数呢,放那个评论数。数量,我们ATM评论数。啊,那个。然后呢,标签我们现在就比如说里边你可以判断,假如说销量数大于多少,那我们就用它是流行对不对,你可以这块这么写,假如说。标签如果是新数,你可以用一个计算属性啊,在这里边处理一下,那这块,比如说这个销量如果是大于零的,对吧,大于等于大于等于零吧,因为现在好像全是零对吧,咱们还没有销销量的对不对,然后我们就让它是流行。
17:11
流行,那否则的话,我们就可以是其他的,你可以做一个其他的标签对吧。标签。去设置一下就可以了,当然我们这块如果想访问这个的话,我们得一定得用上什么冒号才可以啊,这样的话才能用到里边的变量,然后价格,那我们这里边就是IM里边的I emm里边的P就行了。然后原价咱不需要,咱们这个表里边儿有没有原价,那描述信息,呃,描述信息呢,或者什么,我们可以都比如说用。这块一个比如上架时间对吧,是不是新品之类的可以用这个,你比如说是itm里面有个。看这里边提供的没有详情什么东西对吧。所以这块有一个修改事件。那就是这个商品什么时间修改过,看监控里边有什么数据,咱们就放什么数据就行啊,然后标题。
18:06
呃,标题,标题这块咱们用上。啊it.t都题行了,然后缩略图,嗯,缩略图。这几遍咱们用上。IM里边的看一下接口应该是。这个lul。Co_UR所这图,当然了,你也可以直接是用它是懒加载的,那就是lazy-log等于处,这样的话,这个图片说明图,它就是两加载的,这卡片里边给我们提供的一些说明。我听一下。呃,不能够读取属性历史的没有定义,还是这个错误你加了。绿色。呃,意思是不是我这块写错了。
19:00
嗯。Sal,我们销掉这个单词看一下啊。参数这块。SAS。找到。好吧。计算属性上面。生在这。这是不管了。呃,ES,因为你写写反了的话对吧,写反的话,那它就获取不到数据,获取不到数据的话,这里面就加上这个值,你看S。颜色。其他地方没有错了吧,全参数sa Le整体一下,然后我们再看一下接口,这里边默认的。默认的没有问题。不然的话,接口里面是没有数据空数的,所以它访问这里边属性都没有啊,所以大家学会一下排查一下呃数据。
20:04
怎么?都有了对不对,当然这块标题列出来是因为我们前面没有把它做成变量,对不对,没有加这个,没有微放放绑定。号绑定就行了,你看这块那里边内容现在是它是居中的,那你可以端的什么靠左去处理。你看我们在访问这个的时候,我们可以加上。你可以看元素通过这个地方。那这个位置现在是它这个位置是居中的,你看卡片的内容。卡片的内容,我们找一下它的哪个属性。嗯。上面。其实片内容它虽然都是组件,但我们通过这些你是都可以看到这个内容的,你看上面这是缩略图对吧,位置没变化,然后卡片内容。它这里边儿FLASH1呃,没有写居中高度宽度。
21:00
那我们直接。这个过来。啊。复制一下,复制一下不好使,我们把它放到商品列表里边。这个商品列表里面我们加个点这块,这样的话就相当于把他前面控制样取出来。咱们加上,比如说文本管例,那用它居左,当然了,有可能样式优先级不够,你加上这个试一下。刷新。没有过来,没有过来的话,那我们再看一下这里边让里边内容再加上,嗯。我来。嗯,还没有过来加载这个实现了居中。我们还得通过这个去访问一下这个元素。卡片内部的。描述信息。这个信息是这个吗。
22:02
它位置是相对的,位置是相对的。那加上一个左LEFT0。拉,没有。你过来。看一下是不是在里边每一个去设置的。嗯。应该是可以的,那我们再看一下它的样式,起不起效果啊,在这块我们添加一个back背景颜色,ID,红色的添加一个。预期效果,我们再加个链接吧。看一下这个背景颜色。就是我们样式复制的不对。嗯。鼠标放到这个上边。内容区域。内容。
23:01
我们拿过来。是这个。这个类。拿过来,他放在商品列表里边,应该也是可以,那我放到最最外边吧。不起效果。效果呢,我们就强制的在这块试一下。每个卡片内容区商品列表,我们先看商品列表里边有没有加上。这块来一个K背景颜色红色的。嗯,这块是可以的,可以的话,我们要里边的test内容默认就是向左的。可以了,你看在这块加上这个属性就可以了,默认的是向左,你可以外头不行,在里层加就行了,然后这个标题太长了,它画长了对不对,这个图片我们也可以让他。
24:02
嗯。那么窄一些。在写,那我们看这个区域。这个区域是。Image对吧,宽度。100%,那我们试一下这个百分之。呃,80。80%。这块第一个这个宽度变了,其他的没变,但是应该不是这个宽度,应该是这个宽度。这宽度88,我这来个。68。68,所以呢,或者五十八六十八。68就可以了,88太高了,那我们将这个。拿过来。复制一下,复制一下这个高度。在我们这块加一个,在这边加吧。嗯。看一下它这里面的属性。这款是。
25:00
宽度,我们把宽度改成宽度改成68像素。你看这个就稍稍好看一些,对吧,现在呢,我们已经把这个做完了。现在咱们看一下切换好不好用,切换好不好用啊,现在我们试一下,点击价格排序,你看它有变化的,按评论排序,按销量排序。这块按评论排序。然后呢,我们再点击一下,比如说我们获取这里边儿的,嗯。假如说后端里边PP书记。全是PP的数据,默认是十本书第一页的,那那下节课呢,就给它加上其他的,然后PP的这回咱们再按排序,你看都是PP的书的排序,按价格排序对吧,按销量按价格。有变化,因为内容它都是咱们都是复制的,所以内容它都是一样的啊,你看不出来太大变化,但实际上是变化的,为什么实际是变化呢?因为你看下边。
26:01
看这个位置,我们再点击的时候,除一除84对吧,销量按销售对吧,然后呢,我们再点击这个。点击大网。Java这里边没有没有数据啊,然后比如说点击前端script。下次就是可以电话对。因为不是咱所有的分类里边都放了书籍吧。这就可以了,那下一步咱们做的就是下拉加载更多,把数据做完就OK了,咱们分类页面也就做完了。好,谢谢大家。这节课我们就。
我来说两句