三、系统实现

1.系统界面

1.1  web系统界面

系统本着高内聚低耦合的原则，将一个系统进行功能划分，首先先把功能职责划分成独立的单元。本系统主要划分为8个模块，分别是用户模块，社区模块，测试模块，笔记模块，通知模块，文档模块，首页模块，登录模块。

如图3-1所示为教师、管理员的登录后的主界面(首页),页面采用单一色彩的方式,简洁明了。其中,点击退出即可重新登录或者注册新用户。

图3-1 系统主界面

如图3-2所示为用户的登录界面。

模块实现用户登录系统的功能。根据邮箱和密码验证身份，获取进入系统的权限。当密码错误或用户不存在时，给出适当的错误提示。可在此页面注册新用户。注册新用户时包括邮箱，姓名，密码等必要信息。

实现老师和管理员账号的登录功能，与数据库中身份信息进行比对，验证使用者身份。

图3-2 登录界面

如图3-3所示为教师、管理员公告管理模块的系统界面。

实现对通知的管理操作。包括发布新通知，修改已发布的通知，显示通知列表等功能。

实现老师用户发布新的通知。填写好通知标题，通知内容，通知时间，通知作者等必要信息后，生成一个新的通知，上传服务器并写入数据库中。

图3-3公告管理界面

如图3-4所示为用户添加公告后需要重新编辑的界面。

图3-4 编辑公告

如图3-5所示为点击编辑后的重新编辑界面。

图3-5 重新编辑公告

如图3-6所示为教师、管理员的试题管理模块的界面。

实现对在线测试的添加，修改，和显示测试列表的功能。

老师用户根据实际情况，填写测试的题目，类型，并编辑测试的选项和答案等必要信息，生成新的测试，并上传服务器写入数据库中。

图3-6试题管理

如图3-7所示为添加试题后需要重新编辑的界面

图3-7 编辑试题

如图3-8所示为点击编辑按钮后重新编辑试题内容

图3-8 重新编辑试题

如图3-9所示为教师、管理员的论坛管理模块的界面。

实现论坛的相关功能，包括发布帖子，查看帖子，显示帖子列表，回复帖子等功能。

图 3-9 论坛管理

如图3-10所示为编辑帖子的界面，能查看与删除

图3-10 编辑帖子

图3-11所示为需要编辑回帖的界面，能进行回帖的查看与删除

图3-11 编辑回帖

图3-12所示为重新编辑回帖的界面，但此编辑非彼编辑，只能查看回帖。

3-12 查看回帖

图3-14所示为教师、管理员的用户管理界面

图3-14 用户管理

图3-15所示为教师、管理员的学习资料管理模块的界面。

图3-15 学习资料管理

图3-16所示为需要重新编辑资料的界面

3-16 编辑文档资料

图3-17所示为需增加视频图片资料的界面。

图3-17 增加视频图片资料

1.2  App系统界面

系统本着高内聚低耦合的原则，将一个系统进行功能划分，首先先把功能职责划分成独立的单元。本系统主要划分为7个模块，分别是用户模块，社区模块，测试模块，笔记模块，通知模块，文档模块，登录模块。

图4-1所示为登录界面，用户使用邮箱和密码进行登录，验证身份。

图4-1登录界面

图4-2所示为注册界面，使用邮箱注册新用户。

图4-2注册界面

图4-3所示为首页，进入软件后的界面。

图4-3 首页

图4-4所示为个人信息界面，展示用户的主要信息。

图4-4 个人信息

图4-5所示为昵称修改界面，用户可以修改昵称后保存。

图4-5昵称设置

图4-6所示为课程查看界面，展示用户课程。

图4-6 课程

图4-7所示为文档界面，用户可下载图片，视频。

图4-7图片下载

图4-8所示为论坛首页，展示最新帖子信息，点开之后能进行帖子回复。

图4-8论坛页面

图4-9所示为发帖界面，用户编辑帖子并发布。

图4-9 发帖

图4-10所示为我的帖子界面，展示用户发布的所有帖子，点开之后能查看回帖

图4-10我的帖子

图4-11所示为我的笔记界面，展示用户所有笔记。

图4-11我的笔记

图4-13所示为在线测试首页，用户进入测试首先看到的界面。

图4-13在线测试

1.2.14 图4-14所示为在线测试的答题界面，用户在此处答题，选择答案。

图4-14答题界面

1.2.15 图4-15所示为核对答案界面，展示测试问题的正确答案。

图4-15测试答案

1.2.16 图4-16所示为侧滑菜单界面，用户侧滑屏幕进入菜单，展示多项功能。

图4-16侧滑菜单