00:00
好,那下面那就一个一个做呀,是吧,一个做首先肯定要去做我们的什么。Home。那我们先把这个静态布局给他搞出来,这个其实就没什么难度了,跟我们前面是很像啊。啊来,首先我们要说。要做这个静态界面需要用到哪些安D的组件呢?有按D就说不用写布局是吧。首先最外层用的什么,还记得cut没问题是吧?Cut是不是有title吧,这个title里面有第一个这什么select下列表吗?啊,我这边没有用form啊,记住注意当然也可以用form,我这里面因为前面我们一直是不是用form来搞数据啊,咱看看不用form搞其实也可以忍。能听到吧,啊也是可以整的,咱每种模式都测试,都处理一下。
01:01
啊好,那select里面是不是有option呢?把那option也给它取出来得了,到时候写的时候方便一点,等于select点什么线没问题,这是一个input input的右边是不是一个button,来一个input,来一个button OK吧,Button的左边,这里面有个什么,来看再来看它整过是不是。没问题,好继续往下,下面整个是什么。没事吧,没问题,那这个里面也有一些按钮,这里没什么了,没有什么特别的主见了,是吧,OK了吧,OK好,那下面没什么说的整体。这个什么,那就来一个什么卡。是吧,而卡的里面嗯,有两个属性,当然这个东西你很有可能备不住,这是没关系的啊,没关没有任何关系,还有一个叫额外信息X啊,这额外信息啊是显示在右侧的,一个显示在左侧,一个显示右侧,都在头部是吧。
02:20
那我是不是要提前把他们俩定义好啊?这个结构有点复杂啊,实际上是由三部分组成吧,能看到吧,好,我先写个,因为它水没了,我就写个失败吧,写着放着啊,等会再往里面写东西,把这个也拎一下。嗯。这个也是一个结构啊,这整个是一个什么吧台啊,我先把整体写一下再说啊,里面等会再一点一点写啊。
03:01
这没什么难度的,咱就整过啊,好,先来一个。什么?是不是下来方select呀,那就来一个什么select可以不,而select里面有几个OPTION2个,那每一个O这第一个是按名称搜索,第二个option是按什么描述搜索来,那我来写点论文。一个是按名称搜索,还一个是按描述搜索。听懂吧,那每一个option肯定都有一个什么value吧,嗯,当然我这里面现在我不知道值怎么写,我就随便写一个,一个写一个写二行吗。这个肯定最后不对啊,先写一个这个意思。能看到好,接着有什么,是不是一个input,还有一个是吧,大家来一个input。
04:05
嗯,OK,来自闭合就行,接着应该是它默认就是text类型吧,是不是有一个提示文本叫place hold的等于什么呢?嗯,关键字就输入一个关键字啊,嗯。关键字好来继续后面一个什么button button的type绿色的嘛,所以说是是不是这里面叫什么搜索。能看到吧,好,先把这个看好,再写右边的一点做可以吧。可以来看一下。这个没有指定什么问题,没有,他一个是啊,现在是宽度有问题,还有一个就是默认是没有选中某一个呀,默认应该最好是选中,比如说按名称搜索可以吧,那我的这个来的值应该是什么。
05:17
应该是一跟它匹配,听懂了不,那这样的话是不是就选中了那个按名称搜索,大家看一下。能听到吧,当然你要觉得这个,呃,这个稍微有点紧,那你可以指定它的什么样式宽度,听懂了不。是可以指定的,指定的什么Y的,比如说等于150,我先试一下啊。能听懂意思吧,当然你要觉得一百五块的是不是可以定的少一点。能不能听懂来好了,下一个是那个音铺的有点什么太宽了,而且跟左边右边是不是还得点几,那这个时候我们就给这个什么它指定style呗。
06:10
指定他的什么宽度啊,宽度呃200。差不多吧。啊,一百五吧,一百五的了,来接着我们两边是不是有一点距离,要来一点,什么是马in,这个时候啊,左右两边是不是都有,所以这个是等于字差了上下是不是没有左右两边,假设十。这个时候就得写算数了,如果写数值可以省略,如果写字符串的话是不能省略的,听懂吗?好,看一下。这个能看到啊,应该是可以的啊好,那这样的话,我们左边写好了,下面是不是写右边手easy的事情来也一样,是什么primary,这里面有一个添加商品对吧?添加商品,在添加商品的左边有一个什么东西。
07:15
是不是有个icon啊,Icon的type,我们那个添加太是不是写过来的啊,好像叫plus,这个名字还好记是吧。好,来看一下。OK吧,OK,好,那OK之后下面一个事情,我们是不是要去写我内部的那个黑表格。那table表格这这也来得及啊。里面要传很多属性是吧。那没关系啊,这一次我们就看文档来整一整,这个时候我们先要去找到什么。
08:00
阿。嗯,谁说呀,是吧。这个。来,嗯,需要去搜索到我们的C是吧,找到我们的C。来,根据table的文档我们去写,当然也可以去看看例子,这两个是不是都需要的人呢?这些都需要的,到时候我们可以去去整,比如说我们可以把这个复制过来。啊,另另外的一些属性,我们再去慢慢的去整啊,这个地方来做的是一个准备工作。嗯,我把这个怎么放上啊。先准备着,接着啊,需要去写一个table的标签,这里面就是只有两个必要的属性。
09:08
啊,一个是data source,也就是那个数据数组,再一个是列的一个描述数组。这能听懂吧,好,这个数据实际上要是我们的什么。应该是我们那个商品的数组吧,而商品的数组肯定是啊,我们date里面的一个,就是我们的组件的一个什么什么状态吧,咱写过,咱这次就稍微直接一点啊。我们现在是不是肯定要有一个products商品的数组,开始是个什么空数组,这是啊,商品的速度。叫什么星座啊好,那这个就不需要了,把它给它什么呢,干掉。而这个时候我们是不是要取到在里面取出。
10:03
状态里面数据来进行显示对不对。状态数据啊,我们当前就一个写了product等于什么this点嗯,Z点贝塔就行了,是不是,那我的这一边这一个定数是指向的就是谁。Products。能听到不能听到,等会我们会往里面塞一些数据啊好,是不是还有一个列的数组。是吧,这个列的数组我们说过,也没有必要在这里写吧,嗯。我们是不是需要在哪里进行初始化呀,是不是叫什么mark里面去做,咱写过啊,咱这次就稍微直接一些,当我也不是直接在这里做,我们是不是写一个in column方法。
11:07
嗯,是吧。这能听懂吧,那我们是不是在这个里面单独定一个方法。我们自定义方法这个函数。啊,这是用来干嘛的,初始化谁的初始化啊,Table你这表格的。镍的速度对不对,镍的速度。他是不是好一些力啊啊来把这一些代码。拿过来吧。能不听懂拿过来以后来说一下,这个地方得存到哪里去,This里面去是不是啊,先别看啊,里面这一边我们应该怎么写啊,Z边看到没了吧。
12:13
好,接着下面写哪些列,是不是就得看?我的这个最终的效果是吧,也还挺多的是吧,第一个是什么商品名称来,那我就应该写商品名称对应的是哪个属性呢?这个时候得看一下接口文档。我们接口里面得找出一个接口啊,什么接口呢,去获取。啊,商品列表的,当然这是获取非列表,这个时候其实我们最终要做一个。基于后台的分页。当然我们还没有去仔细的去讲是吧,先不用管分页的事情。先看看数据结构,这里有一个list,就是我们的商品的一个数组。
13:06
啊,来看好了。这个地方每一个对象就是一个什么呢?商品信息的一个对象,对吧,那我们需要显示的商品名称是它的什么属性name,诶这个地方看好了。我复制一个,诶这刚好就两个是吧,这样啊,我就复制两个吧,放在哪个里面呢。放在这个里面得了。到时候我们是不是就可以显示,这能听懂我说的意思,不啊,这到因为我们还没发请求,还没有写接口性函数,先搞两个数据再说呗,好,这个时候我们就显示的是什么name的值。没问题是吧,这个不需要。啊,那这个不需要的话,就说明一个事情,我们这里面得指定K是谁。是吧,是我们那个数据对象的是不是下划线ID的值,这个怎么指定呢。
14:06
得去看文档是不是?好像是一个类似的什么啊,我大概有个印象叫RO还叫什么。能不能懂,当然你可以一点点找RK,而K指定的是谁,下划线什么ID,也就将数据对象的下划线ID是不是做每一列的K。这个时候你就不用指定K了。好,来看好了。下一个是什么,注意观察。商品什么描述?哎。我说复制多了商品描述来一下啊。好,没问题,接着对应的属性是。
15:04
De,什么SC?没问题是吧,那就会显示对应的数据,好继续。下面是什么?价格好,这个价格就稍微麻烦一点。对应的是哪个属性,我们看有没有对应的属性啊。应该有,按数来说应该有什么price,这是这个价格的数值,但是现在就有一个问题了。有一个什么问题呢,这个价格本身它的值是个数字啊,我显示的时候是不是在左边加一个人民币的符号啊,这咋办呢?这个时候他肯定不会给你自动给你写上那个左侧加币的,能听到不,这时候得用。另外一个方法咱用过。
16:00
Render,我们说render用来干嘛的,是不是指定我要显示界面的呀?好来看好了,我写一下。这是一个回要函数,是不是来看好了这个地方以前还记不记得,我说这个里面介绍一个什么。接收一个数据对象吧,当前含的数据量,也就是如果当心起来是他对不当这一个说法的前提是我没有自定义data index。它就是当前行的数据对象,我现在是不是指定了我当前对应的字段是啊。那他传的就不是这个product。传的是什么呢?Price,你是不是很明确告诉他,你将来显示的是price的数据对不对?只是说你不是直接显示的值。而是要去看好了,这个时候你说怎么办呀?
17:00
不就加一个人民币的符号,在拼上这个什么price,也就我要显示的是不是这一个界面。这这个你能看到吧。这样不就拼上了这个人民币的符号吗?这个要注意啊,我这个当前指定了啊,对称形带指定了啊,字段属性指定了,对应的属性,属于传入的是对应的属性值。他你就明确告诉他了,你显示数据是跟它相关对吧,如果你不指定的,他就直接把这个值给你显示出来啊,这个要注意一下,好继续下面这一个是状态,哎,来把这一个拿一下。
18:07
来对应的是状态,那这个状态我们来看一下,这个得说一个事情,看一下数据结构,大家注意观察,先看下这个效果啊。大概有几种状态,一种是在售,一种是什么已下架。那我的数据是不是能标识出来,我当前这个商品是在售了还是已下架呀,听懂了不好,这个时候跟哪个数据有关系呢?看一下数据。Status。跟大家说一下,它一个是零,一个是一。能听到不啊,比如说我们啊用零来代表在售啊,看一下用来代表在售的,用一来代表在售,用零代表下架的话,我应该怎应该怎么做啊,后面是不是根据这个值来判断来做显示。
19:03
听懂了吧,这一个是啊,一共又有两个值啊,有两个值当文档里面按照来说应该要说明清楚啊,分别是几,谁代表代售,谁代表下家是吧?好,那也就是说我们要显示的这东西是不是跟那个status有关系。听懂了吧,当然我们这个写法先这么写的啊,听懂么?至少我现在这么看的,因为我们当前显示的东西不就是跟这个属性值有关系吗?是吧,好来下面。我应该怎么做?那下面我应该是写一个回调函数,传的就是我的这个状态的值吧。接着我返回的就没有这么简单了,这一个是不是有一个按钮,有一个文本。
20:02
是吧,那我这个时候啊,这个时候这个结构其实很复杂,我这样吧,自己写个一个标签结构啊,我外围呢,先包一个什么呢,石板可以吧,里面是一个什么。Button啊,Button是一个type啊primary好,那我先写一个啊好吧,我先写一个啊,写一个下架吧,我先写一个,因为咱现在写静态酒店嘛,有没要搞那么动态接在再来一个什么呢?失败啊办下架对应的是在售。呃,销售。这个看到吧,啊,这个按钮是说你点击这个按钮是不是进行下架的操作,而当前是一种在售的状态吧。
21:04
听到不啊,这个注意啊,这里下架什么意思是我当前在售,我点击按钮就会。去进行下架的操作啊,这要注意,我先写个静态的啊,就这么写着,到时候我们再去再去改啊,现在我也没用这个值啊,先不搞得那么动态。这没问题吧,没问题,好,继续最后一个。操作这个操作里面跟这个很类似,只是说他是不是需要两个什么。宁可是不是就可以来把这个复制一个呗。差不多。那这个呢,我不指定对一代,因为它是对我们整个。产品进行操作的,听懂了吧,这个时候啊,我们传统的是什么。对吧?返回的是个SPASPA里面放的什么东西?Link but是不是link button引动了吗?
22:10
应该是没有的。我需要干嘛去引入一下来引入一下它from点点斜杠,点点斜杠啊components下面的。Link button,够了。对吧,好,回到我们这里,这个第一个是什么呢?一个详情,一个什么修改。详情还一个是修改,哎,差不多了啊差不多。好,那这一个做的我感觉做的差不到,我们来就要来看一下,看看是一个什么样的情况啊。是已经显示了。但是没有缺点,缺好的东西啊,感觉。
23:03
是不是有几行没有,有几列没有显示,而且这个宽度是不是宽度,现在来看一下啊,这怎么地址啊,这不对啊,这刷新一下。就没有用我们的是不是啊,还有我们的那个边框是不是等一等边框用的什么属性呢?嗯,来好像是波的是吧,好这个不子,那我就直接写个属性名是就可以。看一下。差不多了对吧,这家说一个事情啊,这两个人的宽度是不是基本上是固定的,就这两两列的宽度对不?所以我可以给它们指定什么呢?啊宽度直接指定宽度就行,什么意思呢?这样意思看好了啊,找到我们的它。
24:02
所以它的那个宽度比较固定啊。可以指定一个什么呢。多少合适啊,比如说呃,指定一个100先看看。这两个宽度差不多,我就指定一下。啊,最终呢,我们显示的样子是不是都是这个这样怎么处理呢?能看到不啊都这么这么处理的,让他整成两行。当然你也可以不这么设计啊,OK了,OK好,那这样的话呢,我们的这个列表就显示了,而且它默认有分页效果,只是我们的数据不太多是不是。那也就是说现在为止我们的静态组件是不是就做完了,嗯,这跟我们前面做的也差不多。其实。啊,行。
我来说两句