基于Web的数据可视化教学系统设计与实现
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
表 示 层 利 用 Web Service 通 过 网 络 协 议 和 标 准
图 4 用户登录模块
教师用户和学生用户以不同的身份登录系统之 后，系统会分配不同的权限。例如，教师用户的主要 权 限 是 对 教 学 资 源 、考 试 成 绩 以 及 作 业 内 容 的 管 理 与发布；学生用户的主要权限是对教学资源的浏览、 作业的提交和考试成绩的查询等内容。 3.2 后台管理设置模块
由 于 该 系 统 主 要 应 用 于 教 学 场 景 ，需 要 考 虑 到 使用数据量大，使用人数多的特点。因此，有较高的 数据存储能力要求 。 [9-10] 此外，基于 Web 的教学系统 还应满足系统的稳定性以及快速响应的要求。
2 系统技术框架设计
根 据 教 学 需 求 和 软 件 的 实 际 使 用 情 况 ，本 系 统 采用了 B/S 架构设计，整体框架如图 2 所示。
430074，China）
Abstract: Aiming at the demand of digital education，a set of visual teaching system is designed by using Web technology. Based on the analysis of the needs of visualization teaching，the system is developed by using technology and Access database based on B/S framework. According to the demand of actual teaching function，the system can be divided into five functions: user login module，backstage management，teaching resources，test management and communication between teachers and students， and the realization of system function is illustrated by user login，teaching resource management and test management. The system can meet the needs of teaching and provide a new technical means for modern teaching. Key words: visual teaching；Web technology；B/S architecture；Access database；online education
中图分类号：TP311
文献标识码：A
文章编号：1674-6236（2019）05-0072-05
Design and implementation of data visualization teaching system based on
Web technology
LIU Xia1，ZHANG Wei2 （1. Changjiang Polytechnic，Wuhan 430074，China；2. Hubei University of Chinese medicine，Wuhan
管 理 员 信 息 包 含 了 系 统 管 理 员 的 基 本 信 息 ，一 般在系统开发时创建。系统管理员具有系统使用的 最 高 权 限 ，能 够 对 教 师 用 户 和 学 生 用 户 进 行 管 理 。 教 师 用 户 和 学 生 用 户 在 创 建 账 号 时 ，要 进 行 身 份 注 册以实现不同用户的功能分配。
随着计算机技术的发展和在线教育的兴起，数 学资源，从根本上提高学生的综合素质 。 [5-6]
字 媒 体 的 普 及 与 更 新 ，在 线 教 育 越 来 越 多 的 受 到 了
基于上述需求，文中以 技术为基础，基
人们的重视。而传统的教学工具已经难以满足教师 于 Visual Studio 2016 开发了一套动态的交互式 Web
摘要：针对数字化教育的需求，利用 Web 技术设计完成了一套可视化教学系统。文中在可视化教
学需求分析的基础上，利用 技术，基于 B/S 构架利用 Access 数据库实现了系统的开发。按
照 实 际 教 学 功 能 的 需 求 ，系 统 可 以 分 为 用 户 登 录 模 块 、后 台 管 理 、教 学 资 源 、测 验 管 理 以 及 师 生 交
过 MS Access 数 据 库 实 现 对 教 育 资 源 的 管 理 。 同 时 ，用 于 保 存 系 统 用 户 的 账 号 信 息 。 数 据 库 模 块 主 要包括基本信息、作业信息及考试信息等内容。
其 中 ，基 本 信 息 表 用 于 对 系 统 用 户 信 息 的 记 录。该信息表的内容，如表 1 所示。
可视化教学系统的功能按照实际需求可分为五 大模块，如图 3 所示。
图 1 可视化教学系统需求分析
基 于 Web 的 可 视 化 教 学 系 统 采 用 了.NET 平 台 的 Web 开 发 技 术 ，同 时 以 Microsoft Office Access 2010 作为后端数据的存储系统，可以满足对系统开 发 的 技 术 要 求 [7- 。 8] 在 经 济 上 可 利 用 现 有 的 校 园 设 备，在节约成本的前提下实现高效开发。
刘 霞，等 基于 Web 的数据可视化教学系统设计与实现
数据格式，实现了教学系统的可视化。同时，其具有 完 好 的 封 装 性 以 及 应 用 的 可 重 复 性 、强 大 的 互 操 作 性 ，能 够 完 全 满 足 基 于 数 据 可 视 化 教 学 系 统 的 开 发 需求。
3 系统模块设计
teach_P stu_ID stu_N stu_P stu_D
数据类型 Int
Character double Int
Character double Int
Character Character
说明 管理员 管理员密码 教师编号 教师姓名 教师密码 学生学号 学生姓名 学生密码 学生年级
备注 主键 非空 主键 非空 非空 主键 非空 非空nt_id assignment_name assig_content
assig_time
数据类型 int(8)
varchar(20) varchar(20)
date(16)
说明 测试编号 测试名称 测试内容 测试时间
备注 主键 no null no null no null
图 2 系统框架
数据层利用了 Access 数据库，通过使用 OLE 和 DDE 实 现 在 数 据 库 中 进 行 数 据 的 嵌 入 与 链 接 [11- 。 12] 功能层上使用了 技术，可以利用 对 数 据 库 进 行 高 效 率 存 取 [13- 。 14] 同 时 ，还 能 够 利 用 XML 制作数据副本，实现离线数据的离线显示 。 [15-16]
的教学需求和学生的求知欲望，利用电子计算机技 数据可视化教学系统。本系统以 Access 为后台数据
术、网络技术及多媒体技术相结合的数字化教材成 库 ，采 用 链 接 技 术 ，可 在 主 流 Windows 操
为一种新的发展趋势[1- 。 2] 同时，由于其丰富的教学 作系统中.NET Framework 5.0 框架支持环境下，利用
后台管理设置模块的主要功能是为了实现后台 管 理 人 员 对 教 学 系 统 的 维 护 和 升 级 ，具 有 系 统 的 最 高权限，可同时对教师用户及学生用户进行管理。
- 73 -
《电子设计工程》2019 年第 5 期
3.3 教学资源管理模块 教学资源模块主要是面向教师和学生用户。如
图 5 所示为教学资源管理模块的主要内容，教师用 户可通过教学资源管理模块上传或修改各种资源。 学 生 用 户 可 利 用 教 学 资 源 模 块 浏 览 教 学 资 源 ，课 前 根据教师提供的内容进行预习，课后查漏补缺。
数 据 可 视 化 教 学 系 统 在 设 计 的 过 程 中 ，一 般 需 要满足可行性、功能性和系统性能等多方面的要求， 如图 1 所示。
收稿日期：2018-06-11 稿件编号：201806055
作者简介：刘 霞（1984—），女，湖北武汉人，硕士，讲师。研究方向：云计算、大数据。 - 72 -
考 试 信 息 表 用 于 记 录 教 学 考 试 的 基 本 信 息 ，如 表 3 所示。主要内容为试卷编号、考试日期、学生学 号 和 学 生 成 绩 等 ，方 便 教 师 对 学 生 成 绩 的 统 一 管 理 。 同 时 ，学 生 用 户 也 可 以 利 用 考 试 信 息 表 对 自 身 考试成绩进行查询与申诉。
表 1 基本信息表
图 5 教学资源管理模块
3.4 测验管理模块 测验管理模块实现了教师及时了解学生对知识
的掌握程度，根据学生需求调整教学进度。同时，也 使得学生能够对课堂内容查漏补缺。如图 6 所示为 测验管理模块的主要内容。
字段名 Admin_ID ad_passwd teacher_ID teach_N
作 业 信 息 表 主 要 记 录 课 堂 和 课 后 测 试 内 容 ，一 般包括测试编号、测试名称、测试内容及测试时间等 信息，如表 2 所示。测试信息表通过对测试内容的 记录，可方便教师对教学进度的动态跟踪，并对学生 做到因材施教。
表 2 测试信息表
图 6 测验管理模块 通 过 测 验 管 理 模 块 ，教 师 用 户 可 以 发 布 和 管 理 测 试 内 容 ，并 登 陆 学 生 成 绩 。 学 生 用 户 可 进 行 课 堂 在 线 测 试 或 课 后 线 上 学 习 ，完 成 对 课 堂 知 识 的 复 习 巩固。
内容，便利的传播方式在网络技术发达的当下，已成 IE 浏览器使用。
为传统教材的一种升级与补充。 通 过 数 字 化 和 可 视 化 的 教 学 系 统 ，能 够 较 好 地
1 系统需求分析
协 助 教 师 完 成 教 学 任 务 。 同 时 ，以 动 态 的 形 式 组 织 课堂形式 。 [3-4] 使教师和学生之间建立良好的交流沟 通 关 系 ，结 合 线 上 、线 下 教 学 优 势 ，整 合 课 内 课 下 教
图 3 系统模块设计
根 据 学 生 的 学 习 需 求 、教 师 的 管 理 以 及 系 统 维 修 的 需 求 ，对 系 统 功 能 进 行 设 计 。 可 以 从 宏 观 上 满 足不同用户的使用要求，为系统开发奠定基础。 3.1 用户登录模块
用户注册登录模块能够为当前用户分配不同的 角色，以实现用户权限的分类管理。如图 4 所示为 用户登录模块的设计框图。
第 27 卷 第 5 期 Vol.27 No.5
电子设计工程 Electronic Design Engineering
2019 年 3 月 Mar. 2019
基于 Web 的数据可视化教学系统设计与实现
刘 霞 1，张 威 2
（1. 长江职业学院 湖北 武汉 430074；2. 湖北中医药大学 湖北 武汉 430074）
3.5 师生交流模块 师 生 交 流 模 块 用 于 实 现 教 师 和 学 生 课 上 、课 下
的交流讨论。教师用户通过师生交流模块实时对学 生及其他用户的留言进行浏览、回复；学生用户可以 通过师生交流模块对课堂内容发表看法并提出疑 问，实现教师与学生之间的良性交流、互动。
4 数据库设计
数 据 库 是 实 现 可 视 化 教 学 系 统 的 基 础 ，文 中 通
流 五 大 功 能 模 块 。 同 时 ，以 用 户 登 录 、教 学 资 源 管 理 及 测 验 管 理 的 实 现 为 例 说 明 系 统 功 能 的 主 要
实现方式。系统可以满足教学需求，为现代化教学提供了新的技术手段。
关键词：可视化教学；Web 技术；B/S 架构；Access 数据库；在线教育
图 4 用户登录模块
教师用户和学生用户以不同的身份登录系统之 后，系统会分配不同的权限。例如，教师用户的主要 权 限 是 对 教 学 资 源 、考 试 成 绩 以 及 作 业 内 容 的 管 理 与发布；学生用户的主要权限是对教学资源的浏览、 作业的提交和考试成绩的查询等内容。 3.2 后台管理设置模块
由 于 该 系 统 主 要 应 用 于 教 学 场 景 ，需 要 考 虑 到 使用数据量大，使用人数多的特点。因此，有较高的 数据存储能力要求 。 [9-10] 此外，基于 Web 的教学系统 还应满足系统的稳定性以及快速响应的要求。
2 系统技术框架设计
根 据 教 学 需 求 和 软 件 的 实 际 使 用 情 况 ，本 系 统 采用了 B/S 架构设计，整体框架如图 2 所示。
430074，China）
Abstract: Aiming at the demand of digital education，a set of visual teaching system is designed by using Web technology. Based on the analysis of the needs of visualization teaching，the system is developed by using technology and Access database based on B/S framework. According to the demand of actual teaching function，the system can be divided into five functions: user login module，backstage management，teaching resources，test management and communication between teachers and students， and the realization of system function is illustrated by user login，teaching resource management and test management. The system can meet the needs of teaching and provide a new technical means for modern teaching. Key words: visual teaching；Web technology；B/S architecture；Access database；online education
中图分类号：TP311
文献标识码：A
文章编号：1674-6236（2019）05-0072-05
Design and implementation of data visualization teaching system based on
Web technology
LIU Xia1，ZHANG Wei2 （1. Changjiang Polytechnic，Wuhan 430074，China；2. Hubei University of Chinese medicine，Wuhan
管 理 员 信 息 包 含 了 系 统 管 理 员 的 基 本 信 息 ，一 般在系统开发时创建。系统管理员具有系统使用的 最 高 权 限 ，能 够 对 教 师 用 户 和 学 生 用 户 进 行 管 理 。 教 师 用 户 和 学 生 用 户 在 创 建 账 号 时 ，要 进 行 身 份 注 册以实现不同用户的功能分配。
随着计算机技术的发展和在线教育的兴起，数 学资源，从根本上提高学生的综合素质 。 [5-6]
字 媒 体 的 普 及 与 更 新 ，在 线 教 育 越 来 越 多 的 受 到 了
基于上述需求，文中以 技术为基础，基
人们的重视。而传统的教学工具已经难以满足教师 于 Visual Studio 2016 开发了一套动态的交互式 Web
摘要：针对数字化教育的需求，利用 Web 技术设计完成了一套可视化教学系统。文中在可视化教
学需求分析的基础上，利用 技术，基于 B/S 构架利用 Access 数据库实现了系统的开发。按
照 实 际 教 学 功 能 的 需 求 ，系 统 可 以 分 为 用 户 登 录 模 块 、后 台 管 理 、教 学 资 源 、测 验 管 理 以 及 师 生 交
过 MS Access 数 据 库 实 现 对 教 育 资 源 的 管 理 。 同 时 ，用 于 保 存 系 统 用 户 的 账 号 信 息 。 数 据 库 模 块 主 要包括基本信息、作业信息及考试信息等内容。
其 中 ，基 本 信 息 表 用 于 对 系 统 用 户 信 息 的 记 录。该信息表的内容，如表 1 所示。
可视化教学系统的功能按照实际需求可分为五 大模块，如图 3 所示。
图 1 可视化教学系统需求分析
基 于 Web 的 可 视 化 教 学 系 统 采 用 了.NET 平 台 的 Web 开 发 技 术 ，同 时 以 Microsoft Office Access 2010 作为后端数据的存储系统，可以满足对系统开 发 的 技 术 要 求 [7- 。 8] 在 经 济 上 可 利 用 现 有 的 校 园 设 备，在节约成本的前提下实现高效开发。
刘 霞，等 基于 Web 的数据可视化教学系统设计与实现
数据格式，实现了教学系统的可视化。同时，其具有 完 好 的 封 装 性 以 及 应 用 的 可 重 复 性 、强 大 的 互 操 作 性 ，能 够 完 全 满 足 基 于 数 据 可 视 化 教 学 系 统 的 开 发 需求。
3 系统模块设计
teach_P stu_ID stu_N stu_P stu_D
数据类型 Int
Character double Int
Character double Int
Character Character
说明 管理员 管理员密码 教师编号 教师姓名 教师密码 学生学号 学生姓名 学生密码 学生年级
备注 主键 非空 主键 非空 非空 主键 非空 非空nt_id assignment_name assig_content
assig_time
数据类型 int(8)
varchar(20) varchar(20)
date(16)
说明 测试编号 测试名称 测试内容 测试时间
备注 主键 no null no null no null
图 2 系统框架
数据层利用了 Access 数据库，通过使用 OLE 和 DDE 实 现 在 数 据 库 中 进 行 数 据 的 嵌 入 与 链 接 [11- 。 12] 功能层上使用了 技术，可以利用 对 数 据 库 进 行 高 效 率 存 取 [13- 。 14] 同 时 ，还 能 够 利 用 XML 制作数据副本，实现离线数据的离线显示 。 [15-16]
的教学需求和学生的求知欲望，利用电子计算机技 数据可视化教学系统。本系统以 Access 为后台数据
术、网络技术及多媒体技术相结合的数字化教材成 库 ，采 用 链 接 技 术 ，可 在 主 流 Windows 操
为一种新的发展趋势[1- 。 2] 同时，由于其丰富的教学 作系统中.NET Framework 5.0 框架支持环境下，利用
后台管理设置模块的主要功能是为了实现后台 管 理 人 员 对 教 学 系 统 的 维 护 和 升 级 ，具 有 系 统 的 最 高权限，可同时对教师用户及学生用户进行管理。
- 73 -
《电子设计工程》2019 年第 5 期
3.3 教学资源管理模块 教学资源模块主要是面向教师和学生用户。如
图 5 所示为教学资源管理模块的主要内容，教师用 户可通过教学资源管理模块上传或修改各种资源。 学 生 用 户 可 利 用 教 学 资 源 模 块 浏 览 教 学 资 源 ，课 前 根据教师提供的内容进行预习，课后查漏补缺。
数 据 可 视 化 教 学 系 统 在 设 计 的 过 程 中 ，一 般 需 要满足可行性、功能性和系统性能等多方面的要求， 如图 1 所示。
收稿日期：2018-06-11 稿件编号：201806055
作者简介：刘 霞（1984—），女，湖北武汉人，硕士，讲师。研究方向：云计算、大数据。 - 72 -
考 试 信 息 表 用 于 记 录 教 学 考 试 的 基 本 信 息 ，如 表 3 所示。主要内容为试卷编号、考试日期、学生学 号 和 学 生 成 绩 等 ，方 便 教 师 对 学 生 成 绩 的 统 一 管 理 。 同 时 ，学 生 用 户 也 可 以 利 用 考 试 信 息 表 对 自 身 考试成绩进行查询与申诉。
表 1 基本信息表
图 5 教学资源管理模块
3.4 测验管理模块 测验管理模块实现了教师及时了解学生对知识
的掌握程度，根据学生需求调整教学进度。同时，也 使得学生能够对课堂内容查漏补缺。如图 6 所示为 测验管理模块的主要内容。
字段名 Admin_ID ad_passwd teacher_ID teach_N
作 业 信 息 表 主 要 记 录 课 堂 和 课 后 测 试 内 容 ，一 般包括测试编号、测试名称、测试内容及测试时间等 信息，如表 2 所示。测试信息表通过对测试内容的 记录，可方便教师对教学进度的动态跟踪，并对学生 做到因材施教。
表 2 测试信息表
图 6 测验管理模块 通 过 测 验 管 理 模 块 ，教 师 用 户 可 以 发 布 和 管 理 测 试 内 容 ，并 登 陆 学 生 成 绩 。 学 生 用 户 可 进 行 课 堂 在 线 测 试 或 课 后 线 上 学 习 ，完 成 对 课 堂 知 识 的 复 习 巩固。
内容，便利的传播方式在网络技术发达的当下，已成 IE 浏览器使用。
为传统教材的一种升级与补充。 通 过 数 字 化 和 可 视 化 的 教 学 系 统 ，能 够 较 好 地
1 系统需求分析
协 助 教 师 完 成 教 学 任 务 。 同 时 ，以 动 态 的 形 式 组 织 课堂形式 。 [3-4] 使教师和学生之间建立良好的交流沟 通 关 系 ，结 合 线 上 、线 下 教 学 优 势 ，整 合 课 内 课 下 教
图 3 系统模块设计
根 据 学 生 的 学 习 需 求 、教 师 的 管 理 以 及 系 统 维 修 的 需 求 ，对 系 统 功 能 进 行 设 计 。 可 以 从 宏 观 上 满 足不同用户的使用要求，为系统开发奠定基础。 3.1 用户登录模块
用户注册登录模块能够为当前用户分配不同的 角色，以实现用户权限的分类管理。如图 4 所示为 用户登录模块的设计框图。
第 27 卷 第 5 期 Vol.27 No.5
电子设计工程 Electronic Design Engineering
2019 年 3 月 Mar. 2019
基于 Web 的数据可视化教学系统设计与实现
刘 霞 1，张 威 2
（1. 长江职业学院 湖北 武汉 430074；2. 湖北中医药大学 湖北 武汉 430074）
3.5 师生交流模块 师 生 交 流 模 块 用 于 实 现 教 师 和 学 生 课 上 、课 下
的交流讨论。教师用户通过师生交流模块实时对学 生及其他用户的留言进行浏览、回复；学生用户可以 通过师生交流模块对课堂内容发表看法并提出疑 问，实现教师与学生之间的良性交流、互动。
4 数据库设计
数 据 库 是 实 现 可 视 化 教 学 系 统 的 基 础 ，文 中 通
流 五 大 功 能 模 块 。 同 时 ，以 用 户 登 录 、教 学 资 源 管 理 及 测 验 管 理 的 实 现 为 例 说 明 系 统 功 能 的 主 要
实现方式。系统可以满足教学需求，为现代化教学提供了新的技术手段。
关键词：可视化教学；Web 技术；B/S 架构；Access 数据库；在线教育