html+css+javascript 开发英语生词本

1 摘要

        本设计是基于艾宾浩斯遗忘曲线理论实现的一款小巧、针对性强，能随时随地、反复记忆英语单词的app。对于丰富英语词汇学习模式的研究，克服英语学习者记忆障碍方面具有一定的理论和实践价值。本设计以提高英语学习者词汇记忆效率为目标，通过对相关的问卷调查结果进行分析研究，并据此从学习情景、学习目标、学习体验方面开展设计软件。在此基础上，开展了英语生词本的用户需求分析和系统需求分析，并设计相应的数据库，实现交互性良好的用户端以及可靠的后端。最后对基于艾宾浩斯记忆法的英语生词本小程序进行了使用测试，在测试数据可靠性、用户体验性、学习效率等方面均具有较好的结果。

2 简单需求分析

    2.1 碎片化学习需求

        在现代的社会生活中，人们的生活节奏明显加快，人们只有学习越来越多的技能才能顺应这个时代前进的步伐，因此，为了获取更多的知识，人们需要利用生活中产生的一些碎片化的时间来学习，例如上厕所、等地铁、吃饭等这些碎片化的时间，但这种短暂的时间不适合传统的学习方式，因为传统的学习方式需要需要更多的时间才能获取相应的知识，比如翻阅书籍查找资料。但是通过移动端的学习方式，可以很好的利用这些碎片化的时间，因为移动学习方式具有检索速度快、资料丰富、学习方法多种多样等特。

    2.2 界面交互需求

        对于交互设计而言，应该在不影响用户体验的前提下越简单越好，界面的交互效果也和软件的性能密切相关。在软件中采用简洁的页面元素可以帮助用户提高学习的专注力，页面的色彩风格也应该相互融合，图标含义和文字的内容应相互对于。同时，应该在用户对页面进行操作时迅速得到回应，通过使用一些过渡性的动画，让系统的反映看起来生动、自然。尽量减少代码的冗余程度，按模块进行开发以提高后期的维护效率。

    2.3 单词查询需求

        对于一个词汇学习软件来说，不仅要能够录入用户不熟悉的单词，还应该能够查询用户在英语学习过程中碰到的不认识的单词。本次设计的目的是实现一个小巧、方便的英语生词本，不仅能够帮助用户记忆不认识的生词，还能够在此软件上查询用户不认识的生词的释义、变形以及例句，来帮助用户理解生词。为了方便用户查词，系统将在首页顶部的标题栏处开发查词功能，用户通过输入不认识的单词并点击查询，便可以跳转到该单词的详情页，其中有单词的拼写、发音、各种词性的释义、单词的形变、例句等。内容详细且全面。

3 设计与实现

    3.1 设计目标

        本研究设计开发的英语生词本的总体设计目标是：用户可以在任意时间、任意地点和场合下使用该软件进行英语的词汇查询、添加、记忆。根据艾宾浩斯遗忘曲线理论的指导开发出单词记忆软件。软件采用“今日事今日毕”的学习策略，建议用户学完每日计划的单词数量，严格按照艾宾浩斯遗忘曲线的关键遗忘点进行复习，提高学习者的记忆效率，从而达到提高英语单词背记效率以及词汇量提升的目标。

    3.2 系统设计

        3.2.1 数据库设计

• 实体关系图
  

• 用户数据表
  

• 单词数据表
  

• 单词记忆记录表
  

        3.2.2 功能设计

        本研究所设计的软件在上线后，用户可通过在指定的地址下载并安装到手机上。小程序主要分为了三个功能模块：学习模块、工具模块、“我的”模块。其中学习模块包括了单词查询、单词总预览、今日单词预览、学习记录视图功能，工具模块主要包括了添加笔记、修改笔记功能，“我的”模块主要包括了登录以及注册功能。

• 选词功能模块
          用户每次学习单词时，系统都会从数据库中根据单词的日期信息并结合艾宾浩斯遗忘曲线来选择当日应该记忆的单词有哪些。
  
• “我的”模块
          “我的”模块可以让用户注册自己的账号，注册账号时，会检查数据库中是否已经存在该账号，若已存在，则不能重复注册。账号注册成功后，用户可以通过所注册的账号和密码进行登录，登录时会对所输入的账号密码进行检查，并进行相应的错误提示。账号密码正确，则提示登录成功，并在页面上显示所登录的账号。
• 工具模块
          工具模块中包含“添加笔记”、“修改笔记”两个功能。“添加笔记”功能用于给用户自行添加生词，所填的信息有“单词”、“笔记”、“释义”，其中“笔记”和“释义”是可选项，用户输入完信息后，点击添加按钮，系统会先进行数据库搜索，查看该单词是否已经存在于单词表中，如果存在则不可重复添加，如果不存在，则可以添加。“修改笔记”功能用于给用户修改所添加过的笔记，用户可在记单词页面通过长按，进入修改笔记页面，对笔记进行修改后，点击“修改”则完成该单词笔记的修改。
  
• 学习模块
          学习模块中包含“查词功能”、“单词总预览功能”、“今日单词预览功能”、“学习记录视图功能”。其中“查词功能”可以让用户在英语学习过程中遇到不认识的单词时进行查询，查询结果包括“发音”、“释义”、“变形”、“例句”等信息。“单词总预览功能”可以让用户查看所有“未学”、“需复习”、“熟知”的单词。“今日单词预览功能”可以让用户查看每日计划中的“需学习”和“需复习”的单词。“学习记录视图功能”可以让用户通过条形图的形式直观地看到每日的学习情况，查看每日所新学的单词和复习的单词数量。
  

4 开发环境

        本软件为web应用程序，即通过Hbuilderx的网页打包技术，将网页打包成可运行在安卓和iOS上的软件。系统利用MySQL进行数据库系统的管理，用户端的开发语言为HTML、CSS、JavaScript，开发工具为Hbuilderx，开发所采用的框架为MUI框架。后端使用PHP语言开发，运行在XAMPP建站集成软件包上的apache服务器。通过USB数据线连接手机来调用手机基座，运行在真实的安卓环境中。

5 开发框架

        本软件前端的开发框架为MUI框架。MUI是Dcloud官方推出的基于html5+标准的框架，同时拥有h5组件和原生组件，是最接近原生APP体验的高性能前端框架。为了追求性能， MUI压缩后的JS和CSS文件需要的内存很小。MUI框架相比于其他的框架来说，UI设计和交互体验方面具有更好的原生体验感，使用起来用户的体验更高。

6 效果展示

• 首页
  
• 单词查询
  
• 添加生词
  
• 登陆注册
  
• 进行单词记忆
  
• 修改笔记
  
• 数据可视化
  

7 总结

        本设计当前完成的功能还不够全面，对于一些相对实用的功能，如：词库导入，学习建议、个性化设置等还没有完全实现，在使用简洁的基础上，还应该更加优化与用户的交互，达到交互更加自然生动的效果。同时，本软件的主要受众是大学生，在今后的研究中，不仅要解决先前提出的问题，还应该扩大受众群体，将移动学习更好的应用到人们的生活当中去，从而提高受众的学习效率。

8 附

• 前端
  

• 后台
  

• 文档