00:00
好,我们就接着上来讲啊,下一个功能呢,是个人中心,这个比较简单。主要是展示用户相关的一些数据,以及这里面有一个干嘛呢。退出登录的一个功能,嗯。大概就是这样一个情况啊。好,我们来看下我们当前这一个前台应用,找到我们的个人中心的这个主机。这里面好像没改过来是吧,就这个名字,包括这里是吧,得改一下。把它改一下。我们看一下我们当前的。没。改吧,好,那下面呢,首先我们还是先要去把界面显示出来,嗯。
01:08
把界面显示在这里面啊,从今天开始我们写那个。写那个组件的事就写界面,这些事情呢,我就尽量少做一点了。其实这些事情我们已经做了好多了。这里面就有一个我已经写好的一个静态组件,我就直接把这个静态组件了。大拿过来啊,我们大家看一下。大家下就要自己写一写啊,这里面我就不再另要花时间去写了。来。我们来看一下啊。我先呢把它嗯写上去,写上去,我们来看一下我们最终的一个最终的一个效果。好,他这里报错,我们需要去把那个错误给他解决掉,我们看一下。好,这里面要说一个事啊,先别看报,先说一个,说一个问题,大家看一下。
02:02
当前我们要显示的这一个界面,需要有一个非常重要的东西。头像。对吧?而头像的图片现在保存在哪里了?还记得吧,就是我们有一个头部的一个什么选择器,是放到这个组件里面了。当时之所以放在这个主面,是不是因为他需要啊。那现在我们就面临一个问题,什么问题,我这一个组件是不是也需要?对吧,那这个时候也就是这个图片是两个这个组件,这两个组件是不是都需要的。那我放到这里合适吗?不太合适对不对,那我应该放哪去了?那就应该可以放到一个什么公共的位置。也就是说我可以把它。拖到这里。
03:00
这两个呢,这是我们所有头像的一些。图片,那这个地方呢,这个你就需要做一些修改了。这还对吗?不对了吧,那应该怎么找了,回退回退接着是。下面的image没问题吧?这是这一个,好,下面这一个。这个对吗?好像也不太对,对吧,这个。是什么images啊,这里面我就随便选了一张图片啊,因为我们现在这个静态组件。好,这里面呢,是它的一个,大家看看现在这个这个结构啊,现在出来了。啊,这里面用到的是一个组件啊,叫result,我们来看一下看一下啊。
04:04
嗯,就这样一个这种效果大家应该见过,就经常大家付款成功。是不是有个勾啊,下面是不是有些文本了,这个相当于主文本,这个相当于副文本,哎,这个不就是我们现在看到的这个结果吗。你们看到。啊,那我就用这个最上上面的这个文本来显示这个用户的姓名啊,User name用户名下面这个显示的是他是哪个公司的啊,就是他。这可能有职,也可能什么呢?没有,如果他是个老板就有,如果他是一个,他是个大神就应该没有啊,没关系啊。下面这里,下面这里有职位啊简介以及什么呢?薪资,包括这个薪资,也是这个薪资这一部分可能有,也可能什么呢?没有,如果你是个老板。
05:06
那个用户的类型是个老板他是有的,如果他不是那就应该没有啊,有就显示,没有就不显示呗,这个应该好做啊,好最后呢,有一个按钮啊,是红色的按钮。我点击这个按钮了,最后来确认一下进行什么。退出吧,啊进行退出好,现在呢,我们就写好了这个静态页面啊。顺便来看一下啊,它里面那个图片呢,用的是一个属性叫什么IG,看这名字就知道了,再叫title和什么呢?Message。这个下面是一个list list,大家看看这个list有一个很重要的东西叫什么?炫一个头发,这个咱做过啊,咱做过这样类似的就是这个。这相关信息啊,相关信息,而相关信息呢,嗯,里面呢,有一个item。
06:01
这个item a这是什么意思,大家觉得。啊,一个item默认它是单行的,一行能懂吧,而我现在显示的是什么。是不是多行啊,那要想多行怎么办呢?写在这个属于如果写的它相当于写了这个。这能不能啊,如果你的值是个处,那你就可以不写啊,就不写属性值,写个属性名就可以。啊,这个代表我这个item是多好啊,这个呢叫brief brief是个什么呢?啊,大家可以看一下这个单词的意思就大概能明白。简要摘要就是一个,说白了,简单来说就是一个小文本信息的显示。啊,就是我这个item的一个摘要,是它这里面的一个,大家看到item item里面有一个break。啊,这有一个层次关系,最外层是谁呢?List list里面有什么?Item item里面有break。
07:10
这样的一个结构,好,接着中间用一个啊,上下的一个隔开的一个空行,这下面啊,我也写了一个历史的list,里面有一个button,哎,八层类型是什么呢。窝警告。这个也是它里面有说明的,就是一个。红色字体看了吧。嗯。好,那大概我们的这个结构呢就写好了,但是我们这些数据现在都是写的死的。这个数据在哪里,现在。数据在哪里?或者说先说一下我们需要去获取一个什么数据。游者,嗯,很好,就是一个user,那user者在哪呢?
08:02
Redux里面,对呀,我就刚才问了,大家需要去知道啊,它是当前要获取的信息,是在redux里面的一个user。那也就是说我们现在我们当前这个组件是不是需要从redux里面取数据显示?对吧,对的,来许数据显示,那不就是需要写一些特别的代码吗。跟交互对吧。好,接着呢,我们暴露就不暴露这个UI组件了啊,我们来去暴露一个容器组件。啊,包装这个UI组件。接着我们这里面写一个state箭头,写一个小括号,写个大括号,我们现在要取的是谁了?得到一个优者,它的值从哪来呢?
09:06
是这么写的吗?点的是吧。没问题,那下面我在这一个组件里面,是不是就可以去读那个user相关的信息来显示,对吧,大家看到吗。This pro。有,那下面写什么呢?啊,大家要看我需要去取user里面的哪些信息,对不对啊,他的信息呢,有这么一些user类。怕是我没有是吧,怕是我的钱都没存,是不是有太呀,还有什么。啊,比如说呢,一个一个看呢,比如说这里面有一个hand的头像是吧,Hand还有他的公司。
10:01
对吧,还有什么好像有点好像这个不对吧,PA吧。还有什么,还有一个职位啊,岗位post,还有一个月薪。差不多了吧,好,那下面呢,我们将这些信息呢,给它显示出来,很简单,先先看这一个。这个是吧,那这个变化了是不是就它呀。来一个大家括号写什么没问题是吧?好,接着是它这个title。Title实际是谁name啊,太简单。再一个呢?不是公司吗?这没关系,有人说老师我公司可能没有,没有它就不会显示。
11:01
这个什么呢?这个属性的值,如果值没有啊,这个文本是不会显示,对应的文本是不会显示的。好,下面啊,我的一个职位post呗,是吧,接着是简介还没写啊,应该是一个什么in for啊,好像这个类型不需要。可以吧,啊好这个心智好,这个可能有也可能没有,那这个怎么这样好,有硕老师这样子看啊,我们就写一个,写一个新资serve。你说老师有就显示,没有就不显示。行吗?不行,主要是什么,你你这不这不显显示一半不太好吧。对不对,所以这个时候得处理一下,那怎么处理呢。
12:00
怎么处理啊啊,有值吗?对不对,有。把这个干进去。啊,就整个。据可以吧,要没有了那。这个能不能看到。可以吧?就是这样的一个结构啊。那我们的这个。显示就基本上弄完了,我们看一下我们大概的一个情况啊。是不是出来了,那现在我们是不是登录的是一个大神对吧,那下面我们来看一下登录一个。啊,这这个信息呢,不是特别好,我们来重新注册一个啊,我把这干掉啊,干掉以后呢,再刷一下,刷以后不进入登录注册嘛,我们来注册一个。啊,比如说我来一个中文的吧,大神啊。
13:05
123。123。来选择一,我选择这个头像啊,选择这个头像啊,求职的岗位是什么呢?比如说web前端工程师可以吧,啊个人介绍啊,会query啊,Direct view no都会。好,我们来看一下周理。各位。可以吧,可以。好,下面我们要去注册另外一个,现在其实挺麻烦的,我是不是要把这个给干掉才行啊,不然的话我还没办法退出去,我想进入在里面很麻烦是吧。刷一下。我们到时候把那个退出登录功能一做不就可以了吗?对不对,等会来做啊,我们先把这个搞定来再注册个账号。
14:02
啊,这一次呢,我注册的是老板。啊123啊123注册好老板的信息呢,相对多一些,那选择第二个吧。啊,他那个招聘的岗位呢,是高级前端工程师。可以吧,好公司名称呢,叫譬如说叫叫那个Facebook好薪资2K啊。那个要求啊,Node,譬如说还有随便写两个是个是是个意思啊,接着来一个保存。好,接着看一下。可以吧,可以好了,我下面要做的一个事情就是显示已经完全没问题,对吧,都可以显示正常显示吗?
我来说两句