00:00
大家好,我是学习园地的特约讲师高洛峰,前面呢,咱们做完了首页,那首页的功能开发完成之后呢,咱们就顺按照顺序来开发分类页面,然后开发完分类,咱们再开发商品详情,这样的话,咱们就可以按照业务流程的顺序去开发我们的程序。那我们看一下,既然前面我们学过了啊,有赞的VMT这样的组件库,轻量级的非常的好用,那咱们后边的所有的开发,咱们就用组件库的方式给我们开发,那组件库开发呢,有几个好处,一是我们用现有的组件开发速度肯定快,另外呢,我们的外观对吧,另外的效果也是非常好的,所以呢,有现成的组件库,这也是用现有的组件库去开发程序,也是我们正式开发的时候,呃,首选的方案。那我们看一下商品分类,这个现在呢,咱们分类页面什么都没有,还是咱们原来建的这些。还是原来咱们建的这个一个模式,那既然咱们用组件库,就不用像首页似的,首页里边好多组件都能自己写的,写在这个里边加一个子组件的目录往这里边儿写,那既然我们用组件库的话,那好多组件呢,都是给我们提供好的,所以就不用建了,基本上使用这一个组件就够用了。
01:04
啊,所以呢,你也可以不建目录也是可以的啊,那我们看一下这个需求。这是我们分类页面,分类页面呢,它有几部分组成的一部分呢,是由左侧的菜单,左侧的菜单给我们组成的一部分呢,是排序的菜单排序,因为我们通过菜单选择好某个分类下边的所有商品之后,那我们可以按照这种排序去给用户去展示,然后下边呢,这块是有排序那边。这块是有那个商品列表,但是商品列表上上拉也会加载更多,这个功能跟我们首页里边上拉下载功能差不多,那它的既然我们首页开发完了,那这个呢,我们再用CM库开发的速度就会快很多。来我们打开这个主库,那我们首先呢,先做一个布局。在我们这个里面,我们首先呢,要给所有的我们这里边发区,比如说上边是商品分类的,对吧,这个只是这个标题栏,那我们在给下边写就行,来一个D,或者是你用其他的标签HT标签都可以啊。
02:01
嗯,就是直接用div吧,然后呢,我们起一个呃,ID就可以,因为最外层的嘛,我们叫做主格子manin box主格子,然后我们看一下它分为左右两部分,应该。我们再仔细观察一下,它分的不光是左右两部分,你看这边它没有到头对吧,它应该分为上面,然后左右对吧,上面然后下边,下边又分左右,你可以这么去分。当然无所谓了,咱们在这里边再分几个盒子就可以,比如说div,咱们分成上面的菜单,咱们用类吧,呃,上面的排序or DR代表排序对不对,排序的table。对吧,选项最后的标签选项这边放一个,然后呢,我们再放一个菜单,Div,左部的菜单我们一起个类吧,叫做左部的LM inu左部的菜单,然后呢,我们再分为一个,呃,右边的主体内容,也就是我们的图书列表class,那我们就叫做商品列表word list,商品列表分这么几部分就可以了,然后在主体区域里边,现在呢,我们来定义这个样式。
03:03
现在这里边现在什么都没显示啊,因为我们现在只是加上那个标签对吧。然后我们往下来,在这个里边,我们想让它有层的结构,一定得加上,呃,SARS解析对不对,Language l NG,然后SARS就可以了,然后我们这块加上这么几个最外层,最外层我们是做一个是一个ID主格子对不对?在主盒子里边我们有一个类菜单table。对吧,然后呢,里边又有一个除了菜单还有左部的菜单。除了那个排序的table,有总部菜单,还有什么books,呃,商品部的商品列表分这么几部分,然后每一部分我们先给一个,呃,临时的一个颜色,嗯,比如说给个red红色的,随便先给一个。先给个颜色重点的,因为咱先布局这些颜色都是临时的,后期咱们会去掉绿色的,然后呃,商品这边我们给个。呃,给个蓝色的RGB3个颜色的。
04:04
但是现在我们访问的时候肯定是没有颜色对不对,那上边的菜单的选项,菜单选项呢,我们是给个宽度,上边排序的那个菜单排序菜单宽度咱们先是100吧,肯定是给个高度给个50像素,然后呢,左边菜单咱们宽度比如说给个130个像素,然后高度给个200像素,然后这边。我们先随便加一个宽度,那比如说呃,剩下的130,那也不知道宽度多少,先随随时给一个,比如说给个啊100像素,然后高度给吧,也是200像素,我们保存一下,你看现在这样上边的区域,如果我们掩盖住了对不对。给我们掩盖住了,所以呢,我们在主体区域这块,因为上边有商品分类的菜单给掩盖了,所以我们加一个marin,呃,Top顶部我们要的是,因为上面菜单上是45个像素对吧,固定高度,那我们45像素诶就过来了,对吧?然后菜单和绿色的我们想要它分开,那我们这里边加上用弹性盒子布局吧,It play black。
05:05
然后呢?这里边加上这个布局,加上布局,它肯定是现在默认的都是这个布局,对吧,然后我们让这个列表这个布局,我们让它FLEX1让它在后边的所有的这个区域,占所有的区域,我不就不给这个宽度了,就不给这宽度了。呃,但是菜单还没有没有过来对不对。菜单没有过来,那我们菜单里边。嗯,用咱们用定位吧。菜单现在在这块,这个排序菜单在这块,然后绿色的咱们一个一个写吧,呃先把这个,呃顶部的菜单咱们现在先给个写完,比如说我们让他也是flex让它占领整个区域,Flagx机占领整个区域。嗯,这还没有完全占领整个区域对吧。嗯,这样吧,我们用固定的这个的话,Float来个扣右边。
06:02
这两个现在把它这个呃覆盖住了,对吧,那我让它来一个,它其实是可以用的,只不过在那两个底下,我们这一袋,我们比如说九把它提上来一个。还没加上来。这个总部菜单,菜单我们看一下,呃,菜单。把这几个应该都放到同一个层,我们最好是用定位去处理一下。用定位去处理一下。我们看一下,嗯。因为先把上边这个。呃九那咱们定位posi,因为它上面的肯定是不许下边滚动,肯定得是后期也得用定位去处理的,对吧,Fixed定位用这个,然后呢,让它以顶部。嗯,离顶部定位到40,这就不用排序了,我们用定位的方式去做45,然后右边让它是零。零像素,然后呢,让它左部,我们菜单总部是130,让它左部也离开130,那我们就是呃,Lift左,我们要的是130个像素。
07:09
啊,这就过来了,你看这样的一个情况,上面这个对吧,蓝色是这个区域对吧,用定位去搞定的这个事情对吧?顶部能的离45个像素并在边,右边是零,左边是130,那其他这个就过来了,但是你怎么布局都行,你就用电位的S弹和你怎么分都可以,怎么分都可以。那这个是,呃,定位过来了,那我们再看一下菜单部分,左边菜单部分。左边菜单部分呢,那我们也用这个定位,比如说POI,呃,Po,然后也是固定定位吧,然后让它顶部,顶部上边是45,然后呢,这个让它跟下边这个对齐,这个距离呢,是咱们定义的是。嗯。顶住45,它的高度50对吧,四十九十五。95让他再稍稍离他有点距离,咱们就随便设置一个,比如说110不行,咱们再调110像素,嗯,然后呢,左部让它是零。
08:09
然后。宽度。一百三应该差不多。你看再来一点对吧,再来一点离这个距离,当然你想跟这个完全对齐的话,那你这块就95的距离是完全是一样的95。你看跟这是完全对齐的对吧,然后我们再把呃这个高度写完了,咱们现在还差一个呃,列表这块,列表这个,那列表这块呢,我们也可以用上,呃,因为这个地方我们后期得用上其他的一个。布局对吧,我们点里边都有滚动,所以呢,我们不能使用固定的距离。呃,列表我们位置是用绝对定位,用绝对定位。那列表里边用绝对定位,其实上面呢,可以加上先用这个吧,绝对定位,然后呢,让它顶部跟上面一样,顶部呢是嗯。
09:02
100吧,这样呢,有五个像素的一个空闲对不对,然后左部应该是130个像素离菜单,菜单不一百30嘛,这块我们让它130,然后右边实际上的是零,当然且总共就写右部的话,这样的话去拉伸就占领整个这样的一个区域,然后高度,高度我们就是用上100VH就占领整个可用的这样的一个高度,固定大小占领可用的高度来,这个高度我们就不需要了,那两个重复了,保存一下。右边占领可用角度上面有这五个像素,这边放菜单了,这样的内容我们就做完了,那这里边这几个蓝色临时的,咱们现在暂时就不需要了。绿色的咱也不需要了,只是咱们看一下,但是内容就又都不显示了,对不对,你就看不出来了,你看都是白色的嘛,对吧,但是我们里边就可以放我们想要的内容了,对不对,比如说我们先来看一下上边的这个,呃,咱们先一个一个来做吧,先做菜单部分,这节课咱们先来做菜单部分,那菜单我们用什么呢?咱们说用现有的组件是比较方便的。
10:04
现有的组件。嗯,看一下在。这个里面我们找一下专门有一个侧边栏菜单。专门有这样的组件,你看侧边栏导旁这个,那首先呢,我们要先把侧边栏就是它是这种效果,你看这种效果。默认第一个选择上对吧,是这样的效果,咱们就用这个这样的效果就可以。那我们用这线,我需要用的时候,肯定是得先得把这个主件得先注册上,在我们程序里边可以用,对不对,所以我们先要注册上,注册上在我们的呃主区主方。呃,主入口文件在这里面。这块我们再加上这个有签错了。你过来,我们只粘这个。因为它一个是外层的对吧,然后一个是里边的,呃,标签项侧边的标签项这两部分给粘过来,粘过来之后我们还得在这个地方把它怎么引用上,一个是这个。
11:06
然后再用一个这个把两个我们都加上。这样的话我们在页面就可以直接用了,直接用哪个呢。你看我们直接用就是这种。直接用在我们这个里边,放在左边菜单里边,放在这直接用这个,但是这里边需要绑定一个当前的选项,当前的活动的,你看action k当前的选项,所以呢,它是一个变量,那我们就得引入这个变量。引入这个变量,我们直接在这里边import a,把ref,假如我们用ref声明,或者是re,呃,A,然后from从VUE小写到别忘了。里边弄,然后这里边儿我们加上set up。绑定一个这样的属性,然后外声明一个这个横线等于ref ref,然后里边呢,呃,我们默认,你看它默认的只要手势里头都有写,你看它是没有用那个组合一天去写对不对,他现在就直接返回这个键,默认是零,那我们在这里边默认我们会加一个零。
12:15
错了。默认我们加一个零。一会儿。然后得返回,返回这个A这个点这个塞纳标了,用逗号怎么着分割。这样的话,我们再回到我们这个里面。嗯,在这里面你看就有这样菜单项,我们就加进来了这样菜单项。就可以了。宽度也可以,嗯,宽度你不行,你可以再去再去增加,但是这个菜单项呢,我们需要从数据库出来取过来,在我们数据库里边。在我们数据库里边呢,它是多层的,包括我们这个原型设计的也是一样,你看这用了一个下拉列表的这种,那我们需要使用多层的这样的元素,因为它有多级分类对吧,我们找一下在首页数据里边。
13:04
首页数据里边。这块。那我们这里边儿有商品的。呃,分类。这块分类信息。那分类信息呢,接口给我们提供的是无限分类,但是呢,我们后台接口里边数据呢,是给我们三层去存的,三层去存的也就外层ID和里层ID这样的一个方式去获取的。首页商品他没有单独的一个。分类吗?看一下首页商品。啊,商品列表,商品详情。嗯,他没有单独的一个给我们处理的一个方式。请求参数,嗯,这个看一下啊。商品。商品详情首页。商品列表。应该是请求这个API,然后呢,请求可以通过默认请求过来的,这里边儿就有一个。
14:07
商品相关数据有分类的数据,你看这里边就有这个分类的数据,那我们从这个接口去获取,先获取所有的这个分类信息,然后我们再去摆放,那我们说了每个页面有单独的一个JS文件,去获取后,里面所有JS我们都写在这里边,对吧。所有的跟home相关我们都写在这里边,那所有的跟什么跟我们分类相关的,我们也建一个文件,我们就叫做。呃,跟这个页面最好是对应的,这样也好找CGRY点点JS这个,当我们把默认这个粘过来,那必须得找个公共的这个对不对,然后利用公共这个我们算参数就可以了,那我们这块做一个方法就得到分类数据,比如说catgry得到分类。YY就够了,然后呢,我们通过这个请求,请求的接口,请求的接口通过这个里边返回的数据。就有我们的。
15:01
分类数据。请求这个接口就可以了,这样的话,我们在呃这个里边,我们就可以去通过我们刚才写的这个方法,首先呢,我们必须得引入我们这方法,必须在我的这个地方。Import引import引入引入什么呢?引入我们得到分类这个方法,然后我们这块有别名,所以这些呢,你可以懂的,可以不用。这些别名可以不用,然后呢,我们把商品,嗯得到分类的商品的信息,我们可以放哪啊,可以放到嗯帽下边,咱们把所有的分类都拿过来,对不对,所以这里边我们注册的时候别忘了,这里边得把你组合一篇,得把这一片拿过来。咱们通常都是写在这个里面,当我们页面加载完成。对吧,挂载数据的时候,我们就在这里边挂载啊,挂载的时候加上这个,那在这里边我们就可以调用这个get分类这个方法,然后它不用传任何参数一我们这里边应该复制过来没有参数看到了吗?然后。
16:06
这里边res res里边数据,那我们首先要做的就是打印一下,看一下这里边儿的所有跟分类相关的数据在哪,我们在这里边打印一下。刷新一下。你看这里边儿有。分类,那分类信息在这呢,这就是我们的分类前沿技术,在这个分类下边还有什么,还有一层,对吧,通过这个还可以有子分类,你看有子分类有这么多,所以呢,我们这块先获取这个分类,但是获取分类呢,我们得。在这个里边先声明一个。进行生命一个分类的一个数据才可以使用,那我们用re。它是一个数组,是一个数组,那我们就直接用这个吧,这么一个分类。叫做cat步数。等于ref,呃,里边的咱们是一个先声明的时候做成一个什么空数度。
17:05
空数度空数组在这块的时候,我们既然有这分类了,在这能获取到,那我们就让这个cat ors,让它里边的V流值我们等于。也是没有波浪线啊,等于什么,等于I里边的我们需要获取到的,对吧,里边的。通过它能把所有的数据付给这个,那这个时候我们在使用这个数据的时候就可以了,那我现在想便利这个所有的数据,当然我得把这个在里边返回去才可以啊。组合AP setup里边数据我们得原线数据,那这块才有这个数据对吧,那这个时候我们用的时候就不用说便离这个了。这里边儿我们直接遍历一下啊V啊。嗯,For遍历谁呢?遍历这个通过哪呢?把它item或者是呃,就叫做这个名吧,然后标题。
18:09
这块我们直接加上谁啊,加上呃item.t你看里边接口里边给我们提供的是标题还是什么。里边有一个,而且不是这个。咱们访问的是这个分类对不对,有一个什么name,就是我们的分类名称标题,所以我们这块加上name。到这里边。这块当然我们这块得加上什么冒号动态。你看前沿前端后端云计算,这是后台菜单,但是这只是一层菜单,对吧,如果我们想用二层菜单怎么办呢?那我们需要在哪,在商品呃,在组件里边,我们还需要找一个,比如说可以下拉的往上找啊。找一个,看这里边哪个比较合适这个折叠面板。看折叠面板找他的手风琴,这个对吧,手风琴意味着就是点开一个,其他的全缩过去,因为这个太宽,而其他的面板呢,展开它全是展开的看对吧,你看选择哪个,所以像这样的菜单,一般我们选择手工琴的就可以了,另外呢,你做的时候呢,也可以什么,也可以获取外层分类里边所有数据,如果想细致查找的话,那再查找里边一层,那就两层就行。
19:21
那同样这里边我们需要加上什么,加上这个选项,加上这两个组件,我们得先注册上,把这两点注册上,在我们主方法里边,这里边。在这块。注册这两个,注册这两个呢,我们直接一个use,在use分别把这个。拿过来,放在这里。然后拿过来。放到这里。这样的话,我们就把这两个注册了,这两个注册了,那我们在页面里边就可以直接手持用了,我们找到我们的手风琴。找到我们的手风琴这个加上这个属性对吧,格式是手风琴的,它需要也绑定一个目录变量,选中的默认的内一内二这样的一个格式,所以呢,我们也需要把这个。
20:05
嗯,拿过来就是。完整的字符串都加过来吧,其他的咱们也先不管,先直接把这个拿过来你看啊。拿过来在。这个位置我现在在上面吧,先加一个这个啊,你看我们先他需要有绑定了微model绑定了这个属性,那我们这块也得来一个let,这个属性等于ref,呃,默认值它绑定的是零是一,默认值它绑定的是一。那我们这块就把定跟他一样啊。然后我们这块返回去。这个就可以了,这样的话我们在页面里边。看一下,你看就有这样的折叠菜单了,标题一标题二内容啊。就可以直接在这了,然后把这两个结合一下就可以了,结合一下。那比如说刚才咱们在这个循环的地方。循环的地方,咱们就可以把这个循环。
21:02
过来。这去掉,只留一个。嗯。把这个。新款看一下啊那。就在这写吧。把下面这个循环。我们需要给它剪掉,你熟悉一下吧,放到这块来。然后我们加一个K,别忘了加那个K啊,每一个都要把这个K加上。大家可以,这我里边太多了,我们把它敲。OK。嗯,K拿过来,标题呢,那就是这里边的it TM里边的外层的嘛,It it emm里边的name对吧,标题拿过来,然后这加上。然后我们这个K等于。就可以了,这里,然后这块也可以是。
22:02
呃,这个内幕其实我们加不加。都无所谓这个。这块加不加其实都无所谓的啊,那我们这K我就不加这个。因为也不需要不需要用到这个数值。这个呢,就是IM里边的ID吧,用这个ID它因为它是呃不重复的对吧,把这个加在这就行了,然后名字呢,名字它只要不重复就行,那我这块也加上一个吧,呃,Name。那我们这块就加上。嗯,也用上是IM点那个。那个。然后内容的部分。这块内容的部分呢,我们再把这个。现在我们加这个,你看进去之后,它点开的是没有内容的,你看前沿前端对吧,点开是没有内容的,那我们让里边内容放这种菜单,放这种菜单,也就是我们把这个放到它的。
23:01
内容里边这个放到他这个内容里边就可以了。当然这个放到里边。我们让他所有的是一个互相都是互相排斥的,我把这个放到最外。这个放到最外层,它是可以这样去组合的,放到最外层,那里边呢,我们只留这一项,只留这一项,只留这一项呢,里边循环,然后标题,那我们循环的就不是这个组件了,那循环的就是IM对不对?IM,但上边也用到了什么,也用到了IM,那这里边我们就换一个别的名,对吧,编辑上面的IM。IM里边的什么,它有一个子数组,刚才咱们打印的时候,这个打印,现在看到它分类里边。呃,接口里边,它下边有子元素。这块DRN就是子集,把这个子集我们编列出来就可以了,所以呢。我们把这块改成imcd re,把它子集拿过来,那我们这块就叫一个子选项吧,Sub吧,我们就叫sub便利它,那sub里边也有什么。
24:11
在这里边它里边也有内对吧,我们拿到这个就可以了,现在保存一下。那我们把下边这个把那个删掉了。别啊,就这几个组件。你看可以了,对不对,前沿前端后端,但是这个宽度有点不够宽。宽度不宽,因为这个我们放的是这个菜单,整个菜单是外层的一个标签,对不对,这里边是里层的标签。来一下这边外层那个可以是多余的。那我们就把这个类。我们给它拿过来,我们放到这里边儿,让它少一层。这个去掉。这个去掉。我们再缩紧回来,这样就可以了。
25:02
这里边说清楚。看上去会好一些,我听一下。哎,这宽度就完了,因为我们宽度130,那个宽度写在外层了,然后前。里边。把它的高度,这里边高度还受限制啊,高度应该样按里边内容拿过来,你的高度好像设置的是左部菜单高度是200,所以他其他下边是隐藏了再拿过来。好,同学们看一下前端展开,诶没问题了,对吧,点击前端点击这个。但是里边都是前端呢。我看一下不对啊,应该里边是子菜单的名字。IM。这块啊,这块用的是IM,应该是。用他的名字。你看就可以了,前沿里边有区块链和人工智能默认区块链的对不对,然后呢,前端里边有小程序,有javascript有vuee对吧。然后后端里边有PP,有Java,有波浪。
26:00
来这个菜单咱们做完了,那下一步呢,咱们做点击对吧,然后这边显示就行了。好,这节课咱们就做了一个主要的一个主题页面和获取数据库里的数据,以及这个菜单,那其他功能的下课再继续完成好。
我来说两句