本科文档管理系统设计前台设计毕业设计.docx
《本科文档管理系统设计前台设计毕业设计.docx》由会员分享，可在线阅读，更多相关《本科文档管理系统设计前台设计毕业设计.docx（20页珍藏版）》请在冰点文库上搜索。
本科文档管理系统设计前台设计毕业设计
摘要
随着计算机网络技术的发展,给信息时代的人们带来了很大的方便。
如今在Internet上，随处都可以看到很多的各类信息管理系统，如企业管理系统，电子商务系统，学校教务管理系统等各类信息管理系统的普及。
而针对本科毕业设计的选题等相关事项，涉及到导师给出课题或学生自选课题，以及在各个阶段需要上交或是提交相关的文档资料等问题，目前主要还是由人为操作，需要花费一定的人力，这个给整个工作带来了很多不便。
本科毕业设计文档管理系统是根据实际情况为模型进行开发设计的，其主要目标是为传统毕业设计的人工管理模式进行改造，实现教学管理工作的自动化、网络化、无纸化建设。
经分析，本文以B/S（Browser/Server）为开发模式，使用MVC模式，采用三层架构，保证系统的可维护性和可扩展性。
运用JS、CSS、JSP（JAVASERVERPAGES）和JAVA编程语言，以TOMCAT、Dreamweaver、MyEclipse、SqlServer为开发平台，实现了毕业设计文档管理系统部分功能。
本文主要介绍本科毕业设计文档管理系统的前台设计，以JSP为基础，运用CSS、JavaScript，并引入了Extjs这种Ajax技术来完善表示层。
使页面载入的更快、降低流量费用。
关键词：
本科毕业设计文档管理系统，前台设计，Extjs
abstract
Withthedevelopmentofcomputernetworktechnology,tothepeopleoftheinformationagehasbroughtgreatconvenience.NowontheInternet,everywherecanseealotofallkindsofinformationmanagementsystem,suchasenterprisemanagementsystem,e-commercesystem,theschooleducationaladministrationmanagementsystemsuchasthespreadofallkindsofinformationmanagementsystem.Andrelatedmatterssuchasforundergraduatecoursegraduationdesigntopic,involvestheteachergivesthesubjectortopic,andstudent'schoice,andateachstagetopayorsubmitrelateddocuments,thecurrentmainorbyhumanactions,takesacertainamountofmanpower,thisbroughtalotofinconveniencetothework.
Undergraduatecoursegraduationdesigndocumentmanagementsystemisdesignedaccordingtotheactualsituationasamodelfordevelopment,itsmaingoalistothetraditionalmanualmanagementmodeofgraduationdesign,realizetheautomationandnetworkingofteachingmanagement,paperlessconstruction.Afteranalysis,wewithB/S（Browser/Server）isadevelopmentmode,usingtheMVCpattern,adoptthreelayerarchitecture,toensurethatthesystemmaintainabilityandextensibility.Usingjs,CSS,JSP（JAVASERVERPAGES）andtheJAVAprogramminglanguage,usingTOMCAT,Dreamweaver,MyEclipse,usedasthedevelopmentplatform,toachievethefunctionofdocumentmanagementsystemofgraduationdesign.Thepapermainlyintroducedtheundergraduatecoursegraduationdesignatthefrontofdocumentmanagementsystemdesign,basedontheJSP,usingCSS,javaScript,andintroducesExtjsthisAJAXtechnologytoimprovethepresentationlayer.Makethepageloadfaster,toreducethetrafficcost.
Keywords:
Undergraduatecoursegraduationdesigndocumentmanagementsystems,frontdeskdesign,Extjs
目录
1.引言1
1.1课题研究的背景1
1.2研究现状1
1.3研究意义1
1.4本文所做的工作2
2.相关技术简介3
2.1JSP简介3
2.2CSS布局的优点3
2.3设计中JavaScript和AJAX技术4
2.4Extjs前端框架技术4
2.5DWR框架技术5
3.需求分析6
3．1项目概述6
3.1.1应用目标6
3.1.2作用及范围6
3.2功能分析6
4.系统设计7
4．1系统功能设计7
4.2系统功能图7
5.系统的实现8
5.1用户登录8
5.2管理员用户9
5.3学生用户14
5.4普通教师用户14
5.5系主任用户14
6.结论16
7.致谢17
参考文献18
1.引言
1.1课题研究的背景
本科毕业设计文档管理系统基于网络平台实现学校审核学生毕业设计，学生通过浏览器实现对自身毕业设计结果的关注和了解。
实现学生和教师在不同的时期，不同的4地点对自身毕业设计情况能够充分了解的解决方案。
主要实现将毕业设计信息集中管理、发布，为学生、教师提供一个方便、简洁的服务平台。
本科毕业设计文档管理系统根据其简洁、方便的信息交流特点，能够给学生提供快捷方便、随时随地的通过网络了解毕业设计的这么一个环境，并帮助教师及时掌握学生毕业设计完成的进度和遇到的困难，弥补了传统观念里必须亲自到学校进行之间必要交流的缺点。
毕业设计的管理是高校管理工作中的一项重要内容，随着高校教育教学改革的不断深入，对于高校毕业设计管理的规范化、科学化、信息化已成为目前面临的重要课题。
目前，很多高校毕业设计管理还存在一些问题，例如：
根据教学要求，通常学生在大学最后一年需要在外地进行实习，而此时又面临着毕业设计选题问题，另外，毕业设计完成时，论文上交也存在困难。
同时，在做毕业设计的过程中，由于学生在外，指导教师对学生的指导和交流也会存在一些麻烦。
要解决以上这些问题，一方面要提高管理人员业务知识水平，另一方面要充分利用现代科学技术，建立现代化的管理信息系统，从而使高校毕业设计管理效率更高，使其更加规范化，科学化和信息化，满足教学和管理要求。
1.2研究现状
随着信息化时代的来临，以计算机技术和网络通讯技术为基础的现代信息科学技术迅猛发展，政府、企业，包括各个高校都在加快信息化建设。
高校信息化是高等教育现代化的需要，是深化教学改革、培养新型人才、提高管理水平的需要。
国外高校信息化建设从六、七十年代开始发展，现在已经比较成熟，与之相比我国高校信息化建设起步较晚，八十年代中期才开始进行校园网的基础设施建设。
近年来我国高校在信息化建设方面去的了较大成绩，国内许多高校都已经建立起自己毕业设计管理信息系统，能够实现教师上传课题、学生选题、文档管理等，系统都很成熟。
由于河北农业大学现在还没有自己的毕业设计档案管理系统，设计一个符合河北农业大学特点的资助系统就显得尤为重要。
1.3研究意义
随着计算机信息技术、网络通讯等高新技术的发展，对高校毕业设计管理提出了更高的要求。
这样不仅可以使教师从烦躁的事务中解脱出来，而且还能提供面向学生的快捷、灵活、方便的只能服务。
本课题旨在使目前校园内毕业设计管理信息网络化，解决以往信息传递不方便、不快捷等问题，如假期学生因不在学校而交不了文档，学员或导师为安排工作而必须通知到各个学生等繁琐的操作，通过本系统可实现管理的网络化，方便教师和学生，提高工作效率和效果，节省人力资源等，提高高校的管理水平，有利于推动高校管理的“无纸化办公”进程。
1.4本文所做的工作
本文主要介绍本科毕业设计管理档案的前台设计。
以JSP为基础，采用CSS控制其显示结构，利用JavaScript脚本语言，使得网页和用户之间实现一种实时性、动态的、交互性的关系，是网页包含更多活跃的元素和更加精彩的内容。
并采用了基于AJAX的Extjs框架接收后台返回的json数据，将其整齐、简单的显示出来。
而且利用基于AJAX的DWR框架，使代码操作简单，实现了学院、系、专业的三级联动菜单。
2.相关技术简介
2.1JSP简介
JSP（JavaSeverPages）是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。
JSP技术有点类似ASP技术，它是在传统的网页HTML文件（*.htm,*.html）中插入程序段（Scriptlet）和标记（tag），从而形成JSP文件（*.jsp）。
JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。
网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。
JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基Web于的应用程序的开发变得迅速和容易。
JSP技术是目前主流web技术中应用最广泛的一种，它可以让web开发人员和设计人员非常容易地创建和维护动态网页。
作为JAVA（TM）技术的一部分，JSP能够快速开发出基于Web、先进、安全和跨平台的应用程序。
JSP把用户界面从系统内容中分开，使得设计人员在不改变底层动态内容的前提下就可以改变整个网页的布局。
2.2CSS布局的优点
CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上。
一条CSS样式规则由选择器和声明组成。
选择器是为了选中网页中某些元素的，也就是告诉浏览器这段样式将应用到哪组元素。
本系统采用CSS布局主要有以下几点优势：
（1）精简代码，降低重构难度。
网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，CSS文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。
（2）网页访问速度
使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。
（3）SEO优化
采用DIV+CSS布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
（4）浏览器兼容性
DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。
国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。
2.3设计中JavaScript和AJAX技术
本系统前台的部分功能采用AJAX来实现。
这使系统大大提升了性能。
AJAX技术以JavaScript为依托，而JavaScript是一种解释性的，基于对象的脚本语言（aninterpreted，object-basedscriptinglanguage）。
HTML网页在互动性方面能力较弱，例如下拉菜单，就是用户点击某一菜单项时，自动会出现该菜单项的所有子菜单，用纯HTML网页无法实现；又如验证HTML表单（Form）提交信息的有效性，用户名不能为空，密码不能少于4位，邮政编码只能是数字之类，用纯HTML网页也无法实现。
要实现这些功能，就需要用到JavaScript。
JavaScript作为一种脚本语言，比HTML要复杂，但是因为JavaScript写的程序都是以源代码的形式出现的，正因为可以借鉴、参考优秀网页的代码，所以让JavaScript本身也变得非常受欢迎，从而被广泛应用。
原来不懂编程的人，多参考JavaScript示例代码，也能很快上手。
JavaScript主要是基于客户端运行的，用户点击带有JavaScript的网页，网页里的JavaScript就传到浏览器，由浏览器对此作处理。
很大程度的减少了WebServer的负担。
2.4Extjs前端框架技术
作为J2EE开发人员，我们似乎经常关注“后端机制”。
我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。
遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然和响应灵敏方面却投入不足。
Extjs无疑是最近前端开发最受关注的话题。
继YUI-Extjs0.30/Extjs1.X开发之后，Extjs不断更新，现在已经更新至4.0，而更多的开发者也参与到前端开发这一领域来。
目前界业内的AJAX热浪，一方面是由于2005年以来的Google一线产品使人带来极大的用户体验，另一方面来自对旧事物新改造的关注。
Ext是一个专注于用户界面的JavaScript框架，通过不断增加和完善的JavaScript类结构，Ext解决了许多在用JavaScript开发的RIA（丰富的网络应用）的常见问题。
而且可以为你节省下许多的开发时间和精力。
简单地说，Extjs为我们提供了一个稳定的、统一的JavaScript开发平台来构建丰富的网络应用。
虽然对界面的设计有许多选择，比如Dojo、Yahoo！
UI，但是当综合起来看的话，Ext还是以其独特的优势在这些技术当中脱颖而出。
对于Extjs的优点，主要有以下几点：
（1）Extjs非常快速。
通常性能是使用JavaScript开发的一个问题，但Extjs使我们没有了这种顾虑。
（2）Extjs是用完全面向对象的，有良好结构的，一致的方法来实现的。
这使得我们可以很快地学习它的类库，而且代码易读、易懂。
（3）基于一致性标准组件的实现使得类库更容易扩展。
（4）所有的元素都是随时可用的。
与其他虚的的类库相比，元素总是以预先定义的方式，设置和行为存在着，所以总是可用的。
（5）Extjs开发人员是及其专注和优秀的，对用户的需求有一个彻底的和关键的认识。
Extjs文档有很多的实例。
（6）Extjs社区是一个非常活跃的社区。
（7）Extjs在自由和商业的许可下都可使用。
（8）Extjs外观非常整洁。
2.5DWR框架技术
DWR（DirectWebRemoting）是getahead公司开发的一个实现Ajax应用的框架。
它的官方宣传语是“DWRisEasyAjaxforJava”,它允许客户端JavaScript远程调用服务器端Java类的方法，执行相关操作。
DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。
DWR工作原理是通过动态把Java类生成为Javascript。
它的代码就像AJAX一样，你感觉调用就像发生在浏览器端，但是实际上代码调用发生在服务器端，DWR负责数据的传递和转换。
AJAX的异步特性和正常JAVA方法调用的同步特性相结合.在异步模式下,结果数据在开始调用之后的一段时间之后才可以被异步访问获取到.DWR允许WEB开发人员传递一个回调函数,来异步处理Java函数调用过程。
3.需求分析
3．1项目概述
本科毕业设计文档管理系统基于网络平台实现学校审核学生毕业设计，学生通过浏览器实现对自身毕业设计结果的关注和了解。
该系统是为节省毕业设计文档管理花费的人力和物力，解决手工操作带来的诸多不便，提高毕业设计文档管理的工作效率而设计的。
3.1.1应用目标
系统界面简洁，操作方便、容易，最大限度的满足用户需求，通过本系统对毕业设计文档进行管理，方便学生，教师，系主任等进行其工作，节省了大量的工作和工作量，可以大大加强管理的方便性和快捷性。
3.1.2作用及范围
本系统适用于毕业设计完档的管理，使管理更加方便、高效率，以协助教师对毕业生毕业文档的管理。
3.2功能分析
本科毕业设计文档管理系统分为四种角色：
学生、普通教师、系主任、管理员。
学生部分：
登录、选题、删除已选项目、查看选题结果。
普通教师部分：
登录、添加项目、删除项目、调整项目。
系主任部分：
登录、添加项目、删除项目、调整项目、发布毕业设计项目。
管理员部分：
登录、学生管理、教师管理、班级管理、学院管理、专业管理。
4.系统设计
4．1系统功能设计
本科毕业设计文档管理系统的前台设计，根据用户角色不同显示的功能模块也不同，主要分为了学生、普通教师、系主任、管理员四个角色。
每个用户登录后进入，可以看到其角色相应的功能模块。
4.2系统功能图
系统功能图如图4-1所示。
5.系统的实现
5.1用户登录
该模块实现了用户的登录，并且对于不同的用户类型，通过相应的用户权限的控制，使得不同的用户类型具有不同的操作权限，实现权限所对应的功能，有效的对不同的用户功能进行了分离。
登录界面，管理员、学生、普通教师及系主任的界面一致。
如果账号或密码错误则提示红色错误信息。
登录界面如图5-1。
图5-1登录图
登录成功后，页面显示如图5-2，菜单处采用无序列表的形式，在菜单下面会显示当前用户的名字，账号，以及身份。
图5-2登录成功图
5.2管理员用户
管理员进入系统后可以进行教师、学生、班级、学院、系、专业的管理，如进入教师的管理页面可查看教师的信息，并可添加、删除、修改教师信息。
并可进行自己的密码更改。
进入教师管理界面，显示的教师信息，默认以院为排序，接收的是后台传送的json数据，此处是借用extjs接收并显示的json数据。
在刚开始拿到本课题的时候，对EXT没有任何的概念，只是从导师的任务书那里知道这是一个用于页面显示的JavaScript框架，拥有良好的用户交互性。
之前对Struts和Hibernate框架是有一定的了解的，所以对于业务逻辑层和持久层的功能和机制有了基本的了解。
但是对于显示层，一直都人为是界面设计人员的工作，所以对于EXT，还是有一定的疑虑的。
通过上网查找资料，发现Ext的一些东西都是有例子可以查看的。
在官方提供的一个包里面，有各种各样的例子，界面效果真的很不错，于是对这个框架还是充满了憧憬，想好好研究一下。
后来才发现虽然外表好看，但是后台却是不容易理解的，主要是关于这方面能入手的资料确实比较少，尤其是对于怎么把从数据库里查询出的数据显示在Ext页面上，更是一头雾水。
通过上网查资料以及请教他人，最终解决了。
项目中需要将extjs文件放到WebRoot的根目录下，并在
的表头引入以下代码。
href="<%=request.getContextPath（）%>/extjs/resources/css/ext-all.css"/>
鼠标移动到每行的编辑可以看到悬浮提示“修改”，鼠标点击可以进行教师信息的修改，如图5-3。
修改页面如图5-4。
图5-3信息列表图
图5-4修改信息图
进入班级管理界面后，可以看到一个三级联动菜单此处使用了Dwr框架。
Dwr的配置及代码如下：
（1）dwr的驱动配置代码如下：
dwr-invokerorg.directwebremoting.servlet.DwrServlet
debug
true
dwr-invoker
/dwr/*
（2）Dwr需要有自己的配置文件来配置相应的映射，代码如下：
（3）在增加班级信息页面的
中加入引入信息：
/dwr/interface/ItemsBean.js">
/dwr/engine.js">
升级会员 