00:01
好嘞,各位同学,那咱们呢,接着继续了啊。呃,首先说啊,咱们呢,已经把搜索页已经搞完了,以及底下的分页咱们也搞完了,那现在呢,咱们。主要是开发咱们的这个详情页。那到现在为止啊,咱们详情页就做了这几件事儿,第一个静态组件咱们已经写好了。对不?第二件事咱们也写好了相应的路由。第三个在路由跳转的时候,也要把相应的产品的ID怎么的是不带过来。以及啊,咱们呢,也把请求的接口也写好了。对不以及咱们的voe叉已经能捞到数据了。对不,那当然,那接下来要做的事,那无非就是组建找咱们的仓库要数据,展示这里的数据。
01:02
但是呢,接下来呢,老师呢,先说一下咱们的这个detail这个路由组件。因为毕竟这个组件不是咱自己写的,咱们也把这里的文件呢,也稍微呢去看一下。那首先说。在detail文件夹当中,它有一个文件叫做index.view,那这个文件是谁呢?那这个文件就是整个路由详情组件。OK吗?这个就是咱们的路由详情组件。OK吧,但是在这个路由就是在这个详情组件当中。它呢又拆分出一些子组件,咱们看一下。那咱们先一定要看看它的结构。那首先说在路由,就是在这个详情组件当中,它也有一个商品分类的三级列表,你看嘛,这不这呢吗。对不?
02:00
就是在咱们的这个详情页当中,它也有这个商品分类,这个三级列表,这不就这吗,这咱曾经写的全局组件。对不,那以及这块有个什么叫做主要内容区。那主要内容区域呢,咱们也看一下子,咱把该折的地儿都先给它折上看,这样。那这一部分呢,是主要内容区域,它分为左右两部分。那左边是谁呢?咱们看一下来看这儿啊,什么手机啊,什么数码通信,就是哪就是这个位置。也就是咱们的这个面包屑的这个位置。对吧,你看嘛,这块人给你做笔主要内容区域这块谁导航路径区域,那这不就是导航路径区域。对不?那以及再看那主要内容区域,这这是分左右的,看这啊这是分左右的,你看吧。来,老师把这块给你折上。你看他说的主要内容区域是哪,是这一部分。
03:04
就是这一部分,这一部分是主要的内容区域,就到这儿。OK吧,这部分是主要区域。它这里面呢,看一下左面,左面这块有一个放大镜区域,就是谁就这。老师问一下放大镜咱取没取过?放大镜,放大镜应该是在咱们学DOM的时候,学鼠标位置的时候应该写位字。对不,那在咱们的这个前台项目当中,放大镜,那当然咱们也会用的。那你要注意一件事啊,它把这个这个放大镜看,这左侧放大镜区看,它又拆分为两个子组件。一个叫祖母,一个叫以image list。字母是谁呢?是这个放大镜效果就是那就是这。就是老师选中的这一部分,还要加上这个大图,这叫放大镜。以及它还有一个词组件叫image例子的小图列表。小图列表谁是这儿。
04:06
OK吗?这又有一个轮播图。而且罗墨图这应该是咱们第三遍写了。对吧。完了再看。那这是左侧的放大镜,那右侧这里呢是什么?右侧选择区域布局就是谁就是这。对吧,比如说展示商品的名字啊,详情啊,价格啊,以及这个呃呃,售卖产品的一些属性,你可以进行勾选,对吧,还有什么加入购物车这个按钮,咱们看看是不是。对不,你看嘛,这不就是产品的名字吗。对吧,什么什么什么什么的移动4G手机,那不就这吗。对不,那以及底下这什么什么每月还有花花费返什么玩意儿,这不这吗。那以及当然底下还有什么价格这些东西对不。那以及还有什么,还有底下这一部分,底下这一部分叫做内容详情就这一部分。
05:03
是内容详情区域。对不,那当然这里面将来都是假的,数据这块是没啥数据,就只有顶上这一部分才有数据。对不,所以说底下这个这个内容详情区域,咱们以后不会看了,对不,你看什么选择搭配。那咱找一下子选择搭配,不就这吗,你看吗?所以说底下这一部分是是什么,是内容详情区域,咱们这块都是假的数据,都不会再去做了。那有数据地就是顶上这个主要区域这里。OK吧?所以说它大概的结构是什么,大概的结构是一个。父组件副组件当中有两个子组件,这俩玩意就是这个放大镜和底下这个小图,又是两个子组件,这个结构大概能不能懂,能懂给老师扣一个六。就是对于这个结构大概能不能懂,比如说有一个副组件。对不,这是父组件,叫做DT,父组件当中有两部分,就这是一个子组件,这也是个组件,剩下的都是在底T路由组件当中。
06:09
OK吧,那咱们得一点点来了。那首先说啊,仓库当中已经有数据了,咱们看一下啊,你看这儿。就是仓库当中已经有数据了,咱们找一下,找一下detail模块,就这的。对不这样吗。那老师问你,你就举个例子,你像什么caty will叫做商品分类。对不?其实这块的数据对的,对的是谁就对的是这。就这嘛,就是所谓的什么,就刚刚咱咱看了叫叫叫叫什么呢,叫这个我想一下叫什么呀,叫做导航路径区,其实这块的属据叫做category view。开gra其实就是一个导航区域的数据。就这。你看手机手机通讯手机嘛,对不,那以及还有价格啊,价格这些其实说白了就是就是这这不有价格吗。
07:04
当然还有一个叫做SKU info,就是这个产品的信息。看这啊。就是这个SKU info,就是这个产品的信息。他这块的数据包含谁呢?包含哪块数据,包含这里的数据。就这里的数据。以及加上这个这个放大镜这块图片的这个数据,这块一定要注意,就是SKU info包含谁,包含你这个产品的详细的信息,就这这部分数据是有的。那以及还包含包含咱这个放大镜和这个小图片的数据都在都在这个里面呢。OK吧,完了之后还有个点叫做PU cor,例子叫做商品的售卖属性列表,就是谁就这。这的区域的数据。OK吧,那所以说咱们剩下的活无非就是把这些数据给他展示出来。对,不但老师问你们一句话,问你们一句话,你看这,你看这。
08:04
首先说详情页,这个数据结构有没有点复杂?因为你捞在组建当中,内部捞数据的时候,就比如说咱捞这个这个这个导航路径这。你得怎么了?你得state.detail.good info下的这个这个这个这个呃,Category,你是不是得这么老?说你在组建获取这个数据的时候,你要写吧,一点点点点写行不行,行,但是有点麻烦,但是咱们说过你是不是可以简化数据,在组建获取的时候是不是方便一些,就这个能不能懂。就是刚刚老师说这句话能不能懂。能不能懂,就这个操作咱以前搞过。就是你现在在组件当中捞数据行不行?行,你该怎么写state,大仓库下detail下good info下category。所以说你为何不在咱们的这个仓库当中,给他计算好了,到时候直接用不就行了吗?
09:04
对不,所以说你看咱先来一个,先拿一个练手,就比如说这个是啥导航路径这里。那咱们呢,就简化一下数据,看这啊简化一下数据,咱们也叫啥也叫category,但是你不叫category也行。对不,所以说咱们先回到咱们的仓库当中,咱们先简化一下数据,在这简化一下数据就get你再来呗。对不,那叫啥叫category will。对不?所以说一定要记住get是为谁而生,是简化数据而生。这块一定要。对吧,那这块有谁,是不是有state,那这个state老师问你是谁,是不是当前仓库的这个state。哎,对不对,对吧。所以它应该返回的是谁,你应该的是。贝点是不是点它。Good info啊,点good info,点谁开greenving?
10:01
对吧,咱们先这么写。一会儿看有没有问题,有问题咱们再解决。所以说这不就简化数据吗?那咱们先把这个导航路径这先给它搞好。对不没问题吧,那所以说回到咱们呢,回到咱们的这个组件当中。就是咱的这个这个这个叫呃,这里。那咱们是不是得捞取仓库当中这个数据,那咱捞一下。那你是不是得用到谁用到咱的那个map gets inmport叫map get gets for will。对,不叫V差。那这块的你是不是得计算了。对吧,那这块咱先给它折着,没有先折着,你这块是不是得横。点点点map gets传染是不是数组?名字叫啥,叫categorys?
11:00
先别着急,你先看一眼在咱们的组件的身上能不能拿到。咱们先看在组件的身上能不能拿到,就这个题他身上你看能不能拿到,能吧。是不是一个对象来看,这是不是一个对象。对象的身上是不是有cat内分类,一级分类、二级分类、三级分类的名是不是有,你是不是往这一换就行?对不?那所以说你在这儿,你就可以把这给到替换了。对不?那咱们得先判断一下,比如说你得判断一下什么就是V杠受,你有没有一级分类的名字,V杠受你有我就展示嘛,叫啥叫开view。点它是个对线和点啥来的。找下了谁点这个cat name,他们有没有有我展示,没有我就不展示。如果说有这个名字好,有一级分类的名字,你看他都标一了吗?那我就展示呗。
12:03
对不展示谁,是不是展示这个这个这个这个这个这个叫caty cat啊不categ GR view.categ GR en,那同样的道理,它还有可能是二级分类或者三级分类。那你这块就复制粘贴就行了。对吧,咱稍微格式化一下,哎呀妈还不如不格式化,咱这往这边提提吧。对不,所以这块也是一样,那这块谁这是二。这是三,那这是不是也是一样?这是二和几?二和三?对不,那咱们的回首看一下的刷新。你看是不是就来了。哎,这能不能懂。看这啊,你看老师举个例子,我现在买的是手机下的手机。对吧,比如说咱们买一个他你看吧。是不是手机手机下的手机通信啊,手机对不对。诶对不对,对吧,那你看那假如说有的没数据呢,你看咱看有没有别的有数据,平板电脑这没数据啊,没数据咱找看有没有有的音乐呢。
13:05
这都没有,只有只有这个手机有对不?所以看这不手机下的手机,通讯下的手机吗。对吧,你一点看是不是就对了。对,不但是老师问你一件事啊,你看。现在老师现在整体的这个效果没问题吧,但是为什么底下会报这个错呢。你看嘛,咱一刷新他为什么会报警,会,这不是错,这是警告。为什么会出现这种现象?哎,现在老师问你,就是这个警告影不影响你程序不影响,你看你你程序是不是正常跑起来了。该展示也展示,但是你要想明白为什么会有这个警告。为什么?啊,同志们。就是现在为什么有这个警告,这个警告是一个假假警告,就是他对于程序没有影响,但是看着他比较恶心,你要琢磨他为什么。
14:00
就为什么现在有这个警告。这儿你得琢磨。这能不能想通?你看完读嘛。什么错误?就是什么错误呢?你看的read property不能读到categoryy name of anti啥意思?就是我现在读取不到category name。就是他读取不到是因为啥,因为前面二位。因为前面它不对,导致是不是读读取不到这个属性。哎,对不对。对吧,那你要琢磨为什么呀。谁能给老师解释一下为什么会出现这个假报错?你看他对于成云没有任何影响,但为什么就会有这个警告?你要想明白一件事啊,你看老师在前面的时候,我已经说过一次了,你看这。看咱们的仓库,你看这啊。你看这。你这块的如果要这么写。比我。你看你这块,你这么写它不对,为什么。
15:03
你这块这么写,那只能老师告诉你,你只能保证一件事,什么事,就是服务器的数据已经回来了,他应该是个对象。但是你要注意它起始状态,他是个什么鬼,是个空对象。比如说sp.good info,它其实是个空对象,你空对象打点category name,它反过来是个安底范,那安底范有那个categoror name属性吗?没有没有,是不是就报错了?就这能不能想通?就是你这块不能直接这么返回,为什么你你琢磨琢磨,就比如说比如说。比如。state.good音否,它初始的状态是初始的状态,哎,初始状态是啥?是一个空对象。对不对,那你空对象的有这个属性吗?你没有啊,你没有他得到啥,得到是不是安底饭。
16:07
空对象的这个属性值。是不是案底,是不是案底法?给个回音儿。你看吧,就假如服务器的数据还没回来呢,那你它的处值是空立空对象的开的不是,那不就按体饭吗。那你这块是要案底饭,相当于这个这玩意反问的是是案底饭,那你回到组件这,那你这里拿到的是不案底范,你按底饭你打点name,那它不就有警告了。就这个能不能想通。给个回音儿能想通,扣个六能不能想通?为什么你现在这么写,他有这个假报错,你得想明白。这能不能想通,比如说你看嘛。他初始是个空对象,你空对象打点他,那不就是案底饭?
17:02
那如果说服务器数据回来了没问题,它返回的是一个对象。对吧?那假如服务气没数回来,那不是安底饭,那你在这儿好,你唠叨个安底饭。你捞叨个安底饭,你安底饭打点开的内,那不就给你报警告报错了,安底饭哪有这个属性啊。所以它底下是不是报了一个假报错,但是当服务器数据一回来的时候,好,那这块就进行替换了。对吧,因为服务器的数据回来之后,你真的能捞到那个对象,真的有这个属性,但是前提是啥前提最开始是不是没有的时候,你不能这么写。所以说这块你你不能一杆子打死,就是至少你得让他是个对象,因为对象他至少你打点来的时候,他顶多是案底犯,他不会报错,那如果你返回是案底犯,那一定会报错的。说这块老师给他来个霍,霍个啥,就至少给人返回是个空对象。那也就是说你在这儿。至少就这个东西,就这个计算出来的这个这个这个这个东西这个东西它至少是个对象,你对象打点可不可以,可以至少是个案底范。
18:09
对不,那总比它是安底范小,如果是安底范的打点,我问你是不是就报错。就这能不能懂。你看这回是不是就没了?能不能懂,能懂给老师扣一个六。这个能不能懂,能懂扣个六。比如说,你至少得让他是一个对象,你不能让他是谁,是安比发。OK,不,那个如果是一个空对象,他至少说是他打点没有按点,按底盘是不是就隐藏了,当服务器的数据一回来好有了,我是不是就展示了。所以说你这块它至少你得写个货,为啥你就想这块如果是按底发你看嘛。对象打点它,假如是案底完,是不是for,是不是取后者,至少返回是不是空对象,那如果说你服务器的数据有了,你返回是一个对象,是不是真是不是就返回它。对不就这能不能倒。
19:00
能懂吧,所以这块一定要去记这个骚操作,当然邵老师我不写这行不行,行为啥它不影响你的程序,是一个假报错,但是你看见红色你不敏感吗?反正我是比较敏感。因为程序员看见红色它都是比较敏感的,所以说这块你给他加上。对不,那也就是说这块写成代码的好处就是咱们当前计算出来的。出来的。这个属性的属性值。这个属性的属性值。它至少是一个空对象对吧,那咱们那个甲的报错。就不会有了。OK吧,那当然说老师我不加这个货行不行,行,我也说了行,但是他有红有红就看着比较恶心了,而且你也得知道,你也得知道知道啥这个错他是怎么来的。OK不OK吧,好嘞,就是它。那以及咱们再来,你看啊,接着来。你看吧,现在咱们是不是就没有几个警告。
20:02
对吧,所以说一定要知道这几个它怎么来的,怎么解决对吧,当然说你要有猴在底下,它不影响你程序对吧。那以及咱们再搞搞看这啊来再来。就是产品的这块的主要的信息,老师也想展示出来,你看这儿,你看这儿。就是谁呢,老师把这个数据给你看一下,就这的。就是detail t下good info就是哪,就是这个SKU info。刚刚老师也说了,SKU info,它存储的是啥?它存储的是这个产品的主要的信息。哪儿呢,就是咱的这个组件当中这块的区域的数据。和这个,呃,放大镜和底下这个小图片的数据都是来自于它。但还是那句话。你如果在组件当中捞数据的时候,是不是还得stay.detail.good info点它完了,利用它里面的东西完了,你还得点点点点点点点点,是不是还是很麻烦?
21:00
所以咱们也是一样,提前先把它计算好。对不,那所以说咱们这也给他来一个计算来看,这回到这。这块咱一个叫SKU阴风。对不,那咱也给他来一个state,那这块咱怎么。怎么?你是不是应该是state点。Good info看一下就啥呢?state.good info下的SQ info。老师问,你这么写的对吗?老师,你这么写他对吗?诶,对不对不对吧,你看还是同样的道理吗。如果说你state.good info处值是个空对象,空对象当然它是不是还是按你发它不是一个对象,因为你看它右侧是不是至少是一个对象。看这是不是一个对象。对吧,所以这块也是同样的套路,你的价长加一个或或展或空对象。还得找一个兜底的,你至少不能让他得到是个案底范,你不加,这他是不是有可能得到是个案底范?
22:06
这个对象的身上它没有这个属性,那是不是按底范,所以说咱至少按点范释放,你取后者,我至少也让它是个空制线,就这能理解。就这个套路能不能理解,能理解吧,孙老师,你为什么写对象,你不写数组,你也看到了,他这块是个啥,是个对象,它不是数组。对不这不,我们这个他们是个对象。OK,不,那所以说回到回到这,那咱们也得捞一下产品的气息,对不,那咱们叫什么叫做SKU,叫啥玩意忘了。SKU因不就他吗?咱直接给它捞过来。对不CTRLC,那这个老师也给他放过来,就是CTRLV就他。对不,那咱们先看一下的。刚刚产品这个信息的数据,咱们在组建当中能不能拿到一点点测试,千万别着急。
23:00
看这拿不到吧,诶这是为啥。看一下切一下是不是卡了没有,所以说没拿到,没拿到是不是写错了,看一下子叫state.good info.sq info是大小写的问题吧,看一下子应该是大小写的问题。嗯,找一下。SKU没问题啊。对不,我给它拉过来啊,看这样SKU info没问题,他他他他大写我这单词没写错,我再给它换一下SQ info。那这块单词没错,那应该是这块单词错了吧,SKU info。啊,多了个空格,对不,前面多了个空格,刚刚是不是多了个空格,看这对吧,好了,那这回咱们看一下组件的身上能不能捞到看一下。找咱们的组件啊,组件是看能不能捞到,是能捞到。那咱们就把产品的一些信息你给他展示出来呗,举个例子,比如这个产品的名字是啥?那咱们看下应该叫啥,叫SKU info下的。
24:08
产品的名字应该叫SQ name。这不产品的名字吗?对吧,那所以说你在这儿。你得把产品的名字替换,再找一下子,不是放大镜,这是放大镜,放大镜这不在左边吗?应该是这面对不右侧这面,你看这那这块是不是就是产品的名字。看这嘛,什么什么什么IPHONE6S这吗。什么苹果6S,这不静态的吗?是不是得给他替换,替换成谁就是SKU?音符点。一下叫SKU info.sku name对不a me你看嘛。咱们看一下,你看是不是这个产品的名字。对不?咱回首测试一下,就举个例子,现在老师买一个什么,买个888。啊,没数据是吧,这个有有容图片,就比如说买个明明可以靠颜值,这个你看吧,它这个产品的名字叫啥叫叫叫11,你看吧,是不是叫11。
25:05
对不没问题吧,你举个例子,咱回头再再搜索一下,比如买个明明,呃,换一个就是买谁的买这个你好你看吧,走。那这块是不是就是12345。对不,那以及还有什么,以及还有底下那个产品的详情,咱们也得要,对不,那还是得看是谁。他们应该是谁,是这个SKU,就是这个产品的详情。OK吧,那所以说咱们这块也给他展示一下子,就这就这。就这就底下这嘛。这块应该啥,这块应该是SKU info.sku那看一下子有没有刷新看一下啊。刷新看一下有没有。是不是就有。对不,那以及还有什么,还有价格,价格这块数据也是有的。OK吧,价格这里也是有的,咱们找一下应该是谁,应该叫price,咱们找一下啊,找一下组件。
26:03
咱们看应该叫SKU info下的这个,这不699吗。对不,那所以说咱们把价格也替换一下,在哪呢?价格是不是在这儿呢,对不。那所以这时他搞谁叫做SKU info.price。那当然剩下其余的你看就没数据了,说老师看这样,说老师咱刷新你看这说底下这这不有什么什么促销,什么加价什么这玩意服务器没有给咱反馈数据了。那都是假的数据了,没数据了。就这块儿是假的数据。OK吗?以及什么支持以旧换新,这都是假数据,没数据了,就这几条数据。他什么配送至广东省深圳市宝安区,这都是假的,数据没了。OK吗?所以说咱们把产品的这个名字详情和价格给它进行替换了,但是咱们回头再测试一下对不对。对吧,后来老师可能这个有的数据他对不上,就比如说这个。
27:00
走。对不对。没问题吧,咱再回头再看一下子啊,走,再看一下子走。是不是也没问题?可以到这没问题吧。老师问一下就到这有没有问题,没问题吧。所以说这不就是咱们产品展示信息这。OK吧,好嘞,老师也听一下。
我来说两句