基于Web的数据可视化教学系统设计与实现

刘霞;张威

【摘 要】针对数字化教育的需求,利用Web技术设计完成了一套可视化教学系统.文中在可视化教学需求分析的基础上,利用ASP.NET技术,基于B/S构架利用Access数据库实现了系统的开发.按照实际教学功能的需求,系统可以分为用户登录模块、后台管理、教学资源、测验管理以及师生交流五大功能模块.同时,以用户登录、教学资源管理及测验管理的实现为例说明系统功能的主要实现方式.系统可以满足教学需求,为现代化教学提供了新的技术手段. 【期刊名称】《电子设计工程》 【年(卷),期】2019(027)005 【总页数】5页(P72-76)

【关键词】可视化教学;Web技术;B/S架构;Access数据库;在线教育 【作 者】刘霞;张威

【作者单位】长江职业学院 湖北武汉430074;湖北中医药大学 湖北武汉430074 【正文语种】中 文 【中图分类】TP311

随着计算机技术的发展和在线教育的兴起，数字媒体的普及与更新，在线教育越来越多的受到了人们的重视。而传统的教学工具已经难以满足教师的教学需求和学生的求知欲望，利用电子计算机技术、网络技术及多媒体技术相结合的数字化教材成

为一种新的发展趋势[1-2]。同时，由于其丰富的教学内容，便利的传播方式在网络技术发达的当下，已成为传统教材的一种升级与补充。

通过数字化和可视化的教学系统，能够较好地协助教师完成教学任务。同时，以动态的形式组织课堂形式[3-4]。使教师和学生之间建立良好的交流沟通关系，结合线上、线下教学优势，整合课内课下教学资源，从根本上提高学生的综合素质[5-6]。

基于上述需求，文中以ASP.NET技术为基础，基于Visual Studio 2016开发了一套动态的交互式Web数据可视化教学系统。本系统以Access为后台数据库，采用ADO.NET链接技术，可在主流Windows操作系统中.NET Framework 5.0框架支持环境下，利用IE浏览器使用。 1 系统需求分析

数据可视化教学系统在设计的过程中，一般需要满足可行性、功能性和系统性能等多方面的要求，如图1所示。 图1 可视化教学系统需求分析

基于Web的可视化教学系统采用了.NET平台的Web开发技术，同时以Microsoft Office Access 2010作为后端数据的存储系统，可以满足对系统开发的技术要求[7-8]。在经济上可利用现有的校园设备，在节约成本的前提下实现高效开发。

由于该系统主要应用于教学场景，需要考虑到使用数据量大，使用人数多的特点。因此，有较高的数据存储能力要求[9-10]。此外，基于Web的教学系统还应满足系统的稳定性以及快速响应的要求。 2 系统技术框架设计

根据教学需求和软件的实际使用情况，本系统采用了B/S架构设计，整体框架如图2所示。

图2 系统框架

数据层利用了Access数据库，通过使用OLE和DDE实现在数据库中进行数据的嵌入与链接[11-12]。功能层上使用了ASP.NET技术，可以利用ADO.NET对数据库进行高效率存取[13-14]。同时，还能够利用XML制作数据副本，实现离线数据的离线显示[15-16]。

表示层利用Web Service通过网络协议和标准数据格式，实现了教学系统的可视化。同时，其具有完好的封装性以及应用的可重复性、强大的互操作性，能够完全满足基于数据可视化教学系统的开发需求。 3 系统模块设计

可视化教学系统的功能按照实际需求可分为五大模块，如图3所示。 图3 系统模块设计

根据学生的学习需求、教师的管理以及系统维修的需求，对系统功能进行设计。可以从宏观上满足不同用户的使用要求，为系统开发奠定基础。 3.1 用户登录模块

用户注册登录模块能够为当前用户分配不同的角色，以实现用户权限的分类管理。如图4所示为用户登录模块的设计框图。 图4 用户登录模块

教师用户和学生用户以不同的身份登录系统之后，系统会分配不同的权限。例如，教师用户的主要权限是对教学资源、考试成绩以及作业内容的管理与发布；学生用户的主要权限是对教学资源的浏览、作业的提交和考试成绩的查询等内容。 3.2 后台管理设置模块

后台管理设置模块的主要功能是为了实现后台管理人员对教学系统的维护和升级，具有系统的最高权限，可同时对教师用户及学生用户进行管理。 3.3 教学资源管理模块

教学资源模块主要是面向教师和学生用户。如图5所示为教学资源管理模块的主要内容，教师用户可通过教学资源管理模块上传或修改各种资源。学生用户可利用教学资源模块浏览教学资源，课前根据教师提供的内容进行预习，课后查漏补缺。 图5 教学资源管理模块 3.4 测验管理模块

测验管理模块实现了教师及时了解学生对知识的掌握程度，根据学生需求调整教学进度。同时，也使得学生能够对课堂内容查漏补缺。如图6所示为测验管理模块的主要内容。 图6 测验管理模块

通过测验管理模块，教师用户可以发布和管理测试内容，并登陆学生成绩。学生用户可进行课堂在线测试或课后线上学习，完成对课堂知识的复习巩固。 3.5 师生交流模块

师生交流模块用于实现教师和学生课上、课下的交流讨论。教师用户通过师生交流模块实时对学生及其他用户的留言进行浏览、回复；学生用户可以通过师生交流模块对课堂内容发表看法并提出疑问，实现教师与学生之间的良性交流、互动。 4 数据库设计

数据库是实现可视化教学系统的基础，文中通过MS Access数据库实现对教育资源的管理。同时，用于保存系统用户的账号信息。数据库模块主要包括基本信息、作业信息及考试信息等内容。

其中，基本信息表用于对系统用户信息的记录。该信息表的内容，如表1所示。 表1 基本信息表字段名Admin_ID ad_passwd teacher_ID teach_N teach_P stu_ID stu_N stu_P stu_D数据类型Int Character double Int Character double Int Character Character说明管理员管理员密码教师编号教师姓名教师密码学生学号学生姓名学生密码学生年级备注主键非空主键非空非空主键非空非空非

空

管理员信息包含了系统管理员的基本信息，一般在系统开发时创建。系统管理员具有系统使用的最高权限，能够对教师用户和学生用户进行管理。教师用户和学生用户在创建账号时，要进行身份注册以实现不同用户的功能分配。

作业信息表主要记录课堂和课后测试内容，一般包括测试编号、测试名称、测试内容及测试时间等信息，如表2所示。测试信息表通过对测试内容的记录，可方便教师对教学进度的动态跟踪，并对学生做到因材施教。

表2 测试信息表备注主键no null no null no null字段名assignment_id assignment_name assig_content assig_time数据类型

int(8)varchar(20)varchar(20)date(16)说明测试编号测试名称测试内容测试时间 考试信息表用于记录教学考试的基本信息，如表3所示。主要内容为试卷编号、考试日期、学生学号和学生成绩等，方便教师对学生成绩的统一管理。同时，学生用户也可以利用考试信息表对自身考试成绩进行查询与申诉。 表3 考试信息表字段名test_id stu_id stu_score test_date数据类型

int(8)nvarchar(16)int(16)int(16)说明试卷编号学号成绩日期备注主键no null null null

5 系统功能的实现

基于Web的数字可视化教学系统的实现是一个复杂而庞大的工程，本文以用户登录、教学资源管理以及测验管理的实现为例，说明系统功能的实现方式。 5.1 用户登录

不同的用户登录系统之后，会进入不同的页面。如图7所示，以学生用户登录流程为例，用户在登录过程中，系统首先通过OLD链接后台数据库，并确定用户所在路径。然后，对用户账号进行查询。

若未找到匹配账户则系统提示用户进行注册；如成功找到账户，则通过OLED

DataReader进行账户和密码验证。并通过验证后利用Response.Redirect转入相应的用户界面，完成登录操作。 图7 学生用户登录流程 5.2 教学资源管理

教学资源管理主要涉及教师对多媒体内容的浏览、提交、修改和删除等操作，以下为教师增加教学资源内容的主要代码：

通过Click对教学资源开始上传，系统判断本地上传文件fileup.file是否存在。若存在则通过string file_name对文件名及data time对文件创建时间进行读取，然后分配相应的内存单元，在数据库中写入文件内容。 5.3 测验管理

测验管理模块是实现系统测试功能的主要模块，实现流程图如图8所示。教师用户通过defalut.aspx进入后台管理程序，并通过调用SQL command对象的Execute Reader方法进行登录。登录成功之后，自动连接数据库将后台资源通过Web的形式显示在教师用户界面上，从而实现教师用户对测验内容的管理。 图8 测验管理流程图 6 结束语

文中以可视化教学的实际需求出发，利用ASP.NET技术和Web技术，通过B/S架构实现了可视化教学系统的设计。并针对不同用户的需求，实现了用户登录、后台管理、教学资源管理、测验管理以及师生交流等功能。基于Web的数字可视化教学系统的设计与应用充分发挥了网络教学的优势，对实现数字化课堂教学具有重要意义。

【相关文献】

[1]李心颖，李峰，吴洪丽.基于SVG/GML的WebGIS空间数据可视化模型研究与应用[J].数字技术与应用，2016（11）：36-38.

[2]吕终亮，罗兵，吴焕萍，等.MESIS信息检索及可视化产品制作平台实现[J].应用气象学报，2012，23（5）：631-637.

[3]曹岩，张英杰，周光辉，等.基于Web的数控编程动态仿真及可视化[J].图学学报，2004，25（2）：170-175.

[4]甘启宏，冯鸟东，崔亚强，等.信息可视化在高校教室信息发布中的应用[J].计算机应用，2017（2）：255-258.

[5]向俊，叶青，袁勋.基于网页的可视化网络医学影像平台设计[J].生物医学工程学杂志，2017（2）：233-238.

[6]章锐，陈树勇，刘道伟，等.基于ECharts的电网Web可视化研究及应用[J].电测与仪表，2017，54（19）：59-66.

[7]刘彤，张阳，孙琦，等.基于Hadoop的可视化Deep Web采集平台设计[J].计算机工程与科学，2016，38（2）：217-223.

[8]罗怀荣，石军锋.基于WebGL 3D技术的可视化温室环境监测系统设计[J].江苏农业科学，2017，45（7）：189-192.

[9]Lorenz P A.ASP.NET.Web server programmer un⁃der XML Web Services.NET-Framework[J].Sig⁃nal Processing，2002，82（3）：461-472.

[10]Liu C.Web Survey Design in ASP.Net 2.0：A Sim⁃ple Task with One Line of Code.[J].Journal of Infor⁃mation Systems Education，2007，18（Spring）：9-10.

[11]Wang L，Wang Z.Research on the system design and development of online teaching platform based on ASP.NET[J].Boletin Tecnico/technical Bulle⁃tin，2017，55（7）：539-546.

[12]张莉.基于Asp.Net Ajax的网络教学系统的设计与实现[D].成都：电子科技大学，2010. [13]杨亚菁.以项目实践为导向的ASP.NET课程层次化教学研究[J].软件导刊，2016，15（1）：186-187.

[14]邵良杉，刘好增.ASP.NET（C#）实践教程.NET（C#）实践教程[M].北京：清华大学出版社，2016.

[15]Laitman B M，Asp L，Mariani J N，et al.The Transcriptional Activator Krüppel-like Factor-6 Is Required for CNS Myelination[J].Plos Biology，2016，14（5）：e1002467. [16]仝茵.基于ASP.NET MVC模式的软件开发架构的研究与探讨[J].中国电子科学研究院学报，2016，11（6）：599-602.