00:00
大家好,我是学习园地的特约讲师高沃峰,上节课我们做了呃,左侧菜单。啊,以及便利这个数据,还有我们基本页面的布局,那这节课呢,我们看一下还有一个排序的菜单,以及内容列表,我们把这两部分加上,以及把数据报上去,然后呢,我们下节课再做下拉,加载更多这样的功能。来我们看一下,如果我们现在从上面先把这个呃,排序的这个选项加上来,那排序的我们使用的是一个组件,咱们原来自己也写过,在首页里边你看。嗯,在首页里边,咱们这块也有新书啊,精选这个对吧,这自己写的,当然我们这块既然我们有现有的VT组件库了,那我们就用VNT组件库,那专门找一个这样的一个,呃,标签就可以了,我们到这个组件库里边找一下。找一下我们的标签。嗯,标签table,嗯,这个吧,这个。Table和tables这两个,然后我们这块加上这个标签,然后标签内容,标签一,标签二,标签三这样的,然后我们再看一下它下边的一些属性,当然像这个下这个颜色的东西,我们都可以去给他改掉啊,你看下边。
01:12
事件内容剪纸样式对吧。默认什么样式的,可以通过类型怎么去处理?下边还有属性的列表,你比如说主题颜色对吧,都可以去改啊,你想改哪个,是否加边框动画这些东西都可以啊。那我们就用默认的基础的,那使用这个标签,它需要我们注册这个,那我们就把这两个拿过来C到我们的。嗯,主程序入口里面加上那个在前面打吧。在前面加这省着我们乱,然后这块我们换一行慢点use,加上一个是ta,一个是点use,一个是TBS,加上这两个,加上这两个之后,我们在这里边就可以直接使用这标签了,那我们直接把这个标签复制过来。
02:01
复制过来,嗯,用一个默认的,咱们用默认的这就可以。但是用不上这么多。用不上这么多,那我们嗯,用三个就可以了,用三个。然后内容这块我们也不需要内容,我们通过事件对吧,去触发,然后下边学员卡交换就行了,去掉,然后这里边我们可以写上还有几种排序,比如说按销量排序,销量销量排序,然后我们这块加上按价格排序,然后还可以按评论数排序,就是好评排序,评论排序。加上这三个,其他的我们就不需要了,这里边还需要一个这个属性,那这个属性的默认值给的是。你看这个值给几,它默认标签就选择的是几,看到了吧,来我们试一下。这块action加上呃。在这个地方第一个吧,我们来一个let,等于ref,我们默认是一,比如说默认是一,然后我们在这里边得返回去action。
03:10
这个H就行了,来,我们回到我们的页面看一下有没有显示。刷新一下。有一个错误告诉我们,元素丢失标签,我们粘贴的时候是少粘了什么内容吗?嗯。呃,这块都删除了一个标签,都删除一个标签,然后销量价格,但是这个。就有销量价格评论,这应该是太宽了,所以我们在这块把它这个样式给改一下它的样式。应该是我们在这里边加样的时候加了100%,我们看一下是不是啊在。这个里边宽度100%了,不然的话它会占领整个区域的,你看这个就可以了,销量排行这个当然我们也可以把下边它有点,这主要培训一个小bug,下边的颜色对吧。
04:01
清除的不是那么顺,那我们试一下改变一下这个顺序,看一下他能不能直接给我们换,比如说默认。我们这块是二。他这个不太好用。两个不太好用。那我用咱就算了啊,那这个默认值是几都可以了,但是它得需要加的一个双向绑定,那咱们就加在这块,这样的话我们可以选择,然后我们加世界选择就行了,这里边呢,我们也可以选择,对吧?那我们先不管这两个,我们在内容区域里边,我们再加上,在这块我再把突出列表加上,然后咱们统一写功写功能,因为既要选择某个分类,下面的商品又要有分类,对吧?我们先把这个列表拿过来,那列表我们用什么标签比较好呢?那专门有一个商品的卡片,这样的标签在VNT里边给我们存在着,所以呢,我们直接用商品卡片的那个就行了。在。商品卡片。这个。切换找到这个找到我们的。
05:01
一个组件,你看这块。看商品卡片,那我们用这个就行了,这个那首先呢,我们需要注册。他的压力。在程序里面。前面加上这个CD。然后之后我们也得把它使用上。眼里。这样呢,我们就可以使用卡片了,这样的一个形式,对吧,然后呢,我们卡片信息基本用法就这些,咱们其实用基本用法就可以了,其他的咱们基本上也用不上,对吧,那我们就把这个拿过来。当然这里面我们最好再加上。嗯,里边加上内容区域之类的,因为我们后期要做滚动加载更多,所以在这块。在这个里边。商品列表里边呢,我们再加什么,我们在D加一层好了,比如希TNT内容区域,然后我们在这块加上这个卡片。加这卡片啊,那如果有多个卡片的话,那我们可以拿过来。
06:01
多个。当然我们是循环遍历的,我们先放几个,让他在这块站位着看一下我们的样式是什么样的,你看就这样的情况对吧,卡片商品信息对吧,当然其他的这个样式我们都可以去调整一下,就商品描述啊,这个是不太宽了,对吧,也有可能是他这个图片的其他的这样的一个问题,咱们都可以去调整啊。我们还可以换一个其他的标签,这个标签它没有其他的,那我们再看一下这个属性啊,你看还有带这个标签的价格的这个对不对,那我们看带营销的有这个,通过这个设置原价的通标签,设置上面这个标签的,那还可有这样的加标签的,对吧?这几种还可以自定义内容的,那比如说我们用。这个还是用下边这个。自定义内容呢,咱们用第二个吧,带营销的,带标签之类的。拿过来。能把第一个换掉,咱们只要写一个后期一循环就可以了。拿过来稍微整体一下。
07:01
我们把这个缩小看一下样。嗯,这样的一个信息,你看有原价和带那个标签的对不对,然后我们都可以把标签里边加内容,然后内容好像这边离太近了,那我们再处理一下样式。左菜单商品列表。左右拉伸,那我们来一个。我们给个十个像素吧。对,让他这边有点距离对吧,别离这个太近,这样稍稍好看一些,但这个图片的宽度我们也可以设置啊,这个内容的位置我们也都可以设置,都可以去处理,那这里边暂时咱们先不处理了。接放在这块,那现在咱们需要做的呢,是这个内容,咱们需要遍历,但是遍历内容的时候呢,现在这是重点,我们点击分类的时候,对吧,是一个事件,点击分类上边呢,还有排序是不是又是一个事件,然后里边的内容根据我们的分类,根据我们的排序来获取,那我们需要将这两个都加上什么,加上我们的,呃,操作方法,比如说在排序这块,我们只要在这加。
08:02
你看啊,这块ta在这个标签里边,你可以看一下手册啊,就click标签,然后比如说table的点击click这个方法,它会默认给我们存,就点击某一个默认会把它的ID给我们存进来,那我们在这里边就得声明一个这样的方法。在这声明一个。嗯。就是排序选行卡。排序。选项好。排序显卡,然后我们这块,嗯,这个方法是table ta对不对,所以呢,我们就得设置一个这样的生明一个cost叫做table。Click click CL I CK这样的一个方法,然后呢,需要一个参数,它默认这个组件会给我们传进来,你选择选中的那个序列号这块,那我们在这里边就打印一下ex.rog。前面我们加上。
09:02
啊,排序的。排序的诶,就会输法的序号,序号拿过来这块我们加上这个音代词,这样的话我们在切换的时候。刷新一下原来的错误。啊,我们这个方法必须得怎么着,必须得返回去啊。这块tab。再刷新一下。好,没有没有警告信息了,你看点击价格还是一销量是零,评论12对吧,它会自动给我们传递来这里边,你不用每一个上面都加这样的。呃,方法,然后传一个序列号,用每一个架在这块,你选中某一个,它会自动传到这个方法里边,你只要用一个电量接收就可以了。在这里边接受就行了,当然我们排序的时候呢,我们看一下这个接口。接口在排需要参数的时候,我们需要按这几个排序,你看啊,如果按照推荐排序,那就是它的值传递的一,按评论数排序,那就是按评数倒序,加上这个参数就可以了,按价格排序加上它就行了,也就这些值为一的时候,就按这几个排序,按销量排序,按价格排序,但是你得按PPT排序了,然后按这个排序,按这个排序那我们就写这三个值,这个值最长几步啊,评论数,那我们就先把这三个。
10:25
因为我们用这个序号没用对吧,我们请求接口的时候肯定是用呃一个字号的,所以呢,我们声明一个呃数组排序的,数组是分别按什么排序呢?第一个咱们是按销量排序,第二个呢,咱们是按价格排序price,然后第三个呢,咱们是按。嗯,是按这个评论数,评论数这个排序,然后呢,我们这块这回打印的时候。我们就不是打印这个了,你看我们就可以打印这个or DS里边的按这个序号去打印,这样的话。我们就知道这几个值了没有,我们后边做一个准备,直接在这吧刷新一下。
11:05
按价格排序。你看按评论数排序,打印的是这个字符算,按这个排序,那我就可以把这个排序的序列号,我们声明一个什么全局的一个变量,当前的。嗯,这个就这什么吧,把所有变量声明看这会就是。当前的排序排序条件,当前的排序条件,那我们这块用呃,Light证明CRT当前的排序,那就叫当前的or排序,就这个,然后让它等于ref,默认是什么字符串呢?默认我们让它就是sa Les按销量去排序,按销量去排序,当我们选中哪个排序的时候,那我们就把这个。呃,当前的这个排序,当然我们用if证明的标加video等于什么or drs里边的index,这样的话,我们选中这个标签,就把这个放到这个里边了,那我们请求的时候就可以用到什么当前的这个排序了,对吧,当前的序号就可以用到了。
12:07
然后我们需要把这个排序的序号,我们也得干嘛加到这里边吸,只要我们生命的变量想在模板里边使用,我们就得加上这个,那除了这个,除了有这个方法,那我们还需要什么,我们还需要请求数据库的时候。就是点击菜单的时候,点击这个菜单每个选项的时候对不对,外层菜单点击就是一个。对吧,伸缩最主要是二层菜单,数据都在二层菜单里边去存储嘛,对不对,那我们在二级菜单存储的时候,我们也需要给每一个加上什么,加上我们的一个事件。找到我们的这个里边。找到。这么打开吧,先不说了。不要太长了,你看这里边点击某一个二级菜单的时候,都在这块便利的子菜单嘛,对不对,那在这个子菜单里边,子菜单里边我们加一个事件。
13:01
那这好像我们忘加有循环,但然我们得加一个K对不对,那就是K,你加一个K,那让这个K的值等于ITM里边有ID这个。里边有ID,我加这个就行。嗯,然后我们在这块加上事件CK,当我们点击的时候,比如说让他得到商品go ods通过哪一个得到商品列表呢?通过这里边的sub里边的什么ID。我们把ID传过来就可以了,所以我们点击哪一项就会调用这个方法,那我们一样在下面可设置这个方法。那下边是选项卡,那我们在选项卡这块是通过分类得到商品盖的商品。通过分类得到商品,那我们cost声明一个这个方法。等于当然我们需要传递一个参数,就是什么商品的这个ID标传进来,因为我们是通过ID来得到商品的,所以这个是标拿过来。
14:06
然后我们放在这块来。你。输入法。通过ID得到商品。在这里边我们也把这个ID,因为我们得获取的时候得统一用到这个ID,对吧,所以呢,我们前面也需要声明一个当前的这个分类,分类的ID,这我们叫做起个分类ID,我们起一个CAD吧。整个混淆对吧,这是排序,然后当前的当前的ID分类ID。Light生明,一个CRCRT当前的CID分类的ID就这名等于re EF,默认呢?我们就让它等于什么默认,让它等于零就可以,这样的话,等于零就是因为数据库里边所有的ID都是从一最小的是一对不对,等于零的时候就证明条例不成立,不成立的时候我们应该获取所有的商品信息就行了。
15:01
默认应该等于零。当前ID,然后呢,我们把这个当前ID这块也得返回去CU22这块,然后我们在里边点击一个ID的时候,你就让这个当前的ID,嗯,Cur这个点v rue值v rue等于我们传过来这个ID,当然我们这块也可以打印一下,看一下这个ID啊,Cid点。Rog打一下啊,当前D。这样的话我们看一下选择商品。嗯。这个方法没有返回去,对不对,所以这会儿一定要把这个方法盖商品返回去。刷新一下。这样的话,我们在这里边才能调到,比如说点击人工智能是三对不对,点击前端JAVASCRIPT16,点击VUEE18,那这个ID就可以点击了,那在这里边我们能不能获取到,除了这个。我们把这个也拿过来。
16:01
拿过来,因为这两个点击的时候,我们都得看到这个分类ID和。这个序列号,所以正好我们在。呃,Rog再反应一下,这个ID是CRT,点它的v rue值啊,这两个当我选项卡的时候重新刷新一下。注意清空一下,点击人工智能。嗯,Order是没有定律。哦,这个里边那个索引号这块打印那个当前的,因为我把这个值已经付给谁了这个了,所以在这里边两个里边打印的都需要打印这个。这个拿过来。当前的分类ID。当前分类ID。来加这个处理。
17:00
好。我们主要看一下这样的。结果看这选择的时候,这两个都能选择,你看我们现在什么都没做的时候,现在是没有这个排序的,对不对?默认综合排序,咱们可以按一个综合排序,然后点击这里边人工智能,你看分类ID是三,然后默认是self,对不对?选择价格排序,价格排序的时候,你看分类ID还是三,对吧,然后呢,排序号是这个,也就是我们选中这个ID。对吧,你比如说后端我们选择PP是14个价格,那我们点评论的时候,它还是14个价格,仅的销量的时候还是14个价格,对吧,是这样,那选择这个销量的时候,价格排序的时候,我们选择Java。是13,然后还是价格,这还在这对不对,所以呢,我们通过这种获取数据,只要我们改变这种ID或者这个值,让我们数据响应式就行了,所以我们现在只要在我们前面。声明我们这样的数据,声明我们这样的数据一个格式,而这几个时间比较长了,那我们下节课继续吧,就是声明完我们的数据,把我们的当前选中的数据对吧,到接口里边请求过来在页面展示就可以了,好,谢谢大家,这节课我们先讲到这里。
我来说两句