00:00
好,搜索会议以后呢,后面还有一些功能,什么功能呢,我把这个调回去啊,所以看一个看着太不舒服了啊,三个吧。来。后面还有两个功能,我们今天要做一个是这个功能。就切换它的状态,对商品进行下架或者上架的操作啊,我来操作一下,大家看一下。大家注意观察啊,我把这个刷新一下。来,走你。能看到吧,这状态更新了吧,嗯,这个其实并不难,这个不算特别难啊,这是这是一个还有一个。修改的和添加的我们下次再做,嗯,还有一个详情,这是一个单独的路由组件吧。能听到吧,来,我们来做一下它。
01:02
做一下这个,那这个其实也没多大难度啊,我们来去写一下它,看看能不能写,先找到我们的这个组件叫什么来着,嗯,Detail叫他呗,是吧,我们当前啊,什么见面都没有。我估计我还点不过去。是吧,嗯,因为我现在还没有去加实验。是吧,嗯。那好了,那我们现在呢,先把这个静态页面先写一写。把这个页面先写一写,就是当前这个页面,它显示的是不是当前我点击选中的那个商品的一些信息啊。嗯,来看一下在这个里面呢,啊,我们来去把这个组件,先说一下这个组件里面用到了哪些。
02:01
D的组件可以吧的组件。来说一下,首先整体还是谁?还是color呗。没什么好说的是吧,整体依然还是个什么没是吧,上面这个东西是个什么呢?I胖指向左的icon是吧。好,下面这个大家注意这个地方用的是一个就是列表吗。啊,历史的列表来看一下,这个咱们用过是吧,大家还没用过历史的很简单的东西啊,这个就比较简单了。列表有点像UI的那种啊,历史的显示一个列表。那展现一个展现个列表,其实写起来是无比简单的事情,大家看一下,就历史的理念啊,去写一个,写一些,呃,标签结构,它好像里面应该是有item可以去。
03:11
写的。还有item吗?我们来看一下。就看他吧。看那个它的东西相关东西,这不是list吗?这某个list里面可以插很多属性是不是,嗯,这里面好像。有吗?有item吧,有有,那我们就要去用一下它的这个list和item,就去写一下就行,这个没多大难度啊。那那我可以这样把他的item给他,什么是取出来,后面再用的时候是不是就方便一点。这能听到吧,来啊好来啊,下面我们来去写一写啊写一写好整个是一个什么东西,他来写过是吧?好看的是不是有一个左侧头部的标题。
04:15
啊,抬头咱都写了几遍了啊,在这个地方需要定义一个什么抬头好,整体结构是什么样子的,我们来看一下。应该是有一个失败,有一个icon,再有一个失败,是不是就够了。对啊,好,我们来写一写,那整体来一个什么SPA,接着再来一个什么icon icon是不是应该有一个什么type,我们是不是写过向右的箭头叫A。而我们现在什么?这是商品详情吗?
05:02
看了吧,好,那下是什么?下面整个是一个历史列表。整个是一个历史的,而里面每一个都是一个什么呢?Item和item,它是不是分为两个部分写的?听空了吧,那这个地方我们就来一个。吃饭可以吧,可以吧,右边如果是他的话,是不是也可以来个失败。只是到时候两者要区分开来是吧?再来个18。可以吧,好,这个所有的这个左侧的这个标题是不是都共同有一个特定的样子,那我就给他们都加一个什么class,比如说等行不。那我整体先给他整体定一个类名。
06:00
嗯,名字就叫detail呗。或者叫写详细点叫product的钢可以吧?啊啊,等会我们再去样啥,等会再写样式,那后面的跟这个什么差差不多啊类似的。来一个个来,再来一个,嗯,下一个呢,是商品描述拿过来,我们先写固定的啊,先写固定的,接着再来一个。我们写两个再去看啊,写两个就可以看了,写两个就可以稍微看一看了来。有些什么问题啊,重点的问题是不是就是我的这个这个SPA它的字体大小。以及跟右边是不是有一点距离,那这个怎么做?这个应该好做吧,需要去定一个自己的什么样式来,我所有产品相关的样式都定义在一个里面好了。
07:06
好啦,这个地方我要定一个Les文件。就叫product.nice注意啊,我是在product里面给它引入,那这样的话,它的所有组件是不是都能看得见?能不能看到啊,我是在product里面去引入的这个样式,但是因为我们后面写这不它的子路由吗,现在它的子子标签了。所以我们写在这里面是完全没问题的啊,是可以控制,说白了这是个父组件,这是个子组件。我们在父组件定义样式我的子间是可以看见的。可以去影响到之间的一个样式效果了,听懂不好,那我们去控制谁了点,我们刚才写的那个类名叫什么来着。
08:01
是不是叫product detail是吧?接着它里面的什么那名ne的类名是吧来字体有点小。整一个20,再整一个来说,再一个它这个字是不是是细细的给他搞个什么wait。嗯,卡住了啊,等于Bo是吧,还有跟右边是不是有一点距离。嗯,来一个马。Right,整一个15或者十都行是吧。把这个写在上面,OK吧。OK,你们来看一下呗,不看你怎么知道嘞。怎么看到啊,当然你要觉得啊,太大了或者怎么着的,那你再慢慢的可以调是吧,但右边的字是不是也可以调的啊,也可以调的,主要说这个事啊,啊好,那这个右边呢,我们暂时就不调了啊,下面是不是继续写其他的,下面这个价格以及啊分类列表就特别好整了。
09:13
先来一下我们的这个价格。嗯,这个组件啊。再来个X不就得了吗?把这个去掉,把这个搞进来,把这个拿过来,把它塞进去。咱现在咱都写的静态的。好,再来一个。后面的稍微有点小白花一点,这个这一个了,他是一个所属分类啊,所属分类我们来看一下。所属分类。先写着啊好,还有一个图片,哎,后面是不是需要一些图片呢?啊,需要一些图片。
10:09
来改。商品图片,这个商品图片应该有可能是不是有多个呀。有可能有多个,那我这个地方得包多个image吧,那我先写两个写行吗?啊先写一个,后面再再复制都行,好来我这里面要产生多个一卖的话,那我这边需要src是吧。那我能不能直接用这张图片去处理了?应该也是可以的吧,也就是说这里面哪个图片是吧。那每张图片大家看一下啊,我这里面再换一个别的。图片。两张图片,当然这个图片肯定要用一点样式来控制,不然的话不可能显示那么好。
11:11
你看现在写成这个样子了。实际上要指定它的什么宽高,一些样式相关的东西对不对,所以没什么难度啊。在吗?好,那这个我就写一个,写一个img吧,来一个二,好,来这里面来一个style。当然你可以在这里面是不是给他里面所有图片来去指定样式去写在这个里面是不是也可以。是不能听到吧,啊,写在这里面也肯定是没有问题的,因为我就这里面有些这样的图片,当然也是没有问题的啊,当然这个地方啊,这个地方我要最好是给他们,嗯,整一些类名吧,免得。
12:04
嗯,这个class name等于什么呢?取个名字,嗯,就是img OK吧。来看一下啊,首先宽度啊,是不是指定宽高啊呃,这个指定多大合适,我大概先指定一个好吧,比如说80个像素先指定一个宽高啊。啊,那这个样式就不用指定了。搞两张相同的面再说。是不是有点太小了是吧?嗯,这个大概应该有个200看一下啊。这个实际上是没什么难度的。
13:06
差不多是吧,当然还可以给他搞点边框,是不是搞点边框好。搞一下来个什么。说吧,呃,来一个像素,接着什么Sony的,再来一个,呃,来一个,来一个灰色的就来它吧。稍微你要还搞的话,可以来他们搞点。这个距离啊,啊,这都可以。比如说marin。这个啊,十个。可以吧,可以啊,没有什么太大问题,OK,好,就是这个啊,这个稍微稍微大一点,搞个搞个吧。
14:05
好,这是这一个没什么太大问题,下一个。下一个是个什么呢?下一个是商品详情,这个地方这个比较特别。回到我们的这个detail。再来一下。那是商品详情,这个特别在哪呢?这个得说一说,先看一下数据,大家看一下数据就知道了。是显示的这个数据。这是个什么数据啊?不知道怎么判断是一个标签网页数据。能听懂吧,这是啊,一个标签结构的数据,我需要能动态表达什么呢?展现出来,听懂了吧?我需要在这个地方动态给它展现出来,那这个该怎么做了?
15:04
这个啊,得用到。来说一下啊。得用到我们react,它本身提供的一个很重要的属性。那我要找到react。嗯,找到好啦,去看一下他的,诶其实搜索一下就行啊,那个属性,那个属性名叫什么名字了,我看一下啊,好像是叫以开的什么dangerous。叫什么名字,我都忘了那名字了,看一下啊。搜一下。哎。
16:00
看一下。来,就这一个。这个属性特别特别长是吧,非常的长,确实的长,它用来干嘛呢?说一下吧,啊说一下你就懂了,这个里面啊,这个里面这个属性呢,它需要这么用,我用一下大家就懂了。所以说在这没用来看好了,我给他指定这个属性这个值呢。需要是个对象,而这个对象必须要有一个特别的属性,叫什么呢?下划线,下划线,HTM。那你吧,比如说我来搞一个看好了,我就随便写个串好吧,写个简单的串,比如说我来个屁。那这个来个H1吧,大一点这样好一点是吧,看着比较明显。
17:03
这清楚吧,啊,这是商品详情的内容标题吧,OK不OK,好,现在我们就来去看一下,看看现在会不会显示为一个啊,把它解析成一个H标签格式,一个网页的格式。哎,这里面问题在于一已经被重置了,主要是。他现在已经显示,大家看一下就知道,嗯,我们可以给他比如说再加点东西。啊,加一个颜色吧。啊,等于啊,比如说color,为什么呢,Red。这可以吧啊,就看他有没有把它当成网页的标签字符串去解析。
18:00
有没有,是不是有啊,嗯。看下吧。这是这一个。嗯,这个属性有点像哪个用到了,它相当于内部相当于用到谁了了HT。能听到吧,HTM。能去给他塞一个内容吗?啊,这是这个,那基本的结构就差不多了,这就我们啊整个。详情界面的一个基本结构啊。
我来说两句