您的位置: 主页>机器人编程>Scratch编程>【scratch二次开发教程 第9章】scratch-gui中集成自定
加盟酷吧机器人 培养孩子核心能力

【scratch二次开发教程 第9章】scratch-gui中集成自定

写在前面

该系列文章是为具有开发能力的朋友写作的,目的是帮助他们在scratch 3.0的基础上开发一套完整的集scratch 3.0编程工具、用户社区和作品云端存储及分享、品牌集成于一体的scratch编程平台。如果您不是开发者,但想要拥有自己的教育平台和品牌,也欢迎学习交流和洽谈合作。

所以如果您是想学习scratch少儿编程课程,那请忽略该系列的文章。

前言

前面我们把登录的基本流程实现完成了,不过还留了一个小尾巴,就是用户登出,清除用户的token信息,以确保用户账号的安全性。

我们准备在用户姓名下面做一个下拉菜单,将登出操作放在里面,以后还会在里面放入个人中心,个人作品等菜单项,就像现在mit官网那样:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

下面就来实现这一过程。

开始实现

先来实现组件的样式。

找到components/menu-bar/menu-bar.jsx,在之前我们修改的显示头像和姓名的下面,添加一个MenuBarMenu组件,如下:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

我们将其open属性先设置为true,让它一直显示,以方便我们调试样式。

编译运行,看到在用户姓名和头像下面正常显示了登出菜单:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

下一步来控制菜单的显示与隐藏。

在components/menu-bar/menu-bar.jsx中,为组件MenuBar增加props:userMenuOpen, onClickUser和onRequestCloseUser,分别表示用户判断下拉菜单是否打开,打开下拉菜单操作和关闭下拉菜单操作:

userMenuOpen: PropTypes.bool,onRequestCloseUser:PropTypes.func,onClickUser: PropTypes.func,

在reducers/menus.js中,增加userMenu状态:

constMENU_USER = 'userMenu';

初始为false关闭状态:

constinitialState = {[MENU_ACCOUNT]: false,[MENU_FILE]:false,[MENU_EDIT]: false,[MENU_LANGUAGE]: false,[MENU_LOGIN]:false,[MENU_USER]: false};

增加打开和关闭以及状态检测的actions:

constopenUserMenu = () => openMenu(MENU_USER);const closeUserMenu =() => closeMenu(MENU_USER);const userMenuOpen = state =>state.scratchGui.menus[MENU_USER];

记得export以上actions:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

回到components/menu-bar/menu-bar.jsx中,映射刚才的userMenuOpen props和state:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

映射onClickUser:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

映射onRequestCloseUser:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

再完善之前显示MenuBar的控制,现在我们根据之前设置的props来控制菜单的显示和关闭:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

重新运行,登录成功后并没有菜单显示,点击用户信息,出现下拉菜单,再点击,菜单关闭,一切都按照我们的设计进行的。

最后一步,我们来实现登出的过程。

先到reducers/user-state.js中增加登出的功能实现。

登出actions:

constDONE_USER_LOGOUT = 'DONE_USER_LOGOUT'; // 标识登出过程成功完成const logoutSuccess = () => ({type: DONE_USER_LOGOUT});

登出处理方法,先清空本地token,再关闭下拉菜单,清空state中的用户信息:

constlogout = dispatch =>{localStorage.removeItem('shala_token');dispatch(closeUserMenu());dispatch(logoutSuccess());};

reducer里更新state:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

export logout方法:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

回到components/menu-bar/menu-bar.jsx中,为MenuBar组件增加props onClickLogout:

onClickLogout: PropTypes.func,

并映射dispatch:

onClickLogout: () => logout(dispatch)

最后在MenuItem的onClick方法中调用它:

【scratch二次开发教程 第9章】scratch-gui中集成自定义用户系统(六)

运行项目成功登录,点击下拉菜单,登出,用户信息消失并出现登录按钮。打开浏览器开发工具,看到localStorage中存储的token也被清空了。说明成功登出了。

这里登出时我们没有向后台发送请求,让后台也做相关的登出操作,目前来看并没有什么大问题,只要保证客户端没有有效的token存在就行,如果后面有更高的安全需求考虑我们再来进一步完善它。

另外,在登出时,我们可能正在进行scratch项目创作,并且还没有保存,这时需要提示用户进行相关的操作,并且退出后清空用户的工作区内容。

以上工作我们在后面将作品云端保存和加载功能实现后再来一起完善它。

所以下一章起,我们计划开始集成作品管理系统,实现用户scratch作品集的云端保存和载入以及相关管理功能。对于用户系统,其实至少还需要一个管理的页面,我们计划留到作品管理系统集成完后再来完成,因为到那时我们的系统的基本框架就差不多了,围绕基本框架来丰富功能模块就会清晰很多。

后记,小编朋友研发了一个游戏化的少儿编程在线课程(5-12岁),游戏化教学结合scratch(一款在线少儿编程工具,类似乐高的积木拼搭),我家娃娃学了几次课,非常喜欢(超预期),16次课才200多块钱,对锻炼孩子的思维能力和动手动力很有帮助。

欧美思机器人教育加盟 赚钱好项目
上一篇:scratch编程是时代所需,孩子再不学就落伍了
下一篇:是什么吸引孩子们学习少儿机器人编程呢?
您可能喜欢
​吃啥?这个问题交给Scratch!
吃啥?这个问题交给Scratch!
​Scratch3.0少儿编程案例:画雪花
Scratch3.0少儿编程案例:画雪花
​Scratch学习心得(1)
Scratch学习心得(1)
回到顶部