基于HTML5和Node.js的小学生日常管理系统的设计与实现.doc

目 录摘 要IIAbstractIII目录IV1 前言72 开发工具及相关技术72.1 开发工具WebStore介绍72.2 Node.js介绍72.3 HTML5介绍82.4 MongoDB介绍93 小学生日常管理系统分析103.1 小学生日常管理系统角色分析103.2 系统功能需求分析123.2.1 登录模块123.2.2 作业模块133.2.3 信息发布模块133.2.4 资源学习模块133.3 非功能需求134 小学生日常管理概要设计144.1 系统架构设计144.2 系统功能结构设计154.3 系统数据库设计164.3.1 逻辑设计164.3.2 物理设计185 小学生日常管理系统详细设计215.1 登录注册215.1.1 登录注册的详细设计215.2 通知管理225.2.1 通知管理的详细设计225.3 作业管理265.3.1 作业管理的详细设计265.4 学习资源管理345.4.1 学习资源管理详细设计345.5 学生管理385.5.1 学生管理的详细设计386 小学生日常管理系统的实现406.1 登录注册功能的实现406.2 通知管理的实现426.3 作业管理的实现436.4 学习资源管理的实现446.5 学生管理的实现467 小学生日常管理系统测试477.1 环境搭建477.2 系统功能测试47总结48参 考 文 献49谢辞50441 前 言目前我国的教育体制正处在不断改革，创新的阶段。随着社会的发展和经济时代的到来，学校教学质量的提高，生源在不断扩大。尤其是自从国家实施大众化教育，我国学校的招生数量急增加。众多学生管理就成了一个现实问题摆在了人们的面前。学生的日常管理是学校管理中比较重要的部分。主要原因是因为工作繁杂，工作量比较大，其次因为学生繁多，不容易管理，传统的管理模式已经不能适应学校的发展。需要一款适合学校教育的操作简单、功能完善的学生日常管理系统。作为学校，除了育人还要育知，学生的日常管理是学校教育工作中的重要组成部分，涉及到多种角色，它的内容无论是对管理者和被管理者来言都是至关重要的。为用户提供充足全面的信息和快捷的查询手段成为急需解决的问题。学生可以更合理的安排时间，对新知识学习，对旧知识复习，提高学习效率。老师和学校可以更有效掌握学生的信息情况达到因材施教的效果。还可以在一定程度上解放老师。并且在一定程度上为以后学校教育的发展打下坚实的基础。基于这种问题，利用B/S架构和HTML5、Node.js、MongoDB数据库等相关技术开发一款学生日常管理系统。将系统运用到学生的日常管理中，使传统教育模式和新兴教育模式相结合，可以更好的辅助老师的教学，促进学生学习，使学校教育更上一层楼。2 开发工具及相关技术2.1 开发工具WebStorm介绍WebStorm是一款JavaScript开发工具，目前已经被广大中国JS开发者誉为“Web前端开发神器”。具有强大的智能提示、版本控制、本地历史、即时模板等特性。WebStorm还内置了对SASS、Node.js、CoffeeScript、Jade的支持，并且可以对自定义代码进行格式化规则。还具有基于DOM，特定浏览器完成、编写导航和用法查询、JavaScript重构、代码检测和快速修复等功能。其中智能代码补全、代码格式化、HTML提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构预览等功能深受编程人员的喜爱。2.2 Node.js介绍Node.js是一个JavaScript运行平台，其显著特征是它的异步和事件驱动机制，以及小巧精悍的标准库。Node.js目前有两个活跃的版本：长期支持版(LTS)和当前版，由Node.js基金会进行管理并且提供支持。这个行业联盟遵循开放式治理模型。自从2009年Node.js问世以来，JavaScript渐渐成为开发所有软件的语言，其地位也越来越重要，不再是只能勉强在浏览器上用一下的鸡肋语言了。这里有ECMAScript 2015的功劳，因为它解决了之前那些ECMAscript标准中遗留下来的几个关键问题。Node.js所用的Google V8引擎就是基于ECMAScript 2015开发的。ECMAScript 2015是ECMAScript标准的第6个版本，简称ES6。Node.js、React和Electron等技术创新成果的功劳也不可小觑，是它们让JavaScript无处不在：从服务器到浏览器，从原生的移动端应用程序。甚至像微软这样的大公司都对JavaScript敞开了怀抱，也为Node.js的成功起到推波助澜的作用。大体上来说，Node.js和JavaScript的优势之一是他们的单线程编程模型。多个线程一般会引入Bug，Node.js保留JavaScript在浏览器中所用的模型。在为浏览器编写代码时，指令序列一次执行一条，代码不是并行执行的。然而对于用户界面来说，这样是不合理的。为了解决这个问题，浏览器引入事件机制：在点击按钮时，就有一个事件被触发，事件处理函数被调用。这种机制规避了一些在线程编程中经常出现的问题，比如资源死锁和竞态条件。服务器编程中面对的情况也差不多：访问磁盘和网络这样的I/O请求会比较慢，所以希望，在读取文件或通过网络发布消息时，运行平台不会阻塞业务逻辑的执行。Node.js用三种技术解决这个问题：事件、异步API、非阻塞I/O。当程序在处理其他事件时，发起一个请求来获取网络资源，然后当网络操作完成时，将会运行一个回调函数来处理这个操作的结果。图1-1展示了一个典型的Node.js Web应用程序，它用Node.js Web应用库Express来处理商店的订单流程。为了购买产品，浏览器发起了一个请求，然后应用程序检查库存，为该用户创建一个账号，发回执邮件，并返回一个JSON HTTP响应给浏览器。同时在做的其他事情有：发送了一封回执邮件，更新了数据库来保存用户的详细信息和订单。代码本身很简单，就是JavaScript指令，但运行平台是并发操作的，因为它采用了非阻塞I/O。图1-1 一个Node.js应用程序中的异步非阻塞组件2.3 HTML5介绍HTML(Hyper Text Mark-up Language)是一种用来创建网页的通用标准标记语言。由于web技术发展迅速，之前的版本已经不再满足需求，于是在2014年10月29日，万维网联盟宣布，经过8年的努力，HTML5标准完成并发布，自从HTML5发布以来，深受广大编程工作者的喜爱，目前已经成为万维网最新的标准。为了更好的处理互联网应用，HTML5添加了很多新特性:(1) 语义特性(Class：Semantic)：HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据和微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。(2) 本地存储特性(Class: OFFLINE & STORAGE)：基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些都得益于HTML5 APPCache，以及本地存储功能。包括Indexed DB(HTML5本地存储最重要的技术之一)和API说明文档。(3) 设备兼容特性(Class: DEVICE ACCESS)：从Geolocation功能的API文档公开以来，HTML5为网页开发工作者们提供了更多功能上的优化选择，带来更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音直接与麦克风及摄像头相联。(4) 连接特性(Class: CONNECTIVITY)：更有效的连接工作效率，使得基于页面的实时聊天，更快速的网络游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性将实现将数据“推送”到客户端的功能。(5) 网页多媒体特性(Class: MULTIMEDIA)：支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。(6) 三维、图形及特征特性(Class: 3D, Graphics & Effects)：基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中所呈现的惊人视觉效果。(7) 性能与集成特性(Class: Performance & Integration)：没有用户永远等待你的LoadingHTML5会通过XMLHTTPRequest2等技术，解决以前跨域等问题，帮助您的Web应用网站在多样化的环境中更快速的工作。2.4 MongoDB介绍MongoDB是一个基于分布式文件存储的数据库。由c+语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系型数据库和非关系型数据库之间的产品，是非关节型数据库中功能最丰富的，最像关系型数据库的。它支持的数据结构非常松散，类似JSON的BSON格式，因此可以保存比较复杂的数据类型。Mango最大特点就是它支持的查询语句非常强大，其语法有点类似面向对象的查询语言，几乎可以实现类似关系型数据库单表查询的绝大数功能，而且还支持对数据进行索引，除了这个特点它还有以下特性：(1) 面向集合存储，容易存储对象类型的数据。在MongoDB中数据被分组存储在集合中，集合类似RDBMS中的表，一个集合中可以存储无限多的文档。(2) 模式自由，采用无模式存储。在MongoDB中存储的数据是无模式的文档，采用无模式存储数据是集合区别于RDBMS中的表的一个重要特征。(3) 支持完全索引，可以在任意属性上建立索引，包含内部对象。MongoDB的索引和RDBMS中的索引基本一样，可以在指定属性、内部对象上创建索引以提高查询速度。除此之外，MongoDB还提供创建基于地理空间的索引能力。(4) 支持查询。MongoDB支持丰富的查询操作，MongoDB几乎支持SQL中大部分查询。(5) 强大的聚合工具。MongoDB除了提供丰富的查询功能外，还提供强大的聚合工具，如count、group等，支持使用MapReduce完成复杂的聚合任务。(6) 支持复制和数据恢复。MongoDB支持主从复制机制，可以实现数据备份、故障恢复、读写扩展等功能。而基于副本集的复制机制提供了自动故障恢复的功能，确保了集群数据不会丢失。(7) 使用高效的二进制数据存储，包括大型对象。使用二进制格式存储，可以保存任何类型的数据对象。(8) 自动处理分片，以支持云计算层次的扩展。MongoDB支持集群自动切分数据，对数据进行分片可以使集群存储更多的数据，实现更大的负载，也能保证存储的负载均衡。(9) 支持Perl、PHP、Java、C#等语言的驱动程序，MongoDB提供了当前所有主流开发语言的数据驱动包，开发人员使用任何一种主流开发语言都可以轻松编程，实现访问MongoDB数据库。(10) 文件存储格式为BSON(JSON的一种扩展)。BSON是对二进制JSON的简称，BSON支持文档和数据的镶嵌。(11)可以通过网络访问，可以通过网络远程访问MongoDB数据库。3 小学生日常管理系统分析本章主要是根据学生日常管理系统的特点对系统的需求进行完善的整理和叙述。本章首节主要是对学生日常管理系统角色进行分析和划分，接下来就是对学生日常管理系统进行需求分析，其中包含功能需求和非功能需求。3.1 小学生日常管理系统角色分析根据对小学生日常管理系统简单分析，将系统角色划分为学生、老师、家长、管理员，具体职能如表3-1所示。 表3-1 系统角色 系统角色分析 职责描述 管理员 对学生、家长、老师信息进行管理 学生 学习课程、查看通知、签到 老师 上传资源、查看通知、管理学生 家长 查看通知 小学生日常管理系统是为了给老师、学生、家长在教育和学习过程中提供帮助。因此从老师、学生、家长的角度来进行需求分析，得到以下需求。从学生的角度来分析需求。(1) 在系统中可以对老师上传的资源进行在线学习，可以对新知识的学习和对旧知识的复习，并且可以进行签到。(2) 在学习之后可以查看老师布置的作业，并且完成后可以上传，可以查看老师给的评论。(3) 可以随时接收发送的通知。(4) 修改个人资料。从家长的角度来分析需求。(1) 可以在系统中查看老师布置给孩子的家庭作业和老师给予的评论，并且可以督促孩子完成。(2) 可以接收查看系统发布的通知。(3) 修改个人信息。从老师的角度来分析需求。(1) 可以根据每天的教学进度向系统上传作业。(2) 可以对学生每天反馈的作业进行查阅和评论。(3) 可以根据当日教学情况来上传学习资料。(4) 修个个人信息。(5) 发布通知。从管理员的角度来分析需求。对老师、学生、家长信息进行管理。通过对系统的功能分角色分析，需求划分如图3-1所示。图3-1 小学生日常管理系统角色分析3.2 系统功能需求分析通过对学生日常管理系统需求的调研，将系统的需求主要划分为以下几部分：学习功能、作业功能、信息发布功能、登录功能等等。如图3-2所示。图3-2 学生日常管理系统需求模块3.2.1 登录模块登录模块：用户打开登录界面，登录系统。登录成功之后，可以对用户的个人信息进行修改，包括修改密码、个人信息、登录图标等。登录模块主要分为注册和登录两个功能。(1) 注册：用户打开系统注册界面，分角色注册，每个角色拥有不同的权限。(2) 登录：用户打开登录界面，填写用户信息，用户信息验证成功登录系统，还可以对用户的个人信息进行修改。3.2.2 作业模块作业模块：作业模块主要参与者是老师、学生、家长。作业模块主要分为家庭作业、上传作业、学生作业三个功能。(1) 家庭作业：老师根据每天的教学工作来布置作业。学生通过“家庭作业”查看和完成老师布置的作业。家长可以查看老师布置的作业，督促学生完成每天的作业。(2) 上传作业：学生完成老师布置的作业之后，可以通过系统上传作业。学生和家长可以查看老师的评论。(3) 学生作业：老师接收到学生反馈的作业可以对其进行审查评论。3.2.3 信息发布模块信息发布模块：信息发布模块主要参与者是老师、学生、家长。信息发布模块主要分为通知列表和通知发布两个功能。(1) 通知发布：老师的主要工作就是可以根据学校的教育教学安排通过系统来发布消息。(2) 通知列表：老师通过通知列表可以查看和删除发布的消息，并且通过家长阅历按钮来查看学生家长是否对通知阅读。学生和家长可以通过系统对通知查看。3.2.4 资源学习模块资源学习模块:资源学习模块主要参与者是老师和学生。资源学习模块主要分为学生签到、资源列表、学生签到三个功能。(1) 签到：学生可以通过签到按钮每天进行签到，老师可以查看每天学生签到情况。(2) 资源列表：老师可以根据每天的课程安排来上传资源，培养学生自主学习能力。学生可以对老师上传的资源进行下载查看。(3) 学生签到：老师可以查看学生每天是否进行签到。3.3 非功能需求一款软件的需求可以分为功能性需求和非功能性需求，在软件在设计阶段功能性需求固然重，但是非功能性需求也是不可或缺的，并且也是常常被轻视，甚至被忽略的一个非常重要方面。其实不然，一款软件的非功能性需求不仅能影响这款软件的质量，并且对这款软件的功能性需求也存在着很大的影响。如果在软件的设计阶段没有定义好非功能性需求，这软软件的成品往往也是不尽人意的，最终导致产品的失败。下面主要从系统的易用性、可靠性、易扩展性进行分析。(1) 易用性：从用户的角度分析，一款软件应该做到操作简单，界面美观大方，而且功能比较完善。首先应该做到的就是操作简单，界面清晰，并且将使用频率比较高的功能放在一级界面，并且对软件进行更新的时候，不要做很大的改动，会对用户带来不便，降低用户体验，给软件减分。(2) 可靠性：可靠性之与在规定的一段时间和条件下软件维持其性能水平的能力有关的一组属性。具体包括： 成熟性：与有软件故障引起失效的额度有关的软件属性。 容错性：与在软件故障和违反指定接口的情况下维持规定的性能水平的能力有关的软件属性。 易恢复性：与在是小发生后重建其性能水平并恢复直接受影响数据的能力，以及为达到此目的所需时间的努力有关的软件属性。这类非功能性需求往往是全局的，他除了与系统运行环境、平台选择、代码质量相关之外，还涉及部分技术性功能需求。(3) 易扩展性：学生日常管理系统日后在更新过程中肯定功能更加完善，所以在设计过程中要更加灵活，模块化设计，使以后的更新功能不需要做到少量改动，实现对软件的扩展。(4) 安全性：包括传输加密，存储加密，可破解性，以及各种未被授权的用户行为如何防范和控制，都属于安全性范畴，这里的安全不单单针对外部普通用户，也针对内部不同级别的权限用户的控制。小到如何防范和处理用户在输入框里输入特殊字符来获取设计者未曾预料的结果，大到防范黑客和内部内鬼，安全很多时候不仅仅依赖技术实现，同时依赖相应的制度和审计。4 小学生日常管理概要设计本章节是对小学生日常管理系统的概要设计，通过上一章的分析，对系统模块进行了划分，本章节对系统架构、功能结构、数据库进行阐述。4.1 系统架构设计通过对小学生日常管理系统进行了需求分析之后，最终选定基于采用B/S模式对此系统进行设计和实现，用户可以通过浏览器对系统进行访问。其中前端使用超文本标记语言HTML和层叠样式表CSS等技术来搭建系统的页面，并且运用JQuery框架实现页面设计，使用JavaScript来实现前端的业务逻辑，包括系统登录验证等等。使用Node.js作为服务端开发语言，创建高性能的网络应用程序。在服务器端的主要的功能模块有：Express和HTTP模块，其中Express是一款简单而灵活的web框架，提供一系列强大的特性来帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速创建一个功能性完整的网站。具有可以设计中间件来响应HTTP请求、定义了路由表用于执行不同的HTTP请求动作、可以通过向模板传递参数来动态渲染HTML界面等特性。使用MangoDB数据库。MangoDB是面向对象的分布式数据库，使用它的Node开发人员特别多。时髦的MEAN中的M就是MongoDB(另外三个是Express、Angular和Node)，一般刚开始接触Node遇到的第一个数据库就是它。MongoDB数据库把文档存储在无模式的数据集中。不需要预先为文档定义模式，同一个数据集中的文档也不需要遵循相同的模式。这个MongoDB很大的灵活性，但程序要因此承担起保证数据一致性的责任，确保文档结构是可预测的。系统架构图如图4-1所示：图4-1 系统B/S架构图4.2 系统功能结构设计本节将对小学生日常管理系统进行细化，通过上面的分析可以将系统分为通知管理、学生管理、作业管理、学习资源管理、个人信息管理。通知管理主要由通知列表和通知发布两项组成，可以由老师发布来发布学校的一系列通知，学生和家长可以随时知道学校的动态。学生管理里面包括学生列表一项，老师可以对自己学生的信息进行查看。作业管理其中包含家庭作业、学生作业、上传作业，老师可以根据每天的教学进度布置作业和对学生作业做出评论，学生可以对作业进行查看，并且做完之后可以上传，达到对功课进行巩固的效果，家长可以对作业进行查看，起到监督和督促作用。学习资源管理其中有学生签到和资源列表两个部分组成，老师可以根据课程进度或者为了开阔学生视野上传一些资源，学生可以在课余时间进行查阅。个人设置有个人信息可供用户使用，主要就是对自己信息查看和修改。小学生日常管理系统功能结构如图4-2所示。图4-2 系统功能结构图4.3 系统数据库设计数据库可以直观的理解为存放数据的仓库，只不过这个仓库是在计算机的大容量存储器上，而且数据必须按照一定的格式存放，因为它不仅需要存放，而且便于查找。可以实现数据共享、减少数据的冗余、数据的独立等功能。本系统采用MongoDB数据库。根据第二章可以分析出学生日常管理系统由三大组成部分：客户端(浏览器端)、客户端、数据库。本节对数据库进行介绍。4.3.1 逻辑设计根据对系统需求分析的基础上，需要把概念结构设计阶段设计好的基本实体-关系图转换为选用的数据库管理系统产品所支持的数据模型相符合的逻辑结构。通知相关的数据库相关E-R图如图4-3所示:图4-3 通知相关的数据库相关E-R图作业相关的数据库E-R图如图4-4所示:图4-4 作业相关的数据库相关E-R图资源相关的E-R图如图4-5所示:图4-5 资源相关的数据库相关E-R图4.3.2 物理设计基于HTML5和Node.js的小学生日常管理系统包括用户注册、登录、签到、学习、作业、信息发布等功能。学生日常管理系统中，以第二章的分析作为基础，该系统中分为管理员、老师、学生、家长四种用户。这几种用户会根据他们在系统中的权限分配不同的功能。管理员可以对用户信息进行管理。老师可以查看自己学生的信息、上传和删除学习资源、布置作业和查看学生反馈的作业、发布和删除通知。家长可以查看老师发布的作业和通知。学生可以查看老师发布的资源、作业和通知，并且可以上传自己完成的作业。物理设计就是根据所选择的关系型数据库的特点对逻辑模型进行存储结构设计。它涉及到的内容包括4部分：1、定义数据库、表及字段的命名规范 2、选择适合的存储引擎3、为表中的字段选择合适的数据类型 4、建立数据库结构。小学生日常管理系统数据结构如下表：管理员表主要对管理员的信息进行管理，具体字段如表4-1所示。表4-1 管理员表字段名类型长度描述IdInt11编号acountVarchar20账号psswordVarchar20密码签到表主要对签到学生进行记录，具体字段如表4-2所示。表4-2 签到表字段名类型长度描述IdInt11编号dateVarchar30时间StudentVarchar20学生通知表主要对通知信息进行管理，具体字段如表4-3所示。表4-3 通知表字段名类型长度描述IdInt11编号dateDate30时间ContentVarchar200内容TitleVarchar50标题readListVarchar50阅读人家长表主要对家长信息进行管理，具体字段如表4-4所示。表4-4 家长表字段名类型长度描述IdInt11编号AvatarVarchar20头像TeacherVarchar20所属老师DateDate30日期AccountVarchar20账号PasswordVarchar20密码资源表主要对资源信息进行管理，具体字段如表4-5所示。表4-5 资源表字段名类型长度描述IdInt11编号DateDate30日期LinkVarchar100链接FromVarchar20所属TitleVarchar20标题FileVarchar100文件学生表主要对学生信息进行管理，具体字段如表4-6所示。表4-6 学生表字段名类型长度描述IdInt11编号AccountVarchar20账号PasswordVarchar20密码TeacherVarchar20所属老师DateDate30日期AvatarVarchar20头像教师表主要对教师信息进行管理，具体字段如表4-7所示。表4-7 教师表字段名类型长度描述IdInt11编号AccountVarchar20账号PasswordVarchar20密码AvatarVarchar20头像DateDate30日期作业表主要对作业信息进行管理。具体字段如表4-8所示。表4-8 作业表字段名类型长度描述IdInt11编号DateDate30日期StudentVarchar20学生TeacherVarchar20老师TitleVarchar20标题FileVarchar100文件CommentVarchar100评论5 小学生日常管理系统详细设计本章对小学生日常管理系统的通知管理、作业管理、学习资源、学生管理的具体实现进行更加详细的设计。本系统的体系结构采用了B/S架构，浏览器/服务器架构，是Web兴起后的一种网络结构模式。Web浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中在服务器中，简化了系统的开发、维护和使用。客户机上只需要安装一个浏览器，服务器上安装数据库，浏览器通过Web Server同数据库进行数据交互。B/S架构采取浏览器请求，服务器响应的工作模式。用户可以通过访问Internet上由Web服务器产生的文本、数据、图片、动画、视频点播和声音等信息；而每一个Web服务器又可以通过各种方式与服务器连接，大量的数据实际存放在数据库服务器中；从Web服务器上下载程序到本地来执行，在下载过程中如果遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户，在这种结构中，许许多多的网连接在一起，形成一个巨大的网，即全球网。而各个企业可以在此结构的基础上建立自己的Internet。5.1 登录注册登录注册功能是本系统最基本功能，也是本系统不能缺少的功能。5.1.1 登录注册的详细设计登录管理是本论文设计的系统最基本的部分，下面将对其包含的功能进行详细的叙述:在小学生日常管理系统中，老师、学生、家长可以通过在系统中注册然后完成对系统的登录，使用MD5技术对用户密码进行加密处理。验证成功后进入主页，然后选择其他功能进行使用。下面以登录流程图作为例子来进行分析，如图5-1所示:图5-1 登录流程图5.2 通知管理通知管理是本系统中比较重要的模块，完成的主要功能通知列表和通知发布。下面将对此模块中的各种功能进行设计，对所有的活动进行分析，对数据库表进行设计。5.2.1 通知管理的详细设计(1) 通知管理模块的第一个功能就是通知发布，通知发布是老师具有的操作，老师根据学校的教育教学指示和自己对教学进度的安排通过学生日常管理系统来发布消息，使学生和家长第一时间了解到学校的政策和老师的安排。老师操作通知发布功能序列图如下图5-2所示：图5-2 老师操作通知发布功能序列图老师操作通知发布功能活动图如图5-3所示：图5-3 老师操作通知发布功能活动图(2) 通知管理的第二个功能就是通知列表功能，通知列表老师、家长、学生都可以操作，老师通过学生日常管理系统将通知进行发布，家长和学生可以通过系统对通知进行查看。由于家长、学生的对此功能操作类似，因此以学生为例，学生操作用户管理序列图如图5-4所示：图5-4 学生操作通知列表功能序列图学生操作通知列表功能活动图如图5-5所示：图5-5学生操作通知列表功能活动图5.3 作业管理作业功能包括家庭作业、上传作业和学生作业三个模块，这个功能可以让学生对当天的知识进行巩固，通过学生的反馈老师也可以总结出学生对知识的掌握情况，提高教学效率。下面将对此模块中的各种功能进行设计，对所有的活动进行分析，对数据库表进行设计。5.3.1 作业管理的详细设计(1) 作业管理的第一个功能就是家庭作业，这个功能主要的参与者是老师，其次是学生、家长，老师根据当天的教学进度，布置家庭作业，让学生对当天的知识进行查漏补缺，学生可以下载作业并完成，家长可以查看作业，配合老师的工作，督促孩子完成作业。老师操作家庭作业功能序列图如图5-6所示：图5-6 老师操作家庭作业功能序列图老师操作家庭作业功能活动图如图5-7所示：图5-7 老师操作家庭作业活动图除了老师可以操作家庭作业功能以外，学生和家长也可以操作，主要就是对家庭作业的查看。由于家长和学生操作情况相同，下面以学生操作为例进行设计分析，学生操作家庭作业功能序列图如图5-8所示：图5-8 学生操作家庭作业序列图学生操作家庭作业活动图如图5-9所示：图5-9 学生操作家庭作业序列图(2) 作业管理的第二个功能就是上传作业，参与者是学生，老师布置完作业后，学生可以进入系统查看作业，完成作业之后可以进行上传。学生操作上传作业功能序列图如图5-10所示：图5-10 学生操作上传作业序列图学生操作上传作业功能活动图如图5-11所示：图5-11 学生操作上传作业功能活动图(3) 作业管理的最后一个功能是学生作业功能，参与者是老师，学生将老师布置的作业进行上传，老师可以根据日期对作业进行查询并且查看。老师操作学生作业功能序列图如图5-12所示：图5-12 老师操作学生作业功能序列图老师操作学生作业功能活动图如5-13所示：图5-13 老师操作学生作业功能活动图5.4 学习资源管理学习资源管理主要包括资源列表、学生签到两个功能，资源列表主要参与者是老师，老师根据每天的教学进度进行资源的上传，提供学生查看。学生在课余时间完成老师布置的作业之后可以通过系统对老师上传的资源进行学习，并且可以进行签到。5.4.1 学习资源管理详细设计(1) 学习资源管理的第一个功能是资源列表，参与者主要是老师，老师为了让学生拓宽视野，通过系统上传学习资源，学生可以通过系统进行查看。老师操作资源列表序列图如图5-14所示：图5-14 老师操作资源列表序列图老师操作资源列表活动图如图5-15所示：图5-15 老师操作资源列表活动图除了老师这个参与者，还是学生参与者，老师将各种资源进行上传，学生可以对资源进行查看。学生操作资源列表序列图如图5-16所示：图5-16学生操作资源列表序列图学生操作资源列表活动图如图5-17所示：图5-17学生操作资源列表活动图5.5 学生管理学生管理功能主要是老师对自己所属学生信息进行管理。5.5.1 学生管理的详细设计学生管理的主要参与者是老师，在注册界面，每个学生在注册过程中，可以选择自己的老师，然后老师在登录系统之后可以在学生管理下面的学生列表可以查看自己的学生，并可以执行删除操作。老师操作学生列表序列图如图5-18所示：图5-18 老师操作学生列表序列图老师操作学生列表活动图如图5-19所示：图5-19老师操作学生列表活动图6 小学生日常管理系统的实现6.1 登录注册功能的实现用户打开登录界面，登录系统。登录成功之后，可以对用户的个人信息进行修改，包括修改密码、个人信息、登录图标等。具体实现如图6-1、图6-2、图6-3所示。图6-1 登录界面图6-2 注册界面图6-3 系统主页6.2 通知管理的实现通知管理主要包括通知列表和通知发布，主要功能就是老师发布消息，学生家长查看消息。具体实现如图6-4、图6-5所示。图6-4 通知列表图6-5 通知发布6.3 作业管理的实现作业管理主要分为家庭作业、学生作业、上传作业，其中前两个功能参与者为老师，第三个功能参与者是学生。具体实现如图6-6、图6-7所示。图6-6 家庭作业图6-7 学生作业图6-8 上传作业6.4 学习资源管理的实现学习资源管理主要分为学生签到、资源列表、签到三个部分组成，其中学生签到功能是老师单独参与的，签到功能是学生单独参与的，资源列表功能是老师、学生共同参与的。具体实现如图6-9、图6-10、图6-11所示。图6-9 学生签到图6-10 资源列表图6-11 签到6.5 学生管理的实现学生管理参与者是老师，主要功能是对自己的学生信息进行管理。具体实现如图6-12所示。图6-12 学生管理7 小学生日常管理系统测试根据上一章，系统的各个功能已经实现。本章节对小学生日常管理系统进行测试，以验证系统的正确性、可靠性、稳定性。7.1 环境搭建WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具，拥有强大的集成环境，深受广大前端开发者的喜爱。7.2 系统功能测试对系统中的登录注册、通知管理、学习资源管理、作业管理、学生管理以及个人信息管理进行测试，测试结果显示各个功能能有正常运行，初步达到预期效果。系统功能测试结果如下表:表7-1 系统功