教学质量保证系统Web前端设计与实现
教学质量保证系统Web前端设计与实现[20191207152145]
摘要
21世纪，计算机网络已经渗透到生活的每一个角落，人们越来越习惯从网上获取信息。而设计一个教学质量保证系统将学术资源以网站的方式与大家分享，并通过反馈平台和大家交流具有一定的实际意义。
系统的Web前端主要分为两个功能，一个是将教学质量保证体系纲要文件和系列成果展示给大家，另外提供一个可以交流的平台，和其他高校或者热衷教育事业的社会人士共同探讨教学质量保证的相关问题。
系统是基于MVC模式开发，使用Java为主要开发语言，利用JavaEE各组件完成系统后台的开发，页面采用JavaScript、Ajax、Jquery及DIV+CSS等Web前端开发技术。数据库采用以JDBC为驱动的MySql管理。
关键字:教学质量保证JavaMVCWeb前端开发技术
目 录
1. 引言 1
1.1 课题研究的基础、现状与趋势 1
1.3 论文结构 2
1.4 本章小结 2
2. 相关技术介绍 3
2.1 MVC模式（Model-2）简述 3
2.2 Java简介 4
2.3 JavaEE概述 4
2.4 JavaScript及JQuery简介 5
2.4.1 JavaScript 5
2.4.2 JQuery 6
2.5 Ajax概述 6
2.6 MySQL数据库及JDBC简介 6
2.6.1 MySQL 6
2.6.2 JDBC 6
2.7 本章小结 7
3. 系统分析 8
3.1 可行性研究 8
3.1.1 技术可行性 8
3.1.2 经济可行性 8
3.1.3 操作可行性 8
3.1.4 进度可行性 8
3.2 用户需求分析 8
3.3 功能需求分析 9
3.4 系统功能模型 10
3.4.1 系统前端数据流分析 10
3.4.2 系统用例分析 10
3.5 性能需求分析 11
3.6本章小结 12
4. 系统设计 13
4.1 系统设计目标 13
4.2 系统业务流程设计 13
4.2.1 页面管理员工作流程 13
4.2.2 信息反馈平台业务流程 14
4.3 系统功能详细设计 15
4.3.1 页面内容管理模块 15
4.3.2 页面管理员登录模块 16
4.3.3 信息浏览模块 16
4.3.4 信息反馈平台模块 17
4.4 数据库设计 17
4.4.1 数据库概念结构设计 17
4.4.2 数据库逻辑结构设计 19
4.5 用户界面设计 23
4.6 本章小结 23
5. 系统实现 24
5.1 开发工具的选择 24
5.2 程序框架 24
5.2.1 页面设计框架 24
5.2.2 程序代码框架 25
5.3 配置连接池及数据库连接 25
5.3.1 配置连接池 25
5.3.2 单例模式的数据库连接工具类 26
5.4 主要技术点及页面效果 27
5.4.2首页及子页面实现 31
5.5 本章小结 35
结语 36
参考文献 37
致谢 38
1. 引言
1.1 课题研究的基础、现状与趋势
21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且逐渐渗透到我们生活的每一个层面。合适的信息传播方式对于资源共享和学术交流显得尤为重要。传统的纸质媒体由于成本和区域等因素的影响，各种弊端不断显现。而网站的建立可以突破传统的媒体的限制在网络上开辟属于自己的新天地。在技术方面，JavaWeb无论是技术还是框架都已经相当的成熟，并且Web前端开发更是已经迈进了2.0的时代，这些都为该系统提供了扎实的知识基础。
目前，国内很多普通的学校网站要么是宣传性的门户网站，要么就是学校的办公系统。很少有涉及到对学校某一体系而专门建立的学术交流型的网站。
从网站网页的设计方面来看，尽管以前的学校网站也能满足受众的基本需求，但是随着网络科技技术的发展，用户对用户体验的要求不断提高，对网页的审美不断变化，过去的学校网站对用户的吸引力逐渐下降。因此，本系统将采用DIV+CSS，JavaScript，Ajax等技术建立一个高效的集宣传、管理与交流于一体的学术交流型的创新型网站。首先，运用现如今比较流行的DIV+CSS代替传统的Table布局对网页的元素进行定位，可以大幅度提升网页的加载速度。然后，运用JavaScript技术给网页增添必要的动态效果，使网站更加的生动。最后，在有数据与后台交互的地方运用Ajax技术，实现网页的局部刷新，给用户更好的浏览体验。
从网站的互动性来看，普通的学校网站大多都设有留言板和一个综合性的论坛。这些留言板和论坛覆盖的面非常的广，谈论的话题五花八门，没有一定的针对性。运用现有的开源框架Discuz针对教学质量保证体系构建一个信息反馈平台，在平台上设置多个板块，分别放置相关内容，不同板块的信息相互独立，同一个板块的内部内容不断添加持续更新。这样将使网站具有更高效、合理的存储特性。
Web前端设计与开发是从网页制作演变而来的，随着Web2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局和Ajax像一阵旋风，铺天盖地席卷而来。未来的网站必将使Web前端代码组织更有序，网站的性能更加完善，可维护性更强以及对搜索引擎更友好[1]。本系统的开发正是顺着互联网发展的大方向，来对Web前端技术的一次尝试和研究。
1.2 课题研究的目的和意义
提高高等教育质量是实现人力资源强国目标的基础和关键，而建立健全高等教育质量保证体系则是完成这一任务的基本途径和重要保证[2]。我国各高等院校都在努力探索建立适切的教学质量保证体系，无疑是其中做得比较深入的一所。近10年来，学校积极开展一系列专项课题研究，承担校级招标课题，省、部级重点课题等，在不断的探索中，学校在教学质量保证上也陆续有了一系列的实践探索和理论研究成果。而这些成果需要通过良好的媒介加以展示和分享。网络作为当今最流行最方便快捷的媒介，通过它来对信息进行传播无疑具有更大的优势。
学校曾将我校教学质量保证体系建设的相关文件、文章结集出版与大家分享。然而，纸质媒体有传播范围小，与受众之间的互动性差，时效性差等缺陷。因此，开发一个比较高效的教学质量保证系统，既能用来展示我校质量保证的体系结构和系列成果，又能方便和其他高校进一步的交流教学质量保证的相关经验，具有十分重大的价值和现实意义。
1.3 论文结构
文章共分5章。第1章的引言讲述了选题基础、现状和趋势，以及选题研究的目的和意义所在；第2章将简要介绍整个设计所涉及到的相关技术；第3章则会对整个系统做相应的分析，具体包括：可行性分型、需求分析、功能分析与用例分析等；第4章将在分析的基础上进行系统设计，具体涉及明确系统各模块，确定系统结构，制定业务流程，对系统具体功能做详细设计，以及数据库设计和界面设计，代码框架等；第5章详细讲述对应功能模块的具体实现；最后对全文进行总结。
1.4 本章小结
本章主要介绍了教学质量保证系统开发的基础、现状与趋势以及目的和意义，并概要说明了论文的结构。
2. 相关技术介绍
教学质量保证系统主要是基于MVC模式设计与开发。系统除信息反馈平台采用的是PHP语言外，其它的都是采用Java语言及其JavaEE组件。前端所应用的技术有JavaScript、JQuery、Ajax和HTML等。使用MySql作为数据库管理系统，JDBC作为数据库连接驱动。
2.1 MVC模式（Model-2）简述
MVC英文即Model-View-Controller，是一种目前广泛流行的软件设计模式，它把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用就被分成三个层----模型层、视图层、控制层。这三层各自处理自己的任务，如图2.2所示。使用MVC主要的目的就是将M层和V层的实现代码进行分离，从而使一个程序可以使用不同的表现形式。C层存在的目的就是确保M层和V层能够同步。其工作流程图如图2.1所示。
图2.1 MVC工作流程示图
视图(View)代表用户交互界面，对于Web应用来说，可以概括为HTML界面，但有可能为XHTML、XML和Applet。随着应用的复杂性和规模性，界面的处理也变得具有挑战性。一个应用可能有很多不同的视图，MVC设计模式对于视图的处理仅限于视图上数据的采集和处理，以及用户的请求，而不包括在视图上的业务流程的处理。业务流程的处理交予模型(Model)处理。
模型(Model)就是业务流程/状态的处理以及业务规则的制定。业务流程的处理过程对其它层来说是黑箱操作，模型接受视图请求的数据，并返回最终的处理结果。业务模型的设计可以说是MVC最主要的核心。
控制(Controller)可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求。划分控制层的作用也很明显，它清楚地告诉你，它就是一个分发器，选择什么样的模型，选择什么样的视图，可以完成什么样的用户请求。控制层并不做任何的数据处理。
从以上特点可以看出，MVC具有极好的低耦合性，简化了对象之间交互的复杂度，视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，并且其还具有高重用性和可适用性，MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码。MVC使开发和维护用户接口的技术含量降低，造就了他较低的生命周期成本，而这样的模式大大节约了开发时间。
2.2 Java简介
Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月份推出的Java程序设计语言和JavaSE、JavaEE、JavaME平台的总称。
Java技术具有良好的通用性、高效性、可移植性和安全性，广泛应用于数据中心、个人PC、游戏控制台，科学超级计算机，移动电话和互联网，在全球云计算和移动互联网的大环境下，Java更具备了显著的优势和广阔的前景[3]。
Java不像C、C++等语言是针对CPU芯片进行编译，而是先把程序编译成很接近机器码的“中间代码”即字节码，任何系统只要提供Java虚拟机（JVM）都能够解释执行这种字节码[4]。
2.3 JavaEE概述
JavaEE是利用Java2平台来简化企业解决方案的开发、部署和管理相关的复杂问题的体系结构，用于开发便于组装、健壮的、可扩展的、安全的服务器端JAVA应用，是一套设计、开发、编译和部署企业级应用程序的规范。JavaEE的体系结构如2.2图所示：
图2.2 JavaEE体系结构图示
JavaEE使用多层分布式的应用模型，这个多层通常通过三层或四层来实现：
1) 客户层，运行在客户计算机上的组件
2) Web 层，运行在JavaEE服务器上的组件
3) 业务层，同样是运行在JavaEE服务器上的组件
4) 企业信息系统层（EIS），是指运行在EIS服务器上的软件系统
2.4 JavaScript及JQuery简介
2.4.1 JavaScript
JavaScript最初是由网景公司的布兰登?艾克设计实现而成。它是一种直译式脚本语言，它的解释器被称为JavaScript引擎，为浏览器的一部分。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能。完整的JavaScript包括ECMAScript（描述了该语言的语法和基本对象）、DOM（文档对象模型）和BOM（浏览器对象模型）三个部分，如图2.3所示。
摘要
21世纪，计算机网络已经渗透到生活的每一个角落，人们越来越习惯从网上获取信息。而设计一个教学质量保证系统将学术资源以网站的方式与大家分享，并通过反馈平台和大家交流具有一定的实际意义。
系统的Web前端主要分为两个功能，一个是将教学质量保证体系纲要文件和系列成果展示给大家，另外提供一个可以交流的平台，和其他高校或者热衷教育事业的社会人士共同探讨教学质量保证的相关问题。
系统是基于MVC模式开发，使用Java为主要开发语言，利用JavaEE各组件完成系统后台的开发，页面采用JavaScript、Ajax、Jquery及DIV+CSS等Web前端开发技术。数据库采用以JDBC为驱动的MySql管理。
关键字:教学质量保证JavaMVCWeb前端开发技术
目 录
1. 引言 1
1.1 课题研究的基础、现状与趋势 1
1.3 论文结构 2
1.4 本章小结 2
2. 相关技术介绍 3
2.1 MVC模式（Model-2）简述 3
2.2 Java简介 4
2.3 JavaEE概述 4
2.4 JavaScript及JQuery简介 5
2.4.1 JavaScript 5
2.4.2 JQuery 6
2.5 Ajax概述 6
2.6 MySQL数据库及JDBC简介 6
2.6.1 MySQL 6
2.6.2 JDBC 6
2.7 本章小结 7
3. 系统分析 8
3.1 可行性研究 8
3.1.1 技术可行性 8
3.1.2 经济可行性 8
3.1.3 操作可行性 8
3.1.4 进度可行性 8
3.2 用户需求分析 8
3.3 功能需求分析 9
3.4 系统功能模型 10
3.4.1 系统前端数据流分析 10
3.4.2 系统用例分析 10
3.5 性能需求分析 11
3.6本章小结 12
4. 系统设计 13
4.1 系统设计目标 13
4.2 系统业务流程设计 13
4.2.1 页面管理员工作流程 13
4.2.2 信息反馈平台业务流程 14
4.3 系统功能详细设计 15
4.3.1 页面内容管理模块 15
4.3.2 页面管理员登录模块 16
4.3.3 信息浏览模块 16
4.3.4 信息反馈平台模块 17
4.4 数据库设计 17
4.4.1 数据库概念结构设计 17
4.4.2 数据库逻辑结构设计 19
4.5 用户界面设计 23
4.6 本章小结 23
5. 系统实现 24
5.1 开发工具的选择 24
5.2 程序框架 24
5.2.1 页面设计框架 24
5.2.2 程序代码框架 25
5.3 配置连接池及数据库连接 25
5.3.1 配置连接池 25
5.3.2 单例模式的数据库连接工具类 26
5.4 主要技术点及页面效果 27
5.4.2首页及子页面实现 31
5.5 本章小结 35
结语 36
参考文献 37
致谢 38
1. 引言
1.1 课题研究的基础、现状与趋势
21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且逐渐渗透到我们生活的每一个层面。合适的信息传播方式对于资源共享和学术交流显得尤为重要。传统的纸质媒体由于成本和区域等因素的影响，各种弊端不断显现。而网站的建立可以突破传统的媒体的限制在网络上开辟属于自己的新天地。在技术方面，JavaWeb无论是技术还是框架都已经相当的成熟，并且Web前端开发更是已经迈进了2.0的时代，这些都为该系统提供了扎实的知识基础。
目前，国内很多普通的学校网站要么是宣传性的门户网站，要么就是学校的办公系统。很少有涉及到对学校某一体系而专门建立的学术交流型的网站。
从网站网页的设计方面来看，尽管以前的学校网站也能满足受众的基本需求，但是随着网络科技技术的发展，用户对用户体验的要求不断提高，对网页的审美不断变化，过去的学校网站对用户的吸引力逐渐下降。因此，本系统将采用DIV+CSS，JavaScript，Ajax等技术建立一个高效的集宣传、管理与交流于一体的学术交流型的创新型网站。首先，运用现如今比较流行的DIV+CSS代替传统的Table布局对网页的元素进行定位，可以大幅度提升网页的加载速度。然后，运用JavaScript技术给网页增添必要的动态效果，使网站更加的生动。最后，在有数据与后台交互的地方运用Ajax技术，实现网页的局部刷新，给用户更好的浏览体验。
从网站的互动性来看，普通的学校网站大多都设有留言板和一个综合性的论坛。这些留言板和论坛覆盖的面非常的广，谈论的话题五花八门，没有一定的针对性。运用现有的开源框架Discuz针对教学质量保证体系构建一个信息反馈平台，在平台上设置多个板块，分别放置相关内容，不同板块的信息相互独立，同一个板块的内部内容不断添加持续更新。这样将使网站具有更高效、合理的存储特性。
Web前端设计与开发是从网页制作演变而来的，随着Web2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局和Ajax像一阵旋风，铺天盖地席卷而来。未来的网站必将使Web前端代码组织更有序，网站的性能更加完善，可维护性更强以及对搜索引擎更友好[1]。本系统的开发正是顺着互联网发展的大方向，来对Web前端技术的一次尝试和研究。
1.2 课题研究的目的和意义
提高高等教育质量是实现人力资源强国目标的基础和关键，而建立健全高等教育质量保证体系则是完成这一任务的基本途径和重要保证[2]。我国各高等院校都在努力探索建立适切的教学质量保证体系，无疑是其中做得比较深入的一所。近10年来，学校积极开展一系列专项课题研究，承担校级招标课题，省、部级重点课题等，在不断的探索中，学校在教学质量保证上也陆续有了一系列的实践探索和理论研究成果。而这些成果需要通过良好的媒介加以展示和分享。网络作为当今最流行最方便快捷的媒介，通过它来对信息进行传播无疑具有更大的优势。
学校曾将我校教学质量保证体系建设的相关文件、文章结集出版与大家分享。然而，纸质媒体有传播范围小，与受众之间的互动性差，时效性差等缺陷。因此，开发一个比较高效的教学质量保证系统，既能用来展示我校质量保证的体系结构和系列成果，又能方便和其他高校进一步的交流教学质量保证的相关经验，具有十分重大的价值和现实意义。
1.3 论文结构
文章共分5章。第1章的引言讲述了选题基础、现状和趋势，以及选题研究的目的和意义所在；第2章将简要介绍整个设计所涉及到的相关技术；第3章则会对整个系统做相应的分析，具体包括：可行性分型、需求分析、功能分析与用例分析等；第4章将在分析的基础上进行系统设计，具体涉及明确系统各模块，确定系统结构，制定业务流程，对系统具体功能做详细设计，以及数据库设计和界面设计，代码框架等；第5章详细讲述对应功能模块的具体实现；最后对全文进行总结。
1.4 本章小结
本章主要介绍了教学质量保证系统开发的基础、现状与趋势以及目的和意义，并概要说明了论文的结构。
2. 相关技术介绍
教学质量保证系统主要是基于MVC模式设计与开发。系统除信息反馈平台采用的是PHP语言外，其它的都是采用Java语言及其JavaEE组件。前端所应用的技术有JavaScript、JQuery、Ajax和HTML等。使用MySql作为数据库管理系统，JDBC作为数据库连接驱动。
2.1 MVC模式（Model-2）简述
MVC英文即Model-View-Controller，是一种目前广泛流行的软件设计模式，它把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用就被分成三个层----模型层、视图层、控制层。这三层各自处理自己的任务，如图2.2所示。使用MVC主要的目的就是将M层和V层的实现代码进行分离，从而使一个程序可以使用不同的表现形式。C层存在的目的就是确保M层和V层能够同步。其工作流程图如图2.1所示。
图2.1 MVC工作流程示图
视图(View)代表用户交互界面，对于Web应用来说，可以概括为HTML界面，但有可能为XHTML、XML和Applet。随着应用的复杂性和规模性，界面的处理也变得具有挑战性。一个应用可能有很多不同的视图，MVC设计模式对于视图的处理仅限于视图上数据的采集和处理，以及用户的请求，而不包括在视图上的业务流程的处理。业务流程的处理交予模型(Model)处理。
模型(Model)就是业务流程/状态的处理以及业务规则的制定。业务流程的处理过程对其它层来说是黑箱操作，模型接受视图请求的数据，并返回最终的处理结果。业务模型的设计可以说是MVC最主要的核心。
控制(Controller)可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求。划分控制层的作用也很明显，它清楚地告诉你，它就是一个分发器，选择什么样的模型，选择什么样的视图，可以完成什么样的用户请求。控制层并不做任何的数据处理。
从以上特点可以看出，MVC具有极好的低耦合性，简化了对象之间交互的复杂度，视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，并且其还具有高重用性和可适用性，MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码。MVC使开发和维护用户接口的技术含量降低，造就了他较低的生命周期成本，而这样的模式大大节约了开发时间。
2.2 Java简介
Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月份推出的Java程序设计语言和JavaSE、JavaEE、JavaME平台的总称。
Java技术具有良好的通用性、高效性、可移植性和安全性，广泛应用于数据中心、个人PC、游戏控制台，科学超级计算机，移动电话和互联网，在全球云计算和移动互联网的大环境下，Java更具备了显著的优势和广阔的前景[3]。
Java不像C、C++等语言是针对CPU芯片进行编译，而是先把程序编译成很接近机器码的“中间代码”即字节码，任何系统只要提供Java虚拟机（JVM）都能够解释执行这种字节码[4]。
2.3 JavaEE概述
JavaEE是利用Java2平台来简化企业解决方案的开发、部署和管理相关的复杂问题的体系结构，用于开发便于组装、健壮的、可扩展的、安全的服务器端JAVA应用，是一套设计、开发、编译和部署企业级应用程序的规范。JavaEE的体系结构如2.2图所示：
图2.2 JavaEE体系结构图示
JavaEE使用多层分布式的应用模型，这个多层通常通过三层或四层来实现：
1) 客户层，运行在客户计算机上的组件
2) Web 层，运行在JavaEE服务器上的组件
3) 业务层，同样是运行在JavaEE服务器上的组件
4) 企业信息系统层（EIS），是指运行在EIS服务器上的软件系统
2.4 JavaScript及JQuery简介
2.4.1 JavaScript
JavaScript最初是由网景公司的布兰登?艾克
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/qrs/138.html
