CN109947404A - 一种基于多媒体网络教学产品下的小学生练字系统 - Google Patents

Abstract

本发明公开了一种基于多媒体网络教学产品下的小学生练字系统，该系统具有响应式布局，可适应不同大小的媒体屏幕，包括：登录注册模块、首页展示模块、练字任务模块、教材选择模块、作品展示模块、排行榜模块和教师点评模块。本发明从时代背景和技术背景两方面入手，从理论到实践介绍了一个基于React Native和Django的具有完整功能的互联网+教育系统“练字吧”。结合用户行为和需求以及当前主流技术框架，本系统实现了用户在线练字、教师后台实时评价打分，用户拍照上传、查看作品、记录打卡和排行榜等功能，对现实具有一定的借鉴意义。

Description

一种基于多媒体网络教学产品下的小学生练字系统

技术领域

本发明涉及的是一种基于多媒体网络教学产品下的小学生练字系统，属于软件技术领域。

背景技术

随着“互联网+”作为国家战略被提出，知识付费等观念的兴起，传统教育行业面临一定程度上的转型要求，AI人工智能与传统行业的相结合是符合当下的时代背景的全新体验。同时汉字作为中国文化的瑰宝也越来越不受重视，因此为了切实增强小学生能够在线增强对于汉字的学习，并且将这种学习互联网化，申请号：201810642709X，发明名称为：一种基于组件模块的教育开发系统(简称练字吧)作为一款针对儿童的在线练字平台，把用户作为核心，练字内容作为主体，加上教材、排行榜、点评等功能，构建一个完整的“互联网+教育”练字系统。

尽管该系统在基于React Native和Django的在线练字平台——“练字吧”的实现上取得了一定的成果，完成了设计的基本功能。但由于时间、设备、技术等客观条件的原因，本方法也存在一定不足之处：

1.用户系统较为简单，只能登陆、注册并修改年级，未来还可以加上找回密码、退出登陆、切换账号、修改头像等功能。

2.时间紧张导致本产品在代码组织上比较混乱，存在许多冗余代码，导致代码的可读性和可复用性大大降低，没有体现出React Native组件化的优势，未来还需将这部分冗余代码提取出来封装成独立的组件。

3.本产品在实现过程中考虑了跨平台特性，选用了一些可在安卓和IOS设备上复用的技术，理论上可以用同一份代码在安卓和IOS设备上同时编译运行。但由于缺少新版的苹果笔记本电脑，无法安装新版的XCODE软件，导致无法测试该产品在IOS设备上的实现效果。

4.产品的UI界面非常简单，未来希望能加强相关能力的培养，将UI界面改进的更为美观。

5.应用优化不够，部分功能使用会有卡顿现象，未来需要调研组件的底层实现原理，对组件的渲染卸载进行优化，使应用逼近原生应用的流畅体验。

6.练字吧上线后已经拥有了一定的用户，但整体用户数量在呈现下降趋势，未来考虑举办一系列的活动来刺激用户使用产品，在加大新增用户数量的同时留住老用户。

发明内容

针对上述缺陷，本发明提供了一种基于多媒体网络教学产品下的小学生练字系统，从时代背景和技术背景两方面入手，从理论到实践介绍了一个基于React Native和Django的具有完整功能的互联网+教育系统“练字吧”。结合用户行为和需求以及当前主流技术框架，本系统实现了用户在线练字、教师后台实时评价打分，用户拍照上传、查看作品、记录打卡和排行榜等功能。对现实具有一定的借鉴意义。

利用较为先进的web开发框架：React Native和当下较为流行的后端开发框架：Django。设计一个功能完整的在线练字平台，践行“互联网+教育”——一种基于多媒体网络教学产品下的小学生练字系统由此而生。用React Native和Django框架开发完成具有跨平台、响应式特点的在线汉字学习平台。

为达到上述目的，本发明通过以下技术方案来具体实现：

本发明提供了一种基于多媒体网络教学产品下的小学生练字系统，该系统具有响应式布局，可适应不同大小的媒体屏幕，该系统包括：

登录注册模块：用于在用户注册成功并进行登录成功时，将登录信息与存储在后台的教师信息表中的信息进行匹配，若匹配成功，则进入教师点评模块，否则进入首页展示模块；

首页展示模块：用于显示练字信息；包括切换至练字任务模块的切换按钮、切换至教材选择模块的切换按钮和切换至排行榜模块的切换按钮；

练字任务模块：用于查看每日的练字任务和练字提示，作为练字的入口；包括点击任一练字作品或者拍照上传完毕进入作品展示模块的页面的触发指令；

教材选择模块：用于选择适合年级和教材版本进行练字；

作品展示模块：用于展示当天的练字任务以及用户上传的练字照片图片、上传时间和教师的点评或者选择了同一个教材版本的同学的练字记录；

排行榜模块：用于记录每个用户连续练字的天数，形成一个排行榜；

教师点评模块：用于对现有的练字记录进行评价并反馈给用户。

进一步的，该系统的组件设计包括：父组件向子组件发送传递参数，子组件接收到传递参数后改变自身的状态机，接着调用递传递参数传递过来的回调函数来实现修改父组件的状态机。

进一步的，该系统还包括数据加密模块，用于将所有参数按一定顺序排列组成一个字符串，再加入前后端约定好的秘钥以及时间戳，混合后使用SHA256算法加密。

进一步的，该系统的导航器为React Native内置的导航器Navigator；页面加载时会首先加载该导航器，由导航器渲染默认路由的页面；当页面跳转时，都会进入renderScene函数渲染新的页面；Navigator是一个栈结构，当用户需要跳转页面时，将新页面的路由(包括页面的名称和索引)和组件压入栈中进行渲染，当需要返回时则推出栈。

进一步的，首页展示模块的练字信息显示在首页展示页的顶部，包括连续练字的天数、用户的教材版本与年级；

首页展示模块通过RN的ListView组件实现下滑加载同班同学的练字作品。

进一步的，通过首页展示模块点击切换至教材选择模块的切换按钮进入教材选择页面，该页面包括两个部分：年级选择框和教材选择列表；

年级选择框默认是收起状态，点击后展开为年级选择列表；在年级选择列表选择年级后对应年级的教材也随之变化；

用户在教材选择列表中选择教材后页面自动跳回首页，同时首页数据也进行刷新，今日练字任务为“未完成”状态。

进一步的，通过首页展示模块点击切换至练字任务模块的切换按钮，并在弹出的提示框中点击准备完毕进入练字任务模块的页面，该页面用于展示当天的练字任务，包括具体的汉字及书写建议；

练字任务模块的进入页面默认显示静止的字帖，点击播放按钮可查看该汉字的书写笔顺，点击左右箭头可来回切换查看各练字页；

当用户练字完毕后可点击下方按钮上传照片，通过配置react-native-image-picker第三方库调取手机的相机进行拍摄，用户也可选择在相册中挑选照片上传，对照片使用Django的Image库重新规定图片的大小后再进行存储。

进一步的，通过练字任务模块点击任一练字作品或者拍照上传完毕进入作品展示模块的页面，该页面展示了当天的练字任务，以及用户上传的照片的大图、上传时间和老师的点评；若当前还没有点评，则显示提示信息。

进一步的，通过首页展示模块点击切换至排行榜模块的切换按钮进入排行榜模块页面，排行榜模块页面根据选择同一个教材的用户的连续练字天数的长短，为每个教材排出了一个排行榜；

排行榜最上方是用户自己的排名以及连续练字天数，下方是按排名从高到底排列的列表，可以下滑加载刷新；排行榜允许有并列的情况发生。

进一步的，教师登录后进入教师点评模块的页面，可以对用户上传的练字作品进行打分和点评；

教师点评模块页面默认显示练字作品列表，练字作品列表对应的作品卡片显示作品图片、用户昵称、作品得分和评语；

按有无点评和时间先后进行排序，未点评且时间久的作品位于作品列表上方；

教师点击作品列表的作品后进入点评页面；

教师根据作品的图片进行打分和点评，点击提交保存，保存成功后返回并刷新练字作品列表。

本发明提供的一种基于多媒体网络教学产品下的小学生练字系统，从时代背景和技术背景两方面入手，从理论到实践介绍了一个基于React Native和Django的具有完整功能的互联网+教育系统“练字吧”。结合用户行为和需求以及当前主流技术框架，本系统作为一款针对儿童的在线练字平台，把用户作为核心，练字内容作为主体，加上教材、排行榜、点评等功能，构建一个完整的“互联网+教育”练字系统，实现了用户在线练字、教师后台实时评价打分，用户拍照上传、查看作品、记录打卡和排行榜等功能，对现实具有一定的借鉴意义。

附图说明

图1所示为本发明提供的一种基于多媒体网络教学产品下的小学生练字系统的框架图。

图2所示为本发明提供的登录注册模块示意图。

图3所示为本发明提供的登录注册模块实现效果示意图。

图4所示为本发明提供的首页展示模块示意图。

图5所示为本发明提供的提示框示意图。

图6所示为本发明提供的我的练字作品示意图。

图7a、7b、7c、7d、7e、7f所示为本发明提供的首页展示模块实现效果示意图。

图8所示为本发明提供的练字任务模块示意图。

图9所示为本发明提供的项目结构示意图。

图10所示为本发明提供的调用相机模块示意图。

图11所示为本发明提供的教材选择模块示意图。

图12所示为本发明提供的作品展示模块示意图。

图13所示为本发明提供的同班同学练字作品展示示意图。

图14所示为本发明提供的排行榜模块示意图。

图15所示为本发明提供的教师点评模块示意图。

图16所示为本发明提供的React Native参数传递过程意图。

图17所示为本发明提供的组件关系示意图。

图18所示为本发明提供的Django应用结构示意图。

具体实施方式

下面对本发明的技术方案进行具体阐述，需要指出的是，本发明的技术方案不限于实施例所述的实施方式，本领域的技术人员参考和借鉴本发明技术方案的内容，在本发明的基础上进行的改进和设计，应属于本发明的保护范围。

实施例一

如图1所示，本发明实施例一提供了一种基于多媒体网络教学产品下的小学生练字系统，该系统具有响应式布局，可适应不同大小的媒体屏幕，该系统包括：

登录注册模块：用于在用户注册成功并进行登录成功时，将登录信息与存储在后台的教师信息表中的信息进行匹配，若匹配成功，则进入教师点评模块，否则进入首页展示模块。

如图2所示：用户打开应用后默认进入左图页面，用户若已有账号，可直接输入账号密码登录，若账号密码输入错误则会弹出虚线框内“用户名密码错误”的提示。账号密码不允许为空，若为空，也会在虚线框内弹出相应的提示。若用户还没有账号，可点击注册按钮进入右图进行注册。用户可输入自己的账号、密码、昵称，选择自己的性别，后台会对用户注册的账号进行验证，若该账号已存在，则会弹出虚线框内该“账号已存在”的提示。同样的，若输入信息为空时，会在虚线框内弹出提示。用户登录成功或者注册成功后，会直接进入练字吧首页。同时在登录时，后台会在教师信息表中进行匹配，若检测到登录用户是老师，则进入点评系统而不进入练字吧首页。登录、注册的最终实现效果如图3所示。左图是登录页面，右图是注册页面，左图点击注册可以进入右图，右图也可以通过返回按钮回到左图。在实现页面时，React Native编写样式时与传统的CSS有一定区别，即CSS可以直接通过百分比来规定元素占据父元素的比例，从而达到响应式布局的效果，而RN不支持。对这两个页面最直接的影响就是，背景图片不能简单的充满整个屏幕。经过调研发现，在RN中可以通过获取屏幕的宽度来自行计算实现与CSS的百分比相同的效果。在登录、注册过程中遇到错误时，会弹出错误提示。登录成功或者注册成功都会进入练字吧首页。

首页展示模块：用于显示练字信息；包括切换至练字任务模块的切换按钮、切换至教材选择模块的切换按钮和切换至排行榜模块的切换按钮。如图4所示：首页展示模块包括：

1.用户信息：顶部展示了用户的练字信息，包括连续练字的天数，和用户的教材版本与年级，点击切换按钮可进入选择教材页面进行改变教材的操作。点击排行榜按钮可进入排行榜页面查看自己及同班同学的排名。

2.练字任务：用户信息下方是为用户安排的练字任务，每天将会为用户安排三个字的任务。左图为用户当天未练字的状态，点击开始练字会弹出温馨提示框，如图5所示：点击“准备完毕，GO！”则进入今日练字页面开始练字，点击右上角关闭按钮则关闭提示框，返回首页。若用户当天已完成练字任务，则显示右图，此时会显示明日练字任务预告，并且处于禁止点击状态，若点击按钮会弹出提示框。

3.我的练字作品：练字任务下方是“我的练字作品”卡片，显示用户最新一次的练字作品，包括作品的图片、用户昵称和日期。如果该作品已被老师点评过，则如左图显示作品的得分和评语，以及老师的头像和昵称。否则如右图显示提示信息。点击右方的更多可以进入查看用户所有的练字作品，如图6所示：该页面按时间顺序从近到远展示了用户所有的练字作品，点击左上角的返回按钮返回首页。

4.同班练字展示：我的练字作品下方是所有同班同学的练字作品展示，可以通过不断的下滑刷新加载，具体作品展示细节与我的练字作品类似，这里不再做赘述。

首页的最终实现效果如图7所示，首页可以上下滑动，图7a是用户当天未练字时首页的主体部分，其中今日练字任务为可点击状态，图7b是用户当天已练字时的情况，今日练字任务为灰色不可点击状态，图7c、图7d、图7e都是练字作品展示部分，其中图7c是用户没有练字记录并且同班同学当天没有练字的情况，图7d是用户有练字记录时的情况，图7e是同班同学当天有练字记录的情况，图7f是用户点击手机物理返回键时的提示，当用户在1.5秒内再次点击返回键就会推出应用，这与一般原生的应用做法相同，可以给用户更好的体验。

在开发首页的过程中，为了实现下滑加载同班同学的练字作品，用到了RN的ListView组件，它可以实现动态加载长列表的功能，而不立即渲染所有的元素，这就保证了应用的性能。为了实现该功能，这里用到了ListView的四个属性，分别是列表的数据源dataSource、可以逐个解析数据源中数据并按编写好的样式进行渲染的renderRow、检测组件是否滑动到底部的onEndReachedThreshold和滑动到底部后执行操作的onEndReached。因此整个组件的处理过程为：

1.当组件被加载时，把数据赋给dataSource。

2.调用renderRow对应的函数来渲染数据源中的数据。

3.当检测到组件已滑动到底部时调用onEndReached对应的函数(一般是加载新的数据)，并把新数据添加到数据源中。

4.组件检测到状态有更新后再次调用renderRow进行渲染，如此循环。

在具体实现的过程中发现，如果只是常规的将首页的主体部分和同班练字作品并列排布，将会出现滑动时只有同班练字作品部分滑动而主体部分不动的情况。为了解决这个问题，这里用到了ListView的另一个属性renderHeader，即将整个首页作为一个ListView组件，首页的主体部分作为列表的头部进行渲染。

图7f实现的功能产生了与原生操作系统的交互，这就需要调用RN提供的组件BackAndroid，具体实现过程为：在组件的加载过程添加对物理返回键的监听，当检测到用户按下了物理返回键首先判断导航器栈中是否有多个页面，如果有就返回上一个页面，否则弹出提示“再按一次退出练字吧”，当检测到用户在1.5秒内再次按下返回键时就退出应用，同时卸载该组件的监听器。

练字任务模块：用于查看每日的练字任务和练字提示，作为练字的入口；包括点击任一练字作品或者拍照上传完毕进入作品展示模块的页面的触发指令。

今日练字任务的原型图如图8所示：在首页点击开始练字并在弹出的提示框中点击准备完毕就会进入该页面，该页面详细展示了当天的练字任务，包括具体的汉字及其书写建议。进入页面默认显示静止的字帖，点击播放按钮可查看该汉字的书写笔顺，点击左右箭头可来回切换查看各练字页。当用户练字完毕后可点击下方按钮上传照片，该按钮会调取手机的相机进行拍摄，用户也可选择在相册中挑选照片上传。无论是拍照还是在相册中选择都只能上传一张照片。

用户在练字完成后需要上传照片，前端给后台传的照片是一个二进制文件，后台需要将该二进制文件保存到服务器，然后将文件在服务器中的路径返回给前端，供前端显示。

同时，不同用户上传的照片质量可能参差不齐，有的照片可能体积特别大，如果直接将这些照片存储下来会对服务器的空间造成不小的压力。因此后台也需要对这种情况进行处理，具体方法是当接收到照片后，用Django的Image库重新规定图片的大小后再进行存储，达到压缩图片的目的。

如图9所示，下面依次解释练字吧项目下各文件含义：

_tests_文件夹用来存放单元测试文件。

android文件夹是安卓工程的源代码，使用安卓开发IDE可以打开该项目。

ios文件夹是IOS工程源代码，可以使用XCODE打开。

images文件夹是图片资源的存放路径。

js文件夹存放了本工程所有的组件文件。

node_modules文件夹是本项目所有的依赖包存放的路径。

app.json和package.json都是项目的配置文件。

index.android.js和index.ios.js分别是本项目在安卓端和IOS端的入口文件，应用在两个操作系统中运行时，会首先编译运行这两个文件。

一优选实施例：

点击首页的练字按钮会出现图5所示情况，左图为用户当天未练字时的情况，提醒用户注意事项并引导用户去练字详情页面，右图为用户当天已经练字的情况，按钮变为灰色不可点击状态，点击会弹出提醒。

点击左图的按钮会进入练字详情页。如图8所示，默认显示静态字帖，点击播放按钮会显示书写笔顺，点击左右按钮可以切换汉字。当用户根据动图和书写建议学习完毕，并且自己也按要求书写完毕，可以点击按钮上传练字作品，如图10所示：点击按钮后会出现选择框，用户可以选择拍照上传或者从相册选择上传。该功能同样与原生操作系统产生了交互，调用了手机的相机模块，但RN官方却没有相应的解决方案，因此这里使用了第三方库“react-native-image-picker”，丰富的第三方库也是RN的优势所在。它帮助解决了所有的底层问题，我们只需要安装引入，配置完成后直接使用即可。

教材选择模块：用于选择适合年级和教材版本进行练字。

用户在使用过程中可随时切换自己的教材，此时用户可在首页点击切换按钮进入教材选择页面，原型图如图11所示：该页面包括两个部分：年级选择框和教材选择列表。选择框默认是收起状态，点击后展开，选择年级后列表中的教材也相应跟着变化。用户选择教材后页面自动跳回首页，同时首页数据也进行刷新。值得注意的是，切换教材后，用户的连续练字天数、练字作品不变，今日练字任务和同班作品展示需要随着教材版本变化。对用户来说，如果当天已经上传过练字作品，切换教材后今日练字任务为“未完成”状态，用户可以上传作品，该作品也会存入练字记录表中，但是连续练字天数不会再增长，即连续练字天数每天最多增加1。

教材选择页面如图11所示，左图为默认状态，用户当前年级即为默认年级，右图是展开选择框后状态，选择按钮后选择框自动收起并且自动刷新教材列表。为了给用户更好的体验，选择框的展开使用了动画效果，并且为了同时适配安卓和IOS，这里使用了RN自带的布局动画(LayoutAnimation API)，它是当页面的布局试图发生变化时，自动将这种变化运行到相应的位置。只需一行代码，就可以将我们设置的布局变化以一种线性的动画表现出来，实现非常简单，同时效果也令人满意。

作品展示模块：用于展示当天的练字任务以及用户上传的练字照片图片、上传时间和教师的点评或者选择了同一个教材版本的同学的练字记录。

点击首页的任一练字作品或者拍照上传完毕都会进入图12所示页面，不同点在于当点击“同班练字展示”中的作品进入该页面时，会显示该用户的昵称，具体如图13所示：该页面展示了当天的练字任务，以及用户上传的照片的大图、上传时间和老师的点评。若当前还没有点评，则显示提示信息。

上传作品成功或者点击首页的练字作品都会进入作品展示页面，如图12所示。该页面可以查看练字当天的练字任务和用户上传的作品大图，以及老师对该作品的评分和评语。头部会根据该作品是否是用户本人而显示不同的人称，左图是用户查看自己的作品，右图是用户查看其他用户的作品。

排行榜模块：用于记录每个用户连续练字的天数，形成一个排行榜。

根据选择同一个教材的用户的连续练字天数的长短，后台给每个教材排出了一个排行榜，原型图如图14所示：排行榜最上方是用户自己的排名以及连续练字天数，下方是按排名从高到底排列的列表，可以下滑加载刷新，优选的，最多显示前50名。前三名分别会有相应的奖杯显示，并且排行榜允许有并列的情况发生。

在这里为了显示的美观性，让列表间隔的显示不同背景颜色，使用了ListView中renderRow函数的index属性，根据属性的单双数进行判断显示即可。另外，列表中每一行显示的内容很多而宽度有限，这就可能出现用户昵称过长造成显示不统一的情况。为了解决这个问题，我们可以使用RN中文本组件的numberOfLines属性，通过设定昵称的最大宽度和显示行数为1，就能用“…”来代替超出显示范围的文字。

教师点评模块：用于对现有的练字记录进行评价并反馈给用户。

教师登录后会进入点评系统，可以对用户上传的练字作品进行打分和点评，原型图如图15所示：进入点评系统后，默认显示左图的练字作品列表，作品卡片显示作品图片、用户昵称、作品得分和评语。按有无点评和时间先后进行排序，未点评且时间久的作品位于列表上方。老师点击作品后进入右图点评页面。老师根据作品的图片进行打分和点评，点击提交保存，保存成功后返回并刷新练字作品列表。

教师点评系统左图为用户作品列表，显示了用户的昵称得分，如果有评语还会显示评语。点击左图列表中的用户会进入右图点评页面，教师可以在这对作品进行打分和写评语，点击提交保存后会自动返回左图页面，并刷新列表。

该系统的组件设计与常规HTML开发时页面间跳转需要使用URL来进行参数传递不同，React Native通过渲染不同的组件来实现界面的改变，组件间通过props(properties的简称)传递参数。props是一个组件的配置选项，一般情况下只能由父组件向子组件传递，一个组件不能改变自身的props，只能管理自身的state(状态机)，组件会根据自身的state进行渲染。组件间参数传递的具体过程如图16所示：

进一步的，该系统的组件设计包括：父组件向子组件发送传递参数，子组件接收到传递参数后改变自身的状态机，接着调用递传递参数传递过来的回调函数来实现修改父组件的状态机。

对于练字吧，我们规定了一些唯一的标识符来确保组件的正常运作，具体如下表3-7所示：

表3 7唯一标识符对应表

为保证参数传递的规范性，所有标识符都用数字表示。

因此，练字吧组件间关系以及参数传递就如图17所示(图中只标出最主要的参数)：

登录完成后，将uid传递给首页，首页通过uid获取到用户信息、和我的练字作品，再用uid和用户信息中的年级、教材版本、学期共同获取到今日练字任务和同班同学的练字作品。再通过首页四大组件的数据来渲染排行榜、选择教材、练字详情、练字作品和我的练字记录等子组件。

该系统的接口设计包括安全性设计：

进一步的，该系统还包括数据加密模块，用于将所有参数按一定顺序排列组成一个字符串，再加入前后端约定好的秘钥以及时间戳，混合后使用SHA256算法加密。

由于在后台数据库中保存了用户的账号密码和手机号等私密信息，以及教材版本和练字任务等重要的教学资源，在前端调用接口请求返回这些数据时就要考虑到安全性，不能让别有用心的人轻易截取到这些重要的信息。因此在设计接口的时候考虑使用了加密方法，即前后端使用相同加密方式对同一段信息分别进行加密，如果后台检测到前端发起请求时传递的加密参数与后台一致，则返回数据，否则就不返回。在这里考虑将所有参数按一定顺序排列组成一个字符串，再加入前后端约定好的秘钥以及时间戳，混合后使用SHA256算法加密。这样在一定程度上可以加大破解的难度，增加接口的安全性。

本应用的接口部分都在Django的应用中实现完成，Django应用的组织结构如图18所示：

现对该结构作简要说明：

1.__init__.py是Django应用的初始化文件，必须存在但一般为空。

2.models.py是数据库模型文件，用来创建数据模型。

3.urls.py是路由文件，用来组织管理接口的路由。

4.views.py是视图文件，所有的接口都在该文件中完成。

因此，一个一般意义上的接口的具体实现流程为：根据数据库建立数据模型，使Django与数据库连接，配置该接口的路由信息供前端调用访问，前端调用接口后会向服务器发起GET类型或POST类型的请求，服务器接收到请求后根据views.py文件中定义的函数进行处理，并返回一个HTTP响应，前端收到服务器发来的响应后根据响应内容进行相应的操作。同时，接口需要有异常处理，保证接口的健壮性。

进一步的，该系统的导航器为React Native内置的导航器Navigator；页面加载时会首先加载该导航器，由导航器渲染默认路由的页面；当页面跳转时，都会进入renderScene函数渲染新的页面；Navigator是一个栈结构，当用户需要跳转页面时，将新页面的路由(包括页面的名称和索引)和组件压入栈中进行渲染，当需要返回时则推出栈。

一个移动应用最基础也是最重要的功能就是页面跳转，React Native中的导航器就实现了页面跳转的功能，同时也包括了一些常见的场景过渡效果。在这里我们使用ReactNative内置的导航器Navigator来实现，它用原生的JS实现，可以同时在IOS和安卓上作用，也便于进行个性化定制。Navigator作为整个应用的根组件，将它放在应用的入口处，即index.android.js和index.ios.js。页面加载时会首先加载该导航器，由导航器渲染默认路由的页面。当页面跳转时，都会进入renderScene函数渲染新的页面。

进一步的，首页展示模块的练字信息显示在首页展示页的顶部，包括连续练字的天数、用户的教材版本与年级；

首页展示模块通过RN的ListView组件实现下滑加载同班同学的练字作品。

进一步的，通过首页展示模块点击切换至教材选择模块的切换按钮进入教材选择页面，该页面包括两个部分：年级选择框和教材选择列表；

年级选择框默认是收起状态，点击后展开为年级选择列表；在年级选择列表选择年级后对应年级的教材也随之变化；

用户在教材选择列表中选择教材后页面自动跳回首页，同时首页数据也进行刷新，今日练字任务为“未完成”状态。

进一步的，通过首页展示模块点击切换至练字任务模块的切换按钮，并在弹出的提示框中点击准备完毕进入练字任务模块的页面，该页面用于展示当天的练字任务，包括具体的汉字及书写建议；

练字任务模块的进入页面默认显示静止的字帖，点击播放按钮可查看该汉字的书写笔顺，点击左右箭头可来回切换查看各练字页；

当用户练字完毕后可点击下方按钮上传照片，通过配置react-native-image-picker第三方库调取手机的相机进行拍摄，用户也可选择在相册中挑选照片上传，对照片使用Django的Image库重新规定图片的大小后再进行存储。

进一步的，通过练字任务模块点击任一练字作品或者拍照上传完毕进入作品展示模块的页面，该页面展示了当天的练字任务，以及用户上传的照片的大图、上传时间和老师的点评；若当前还没有点评，则显示提示信息。

进一步的，通过首页展示模块点击切换至排行榜模块的切换按钮进入排行榜模块页面，排行榜模块页面根据选择同一个教材的用户的连续练字天数的长短，为每个教材排出了一个排行榜；

排行榜最上方是用户自己的排名以及连续练字天数，下方是按排名从高到底排列的列表，可以下滑加载刷新；排行榜允许有并列的情况发生。

进一步的，教师登录后进入教师点评模块的页面，可以对用户上传的练字作品进行打分和点评；

教师点评模块页面默认显示练字作品列表，练字作品列表对应的作品卡片显示作品图片、用户昵称、作品得分和评语；

按有无点评和时间先后进行排序，未点评且时间久的作品位于作品列表上方；

教师点击作品列表的作品后进入点评页面；

教师根据作品的图片进行打分和点评，点击提交保存，保存成功后返回并刷新练字作品列表。

本发明提供的一种基于多媒体网络教学产品下的小学生练字系统，从时代背景和技术背景两方面入手，从理论到实践介绍了一个基于React Native和Django的具有完整功能的互联网+教育系统“练字吧”。结合用户行为和需求以及当前主流技术框架，本系统作为一款针对儿童的在线练字平台，把用户作为核心，练字内容作为主体，加上教材、排行榜、点评等功能，构建一个完整的“互联网+教育”练字系统，实现了用户在线练字、教师后台实时评价打分，用户拍照上传、查看作品、记录打卡和排行榜等功能，对现实具有一定的借鉴意义。

以上公开的仅为本发明的几个具体实施例，但是，本发明并非局限于上述实施例，任何本领域的技术人员能思之的变化都应落入本发明的保护范围。

Claims (10)

1.一种基于多媒体网络教学产品下的小学生练字系统，其特征在于，该系统具有响应式布局，可适应不同大小的媒体屏幕，该系统包括：

登录注册模块：用于在用户注册成功并进行登录成功时，将登录信息与存储在后台的教师信息表中的信息进行匹配，若匹配成功，则进入教师点评模块，否则进入首页展示模块；

首页展示模块：用于显示练字信息；包括切换至练字任务模块的切换按钮、切换至教材选择模块的切换按钮和切换至排行榜模块的切换按钮；

练字任务模块：用于查看每日的练字任务和练字提示，作为练字的入口；包括点击任一练字作品或者拍照上传完毕进入作品展示模块的页面的触发指令；

教材选择模块：用于选择适合年级和教材版本进行练字；

作品展示模块：用于展示当天的练字任务以及用户上传的练字照片图片、上传时间和教师的点评或者选择了同一个教材版本的同学的练字记录；

排行榜模块：用于记录每个用户连续练字的天数，形成一个排行榜；

教师点评模块：用于对现有的练字记录进行评价并反馈给用户。

2.如权利要求1所述的系统，其特征在于，该系统的组件设计包括：父组件向子组件发送传递参数，子组件接收到传递参数后改变自身的状态机，接着调用递传递参数传递过来的回调函数来实现修改父组件的状态机。

3.如权利要求1所述的系统，其特征在于，该系统还包括数据加密模块，用于将所有参数按一定顺序排列组成一个字符串，再加入前后端约定好的秘钥以及时间戳，混合后使用SHA256算法加密。

4.如权利要求1所述的系统，其特征在于，该系统的导航器为React Native内置的导航器Navigator；页面加载时会首先加载该导航器，由导航器渲染默认路由的页面；当页面跳转时，都会进入renderScene函数渲染新的页面；

Navigator是一个栈结构，当用户需要跳转页面时，将新页面的路由(包括页面的名称和索引)和组件压入栈中进行渲染，当需要返回时则推出栈。

5.如权利要求1所述的系统，其特征在于，首页展示模块的练字信息显示在首页展示页的顶部，包括连续练字的天数、用户的教材版本与年级；

首页展示模块通过RN的ListView组件实现下滑加载同班同学的练字作品。

6.如权利要求1所述的系统，其特征在于，通过首页展示模块点击切换至教材选择模块的切换按钮进入教材选择页面，该页面包括两个部分：年级选择框和教材选择列表；

年级选择框默认是收起状态，点击后展开为年级选择列表；在年级选择列表选择年级后对应年级的教材也随之变化；

用户在教材选择列表中选择教材后页面自动跳回首页，同时首页数据也进行刷新，今日练字任务为“未完成”状态。

7.如权利要求1所述的系统，其特征在于，通过首页展示模块点击切换至练字任务模块的切换按钮，并在弹出的提示框中点击准备完毕进入练字任务模块的页面，该页面用于展示当天的练字任务，包括具体的汉字及书写建议；

练字任务模块的进入页面默认显示静止的字帖，点击播放按钮可查看该汉字的书写笔顺，点击左右箭头可来回切换查看各练字页；

当用户练字完毕后可点击下方按钮上传照片，通过配置react-native-image-picker第三方库调取手机的相机进行拍摄，用户也可选择在相册中挑选照片上传，对照片使用Django的Image库重新规定图片的大小后再进行存储。

8.如权利要求1或7所述的系统，其特征在于，通过练字任务模块点击任一练字作品或者拍照上传完毕进入作品展示模块的页面，该页面展示了当天的练字任务，以及用户上传的照片的大图、上传时间和老师的点评；若当前还没有点评，则显示提示信息。

9.如权利要求1所述的系统，其特征在于，通过首页展示模块点击切换至排行榜模块的切换按钮进入排行榜模块页面，

排行榜模块页面根据选择同一个教材的用户的连续练字天数的长短，为每个教材排出了一个排行榜；

排行榜最上方是用户自己的排名以及连续练字天数，下方是按排名从高到底排列的列表，可以下滑加载刷新；排行榜允许有并列的情况发生。

10.如权利要求1所述的系统，其特征在于，

教师登录后进入教师点评模块的页面，可以对用户上传的练字作品进行打分和点评；

教师点评模块页面默认显示练字作品列表，练字作品列表对应的作品卡片显示作品图片、用户昵称、作品得分和评语；

按有无点评和时间先后进行排序，未点评且时间久的作品位于作品列表上方；

教师点击作品列表的作品后进入点评页面；

教师根据作品的图片进行打分和点评，点击提交保存，保存成功后返回并刷新练字作品列表。