00:00
好,那下面我们就要去说了,我们最终是不是要根据我点击的,大家看啊。啊,我回到我们这里来,根据我点击的这个,诶,我点点不过去是吧,我点它吧。我点的哪一个,它是不是显示了一个。能听懂不,那这个时候就涉及到我要将我点击选中的那一个。商品对象是传递给我的路由组件。听懂了吧,好,先说怎么跳过来吧,跳过来这个事情简单看好了,我们这个地方,回到我们的后症呢,我们是有一个详情的。一个部分来看一下。详情详情写在哪儿的?写在这里。对吧,那我是不是要给他去加点击监听,这个没问题吧,在点击监听的回调函数里面干嘛去。
01:08
是不是跳转路由,要进行跳转路由,这个时候怎么跳。这叫编程式路由导航。接着了history吧,我这个能去读history吗?能不能?我是一个什么主意,我是不是主。是还是不是,是不是不清楚,是不是由主页是吧?啊是路由组件,那既然是路由组件,那我是不是就可以去访问到history。对吧,那后面点不许还点不许合适,许完全合,因为他也回。
02:00
他会向左的箭头回到上一个界面吗?能听到不?那好了,接着我请求的是不是我们的详情的。这一个路径。这个懂不懂?能懂吗?能懂啊好,那能懂之后,那也就是说现在应该说实现的一个效果,什么效果呢?我一点击就会跳过来。对吧,我还可以回退是不是。当然应该是点它来回退是吧,是吧,而且把这个界面是不是稍微的处理一把稍微的处理一下,来稍微的处理一下。嗯,找到我们的detail。找到我们的回退。他们。来家里样式让它颜色变为绿色,是不是时代?
03:03
卡了,为什么?绿色green啊,我们是不是有一个这里面没法提示啊,就写个直接写一个green吧,嗯,大家写一个好,还有跟那个右边稍微有点距离是吧,加个什么mark。Right吧,八来一个,呃,15差不多是吧。能看到吧,你还可以把他的他稍微变大一点都可以啊,稍微稍微变大一点啊,就是放size,它可以支持放size对不对啊,放A那这个得大写是吧?啊比如说20啊,是不是有点太大呀。差不多是吧,能吧,还可以把他边小手之类的对不对,那吧,能,那实际上这样搞的话,是不是可以用另个巴掌给他包护起来。
04:06
能听我说的意思不就是这不宁可吗?是吧,那宁可把接着就是把这个icon写成什么。宁八的里面,当然宁八对什么引入这都是小case吧,诶,不能写的热,写得写的热是吧?写东西看着好像很简单,你得一点点的写,还是要花点功夫的,点点斜杠,点点斜杠,看下面的link button。那这些,嗯,这个green就不用写了吧。能理解吧,啊好。这个稍微的有点大。
05:00
啊。来下面呢,我们是不是要去点它返回到左侧,这个很简单的,其实。来昂克等于来个回调函数啊,这个有点长了。把它换到一行里面去写是吧。这样看着舒服一点来,下面我们应该写this prop history go back。能听楚吧,好,那就说我点他。这会回来,这没问题吧,没问题是可以做的好,现在问题是什么呢?问题是一个问题,我要问大家,我点详情在这个界面是不是要显示我对应的product,也就是哪个product,大家看好了。
06:00
就是我们在home里面,在这个里面点的是不是就它。我是不是要想办法将这个数据带到我的目标路由过去,这个怎么带过去呢?来这个地方。啊,它有自路由里面本身其实就有办法这个所以说啊来。我们说这个地方以前说过有一个有一些属性和东西相关的东西来。看了啊,嗯,这里面我们在push replace的时候有一个有一个东西有一个概念叫什么呢?大家看一下,我们在push或repeat的时候,除了指定pass,还可以指定一个什么,对,可以指定一个状态对象,而这个状态对象会从我当前组件传递给什么目标组件。
07:04
这能听到吧。你看我试一下。试一下大家就能能懂啊,这东西没太看看,这不复习吗?对吧啊,我就把破大给他查一下可以吧。这是我传两个参数吧,我整现在我要问大家一个问题。我现在一点。过来啊,先过来再说,诶,过去接着我点他吧。点它我刚才传的第二个参数吧,那我怎么知道这个组件里面怎么去取呢。对,还是要看工具,因为我的组件里能得数据,我的工具都能看见是不是来工具,接着看每个组件里面的东西。组件是不是打开它。现在他是不是接触了这么三个属性。
08:03
这里面就有一个东西。叫什么是这刚才我是不是传过来第二个参数,其实这一个就是谁啊,它的这个值现在。不就是那个对象吗?能听懂不也就是说此时我是不是将嗯这一个product的对象。作为传递给目标路由组件是吧,那我的目标路由组件里面怎么取了。那是不是很简单了,现在啊读取啊,携带过来的是不是状态数据啊,啊state数据,那这里面怎么写的,This点是点,点哪个属性,Location点什么,这一个已经就是我的那个产品对象了吧,对吗?当然也有可能会这么写。
09:24
怎么写了?他不是传过来产品对象,而是传一个这样的一个东西。那你说我这样这个时候写对了吗。我这么写对了吗?没有。呃,是要干嘛呀,解构或者直接去取是不是也行。你一定要对应,至至于你包包对象,那是你的事,听懂吧,你外层是不是用对象包裹还是不用对象包裹,你自由选择是不是?因为我们的state,我们有概念,State不是一个包含数据的对象啊,我们要传递的是product数据吧,那我应该传递的时候是不是?
10:06
应该用一个对象保的数据给包出来。这个是不是称为state?而这个product state里面什么数据属性?能听到吧,那这个时候我们就好做了吧。你想现在有product了,下面的任务是不是就把这把product里面的一些数据给了什么?是不是显示出来就OK,嗯。我product里面不有一些数据吗?你看咱product里面这么多一些数据,不一个个显示吗?Name d price这些是不是都要显示,那这个时候我们为了方便显示,其实我可以这么做,看好了,那这个时候对吗?不对,那我要解构出来是什么呢?Name DC,还有什么price。
11:08
因为这些我们都需要的嘛,啊这个啊,等会也需要啊,等会去做,我们把那个简单的先搞了这个是吧。能看到吧,能看懂,那我现在的商面这个写法就很简单了吗?这一个商品名称显示为什么内幕,这个商品描述显示为什么de是吧,这个价格我显示为什么price,是不是有点简单。最难最难的要来了所属分类,这个难在哪呢?我们商品里面把。记住,我们商品里面只有两个ID,两个特别的分类ID,一个是当前分类ID和分类ID。我们现在显示的是分类ID吗?不行,我们显示分类ID看不懂,是不是,我们是根据分类ID去查询它的分类对象里面的分类的名称来显示。
12:11
这里面是不是要另外发请求去才行,能听懂不?这个要额外发请求来获取什么分类的名称,不过我们这个先不说啊,先把简单的先做了好吧。嗯,怎么报错了,看一下啊,在写的过程中走一走。来试一下啊,点击详情是不是显示一下,有没有看懂,来好,还有一些数据没有显示,年轻人,这个我们等会再做,这个稍微来一点,下面两个比较简单一些。还有什么数据啊,有啊,还有一个不有一个图片的数组,Img是吗?S。
13:03
这个相对来说好做detail已经比较简单了,直接给他什么。塞在这里就行,能看到吧,这是这个标签格式的字符串,好,下面图片我得干嘛去?我得给你一把。能听到吧,我手里面是有图片的数组,那我应该怎么做img点麦好吧,这每一个是不是都是img,那每一个是不是都要返回的,显示的是个对应的image。这能听懂吧?每一个S是不是都是对应的一麦美女吧?看不懂啊,就是每一个里面都必须要有K啊他们。每一个编辑里面不都要有个K的吧?
14:01
这又忘了啊,这个那个不就是一个图片地址吗?图片地址他们是不相同的吧。那不更好吗?就不用代词了,是不是?OK不OK,好,那OK之后我们就来先看一看我们现在的这个动态效果是不是可以的。嗯,应该是我们这个图片地址不对吧,看一下。是不是这样一个例子,这你显示它肯定显示不出来了,说白了它前面得有个什么基础地址。是不是,那它的技术基是多少呢?这个得看一下我们最终的项目是不是把这个讲完啊,这个写完了。这个地方来打开看一下啊,我们图片在这个名称之前,是不是有一个这个地址。能懂吧,那这个是一个固定的地址,我们应该把它添加到我的这一个常量的这个里面去。
15:15
啊img啊,Ul等于这个值,注意啊,有个斜杠,因为我们的这个M有斜杠吗?没有,所以他最后是不是加斜杠。好,那此时我这个事情就简单了吧,怎么做,先得引入是不引入,引入一个它from点点斜杠,点点斜杠U,诶多了一层u to是下面的。嗯,哦,还有一个。可以吗?可以,那我这样的话,我在写的时候应该怎么做呀,拼个串是不是,诶对对了,嗯,好来。
16:10
看一下。有没有了,有了吧,嗯,这样就有了,这样就能够去显示我的这张图片呢,显示我的商品详情了,那我回退一下,那我去整另外一个看看,诶刚才就整的这个是吧,换一个。有没有变化,有。这说明是OK的。唯一欠缺的是不是这一。这怎么,呃,我们写的固定的,是不是写的固定的他没有动,这明显现在不是电脑笔记本。嗯,好行。这个其实难度不大。
我来说两句