本科文档管理系统设计——前台设计毕业设计.doc

《本科文档管理系统设计——前台设计毕业设计.doc》由会员分享，可在线阅读，更多相关《本科文档管理系统设计——前台设计毕业设计.doc（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、摘要 随着计算机网络技术的发展,给信息时代的人们带来了很大的方便。如今在Internet上，随处都可以看到很多的各类信息管理系统，如企业管理系统，电子商务系统，学校教务管理系统等各类信息管理系统的普及。而针对本科毕业设计的选题等相关事项，涉及到导师给出课题或学生自选课题，以及在各个阶段需要上交或是提交相关的文档资料等问题，目前主要还是由人为操作，需要花费一定的人力，这个给整个工作带来了很多不便。 本科毕业设计文档管理系统是根据实际情况为模型进行开发设计的，其主要目标是为传统毕业设计的人工管理模式进行改造，实现教学管理工作的自动化、网络化、无纸化建设。经分析，本文以B/S(Browser/Ser

2、ver)为开发模式，使用MVC模式，采用三层架构，保证系统的可维护性和可扩展性。运用JS、CSS、JSP(JAVA SERVER PAGES)和JAVA编程语言，以TOMCAT、Dreamweaver、MyEclipse、SqlServer为开发平台，实现了毕业设计文档管理系统部分功能。本文主要介绍本科毕业设计文档管理系统的前台设计，以JSP为基础，运用CSS、JavaScript，并引入了Extjs这种Ajax技术来完善表示层。使页面载入的更快、降低流量费用。关键词：本科毕业设计文档管理系统，前台设计，ExtjsabstractWith the development of computer

3、 network technology, to the people of the information age has brought great convenience. Now on the Internet, everywhere can see a lot of all kinds of information management system, such as enterprise management system, e-commerce system, the school educational administration management system such

4、as the spread of all kinds of information management system. And related matters such as for undergraduate course graduation design topic, involves the teacher gives the subject or topic, and students choice, and at each stage to pay or submit related documents, the current main or by human actions,

5、 takes a certain amount of manpower, this brought a lot of inconvenience to the work. Undergraduate course graduation design document management system is designed according to the actual situation as a model for development, its main goal is to the traditional manual management mode of graduation d

6、esign, realize the automation and networking of teaching management, paperless construction. After analysis, we with B/S (Browser/Server) is a development mode, using the MVC pattern, adopt three layer architecture, to ensure that the system maintainability and extensibility. Using js, CSS, JSP (JAV

7、A SERVER PAGES) and the JAVA programming language, using TOMCAT, Dreamweaver, MyEclipse, used as the development platform, to achieve the function of document management system of graduation design. The paper mainly introduced the undergraduate course graduation design at the front of document manag

8、ement system design, based on the JSP, using CSS, javaScript, and introduces Extjs this AJAX technology to improve the presentation layer. Make the page load faster, to reduce the traffic cost. Keywords: Undergraduate course graduation design document management systems, front desk design, Extjs目录1.

9、 引言11.1课题研究的背景11.2研究现状11.3研究意义11.4本文所做的工作22.相关技术简介32.1 JSP简介32.2 CSS布局的优点32.3设计中JavaScript和AJAX技术42.4 Extjs前端框架技术42.5 DWR框架技术53.需求分析631项目概述63.1.1应用目标63.1.2作用及范围63.2功能分析64.系统设计741系统功能设计74.2系统功能图75.系统的实现85.1用户登录85.2管理员用户95.3学生用户145.4普通教师用户145.5系主任用户146.结论167.致谢17参考文献181. 引言1.1课题研究的背景本科毕业设计文档管理系统基于网络平台

10、实现学校审核学生毕业设计，学生通过浏览器实现对自身毕业设计结果的关注和了解。实现学生和教师在不同的时期，不同的1地点对自身毕业设计情况能够充分了解的解决方案。主要实现将毕业设计信息集中管理、发布，为学生、教师提供一个方便、简洁的服务平台。本科毕业设计文档管理系统根据其简洁、方便的信息交流特点，能够给学生提供快捷方便、随时随地的通过网络了解毕业设计的这么一个环境，并帮助教师及时掌握学生毕业设计完成的进度和遇到的困难，弥补了传统观念里必须亲自到学校进行之间必要交流的缺点。 毕业设计的管理是高校管理工作中的一项重要内容，随着高校教育教学改革的不断深入，对于高校毕业设计管理的规范化、科学化、信息化已成

11、为目前面临的重要课题。目前，很多高校毕业设计管理还存在一些问题，例如：根据教学要求，通常学生在大学最后一年需要在外地进行实习，而此时又面临着毕业设计选题问题，另外，毕业设计完成时，论文上交也存在困难。同时，在做毕业设计的过程中，由于学生在外，指导教师对学生的指导和交流也会存在一些麻烦。要解决以上这些问题，一方面要提高管理人员业务知识水平，另一方面要充分利用现代科学技术，建立现代化的管理信息系统，从而使高校毕业设计管理效率更高，使其更加规范化，科学化和信息化，满足教学和管理要求。1.2研究现状随着信息化时代的来临，以计算机技术和网络通讯技术为基础的现代信息科学技术迅猛发展，政府、企业，包括各个高

12、校都在加快信息化建设。高校信息化是高等教育现代化的需要，是深化教学改革、培养新型人才、提高管理水平的需要。国外高校信息化建设从六、七十年代开始发展，现在已经比较成熟，与之相比我国高校信息化建设起步较晚，八十年代中期才开始进行校园网的基础设施建设。近年来我国高校在信息化建设方面去的了较大成绩，国内许多高校都已经建立起自己毕业设计管理信息系统，能够实现教师上传课题、学生选题、文档管理等，系统都很成熟。由于河北农业大学现在还没有自己的毕业设计档案管理系统，设计一个符合河北农业大学特点的资助系统就显得尤为重要。 1.3研究意义随着计算机信息技术、网络通讯等高新技术的发展，对高校毕业设计管理提出了更高的

13、要求。这样不仅可以使教师从烦躁的事务中解脱出来，而且还能提供面向学生的快捷、灵活、方便的只能服务。 本课题旨在使目前校园内毕业设计管理信息网络化，解决以往信息传递不方便、不快捷等问题，如假期学生因不在学校而交不了文档，学员或导师为安排工作而必须通知到各个学生等繁琐的操作，通过本系统可实现管理的网络化，方便教师和学生，提高工作效率和效果，节省人力资源等，提高高校的管理水平，有利于推动高校管理的“无纸化办公”进程。1.4本文所做的工作 本文主要介绍本科毕业设计管理档案的前台设计。以JSP为基础，采用CSS控制其显示结构，利用JavaScript脚本语言，使得网页和用户之间实现一种实时性、动态的、交

14、互性的关系，是网页包含更多活跃的元素和更加精彩的内容。并采用了基于AJAX的Extjs框架接收后台返回的json数据，将其整齐、简单的显示出来。而且利用基于AJAX的DWR框架，使代码操作简单，实现了学院、系、专业的三级联动菜单。2.相关技术简介2.1 JSP简介JSP(Java Sever Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件（*.htm,*.html）中插入程序段（Scriptlet）和标记（tag），从而形成JSP文件(*.jsp)。JSP技术使用Java编程语言编

15、写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基Web于的应用程序的开发变得迅速和容易。 JSP技术是目前主流web技术中应用最广泛的一种，它可以让web开发人员和设计人员非常容易地创建和维护动态网页。作为JAVA（TM）技术的一部分，JSP能够快速开发出基于Web、先进、安全和跨平台的应用程序。JSP把用户界面从系统内容中分开，使得设计人员在不改变底层动态内容的前提下就可以改变整个网页的布局。2.2 CSS布局的优点 CS

16、S样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上。一条CSS样式规则由选择器和声明组成。选择器是为了选中网页中某些元素的，也就是告诉浏览器这段样式将应用到哪组元素。本系统采用CSS布局主要有以下几点优势：(1) 精简代码，降低重构难度。网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，CSS文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。(2)网页访问速度使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。(3)SEO优化采用DIV+CS

17、S布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。(4)浏览器兼容性DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。2.3设计中JavaScript和AJAX技术本系统前台的部分功能采用AJAX来实现。这使系统大大提升了性能。AJAX技术以JavaScrip

18、t为依托，而JavaScript是一种解释性的，基于对象的脚本语言（an interpreted，object-based scripting language）。 HTML网页在互动性方面能力较弱，例如下拉菜单，就是用户点击某一菜单项时，自动会出现该菜单项的所有子菜单，用纯HTML网页无法实现；又如验证HTML表单（Form）提交信息的有效性，用户名不能为空，密码不能少于4位，邮政编码只能是数字之类，用纯HTML网页也无法实现。要实现这些功能，就需要用到JavaScript。JavaScript作为一种脚本语言，比HTML要复杂，但是因为JavaScript写的程序都是以源代码的形式出现的，

19、正因为可以借鉴、参考优秀网页的代码，所以让JavaScript本身也变得非常受欢迎，从而被广泛应用。原来不懂编程的人，多参考JavaScript示例代码，也能很快上手。JavaScript主要是基于客户端运行的，用户点击带有JavaScript的网页，网页里的JavaScript就传到浏览器，由浏览器对此作处理。很大程度的减少了Web Server的负担。2.4 Extjs前端框架技术 作为J2EE开发人员，我们似乎经常关注“后端机制”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其易于部署的特点允许站点以尽可能低的成本

20、拥有上百万的用户。遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然和响应灵敏方面却投入不足。 Extjs无疑是最近前端开发最受关注的话题。继YUI-Extjs 0.30/Extjs 1.X开发之后，Extjs不断更新，现在已经更新至4.0，而更多的开发者也参与到前端开发这一领域来。目前界业内的AJAX热浪，一方面是由于2005年以来的Google一线产品使人带来极大的用户体验，另一方面来自对旧事物新改造的关注。Ext是一个专注于用户界面的JavaScript框架，通过不断增加和完善的JavaScript类结构，Ext解决了许多在用JavaScript开发

21、的RIA（丰富的网络应用）的常见问题。而且可以为你节省下许多的开发时间和精力。简单地说，Extjs为我们提供了一个稳定的、统一的JavaScript开发平台来构建丰富的网络应用。虽然对界面的设计有许多选择，比如Dojo、Yahoo！UI，但是当综合起来看的话，Ext还是以其独特的优势在这些技术当中脱颖而出。对于Extjs的优点，主要有以下几点：(1)Extjs非常快速。通常性能是使用JavaScript开发的一个问题，但Extjs使我们没有了这种顾虑。(2)Extjs是用完全面向对象的，有良好结构的，一致的方法来实现的。这使得我们可以很快地学习它的类库，而且代码易读、易懂。(3)基于一致性标准

22、组件的实现使得类库更容易扩展。(4)所有的元素都是随时可用的。与其他虚的的类库相比，元素总是以预先定义的方式，设置和行为存在着，所以总是可用的。(5)Extjs开发人员是及其专注和优秀的，对用户的需求有一个彻底的和关键的认识。Extjs文档有很多的实例。(6) Extjs社区是一个非常活跃的社区。(7) Extjs在自由和商业的许可下都可使用。(8) Extjs外观非常整洁。2.5 DWR框架技术 DWR(Direct Web Remoting)是getahead公司开发的一个实现Ajax应用的框架。它的官方宣传语是“DWR is Easy Ajax for Java”,它允许客户端JavaS

23、cript远程调用服务器端Java类的方法，执行相关操作。 DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。DWR工作原理是通过动态把Java类生成为Javascript。它的代码就像AJAX一样，你感觉调用就像发生在浏览器端，但是实际上代码调用发生在服务器端，DWR负责数据的传递和转换。AJAX的异步特性和正常JAVA方法调用的同步特性相结合.在异步模式下,结果数据在开始调用之后的一段时间之后才可以被异步访问获取到.DWR允许WEB开发人员传递一个回调函数,来异步处理Java函数调用过程。 3.需求分析31项目概述 本科毕业设计文档管理系统基于网络平台实现学校审核学生毕业设计，学

24、生通过浏览器实现对自身毕业设计结果的关注和了解。该系统是为节省毕业设计文档管理花费的人力和物力，解决手工操作带来的诸多不便，提高毕业设计文档管理的工作效率而设计的。3.1.1应用目标系统界面简洁，操作方便、容易，最大限度的满足用户需求，通过本系统对毕业设计文档进行管理，方便学生，教师，系主任等进行其工作，节省了大量的工作和工作量 ，可以大大加强管理的方便性和快捷性。3.1.2作用及范围 本系统适用于毕业设计完档的管理，使管理更加方便、高效率，以协助教师对毕业生毕业文档的管理。3.2功能分析本科毕业设计文档管理系统分为四种角色：学生、普通教师、系主任、管理员。学生部分：登录、选题、删除已选项目、

25、查看选题结果。普通教师部分：登录、添加项目、删除项目、调整项目。系主任部分：登录、添加项目、删除项目、调整项目、发布毕业设计项目。管理员部分：登录、学生管理、教师管理、班级管理、学院管理、专业管理。4.系统设计41系统功能设计本科毕业设计文档管理系统的前台设计，根据用户角色不同显示的功能模块也不同，主要分为了学生、普通教师、系主任、管理员四个角色。每个用户登录后进入，可以看到其角色相应的功能模块。4.2系统功能图系统功能图如图4-1所示。本科毕业设计文档管理系统管理员系主任普通教师学生教师管理班级管理学院管理系管理专业管理学生管理添加删除项目调整项目查看选题结果选题项目调整发布项目添加删除项目

26、图 4-1 系统结构图5.系统的实现5.1用户登录该模块实现了用户的登录，并且对于不同的用户类型，通过相应的用户权限的控制，使得不同的用户类型具有不同的操作权限，实现权限所对应的功能，有效的对不同的用户功能进行了分离。登录界面，管理员、学生、普通教师及系主任的界面一致。如果账号或密码错误则提示红色错误信息。登录界面如图5-1。图 5-1 登录图登录成功后，页面显示如图5-2，菜单处采用无序列表的形式，在菜单下面会显示当前用户的名字，账号，以及身份。图 5-2登录成功图5.2管理员用户 管理员进入系统后可以进行教师、学生、班级、学院、系、专业的管理，如进入教师的管理页面可查看教师的信息，并可添加

27、、删除、修改教师信息。并可进行自己的密码更改。进入教师管理界面，显示的教师信息，默认以院为排序，接收的是后台传送的json数据，此处是借用extjs接收并显示的json数据。在刚开始拿到本课题的时候，对EXT没有任何的概念，只是从导师的任务书那里知道这是一个用于页面显示的JavaScript框架，拥有良好的用户交互性。之前对Struts和Hibernate框架是有一定的了解的，所以对于业务逻辑层和持久层的功能和机制有了基本的了解。但是对于显示层，一直都人为是界面设计人员的工作，所以对于EXT，还是有一定的疑虑的。通过上网查找资料，发现Ext的一些东西都是有例子可以查看的。在官方提供的一个包里面

28、，有各种各样的例子，界面效果真的很不错，于是对这个框架还是充满了憧憬，想好好研究一下。后来才发现虽然外表好看，但是后台却是不容易理解的，主要是关于这方面能入手的资料确实比较少，尤其是对于怎么把从数据库里查询出的数据显示在Ext页面上，更是一头雾水。通过上网查资料以及请教他人，最终解决了。项目中需要将extjs文件放到WebRoot的根目录下，并在的表头引入以下代码。link rel=stylesheet type=text/csshref=/extjs/resources/css/ext-all.css / 鼠标移动到每行的编辑可以看到悬浮提示“修改”，鼠标点击可以进行教师信息的修改，如图5-

29、3。修改页面如图5-4。图5-3信息列表图图5-4修改信息图进入班级管理界面后，可以看到一个三级联动菜单此处使用了Dwr框架。Dwr的配置及代码如下：(1)dwr的驱动配置代码如下：dwr-invoker org.directwebremoting.servlet.DwrServlet debug true dwr-invoker /dwr/* (2)Dwr需要有自己的配置文件来配置相应的映射，代码如下： (3)在增加班级信息页面的中加入引入信息：script src=/dwr/interface/ItemsBean.js script src=/dwr/engine.js script sr

30、c=/dwr/util.js(4)下拉菜单的代码：所属院: 所属 系 所属 系 (5)相应的脚本语言：Ext.onReady(function() update1(); ) function update1() ItemsBean.AcademyList(createList1); function createList1(data) if (typeof windowDWRUtil = undefined) window.DWRUtil = dwr.util; DWRUtil.removeAllOptions(academyid); DWRUtil.addOptions(academyid,

31、 data); function update2() if (typeof windowDWRUtil = undefined) window.DWRUtil = dwr.util; ItemsBean.DepartmentList(DWRUtil.getValue(academyid),createList2) ; function createList2(data) if (typeof windowDWRUtil = undefined) window.DWRUtil = dwr.util; DWRUtil.removeAllOptions(departmentid); DWRUtil.

32、addOptions(departmentid, data); function update3() if (typeof windowDWRUtil = undefined) window.DWRUtil = dwr.util; ItemsBean.SpecialList(DWRUtil.getValue(departmentid),createList3); function createList3(data) if (typeof windowDWRUtil = undefined) window.DWRUtil = dwr.util; DWRUtil.removeAllOptions(

33、specialid); DWRUtil.addOptions(specialid, data); 页面显示如图5-5。 图5-5下拉菜单图5.3学生用户 学生进入后可查看已由指导教师公布的项目列表，点击“查看项目详细信息”并可进行查看项目详细信息，并可进行项目选择，如图5-6。 图5-6查看项目信息图5.4普通教师用户 普通教师进入后可增加项目，查询项目，删除项目、调整项目。项目列表页面显示内容【项目编号】，【项目名称】，【提交日期】，【指导教师】，【操作】。【操作】列有【修改】【删除】按钮；项目状态为未通过的情况下显示【提交按钮】。数据默认以提交日期倒序排列。毕业设计项目调整页面显示内容【项

34、目编号】，【项目名称】，【项目状态】，【学生姓名】、【专业】、【性别】、【确认】。在上面的项目列表中，只列出状态为“已选择”的项目。指导老师选择一个项目后，在下面的 列表中列出选择此项目的学生。对于有多个学生选择的项目，指导老师选择一个学生，点击“确认”按钮（对于只有一个学生选择的项目，指导老师也要选择学生，然后点击“确认”按钮），数据库中在项目-学生表中删除此项目对应其他学生的记录，并将这些记录中的（学生学号，落选项目编号）加入到学生表1中。并将项目状态改为“已确认”。对于没有学生选择的项目，指导老师不用管。5.5系主任用户系主任进入后可增加项目，查询项目，删除项目，并可进行项目调整，发布项

35、目。项目列表页面显示内容【项目编号】，【项目名称】，【提交日期】，【指导教师】，【操作】。【操作】列有【查看】，【审核】按钮；项目状态为“未通过”、“待审核”的情况下显示【审核按钮】。数据默认以提交日期倒序排列。【项目编号】字段上有超链接，链接到项目编辑页面。系主任调整页面显示内容【项目编号】，【项目名称】，【指导教师】，【项目状态】（只列出状态为“未选择”的项目）。系主任选择一个状态为“未选择”的项目和一个无项目的学生，点击确认，在数据库中加入一条记录，并修改项目状态改为“已确认”，并给出操作结果的提示。6.结论本课题的研究经历了一个漫长的过程，刚开始接到这个毕业设计题目时，其实是有点迷茫的

36、，对这个系统的工作流程根本就不了解，开始就按照软件开发的步骤一点一点的来做。首先联系了系主任，了解河北农业大学毕业设计管理的整体流程，需求分析完后，开始进行系统的概要设计，详细设计，之后是系统的实现，由于之前已经进行了详细的设计，系统开发起来就比较有目的性，本文主要做系统的前台设计，开发系统时，也参照了其他学校的毕业设计管理系统界面。开发的过程中也遇到了一些问题，对于一些自己解决不了的问题就上网查解决方法，不会的技术就直接在网上学，通过开发这个系统，我锻炼了自己的编程能力以及解决问题的能力。设计中的不足：（1）本系统页面一些功能还不是很齐全，例如在填写一些信息时，还未加入对填写内容的检测。 （

37、2）在页面显示中用到ext显示的信息列表，字体没有进行设置，导致信息表显示的字体有些小。总之由于个人的知识水平和经验的不足，本系统的前台设计中可能存在很多的问题，我会在今后的学习中逐步加强。7.致谢经过这段时间的学习和实践，本次毕业设计圆满的结束了。通过这次毕业设计，我学到了很多通过课堂学不到的东西，增强了自己独立思考的能力，锻炼了自己的动手能力，培养了独立解决问题的良好习惯，并且通过学习自己从未用过的语言及工具，增强了自己的自学能力。这些都是在走向社会之前很宝贵的经验和体会，对以后的学习、工作和生活必将有很大帮助。在本次毕业设计从开始到结束的整个过程中，有很多人给予了我多方面的帮助，借此机会

38、表达我对他们的谢意：感谢我的指导老师孙晨霞老师，感谢她对我在技术和思想上等各方面的支持和教导。同时，也要感谢很多同学，在我遇到问题的时候能够帮助我一起解决。在老师和同学的帮助下使我顺利完成了系统的前台设计工作。此外，在设计过程中也使我受益匪浅，使我领悟到了一些为人处事方面的道理。最后我还要感谢院领导给我们提供了这么好的一个学习工作环境，使我们能顺利完成学业。参考文献1 李兴华，王月清 Java Web 开发实战经典基础篇 清华大学出版社， 2010.8(1)2 Joey George.Dinesh Batra Joseph Valacich,Jeffrey Hoffer 面向对象系统分析与设计

39、 清华大学出版社， 2009(2)3Allen Holub，If I were King: A proposal for fixing the Java programming languages threading problems，20084Renaud Pawlak，JAC: A Flexible Solution for Aspect-Oriented Programming in Java，20105 Eagle M. Writing Your Web Application With Open Source Java EB/OL. 6 Deepak Alur，John Crupi，Dan Malks著 刘天兆，熊节繁 译 J2EE核心模式 Core J2EE PatternsM. 机械工业出版社，20057 Rod Johnson Juergen Hoeller 编著, J2EE Development without EJBM. 电子工业出版社，20058 Daniel Solin,Build Rich InternetApplicationswithExtOL. 9