00:00
好,下面是不是要点这个按钮来实现退出登录啊,来我们来看一下。那我想到的就是一下来给它加一个什么啊呗,是吧,等于啊,我先写一个log out吧。可吧,可以好,那我需要在这里面写一个对应的一个线的函数啊方法对吧,就这里面登出呗,登出啊大家看一下啊,这里面有个小问题,我先lo一下,我先lo一下它这个都不会执行,我们来看一下。我我发现有一个问题,正常它的按钮要点的话,应该是有反应的,有一个按下的一个效果,现在没有说明,现在根本它就不能响应点击事件。
01:03
能看到吧,也就是说那个按设计的按钮,它按下去是有反应的。啊,但现在按下去一点反应都没有啊,我按了我确实按了好,那现在是个什么问题呢?这个地时候我要去审查一下。啊,后来我发现了这样一个事。大家看呢,现在是谁呀,这个。这个div是谁?Am-table杠八,这谁呀?咱早上都写过最近样式的。这是下面的这个导航。How do you。你看他现在的高度667。把上面的都覆盖掉了。能懂吗?那也就是说现在它的高度覆盖了以后,说白了我看到那个按钮,但是我真正世界有触发的按钮上吗?说白了我有操作的按钮吗?没有。
02:12
懂不懂,相当于我操作的是底部的导航对不对。这样不行吧,那怎么办呢?咋办?说白了,高度有点太高了,你看啊,有点太高了咋办?你看它的高度是100%看到了吧。能看到吧,啊是100%,你看现在是不是没有100%了,现在点它一下可不可以,可以说老师好了,这不然你代码没改呀,对不对,可以改一下代码。虽然是去要改一下什么,改一下样式。就是这个就是包裹内容,大家再来看一下这个。
03:04
能不能看到啊,也就是说我现在的高度是多少呢?什么叫包裹内容啊。嗯,报告内容就是内容撑开呗,对不对,你内容多高我就多高呗,能懂吧,好,这样我们就解决了这样一个问题啊。但效果还不是我们想要的效果,我们最终的效果大家看一下点一下,诶,这看起来多舒服啊是吧?啊,我们想显示这样一个效果,那显示这样,那肯定有对应的组件来去做的,对吧,肯定有对应的组件,而这一个组件呢,是谁呢?是这个说一下啊。叫对话框。能看到吧,啊而这一个对话框啊,该怎么去,该怎么去用呢?对吧,该怎么用,我这里面就直接大家我就不大家去仔细的看文档,我把这个给大家看一看,其实非常简单啊。
04:05
嗯,这个这个用法呢,跟我们一般的那个安特的组件用法不太一样,我们前面说过那个它里面组件有两种,一种是标签组件,一种是非标签组件。那当前这个就是非标签组件什么意思,你看到我要显示我是我是做了一个什么操作的时候,临时你看是不是出来这个。这个效果,而这个效果呢,它怎么做出来呢?大家看到这里面有一个提供了这样一个组件,这个组件不写成标签。而是它是个对象,里面有个方法叫什么alert。好,Alert以后会显会让你传递一些参数,让你传递一些参数。而这个参数呢,大家看到啊,是两个文本,哪里来两个文本呢。这个吗?
05:01
能看到吧,就这两个,呃,下面是不是有一个曲线按钮一个什么。确认按钮,那有取消按钮确认大家看啊,这个地方后面呢,这个搞法还有点怪啊,后面是传一个什么。是不是传的是个数组啊,后面传的数组,数组里面啊是两个对象,大家看啊,可以这么搞一下,是两个对象,一个对象用来描述第一个按钮。一个用来描述什么呢?第二个按钮,它描述按钮两个东西,一个是按钮的什么。文本还一个,你按下那个按钮,我该去做什么?啊,你按下那个按钮,我该你我该去做什么。来,我给大家写一写啊,它有自己的一个套路,我就不带去文档里面一个一个的去看。这是我们的client。
06:02
找到我们的person,那也就在这不能用这个是吧,得去引入一个组件,引入组件是个模态框,我们有时候叫它好它呢,这个对象,这个对象的一个方法叫什么呢?好了好指定啊,照着这个写啊,这个退出圈退出登录啊是吧?啊第一个呢叫什么退出第二个文本。确认,嗯,退出登录吗?对吧,来个问号好,接着传的是个什么。数组,数组里面去指定这两个按钮的相关信息。啊来第一个按钮名字叫什么,是不是取消。哎,它的它的属性名叫什么呢?Text,这是固定的,肯定不能随便瞎写的。
07:02
啊好,那其实到这里其实就够了。啊,他还可以指定一个,嗯,叫什么来着。是你按下的时候,其实我这个取消按下的时候了吗。我这边就写了一个打印输出,本质上就是可以啥啥也不用做。能不能看懂啊,那也就是说我下面的这个,我这个price其实可以写,可以写不写啊,那下面一个。再来一个啊,再接着是T是什么,确定接着再来一个什么啊,哎,你跑到上面去了对吧。能看到吧,这里面用建的函数吧,用的函数。最好又见来,好,那我在这里面干嘛,也就是我点击确认干嘛去。
08:03
我说退出登录,退出登录啊,我们说登录上去以后,有两个数据存出来,一个cookie中的user ID对吧,一个是Rex里面有一个user对象。对不,那下面我们是不是需要把那两个数据给他什么。是不是给他干掉啊?能不能啊,现在我们要干两件事情。啊,第一个呢是干掉谁cookie中的什么ID,第二个干掉谁。A re,管理的什么user?好,来第一个。这个时候我们是不是要抄到库里去,我们有专门的一个库,我们有专门的一个库啊,得到cook啊,JS-cook。
09:09
好,这个里面呢,要想干掉移除一个东西,它有一个方法叫什么呢?Remove。润木水呢?User ID了是吧?好,那接着我要干掉re user,嗯,怎么干掉这个时候。这个时候大家看一下啊,我们有没有能够干掉user中啊user信息的一个action呢?我们来去找一找。这个不需要跟后台进行通信啊。哎,不是,这个是actions。我们来看一下,这里面呢,不需要跟后台通信,那就是用一个同步action就可以。能不能用一个同步action就够了,那这里面有一个。叫什么?
10:02
虫子,U者你干掉U者,你不能真是理理他啊,你不能删掉,而是让他的状态回到什么初始状态。说白了,那个下ID是不能要了,包括他的什么user name都不能要了。那也就是说我要去啊,分发一个这样的一个同步action,那我们现在该怎么做了。那我来干嘛?引路。Import。大括号from点点斜杠啊,还不够,点点斜杠re,下面的actions。我们是不是要找到它,但是呢,你发现它有一个波浪线。是因为什么问题呢?我有啊。威武啊。对,他外面看不见。
11:02
这是你内部私有的,只有你这么做了以后,才能外部看得见。所以需要看他什么呢,暴露。能不能看到你们说老师,那就把他们都暴露呗,不啊,不用暴露了,就不要暴露。对吧,现在我需要,我就给他暴露一下。好,来下面。咋就变了?那练了以后,下面我在里面。马去对象。User看到接着我要干嘛?告诉我写什么代码?this.state没有state pro对吧?点需要传参数吗?
12:03
需不需要传,就要看action里面的这个。有没有对吧?哎,这个地方它是不是可以传一个message啊,如果你想传,那你就传,如果你不想传,那你可以不传,懂不懂。而最终的效果是什么,就最终我的界面效果是什么,一点退出登录。啊,大家希望的效果是什么?大家说对啊,去登录界面,有人说他会去登录界面会只要你啊,只要你把这个里面信息都干掉了啊,只要你把这个信息都干掉了,那我们这个main是会做检查的,我不有一个main组件嘛,组件里面是不是统一有一个检查来着,就我们前面已经写好了这一套进行统一的检查。自然会跑到登录界面去。也就这里。
13:00
这两种吧,嗯,这个要知道一下啊好。那也就是说我们现在啊,就写好了我们的两步啊,当我们点击啊退出登录的时候啊,一个是删除cookie中的user ID,一个是将reduction userr回到初始状态,说白了把它原有的信息。给它去掉。嗯。好,那现在呢,我们就来看一下,看看是一个什么样的效果,这不是我的。点击它吧,找你。点取消。会去退出吗?不会,这一点问题都没有对不对,下面我要点击什么确定。有跳吗?没有对不对,那没有,那也就是说首先我们得确认一下,我们这个地方数据到底有没有清理,或者说我们的这个这个呃,少了一个P是吧。
14:05
我刚才说的意思就是我们要确认一下这里面的有没有调用。懂不懂,所以在现下我可能先会检查一下这个名字,看这名字对不对,明显不对嘛。是吧,这不少了一个吗?是大写小写,我们来看一下。是大写是大写的对吧,没问题。来,下面再来一遍找你确定。各位可以,那也就是说现在我点击退出登录,我当前用户前面用户登录的信息是不是就全部给清理掉了,两个数据嘛,一个是cookie,一个是X里面的user。嗯,这样的话,我们就实现了一个退出登录的一个功能,这个应该说并不难。
15:03
好,这里面呢,整体的做法,首先我们把界面写出来是吧,接着是去把数据动态展现出来。那这个时候是不是需要去读state user?对不对,把数据展现出来以后,下面我们要实现退出登录的功能吧,你上面发现一个问题,什么问题来着,我点击是没有反应的。对吧,没有反应的原因在哪里。是不是我们那个底部的导航的高度太高了呀,把当前这个界面给它盖住了,所以我们改了一下样式,那改了样式之后呢,是可以响应击响应点击了吧,那响应点击以后我们点击的效果是什么?先出来一个是不是确认框啊。那有了确认框之后,我们才去点击确定的时候,需要去清除一些数据。
16:03
这个清除一个是清除cookie中的uz ID,这个好整用我们的一个库JS cookie就行,还一个我们要去啊,重置re里面管理的user。那这个时候我们最终需要去分发一个同步action就可以。不需要,因为这里面我不需要跟后台通信。啊,这个大家要知道啊,我们不一定要去分发一个,一定要分发一个100同步险也可以。好,那整体上就是这么一些,那下面的时间呢,就是大家自己也把这个给它写出来。
我来说两句