大学生英语在线听写系统设计与实现

刘磊，姚文辉，郑润涵，王大海

（广东开放大学（广东理工职业学院），广东 广州 510091）

听写是每一个学生在学英语路上的必经之路，在听写的过程中涉及了多种能力和知识的应用，如语言的感知和辨识能力、词汇量、短时间的记忆能力等；听写可以有效提高学生对英语听力的理解能力，可以提高学生的语音水平，人们在语言交际中45%的时间用于听，大学生不仅要进行阅读和写作能力的训练，更要注重听写能力的培养。本文开发的大学生在线听写系统能够通过用户自己的喜好来设置听写配置；同时，支持用户自己来录入自己要听写的单词，还可以保存在数据库中，方便下一次的听写或者复习；此外，还提供了惩罚功能和记录功能，惩罚功能是每次有听写错误的时候进行罚写，记录功能可以记录用户每次的听写并统计呈现给用户，让用户知道自己哪里不足，哪里需要修改。本文从软件开发周期的角度详细论述本系统的开发过程。

本系统使用角色包括普通用户和后台管理员。首先登录系统主页，普通用户注册账号，需经后台管理员审核，用户登录系统成功后进入听写系统主页，可以选择单词录入功能、复习、个人主页或者直接进行听写等功能，当用户选择开始听写时，可以进行听写相关的配置进行听写。注册用户业务流程图如图1所示。

图1 普通用户业务流程图

系统后台管理地址只对管理员角色开放，管理员输入正确的账号密码登录后台管理界面，可以对普通用户进行审核和管理，当审核通过，系统自动发邮件通知用户，管理员可以查看系统的一些统计数据。管理员业务流程图如图2所示。

图2 管理员业务流程图

通过分析系统参与角色，可以得到两个实体：普通用户和管理员用户，用户实体最重要的属性包括注册用户名和邮箱；普通用户进行听写行为，涉及基本词汇表和听写记录表，基本词汇表主要字段有用户id、单词；听写记录表存储用户id、要听写的单词、自己写的单词、错误的单词、用时和成绩等；针对允许用户对听写记录表的内容可以添加多条，将听写记录模块设计成一张独立的表，再通过外键关联到基本用户模块表。系统的数据库模型设计如图3所示。

图3 系统数据库模型图

大学生英语在线听写系统采用前后端分离的模式进行开发。

本系统前端选用流行的React 框架和ant Design ui 框架，React 是目前流行的一个快速构建用户界面的JS 框架，React 的核心思想是通过构建可复用组件来构建用户界面，它简洁灵活，最大的特点是：Declarative（声明式编程）、Component-Based（组件化编程）、Learn Once，Write Anywhere（支持客户端与服务器渲染）、高效（高效的DOM Diff算法、最小页面重绘）、单向数据流，还有React 的生态redux（集中式状态管理）、react-route 等；ant Design（antd）是基于React 开发的UI 框架，antd 内置的CSS 媒体查询（Media Query）功能，可以开发出响应式布局的网页，自动适应不同分辨率效果；通过使用丰富的Web组件，包括下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等，可以快速的搭建一个漂亮、功能完备的网站前端，还可以进行按需映入，不会造成过多的冗余，使文件最小化。

本系统后端选用流行的Node.js 环境进行开发，Node.js是一个基于Chrome V8 引擎的JavaScript 运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效。在基于Node 下使用了经典的Express 框架，Express 基于Node.js 平台，Express 是一个保持最小规模的灵活的Node.js Web 应用程序开发框架，具有快速、开放、极简的特点，为Web 和移动应用程序提供一组强大的功能。Express 框架的核心特性：中间件（可以设置中间来响应HTTP 请求）、路由（定义路由表用于执行不同的HTTP 请求）、模板（key 通过向模板传递参数来动态渲染HTTP页面），使用Request 对象和Response 对象来进行前后端的数据交互。

本系统面向在线听写和关注自己听写记录的需求人群，为注册用户提供在线听写单词的功能，也为用户提供了听写记录的查看和统计等功能。下面选择几个关键功能分析其实现。

这是本系统的核心功能。为了实现用户可以自定义听写的功能，我们采用一个页面子组件来设置用户的一些听写配置，页面如图4所示，用户通过这个组件可以选择适合自己的听写配置，配置参数如表1所示。

表1 听写配置字段介绍和默认值

图4 自定义听写功能

当用户选择完成后会传到“听写功能”这个父组件的状态中保存，父组件并通过这些配置选出需要听写的单词，供“听写功能”相关子组件使用。

保存用户配置代码为：

在线听写主界面，当配置为声音为“男声”、语速为“4”、听写数为“10”、单词数为“最新10 个”、自动播放为“关”时实现效果如图5所示。

图5 在线听写主界面

点击顶部“喇叭”图标可以重听，当点击“开始”按钮时就会开始听写且按钮会变成“下一个”按钮，每一个单词都会播放两次，播放顺序为随机，听写过的就不会重新播放，提交按钮在听写完成才可以提交，否则提示“未完成”。

点击完成会跳转到成绩单页面，系统后台自动检查并计算成绩传送到前端呈现给用户，如图6所示，当听写单词出现错误时，会出现“惩罚”按钮，点击就会跳转到“惩罚”页面，罚写错误单词，用户也可以直接跳过这个步骤。

图6 成绩单页面

听写记录的良好展示是本系统的另一个重要功能，查询听写记录包括了所有听写记录的最高分、最低分、平均分、及格数、及格率等，如图7所示，用户还通过筛选、排序、查询这些记录来判断自己的不足和需要改进的地方。

图7 听写记录展示效果图

语音是本系统的灵魂，语音来源是通过百度的语音合成API 来进行合成的，我们通过向后台发送单词，百度语音API 合成正确的语音，系统后端获取音频，并保存到本地，每一个用户只保存一个音频文件，每次保存采用替换更新的方式，语音合成流程如图8所示。

图8 语音合成流程图

获取百度语音API，合成服务器端语音，并发送给前端关键代码为：

Node.js 平台是业界广泛使用的大前端开发环境，基于事件驱动和非阻塞I/O 模型的特点，非常适宜开发响应速度快、易于扩展的网络应用，React 和ant Design 是流行的前端开发框架，可以快速制作响应式页面，本文使用这两大框架，以在线英语听写和分析听写记录的需求为出发点，从软件开发周期的角度详细论述了多用户在线听写与管理系统的设计和实现，相信对于读者进行软件开发有一定的参考意义。