【基于Java Web的打字学习系统设计6600字】

基于JavaWeb的打字学习系统设计目录TOC\o"1-3"\h\u13855Abstract 引言1.1研究背景和意义当下，在这个电子产品流行的时代，基本上每个人每天都会使用电子产品，例如手机、电脑。当人们对打字并不熟悉的时候，使用电子产品去交流，人们把大多数时间都浪费在打字上面。经过调查发现，目前有很多的高校大学生都会出现“一指禅”的情况。主要原因无非是打字能力弱，还有就是对自己的“一指禅”情况并不在意，也没有一个明确的目标以及合适的平台去练习。但是打字速度往往在一定程度上影响着工作效率,对于部分职业,如文秘、网络客服等,打字速度甚至决定了能否胜任该岗位[1]。市面上也有很多类似的打字软件，比如金山打字通，雨阳打字通等，但它们有的功能太过简单，使用起来不够便利；有的又太过花哨，这对提高用户的打字能力并没有帮助，没有很好的体验感。在如今的快节奏的生活中，做什么讲究的都是高效率。因此针对目前的状态，设计了一款专门针对那些想急切提高自己打字效率的人群，让他们能够在短时间内提高自己的打字速度。在此之前，有很多的打字软件的诞生。这些打字软件多多少少存在着一些问题，在我看来，最大的不足之处就是不够简洁高效。在生活中，人们每天都有很多的事情需要去完成，有的时候会因为懒得去下载软件而放弃对打字的练习。所以基于JavaWeb的打字学习系统可以让用户在闲暇时间内的练习打字[2]，不会占用人们太多的时间，也不需要你去下载软件，能够让用户花更少的时间，去提高他们的的打字速度和正确率，从而提高他们的打字技能和信息素养[3]。1.2开发工具及简介（1）IntelliJIDEA开发工具IntelliJIDEA是行内公认最好用的Java开发工具，IntelliJIDEA提供了很多插件安装的功能[4]，相比于Eclipse，IntelliJIDEA插件的安装更加方便快速，而且用起来很流畅，不会卡顿，同时IntelliJIDEA的编码辅助、动态语法检测等功能实在是很人性化，在便利的同时还减少了我们的工作量，它还可以对JavaScript，JQuery，Ajax等技术进行Debug，方便找出程序的问题[5]。（2）MySQL数据库MySQL是一个关系型数据库管理系统，它拥有着占用存储小、查询速度快、开源免费等诸多优点，很适合中小型网页应用的开发，搭配NavicatforMySQL数据库管理工具使用起来更加便利[6]。（3）Tomcat服务器作为一个Web应用，Tomcat服务器的使用必不可少，它是一个轻量级的应用服务器[7]，运行的时候对CPU的占用很少，可扩展性好，稳定可靠，对于毕设开发Web应用来说是不二首选。需求分析2.1前台功能（1）用户注册登录及修改资料用户在首次使用本打字学习系统前需要注册用户，注册成功后就可以登录了，同时用户还可以修改个人资料和密码。（2）用户在线打字练习用户登录之后可以根据自身需要选择不同难度的文章进行打字练习，包括简单、中等、困难三种难度，同时用户还可以根据文章标题进行搜索筛选文章。用户在打字过程中，将用户正在输入的文本中的字符与参照文本中的字符进行一一匹配[8]。同时系统会显示打字的一些信息，包括打字速度、打字时间、正确率、打字字数、错误字数等。当用户点了提交按钮之后这些数据都会被存储到数据库中，并且系统会根据这些信息为你划分一个等级，等级共有四等，分别是“不及格，请加强练习！”“及格，请继续努力！”“良好，请继续加油！”“优秀，请继续保持！”（3）提交记录用户在打字练习页面点击了提交按钮之后会自动跳转到提交记录页面，用户也可以自己进入提交记录页面查看历史提交记录，同时可以根据用户名进行模糊查询。在提交记录界面你还可以直接选择提交记录中之前自己或别人练习的文章，直接进入打字练习。（4）Rank排名这是打字排名界面，根据打字速度和正确率的乘积综合排序，从高到低显示。在这个界面你可以选择排行榜上自己或别人练习的文章，直接进入打字练习。2.2后台功能（1）用户管理管理员登录本打字学习系统后，可以查看注册用户的基本信息，如用户名、昵称、邮箱、注册时间等，还可以根据用户名在搜索栏进行搜索，筛选用户。（2）文章管理管理员登录本打字学习系统后，可以对练习文章进行管理，比如新增文章，删除文章，修改文章标题名、难度等级以及内容等，还可以根据文章标题在搜索栏进行搜索，筛选文章。2.3系统业务数据流图本打字学习系统主要分为普通用户端和管理员端，系统中的数据是以表的方式存储在数据库中。普通用户端的功能主要分为注册、登录、在线打字、提交记录、Rank排行、修改个人资料、文章查询七个部分。数据流图如图2-1所示：图2-1普通用户端数据流图管理员端的功能主要分为登录、用户管理、文章管理这三个部分，数据流图如图2-2所示：图2-2管理员端数据流向图概要设计3.1系统功能模块的划分本打字学习系统主要分为用户前台和管理员后台两大功能模块，如图3-1所示：图3-1系统功能模块图3.2功能模块设计3.2.1用户前台模块（1）在线打字：用户登录本系统后，点击左边导航栏中的“打字练习”按钮，会进入文章选择界面，在此界面可以根据用户自身选择不同的难度的文章进行练习（包括简单、中等、困难三种），还可以在上方搜索栏通过输入文章标题名模糊查找文章。随后点击所选择的文章即可进入打字练习界面，打字开始输入后，系统会自动计算并显示打字时间、打字速度、正确率、打字字数、错误字数等信息，当提交之后，系统会根据你的打字情况给你评定一个等级（包括“不及格，请加强练习！”“及格，请继续努力！”“良好，请继续加油！”“优秀，请继续保持！”四等），同时将打字信息存入数据库中。（2）提交记录：用户登录本系统后，点击左边导航栏中的“提交记录”按钮会进入提交记录界面，在此界面可以查看打字练习的历史提交记录，还可以通过点击用户名或昵称进行筛选记录，也可以通过点击此界面中文章标题名直接进入打字界面。此外，用户在打字界面点击提交之后会自动跳转至提交记录界面，便于查看当次打字情况。（3）打字排行：用户登录本系统后，点击左边导航栏中的“Rank排名”按钮会进入打字排行界面，在此界面可以查看所有用户的打字记录排行。此外也可以通过点击文章标题名直接进入打字界面。3.2.2管理员后台模块（1）用户管理：管理员登录本打字学习系统后，点击左侧导航栏中的“用户管理”按钮进入用户列表界面，在此界面管理员可以查看用户的基本信息，包括用户名、昵称、邮箱、注册时间等，还可以通过输入用户名在上方搜索栏中利用模糊搜索来查找用户。（2）文章管理：管理员登录本打字学习系统后，点击左侧导航栏中的“文章管理”按钮进入文章管理界面。在此界面管理员可以看到系统中所有的文章及其信息，通过上方搜索栏旁边的添加按钮可以新增文章，还能够对文章列表中已有的文章进行修改，如修改标题、难度、内容等。最后，还能够删除不需要的练习文章。3.3数据库设计基于JavaWeb的打字学习系统共有如下三张数据库表：用户信息表：主要记录本打字学习系统中注册用户的用户名、昵称、密码、邮箱、注册时间及身份。表3-3-1用户信息表编号属性名称数据类别长度能否为空标识1uidint50Notnull主键用户ID2usernamevarchar50Notnull用户名3nicknamevarchar50Notnull昵称4passwordvarchar50Notnull密码5emailvarchar50Notnull邮箱6reg_timevarchar50Notnull注册时间7statusint50Notnull身份文章信息表：主要记录练习文章的一些基本信息，包括标题名、难度等级、内容、发布时间、更新时间。表3-3-2文章信息表编号属性名称数据类别长度能否为空标识1midint50Notnull主键文章ID2namevarchar50Notnull文章标题名3diffvarchar50Notnull难度等级4messagevarchar5016Notnull文章内容5rel_timevarchar50Notnull发布时间6upd_timevarchar50Notnull更新时间（3）成绩记录表：主要记录用户打字练习的信息，包括用户名、昵称、文章标题名、打字速度、正确率、打字总数、成绩等级、打字时间、打字日期。表3-3-3成绩记录表编号属性名称数据类别长度能否为空标识1sidint50Notnull主键记录ID2uidint50Notnull用户ID3midint50Notnull文章ID4usernamevarchar50Notnull用户名5nicknamevarchar50Notnull昵称6mesnamevarchar50Notnull文章标题名7speedvarchar50Notnull打字速度8correct_ratevarchar50Notnull正确率wordnumvarchar50Notnull打字总数gradevarchar50Notnull成绩等级wrtimevarchar50Notnull打字时间timevarchar50Notnull打字日期详细设计与实现4.1登录注册模块的实现用户登录本打字学习系统之前需要在注册界面注册一个账户，通过注册界面注册的都是普通用户。管理员账户只有一个，直接通过数据库进行维护，这样可以提高系统的安全性。普通用户注册时，需要输入用户名、昵称、邮箱、密码以及密码的再次确认。用户名输入框失去焦点之后，前端会通过Ajax向后端传值（用户输入的用户名），后端Servlet层接收，然后调用Dao层方法对数据库做查询操作并返回标志字段，前端registered.js中根据标志字段来判断该用户名是否已存在，若存在则提示用户“该用户名已存在！”。当用户输入信息无误后，点击注册按钮就可以成功注册用户，然后自动跳转到登录界面。用户登录时，获取用户所输入的用户名和密码，然后和数据库用户表里的用户名和密码进行比对，如果正确，则登陆成功并跳转至首页；否则返回“用户名或密码不正确，请重新输入!”的错误信息弹窗。图4-1注册界面图4-2登录界面4.2在线打字模块的实现用户在点击“打字练习”按钮之后跳转到文章列表界面，其中文章列表是通过JQuery的id选择器以表格的形式渲染上去的[9]，包括ID、文章标题、难度三列，上面的搜索栏用户可以输入文章标题进行模糊搜索，以此来筛选文章。图4-3文章列表界面用户点击“文章标题”按钮即可进入打字练习界面，与此同时前端通过Ajax向后端Servlet接口类请求文章内容，Servlet接口层调用Dao层方法从数据库中返回JOSN数据格式的文章内容，然后前端read.js获取到JOSN数据格式的文章内容之后，通过split()方法将文章内容分割成一个个的单独的字符串存入数组，再循环遍历该数组按一行显示52个字符串，且隔一行插入一个input输入框的方式通过JQuery的id选择器渲染到打字练习界面上去。界面右边的打字信息栏是通过HTML的<br>标签实现分行显示[10]，在开始输入后计时，当用户输入的字与上面文本一致的时候，文本的字就会变成绿色，否则就变成红色。当用户打字完成之后，可以点击提交按钮进行提交，系统会根据用户的打字速度和正确率给出相应的成绩等级，成绩等级分为四等：当打字速度>=60.0KPM且正确率>=95%，“优秀，请继续保持！”当打字速度>=50.0KPM且正确率>=90%，“良好，请继续加油！”当打字速度>=40.0KPM且正确率>=85%，“及格，请继续努力！”当打字速度<40.0KPM且正确率<85%，“不及格，请加强练习！”在线打字模块关键代码如图4-4：图4-4打字练习模块关键代码图4-5打字练习界面4.3提交记录模块的实现提交记录界面可以直接点击左边导航栏提交记录按钮进入，还有当用户在打字界面点了提交按钮之后会自动跳转到此界面，同时将当次最新的打字记录显示出来。此界面在status.js中通过JQuery的id选择器以表格的形式渲染到页面上，将打字的所有信息按照时间先后展示出来，包括用户名、昵称、文章标题、打字速度、正确率、等级、打字总数、打字时间、提交日期，其中等级列使用不同的颜色表示不同的等级，便于用户区分。如果用户只想看自己的提交记录，可以点击记录列表中自己的用户名和昵称，这样就会把自己的提交记录全部筛选出来。而且提交记录中的标题列是加了超链接<a>标签的，方便用户直接点击进入文章打字练习。图4-6提交记录界面4.4打字排行模块的实现打字排行界面直接点击左边导航栏中Rank排名按钮进入，实现方法与提交记录界面差不多，只不过做了一个排序，使记录按打字速度与正确率乘积降序排序，可以清晰的看到打字成绩由高到低排列。用户同样也可以通过点击文章标题进入打字练习，这个便于用户进行挑战排行榜上的其他用户。图4-7Rank排名界面4.5用户管理模块的实现此界面主要是展示系统中所有注册的用户，可以查看他们的个人信息，包括用户名、昵称、邮箱、注册时间等，用户列表记录按注册时间先后进行排序。还可以通过上方搜索栏根据用户名进行模糊搜索，筛选用户。管理员可以点击右边的按钮查看用户信息或删除用户。图4-8用户管理界面点击右边的用户列表记录右边的按钮进入用户信息界面，可以看到用户的用户名、昵称、邮箱以及用户权限，同时可以点击返回按钮返回用户管理界面，如图4-9：图4-9查看用户信息界面4.6文章管理模块的实现文章管理界面和普通用户的文章列表界面实现方法差不多，但是多了对文章的增删改查功能。它可以展示所有文章信息，包括文章标题、难度、发布时间、更新时间，按照发布时间先后进行排序显示，界面展示如图4-10：图4-10文章管理界面管理员能够通过上方搜索栏输入文章标题进行模糊搜索，以此来查找文章，点击搜索栏旁边“+”号就可以进入添加文章的界面，如图4-11：图4-11文章添加界面点击右侧的修改按钮，可以进入更新文章信息界面，能够修改文章的标题名、难度等级、内容等，然后点击“更新文章”按钮，更新完成后跳转到文章管理界面，如图4-12:图4-12更新文章信息页面系统功能测试5.1登录注册功能测试测试内容：（1）在注册时输入已注册过的用户名，会返回“该用户名已存在！”的错误提示：图5-1注册时用户名重复错误（2）登录时输入错误的用户名或密码，会返回“用户名或密码不正确，请重新输入！”的错误提示：图5-2登录时用户名或密码输入错误5.2在线打字功能测试测试内容：（1）在打字练习界面，当在输入框输入的文字与上方文本一致时，文本会显示绿色，否则显示红色以提示用户输入的不对，且右边统计数据中错误字数显示无误：图5-3在线打字界面测试（2）打字结束后点击提交按钮，可以正常提交并正确显示成绩与记录：图5-4提交记录正确显示测试（3）在搜索栏中输入“人”，可以进行模糊搜索，正确筛选出文章：图5-5搜索栏功能测试5.3提交记录筛选功能测试测试内容：提交记录界面点击用户名或昵称，会根据你点击的用户名或昵称筛选出相应的记录：图5-6筛选前图5-7筛选后5.4打字排行界面功能测试测试内容:进入Rank排名界面看排名是否是按打字速度与正确率乘积降序排序显示的：图5-8排名顺序测试5.5文章管理功能测试测试内容：（1）点击“+”号，进入文章添加界面，输入文章标题和内容，选择相应的难度等级，然后点击“添加文章”按钮，看是否正常添加成功：图5-9文章添加图5-10添加成功（2）点击文章列表记录右边删除按钮，会询问用户“是否删除？”，然后点击确定按钮，文章被正常删除：图5-11文章删除图5-12删除成功（3）点击文章管理界面右侧修改按钮，修改任意文章信息（此处修改的是标题），文章信息被正常修改：图5-13文章修改图5-14修改成功结语在本次毕业设计中，真的是经历了许多大大小小的波折，不过在老师的指导和同学的帮助下，最终顺利的完成了本次毕业设计！在系统开发过程中，从最开始的提取需求，到搭框架、数据库建表，再到后端逻辑代码编写、前端页面的开发，最后到前后端完成通信，使我对一个Web项目有了一定的了解，熟悉了一个Web项目的基本开发流程。本Web项目后端采用的是Java语言，Java作为一个流行的开发语言来说，熟练地使用它对于我们毕业之后从事工作是很有帮助的。通过本打字学习系统的开发，使我对Java语言的掌握更进了一步，也让我对开发一个前后端分离项目有了一定的经验和积累。总而言之，能够成功的做出这个打字学习系统还是很开心的，这也算是对大学四年所