校内教学资源共享平台前端设计与实现毕业论文doc.docx

1、校内教学资源共享平台前端设计与实现毕业论文doc校内教学资源共享平台前端设计与实现毕业论文1 绪论1.1平台设计来源及研究意义设计资源共享平台的时候，是以学习资源（电子书类、音频类、视频类、软件类）的共享为切入点。满足学生之间的资源共享的需求。学生们每个人手里都会有一些资源，但是如果能降这些资源进行整合，并且共享起来，那么所有同学都将受益匪浅，本系统就是本着为同学提供高效的共享平台而开发的。系统以课程为单位，进行围绕课程的资源共享。同学们在寻找自己需要的资源的时候都是以课程为单位的，这样又能满足老师的教学需求。老师可以在自己的课程下面添加资源，同时也可以发布一些课程的公告。还可以进行点对点的站

2、内信，可以说将资源的共享进行了细化。而且同学也可以进行资源的共享。但是我们已经有了一个BB平台，那你们做的那个资源共享平台还有意义吗？是很有意义。BB平台这种开放式的环境及对行业标准的适应性与协同性，为的是能够帮助教育机构实现互联互动的教学环境。而在我们学校师生对BB平台的使用情况大家都有目共睹，大部分的学生经常使用BB平台看一些老师发布的公告、老师的个人信息、课程的简介信息、下载一些相关课程的学习资料、将完成的作业上传到数字收发箱，而实际情况是很多学生都不是积极主动的使用BB平台；大部分的老师经常使用BB平台发布一些公告，上传课程的简介信息和要求以及课程相关的学习资料、查阅学生上传的作业，而

3、可能是学校网络环境的问题，老师反映说有时上传的资料会出现问题。BB系统的确强大，但是好多功能其实已经几乎都不在使用了，而且和本校开发的其他平台整合的时候会比较困难，所以我们进行了这个平台的开发，值做资源的共享，而将这个功能的可用性做好。而对以后进一步扩充其他功能留有接口方便给整合其他的平台。1.2模块设计的内容凡是注册成功的用户登录到该平台后，都能够根据自己所属用户组的权限对平台上的系统公告、课程公告、课程资源、站内信、留言、用户、用户组等内容进行合法的操作（增、删、改、查）。1.3平台设计要达到的目标 我们的目标就是希望通过大家的努力，能够让我们的这个资源共享平台成为一个以课程为中心，围绕课

4、程的一个共享平台。在学校中实用和适用的平台，主要是面向全校的老师和学生，使其能够在自身受益的同时，还可以通过相互的交流使更多人受益。但是我们能够清楚地认识到要想达到这个目标会遇到很多困难，不论是在开发、测试过程中，以及后期的性能优化、管理与维护阶段，肯定会遇到很多技术上难题。2 模块分析2.1模块需求分析 目前平台默认有四个用户组，分别为：超级管理员组、管理员组、老师组、学生组。凡是注册成功的用户登录到该平台后，都能够根据自己所属用户组的权限对平台上的系统公告、课程公告、课程资源、站内信、留言、用户、用户组等内容进行合法的操作（增、删、改、查）。 目前平台默认有39个操作，分别为：添加一个行为

5、、删除一个行为、更改用户组行为、添加用户组、删除用户组、更换用户分组、更改用户信息、添加新用户到普通用户、删除用户、添加系统公告、更改系统公告、删除系统公告、添加任意班级公告、更改任意班级公告、删除任意班级公告、添加所属班级公告、更改所属班级公告、删除所属班级公告、添加留言、更改留言信息、删除所属留言、删除所有课程资源留言、编辑所有资源专辑、删除所有资源专辑、编辑自己资源专辑、删除资源专辑、发送站内信、删除所有站内信、删除自己所收站内信、上传资源无限制、上传资源2G限制、上传资源1G限制、上传资源500M限制、上传资源200M限制、上传资源100M限制、上传资源50M限制、上传资源30M限制、

6、上传资源20M限制、上传资源10M限制。 这些操作将会合理的分配给各个用户组，当用户进行相应的操作之前，都会对该用户所属的用户组的权限进行检测，确认其所拥有的权限并进行相关的操作，一下为各用户组的所持有的相关权限。 超级管理员：查看、发布、修改、删除系统公告；查看、发布、修改、删除课程公告；查看、上传、下载、删除课程资源，上传资源大小限制；查看、发送、删除站内信；查看、发送、删除留言；查看、创建、修改、删除用户信息；查看、创建、修改、删除用户组信息，添加、修改、分配用户权限。（如图3.3所示） 管理员：查看、发布、修改、删除系统公告；查看、发布、修改、删除课程公告；查看、上传、下载、删除课程资

7、源，上传资源大小限制；查看、发送、删除站内信；查看、发送、删除留言；查看、修改个人基本信息，查看相关师生基本信息；查看所属用户组的基本信息。 老师：查看系统公告；查看课程公告；查看、上传、下载课程资源；查看、发送、删除站内信；查看、发送、删除留言；查看、修改个人基本信息，查看相关学生基本信息；查看所属用户组的基本信息。 学生：查看系统公告；查看课程公告；查看、上传、下载课程资源；查看、发送、删除站内信；查看、发送、删除留言；查看、修改个人基本信息；查看所属用户组的基本信息。2.2开发技术路线2.2.1平台技术概述 后端整合Struts2、Spring2、Hibernate3框架开发多层架构的J

8、avaEE应用。 前端开发脚本方面使用JQuery框架为基础开发库，布局应用CSS。 数据库开发使用Oracle11g。 文件上传方面的通信协议主要通过HTTP、Flex内置协议、自定义协议三种方式实现。 服务器环境为Linux(SUSE)操作系统。 开发环境为Window操作系统。 服务器使用Tomcat服务器。 开发工具：MyEclipse。 版本管理工具：CVS。2.2.2前端技术概述前端页面基于HTML4.0.1,CSS1.0的960栅格化进行设计，页面脚本架构基于jQuery进行开发。其中大量是用同源下的Ajax进行交互来增强用户体验。文件上传部分有部分功能基于Flex进行开发。其中

9、大量使用了前端优化策略。对Ajax请求进行相应的安全优化。(1) 栅格系统的设计原理及应用图2.1 栅格计算示意图在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W =（an）+（n-1）i由于a+i=A，可得：(An) - i = W如以上原理，在本站的设计中，采用了类似如下960栅格设计：图2.2 栅格化明细示意图(2) 前端优化方案描述：1减少HTTP请求,使用expires头2采用gzip压缩组件3将样式表放在顶部4将脚本放在底部5禁止使用CSS表达式,简化css选择符6尽量使用外部

10、的JavaScript和CSS7精简JavaScript代码8尽量不适用重定向9对JavaScript进行并行加载,对JavaScript使用预加载10进行图片的优化,合理的合并图层(3) JQuery是一个前端的框架，其是由javascript编写而成的，其中提供了很多的内置方法方便前端脚本的编写。而且之中内置了很多前端方面的性能优化，是的响应的减少了由于导入脚本库增加页面首次载入的下载量导致的页面的渲染速度问题。Flex是一种基于浏览器插件的技术，也就是说浏览器必须安装了adobe的flashplayer插件才能播放。也正因如此，它是夸平台的，不会因为浏览器对页面的解析不同而显示出不同的效

11、果。本系统使用Flex主要是因为HTTP不能满足上传中大型文件的需求，如果用户有一个需求是这样的：想上传一个较大的文件，但是又不想安装客户端，而传统的HTTP方式又不可以实现，这是就要用到Flex上传。Flex方式可以上传300M一下的文件。2.2.3后端技术概述 Struts2的简单处理流程如下：(1)浏览器发送请求；(2)中心处理器根据struts .xml配置文件查找对应的处理请求的 Action类；(3)Struts2的拦截器链自动对请求应用通用功能，例如：WorkFlow、Validation等功能；(4)如果struts .xml配置文件中配置了method参数，则调用 metho

12、d参数对应的Action类中的method方法，否则调用通用的execute方法来处理用户请求；(5)将Action类中的对应方法返回的结果响应给浏览器。Spring的核心是IOC（控制反转）和AOP（面向切面编程），IOC是用来管理所有的业务对象，当你需要一个对象的时候它会帮你自动的通过Java的反射机制来创建，而不是通过以前传统的new的方式；AOP是允许在调用的方法前后附加另外的行为，可以为某一类对象进行监督和控制，从而达到对一个模块扩充的功能，这些都是通过配置类达到的。Spring目的：就是让对象与对象（模块与模块）之间的关系不通过代码来关联，都是通过配置类说明进行管理（Spring根

13、据这些配置，内部通过Java的反射机制动态的组装对象），Spring的哲学是在不影响Java对象的设计的情况下将Java对象加入到框架中。Hibernate是一个开源的对象关系映射框架，它对JDBC进行了轻量级的对象封装，对 Java类和关系数据库进行mapping，使得Java程序员可以随心所欲的使用面向对象编程思维来操纵数据库。Hibernate可以应用在任何使用JDBC的场合，既可以在Java的客户端程序使用，也可以在Servlet/JSP的Web应用中使用，Hibernate还可以在应用EJB的JavaEE架构中取代CMP，完成数据持久化的重任。2.3可行性分析 Linux+Tomca

14、t作为服务器环境是非常实用的，Tomcat虽然不像Apache那样的高效，但是由于其内部没有jsp的环境，所以如果使用apache的话还要将Tomcat集成到Apache上，导致中间的转换，而且在内网的环境下，使用过于复杂的服务器环境没有意义，所以我们最终选择了仅适用Tomcat作为服务器。 JQuery库的主要优点是方便开发，但是同时也会出现一个问题，就是在第一次载入JQuery的时候会给页面多带来300K的开销，会稍微减慢了页面的加载速度，但是这些开销其实是可以忽略的，因为即便是在外网中使用jquery库也不会对页面带来太多的影响，何况是本系统主要是服务于内网用户，而且当用户载入一次JQu

15、ey库之后就会在用户的电脑中形成浏览器缓存，在下次再使用的时候浏览器会自动的去取缓存里面的js文件，也就是说即便是对前端的性能有了一定的影响也只是影响了用户第一次访问本站的时候。而带来的好处是很大的，首先是提高了开发效率，其次是其包含了很多优化好的方法，可以大大增强代码的执行效率。 Flex的跨平台性很好，其缺点也是在第一次加载的时候需要加载一个SWF文件，这个文件相对较大。但是同样这个在内网可以忽略不计，而且会形成浏览器缓存。同时带来的很多优点就是Flex带来的用户体验非常好，同时满足了上传中大型文件的需求。Struts2是一个MVC框架，主要用于将交互系统分解成模型（Model）、视图（V

16、iew）、控制器（Controller）三个部分，这三个部分以最小的耦合协同工作，以增加程序的可扩展性和可维护性。概括起来MVC框架的优点主要有以下方面：(1)多个视图可以对应一个模型。按MVC设计模式，一个模型对应多个视图，可以减少重复性代码以及代码的维护量，一旦模型发生改变，也易于维护；(2)模型返回的数据与显示逻辑分离。模型数据可以应用任何的显示技术，例如，使用JSP页面、Velocity模板或者直接产生Excel文档等；(3)应用被分隔为三层，降低了各层之间的耦合，提供了应用的可扩展性；(4)控制层的概念也很有效，由于它把不同的模型和不同的视图组合在一起，完成不同的请求。因此，控制层可

17、以说是包含了用户请求权限的概念；(5)MVC更符合软件工程化管理的精神。不同的层各司其职，每一层的组件具有相同的特征，有利于通过工程化和工具化产生管理程序代码。Spring既是一个IOC容器，也是一个AOP框架。Spring 最好的地方是它有助于开发人员替换对象，有了Spring只要用JavaBean属性和配置文件加入依赖性（协作对象）。然后可以很容易地在需要时替换具有类似接口的协作对象。IOC 允许创建一个可以构造对象的应用环境，在代码中不直接与对象和服务连接，但在配置文件中描述哪一个组件需要哪一项服务，IOC容器负责将这些联系在一起。在典型的 IOC 应用中，IOC容器创建所有对象，并设置

18、必要的属性将它们连接在一起，决定什么时间调用方法。AOP 让开发人员可以创建非行为性的关注点，称为横切关注点，并将它们插入到应用程序代码中。使用 AOP后，公共服务（比如日志、持久性、事务等）就可以分解成方面并应用到域对象上，同时不会增加域对象的对象模型的复杂性。AOP 的功能完全集成到了 Spring 事务管理、日志和其他各种特性的上下文中。Hibernate主要用于数据库的持久化（将普通Java对象映射到数据库中的关系实体）。优点主要有以下方面：(1)对JDBC访问数据库的代码做了封装，大大简化了数据访问层繁琐的重复性代码；(2)Hibernate是一个基于JDBC的主流持久化框架，是一个

19、优秀的ORM实现。他很大程度的简化了DAO层的编码工作；(3)Hibernate使用Java反射机制，而不是字节码增强程序来实现透明性；(4)Hibernate的性能非常好，因为它是个轻量级框架，映射的灵活性很出色。它支持各种关系数据库，从一对一到多对多的各种复杂关系。3 模块概要设计3.1模块功能总体设计 系统分为7个模块（如图3.1所示）图3.1 功能模块图 页面的整体风格如下：图3.2 页面整体风格图3.2模块流程分析3.2.1整体的流程分析凡是注册成功的用户登录该平台时，首先进行登录检测，主要是验证用户输入的用户名和密码是否正确。若验证成功，再对用户所属的用户组进行检测，从而进入相应用

20、户组的操作界面；若验证失败，用户需要重新进行登录（如图3.2所示）。图3.3 进入主程序区之前的流程图 权限检验流程：图3.4 权限检测的流程图默认分配的每个用户组拥有不同的权限（如图3.5所示）：图3.5 系统用例图3.2.2各用户流程分析进入相应用户组的操作界面后，根据该用户组所拥有的合法权限进行相应的操作。以下分别是超级管理员（如图3.3所示）、管理员（如图3.4所示）、老师（如图3.5所示）、学生（如图3.6所示）所能够进行的合法操作的流程图。图3.6 超级管理员的流程图图3.7 管理员的流程图图3.8 老师的流程图图3.9 学生的流程图3.3数据库概要设计 根据模块的需求分析设计的E

21、-R图中包括17个实体，包括：用户、老师、学生、用户组、行为、行为专栏、系统公告、课程公告、留言、站内信、班级、专业、学院、课程、专辑、专辑文件、专辑标签。实体之间的关系如图3.10所示。图3.10 E-R图4 模块详细设计4.1模块功能详细设计4.1.1公告模块用户可以发布公告，管理员可以发布系统公告，而教师可以发布课程公告，学生不可以发布公告，超级管理员拥有所有权限。经过权限的检验之后进入公告的主程序区。所有用户在登录之后都会看到系统公告，而所属课程用户会看到相应的课程公告。4.1.2课程资源模块所有人都可以上传资源到某个课程下，进入页面之后会有一个建议的上传接口，这里是应用HTTP协议上

22、传的，也就是说只支持50M一下的文件上传，当点入之后会弹出一个用Flex应用写成页面，这里支持300M一下文件的上传。如果还不能满足用户的需求，那么用户可以下载客户端来进行大文件的上传。每一个文件都所属一个专辑，而专辑是属于某一个课程的。管理员有删除专辑的权限，教师也有删除专辑的权限。4.1.3留言模块用户可以某个资源留言，也可以回复这个资源的某个用户的留言，可以删除自己发过的留言，管理员可以删除留言，留言不可以进行编辑。4.1.4站内信模块用户可以点对点的发送站内信，站内信和某个用户关联，用户如果对方的学号的话就可以直接发送站内信，如果不知道对方的学号则可以选择所有和自己同一个课程的同学发送

23、站内信。自己可以删除自己发送的站内信，管理员可以删除站内信。站内信无法进行编辑。4.2系统主要界面详细设计前端的主要风格都是参照了Google的主题页面来进行设计的，每个功能集成于一个小的功能块，而整个页面是几个功能块的集合。图4.1 超级管理员主页面图4.2 最新课程资源页面图4.3 课程资源上传页面图4.4 课程资源列表界面图4.5 某一课程资源专辑列表界面图4.6 超级管理员编辑课程资源界面图4.7 用户管理界面图4.8 管理系统公告页面图4.9 添加系统公告页面图4.10 发送站内信页面图4.11 管理员主页面图4.12 老师和学生主页面4.3数据库详细设计 数据库中有19张表，包括：

24、学院表、专业表、班级表、课程表、老师表、学生表、课程基本用户映射表、行为专栏表、行为表、用户组表、用户行为映射表、基本用户表、系统公告表、课程公告表、留言表、站内信表、专辑表、专辑文件表、专辑标签表（如表4.14.19所示）表4.1 学院表(academe)列名数据类型可否为空说明idnamedescribevarchar2(20)varchar2(40)varchar2(100)nonoyes学院id(主键)学院名称学院描述表4.2 专业表(major)列名数据类型可否为空说明idnamedescribeacademe_idvarchar2(20)varchar2(40)varchar2(1

25、00)varchar2(20)nonoyesno专业id(主键)专业名称专业描述学院id(外键)表4.3 班级表(class)列名数据类型可否为空说明idnamemajor_idvarchar2(20)varchar2(40)varchar2(20)nonono班级id(主键)班级名称专业id(外键)表4.4 课程表(course)列名数据类型可否为空说明idnamedescribeacademe_idvarchar2(20)varchar2(40)varchar2(100)varchar2(20)nonoyesno课程id(主键)课程名称课程描述学院id(外键)表4.5 老师表(teache

26、r)列名数据类型可否为空说明idnameemailquestionanswerphoneqqofficedescribevarchar2(20)varchar2(40)varchar2(100)varchar2(60)varchar2(60)varchar2(20)varchar2(20)varchar2(40)varchar2(100)nonoyesyesyesyesyesyesyes老师id(主键、外键)，外键关联基本用户表老师姓名老师电子信箱老师问题(用于找回密码)老师答案(用于找回密码)老师电话号码老师QQ号老师办公室老师描述表4.6 学生表(student)列名数据类型可否为空说明i

27、dnameclass_idemailquestionanswerphoneqqdescribevarchar2(20)varchar2(40)varchar2(20)varchar2(100)varchar2(60)varchar2(60)varchar2(20)varchar2(20)varchar2(100)nononoyesyesyesyesyesyes学生id(主键、外键)，外键关联基本用户表学生姓名班级id(外键)学生电子信箱学生问题(用于找回密码)学生答案(用于找回密码)学生电话号码学生QQ号学生描述表4.7 课程基本用户映射表(course_user)列名数据类型可否为空说明id

28、course_iduser_idnumber(10)varchar2(20)varchar2(20)nononoid(主键)课程id(外键)用户id(外键)表4.8 行为专栏表(subject_actioncolumn)列名数据类型可否为空说明idnamenumber(10)varchar2(40)nono行为专栏id(主键)行为专栏名称表4.9 行为表(subject_action)列名数据类型可否为空说明idnameactioncolumn_idnumber(10)varchar2(40)number(10)nonono行为id(主键)行为名称行为专栏id(外键)表4.10 用户组表(su

29、bject_group)列名数据类型可否为空说明idnamerightnumber(10)varchar2(40)number(2)nono、uniqueyes用户组id(主键)用户组名称用户组权限级别表4.11 用户组行为映射表(subject_group_action)列名数据类型可否为空说明idgroup_idaction_idnumber(10)number (10)number (10)nononoid(主键)用户组id(外键)行为id(外键)表4.12 基本用户表(subject_user)列名数据类型可否为空说明idpasswordgroup_idbasetypevarchar2(20)varchar2(30)number (10)number (1)nononono用户id(主键)用户密码用户组id(外键)用户类型，0：学生 1：老师表4.13 系统公告表(subject_system_bulletin)列名数据类型可否为空说明idtitlecontenttimeuser_idnumber(10)varchar2(40)clobdatevarchar2 (20)nonononoyes系统公告id(主键)系统公告标题系统公告内容系统公告更新时间用户id(外键)表4.14 课程公告表(subject_course_bulletin)列名数