北京工业大学视听课堂平台设计与实现.docVIP

北京工业大学视听课堂平台设计与实现 　　摘要：首先简单介绍平台的设计思路；然后详细论述了各个模块的功能，最后结合Windows Media流媒体技术，搭建北京工业大学新版视听课堂平台。 　　关键词：开源组件；平台；设计 　　 　　今天，人们对基于Internet应用程序的需求持续增长，要求也越来越高。对于开发人员而言，除了要保证牢不可破的数据完整性，永续运行的高可靠性，应对业务能力扩展的高可靠性之外，还要提供良好、丰富的用户体验。 　　北京工业大学现代教育技术中心于2003年开发了视听课堂平台。时隔7年，以现在的眼光审视当年的平台，其缺乏Web2.0时代的交互功能，用户界面也不够友好。为了更好地发挥我校视频教学资料丰富的特点，让师生感觉校园网应用程序和商业网站的用户体验相差无几，新版视听课堂平台应运而生。 　　 　　1设计思路 　　 　　1.1 开发框架选择 　　以Java语言作为后台的Web开发，框架众多；针对视听课堂平台，我们选择EJB3.0+Struts1.3，搭配jQuery1.4.2，这种组合方案。图1展示了一个五层服务器架构。EJB3.0位于业务逻辑层和持久化层，Struts1.3位于表现层和控制层，jQuery1.4.2类库集成了很多复杂的JS操作。 　　 　　图1 五层服务器架构 　　1.2 主要业务流程 　　管理员首先设置一、二级学科，学院、语种、发布点等系统级信息；然后填写点播或者直播的具体信息，点击发布后，通过FTP把媒体文件上传至流媒体服务器。学生用户点击相关链接，观看音视频资料，还可以针对某个点播资源进行评论、添加标签。流程如图2所示。 　　 　　图2 视听课堂用户操作流程图 　　 　　2功能模块概述 　　 　　视听课堂平台将用户分为管理员、一般用户两类，他们的权限不同，能够使用的功能也不同。平台需要实现的功能总体分为音视频资源管理、音视频信息、评论、标签与打分、用户空间5个模块。各个模块的功能如图3所示： 　　 　　图3 视听课堂功能模块图 　　3主要模块设计 　　 　　3.1 音视频资源管理模块 　　管理员在平台首页成功登录后，来到管理员首页(如图4所示)。管理员首页页面右侧的表格使用了jqGrid―一个基于jQuery的开源表格插件。表格中的数据通过Ajax方式异步获得，jqGrid表格附带的排序、分页、查询功能也是异步获得的。其操作流程如下：页面元素被成功加载后，执行一个显示数据库中的点播信息的请求，该请求被截获后，调用相关Action，进行查询数据库的操作，再把从数据库中获得的数据打包成JSON的数据格式，推送到前台进行显示。 　　 　　图4 管理员首页 　　 　　管理员首页左侧显示了管理员用户的常用操作，包括各种系统级信息的增删改，以及点播、直播信息的增删改。 　　管理员可以查看所有视频的“累计点击量”“当年点击量”“当月点击量”“当日点击量”。通过开源的Jxl组件，管理员还可以把点击量统计信息导出为Excel格式，便于对期末的工作进行总结。除了查看所有视频的点击量之外，管理员还可以按照二级学科、学院、栏目查看点击量。这里，平台采用了Flot，一个基于jQuery的开源图表绘制插件。 　　3.2 音视频信息模块 　　用户在首页可以按照二级学科、学院、栏目浏览视频。图5所示为在首页点击相应二级学科后进入的页面。 　　 　　图5 按照二级学科浏览音视频信息 　　在管理员填写点播信息，点击提交后，后台程序通过Pinyin4j开源Java组件，获取视频名称首个汉字的第一个音节，并把其保存进数据库，这样用户在“资源汇总”页面就可以按照首字母(包括数字)浏览自己想看的视频资源了(如图6所示)。 　　 　　图6 资源汇总 　　3.3 评论模块 　　登录用户可以发表新的评论，也可以回复他人的评论(如图7所示)。评论者只可以修改、删除自己的评论，管理员可以修改、删除所有人的评论。 　　 　　图7 评论系统 　　3.4 打分、标签模块 　　如图7所示，在页面左侧上部有一个滑块，拖动滑块可以改变其上方显示的分值，点击“打分”按钮，分数被异步提交给系统，经过后台处理后，把新的平均分推送到前台页面显示。点击“收藏”按钮，在页面中央弹出一个填写标签的对话框。同商业平台一样，用户可以填写标签，也可以选择自己常用的或其他用户针对本视频设置的标签(如图8所示)。 　　 　　图8 标签模块 　　 　　3.5 用户空间模块 　　登录用户点击“我的空间”超级链接后，来到属于自己的用户空间。用户可以查看个人信息、收藏的影片资料、写过的评论、自己和别人的常用标签等(如图9所示)。 　　 　　图9 用户空间 　　 　　4部署环境