00:00
大家好,我是学习园地的特约讲师高洛峰,上节课咱们获取了商品详情的数据,那商品详情呢,都是通过其他页面里边点击商品,然后呢帮我们跳转过来的,当然我们在这些位置都可以提价,对吧?但是我们这块现在有一个缓存,你看一直日期,因为我们页面有个缓存,我们先把这个去掉啊,在开发截图尽量叠加,等我们开发完成之后,再把它完成在我们的APP里面。我们这块用到了缓存,所有的缓存在开发阶段都是不加的,上线的时候一定要加的,对吧。那我们在这里边把这个去掉。来,我们再回过来刷新一下。你看现在每个页面它都是有这样的数据,你看点击ID是一对吧,就没问题了,再退退回来,那我们再点击这个ID12,你看这块也变成ID12了,对吧,然后我们报一下商品分类的位置。说你分类。这个位置。我们点击一本图书。你看ID是十对吧。
01:01
ID5都过来了,对吧,这是受这个的影响,到时候我们可以把它关掉就可以了,你可以把这个写上一个,呃,在这块写上E排除,比如说哪个页面不用的话,得排除include是包含对不对,你可以是哪个页面需要缓存包含哪个,或者是排除哪个,这咱前面已经说过,这就不多说了,那。嗯,这改完之后我们看一下获取详情接口,这个就不需要太多了,就这一个接口就能获取到所有详情的数据,在这里边我们摆放一个数据。那比如说最上边,我们按照我们的需求,最上边呢,我们摆着一张图片,当然它接口是提供多个图片的,多个图片呢,你可以像我们首页一样,用什么用半截图的方式展现这个图书的图片。或者是像下边有多个图片切换的方式都是可以的啊。你可以是半个图,也可以是小图标,然后切换看每个图片的,但是咱们接口里边是没有数据的,有这样的功能,但是呢,数据咱们没加,那这块呢不重要,因为前面咱们已经讲过半截图了,你可以去呃把它弄过来。
02:01
那我们这里边就直接用一张图片就可以了,那图片呢,我们找一个图片的组件加过来,就别单独写图片了,都是用我们的VT里边组件就行了,找到我们的图片组件。啊,都在这个上。嗯,图片预览,这图片预览是点开预览的,是这种点开预览的,可以这么这么弄对吧,你可以加这个组件也可以,那也可以单独的,我们正好就单独简单放一张图片。简单的放一张图片,找一下图片这个。使用的是嗯image,当然了也可以给他起作一起一个别名的方式,起别名的方式啊,或者是直接用v image这样的话也都可以,对吧,那我们把这个拿过来。CRC,那我们这个里边也就是。主程序里边这块我们加上标题前面加。还有这个起了一个别名,那我们这块直接用这个别名就行,点use。
03:02
加这个。嗯。然后我们直接用的时候,直接用这种就行了,可以是图片的圆在哪里啊对不对,当然也可以用什么懒加载对吧,指定宽度高度,然后来加载这样的方式也是可以的,那缆加载提前他们已经设置好了,那我们在这块就把这个加上就行了,那加完之后我们加这个。然后把这个打开看效果。呃,宽度我们是100%吧,然后高度100有点小,那我们高度。吧。我可以不加这个。让它自动对焦,然后我们图片,呃,使用了懒加载,然后呢,Src这块我们加上,因为我们是用这种方式。你看把它解开,然后返回的,那也就直接我们访问这个就行了,不用访问顾客点,所以呢,我们访问详情里边的有个图片的u det里边有个C,一般的图片的U都是这个。
04:08
嗯,这里边现在有一个错误,但是这块我们得用冒号才能解析这个变量怎么还有。还有说我看一下。失败没有这个,那我们别弄错了。在。这个位置。加这个。好,你看这图片就给我们加载过来了,对吧?当然了,你可以初始化一下这个样式,你比如说我们就直接在这写上是吧。呃,假如说M牙尖放泡给上,嗯,100。太多了,50吧。50这是一个图片,咱们就放过来了,对不对,然后图片放完之后,那我们下边放图片的,呃,详情对吧,放图片的详情看这里边需不需要。有一些分割线什么的也不需要了,直接下面放详情,这个详情也是卡片式的,只不过我们没加图片对不对,那我们找到这里面的卡片。
05:08
就是专门是商品卡片的信息,这个位置找到我们商品卡片组件,这卡片前面我们注册过了,所以呢,你就不用再注册了商品卡片。这块,然后呢,我们用一个。我就回去了。点错了啊。卡片,那我们就用这个最全的。这个自定义的这个内容,这样的话里边有标签啊或者什么的比较多对吧。用这个。拿过来放到我们的这个下面。然后我们现在直接保存一下,看一下它的样是什么样的。把这个缩小。放在这你看就有这样的一个信息了,图片上面描述标签,然后按钮按钮,当然咱们现在还没有去,呃,还没有加这个标签,其他的标签他还没加,咱们一个一个的要注册去加,因为他这里边引用了好多个标签,咱这里边先呃处理一下,比如说我们现在不需要图片,因为上面已经放图片了,对吧,那我们就把那个图片的信息给去掉。
06:13
图片信息去掉,图片信息去掉的话,那它这个位置还在这站着。看一下位置还可站着,那我们先找到它的样式。找到这个样式。这个位置。然后。拿过来。E,这是标题。标题内容它不是位置在这块,它还是内容,怎么着,内容现在还是嗯居中的对吧,默认它都是居中的,那我们把它这个居中的。我们把它内容用的靠谱,正好我们加一个。加个钥是吧,嗯。Test文本合力F。好,这样的话,我们信息就回来了,对不对,但字比较小,你可以把它怎么的,把它那个调整一下,调整一下都可以啊,然后这里面标签标签我们这个标记没有加对吧,还有按钮我们这两个没有加,所以呢,我们把标签和按钮这两个我们也注册一个在这里边。
07:17
不然它不会显示啊,那在我们的慢点JS里边注册一个TG和一个BOT to2个,那在这块我们加上点use,一个是T,一个是。Button按钮。那现在就有标签和这按钮了,对吧,当然这按钮不好看的话,我们后期可以把它换成比如说其他的一个按钮的方式。比如换成一个类似于一个大的按钮,加入购物车啊,比如说立即购买啊,对吧,这样的一个按钮加一个大的,然后咱们换成不同的颜色,因为按钮的组件我们再。这个里边找一下,你比如说按钮。
08:00
这个位置。他第一个这块就是按钮。看到了吗?按钮可以有像这个红色的对吧,是类似于。类型是。警告的按钮。形状图标。小型按钮,大按钮中按钮那都有,你比如说我们就用这种呃,警告的按钮这个颜色,但颜色你可以自己设置啊。用它。我们换一下这个按钮在。这个里边。钢精里面把这个按钮换掉。我们这块把警告这块这个按钮改成加入购物车,加入购物车这个,然后呢,我们在因为用的不是说被它是警告信息啊,而是用的是它这个颜色对吧,就危险的颜这个颜色,然后呢,咱们下边用这个颜色,比如说。呃,立即购买。立即购买这块我们加上因为它默认尺寸size你就很小的对不对,咱们把那属性去掉就变成大的对不对,立即购买,立即购物买立即购买两个按钮。
09:10
来,我们再回到我们的商品详情,你看加入购物车立即购买是不是就可以了?这个信息,然后呢,里边的数据我们现在可以拿过来了,比如说这个商品详情里边,呃,我们有这样的数量,也就直接在d det里边,我们看一下接口里边数量给我们提供的。接口里边你看我们需要用到的有标题对吧,数量呢,我们就可以用库存STK对吧,然后商品介绍有没有商品的这块商品的描述。这块商品的描述,然后呢,这块是商品的详情,概有详情,这些我们都会用到,然后商品的标题title这块这几个,那我们在这块第一个商品的数量,也就是库存现在有多少s tok,当然前面一定要加什么,加上冒号。当然字体什么的你都可以找样去改变一下大小啊,在手机里这个字体也是可以的,只不过在PC里边相对看着会少一些价钱。
10:04
价钱我们这块用上de里边的PI价格,然后描述我们是就简介T里边,里边咱们用上de t描述,然后商品的标题,Detl产品详情里边的title前面别忘了都加上这个信息。信息对吧,那标签呢,你就可以根据你判断情况做一些计算属性往这放些地方固定的,你比如说根据你的商品的情况,还是新书啊,还是推荐的呀,对吧,你可以判断一下,你比如说这里边如果这个是真的对吧,一位推荐一个判断,如果是一的,那我们就是推荐,如果不是一就不是推荐,你给加上这个标签,这里边直接写一个判断就可以了,你可可以用三元一色图都是可以的,这我就不给你去写了。自己去判断这个标签显示的内容,回来看一下。啊,新书推荐,然后这本书库存量42本对吧,价格32块钱对吧,32块钱,那你可以在后边你再连接一个。
11:08
呃,连接一个。点嗯,零零。是不是后边有个点。就是。嗯,加钱当然最好是整个属性就是接口,我们返回来就带那个数据,免得我们在这里边去处理这个点名。嗯,32块点零币就有这个对吧?嗯,其他的这描述就过来了,那我们还有下边的数据,下边的数据也就是看一下我们的需求。下边的数据就是放钙速热评和相关突出,那概述热评相关突出呢,用的就是我们一个标签,那我们找到这个标签。找到标签。找到标签的啊。标签。嗯。这个这个标签呢,前面我们是呃,注册过的啊,这个是这个标签不是我们想要的,这个用的是。
12:06
这个标签页用的是这个table和table,用的不是table table,然后呢,我们切换的时候。那我们可以按照哪个呢?嗯,可以按照。这种方式也可以。然后。这种也可以简单点的吧。这边放上三个内容标签。标签这里边需要绑定action,然后我们在这里边,嗯,第一个标签呢,我们叫做概述。概述,然后第二个标签呢,我们叫做呃热评热评论。热平第三个标签,第三个标签呢,我们叫做相关突出,就类似的相关突出这几个,然后比如说第一个,呃,内容这块,那我们就可以直接。加一个里边加一个div内容,然后我们可以设置一个类啊,等于希TNT一个内容的一个类,就是详情嘛,然后我们把这个内容,嗯,如果我们直接在这个里边DAI你看啊在这块。
13:16
在接口里边我们是有一个这个详情对吧?Det ls这块详情,如果我们直接把这个详情,如果用差值的方式DA det点。BTLS如果我们这么做的话,也能获取详情,但是呢,里边的HTM内容它是不解析的,因为它是用副文本加进去的,副文本加进去的啊,你看。是这样的内容看到了吧,这样内容是不解析的,如果我想解析这样副文本的内容怎么办呢?那我们就需要用V-HTML在这块去写,所以呢,我们不用差值的方式,用这个我们把它。放在这就可以了,这样的话我们看就给我们内容。
14:00
这一下。你看概述这块就给我们解析了,对吧,但是里边图片针对有的突出。针对有的图书的话,你比如说我们收PPT4。那它的图片比较大对不对,因为副文本加的时候呢,他没有按这个手机屏幕这块去响应,它是按PC页面的,所以我们前面这这块已经加了一个。加了一个我们记得内容的,对吧,TNT内容的在内容里边。你这块里边来language等于fast加,这个加里边我们可以加一个图片,它的图片,那另外呢,让它离边界都远点,Hard顶十个像素吧,四边都远点,不然的话都是可区域对吧?可是区域的宽度高度去往里加,然后让它什么最大的宽度,比如说是100,这个图片是在上层内容区域的100%,然后呢,高度让它自动,这样的话将里边的图片是显式的单一加图片就可以显示了。那。这样我刷新一下。
15:00
刷新一下,哎,图片还没有,还没有给我们显示,我们再看一下是什么原因,隐麦纸,呃,内容区域里边的隐麦纸图片,它里边应该是用图片做的,最大宽度100%。高度是自动诶。没点不动。学习一下。肯定是有火,有火灾。回来,然后我们再点击一个。还没有给我们过来。没过来,那就咱们就怀疑这个标签名不是写这个类名,选择姓名是不是写错了,我们往上找一下。Con,累,没问题啊。在这个区域里边加上这个内容,加上一个类,然后我们要这个类设置,它里边显示的肯定是有图片标签的,因为副本加的时候图片都是用什么,都是用这个,呃,Image去给我们加进来的,用这个。
16:03
应该没问题啊。那我们加上强制吧。加强制。熟悉一下。还没有过来。商品分类。税收标。我明白了。你们这样试一下,看他的样好不好使,比如说100像素改成100像素,咱们先不改成100%。证明这个样式是没起效果,我看有没有错误。啊,这个X我现在还没加,但是跟这个应该是没关系,我们看一下元素,我们就选择这个图片。图片你看这里边内容里边的你妹纸正常应该可以啊,你这加一个爱宽度,宽度100像素。
17:00
是可以的,那就是我们这个样式没有加上D里边类TNT里边的image。那么奇怪呢?Con TT里边的一值。它里边的。这块我们加上S了。换一个换一名吧。一简单点。这块我们也给它加上。秀恩。还没有起升效果,这个优先级他也不是那么太明显的image。给它改成ID。井号。这样吧,我们先把其他功能写完,再回头来调这个,别在这耽误时间了。
18:03
这个应该没有什么,很简单的一个小功能。来我们再往下看一下,那这里边它需要有I,那我们这块就需要绑定一个,是不是这个没有切换过来的事呢?嗯,在setup里边我们声明一个Co。嘛,因为它是变量重新赋值,然后使用ref,默认是第一个,你明白吧,从一一开始也无所谓,然后我们返回。返回ACT。把这个返回去。来,我们刷新一下。还是不好,那我看下,我再调整一下。看一下热评。啊,里边现在是没有内容,相关图书也没有内容,对吧,那我们这个加上了,那我们再把相关图书加上,这里边的评论就给大家留的作业,每一个给大家留点功能,你可以把评论都获取到,因为评论在这个下边,这个下边里边是有所有评论的,所以呢,我们直接便利这个里边就能把所有的评论信息拿出来,也就是在这个里边,你直接遍利谁呢?你直接。
19:08
在这个里边,你比如说做一个div,假如说是多个用div显示的,那你直接V-for。遍历这里边的it min,也就是detil,它里边的有一个CMTS,所有评论你可以这么去编定,之后就没法写了,然后呢,我们看相关图书,相关图书的内容呢,我们可以用什么,我们可以用我们的。看一下啊。在我们写呃首页的时候,是不是有一个图书列表,和我们现在这个图书列表很像的,就是这个过对吧,我们只要把我们想显示的这个图书的信息给他传过去就可以了,所以我们把这个粘过来。在这个位置所有的相关图书,但是我们这里边儿就需要引入这个组件。名组件port引入gods list,那它在这个组件内容组件里边,对吧,然后呢,我们需要给这个组件传递一个属性,传递一个属性,属性内容呢,那就是我们这个里边的。
20:13
啊。就是我们这块获取到的相关图书这个,那这个呢也解构出来了,所以我们直接把这个内容放在这块,这是我们已经用写好的组件,这样就可以了,非常的方便,就能够把我们的这个内容怎么办给我们显示出来,但是这里边儿啊啊这块已经返过去了。没关系,来我们看一下,刷新一下。这本书的。热评是没有的,对不对,这本书的相关突出。你到吗?相关突出。我们这今天这几个功能怎么都不好使用呢,我们打印一下这个相关图书有没有数据啊,这本书有没有相关图书,如果没有相关图书的话,那我们就换一本别的书就可以了。嗯。Book边like gods.lg。
21:05
按一下。诶有相关图书,呃,这个固的列表有这个图书是没问题,那我们只是把这个粘过来对吧,我们还没有注册这个组件拿过来了,这里边在组件里边我们得注册。在这块。没注册不能用啊。注册的图,然后我们看一下。刷新一下。啊。你看相关图书。这块就有了对吧,当然它默认显示十本,你也不用显示太多,十本就够了。然后热评。热屏呢,你就自己去遍历,把这内容遍历出来,那这个页面呢,我们的详情页面就差不多了,当然你想加更多的信息,你也是可以往里加的。好,谢谢大家,这节课我们就讲。
我来说两句