1、1毕业设计（论文）基于 B/S 架构的音乐欣赏网站设计与开发系 部： 学生姓名： 专业班级： 学 号： 指导教师： 二一 X 年 X 月 XX 日2【摘要】计算机网络是计算机技术和通信技术相结合的产物，我们无时无刻不与网络接触。过去，我们都是通过磁带、CD、等方式来听音乐。现在人们不再满足于单调的文字或者图像，而希望能在网上传输音乐、试听音乐。【关键词】Dreamweaver、音乐、多媒体、网站设计、HTML5、JavaScript、JQuery、MySQL【Abstract】Computer network is a combination of computer technology an
2、d communication technology products, we are always with the network contact. In the past, we are through the tape, CD, etc. to listen to music. Now people are no longer satisfied with monotonous words or images, and want to be able to transfer music online, listen to music.【Keywords】Dreamweaver, Mus
3、ic, Multimedia, Website Design, HTML5, JQuery, JavaScript, MySQL3目 录引 言 5一、本课题研究的内容及意义 6（一）本课题研究的内容 .6（二）本课题研究的意义 .6（三）音乐网站国内外现状 .71. 国内现状 72. 国外现状 8二、系统环境概述 9（一）开发环境和技术介绍 91. Dreamweaver简介 .102. HTML5简介 .103. Jquery简介 .124. MySQL简介 .12三、系统分析 .13（一）功能需求 131. 注册模块 132. 登录模块 133. 添加音乐模块 134. 上传音乐模块 13
4、5. 音乐查找模块 13（二）性能需求 1441. 软件环境需求 142. 硬件环境需求 14四、系统设计 .14（一）系统功能设计 14系统总体规划 14（二）数据库设计 15数据库概念结构设计 15（三）数据库逻辑结构设计 16五、代码实现与运行图 18（一）创建 CSS文件 18样式定义，统一页面风格 18六、系统测试 26（一）系统测试的主要内容 27（二）系统测试的方法 27（三）系统测试计划 28（四）系统测试用例 28结 语 .29参考文献 .30致 谢 .315引 言互联网的兴起给我们的生活娱乐带来的新的契机。网络的交互性、实时性、丰富性和便捷性等优势促使传统娱乐业迅速融入网络
5、的浪潮。通过网络查询信息。进行音乐的收到、下载等在国外已成为一种时尚。网站音乐播放系统是计算机技术、网络通信技术、多媒体技术和数据压缩技术等多学科、多领域融合交叉的产物，是可对音乐节目内容进行自主选择的交互式音乐点播系统。与传统信息服务相比，在线音乐播放系统具有互动性、友善性和数字化等特点，其本质是信息的使用者根据自己的需求主动获取多媒体信息，它区别于信息发布的最大不同：一是主动性；二是选择性。借助其独特的优点，无论在国内还是国外，在线音乐播放系统技术都获得了长足的发展，在社会各领域（如服务、教育等）都十分广泛，显示出了强大的生命力。6一、本课题研究的内容及意义（一）本课题研究的内容随着计算机
6、网络技术的发展，音乐网站系统正逐渐的渗透到各个领域，网络化和信息化的发展也促进了 Web 网页应用和技术的快速发展。音乐网站正是在这样的前提下而产生的，人们通过互联网给日常生活增添了很大的乐趣，让人们在工作之后可以进行休闲的娱乐。因为宽带用户的增加，带动了互联网音乐产业的蓬勃兴起。无论国内还是国外，音乐网站市场都呈现一派生气。目前，音乐网站从传播形式来看，大致可分为三类：有固定网址的音乐网站、搜索类音乐网站、P2P 类音乐网站，三者功能各异，互为补充。近年来,全球数字娱乐业持续发展。网络传播以其特有的快速、高效、便捷的传输方式被人们所接受，越来越多的走进了大家。并 且在当今音乐浪潮的影响下。随
7、着音乐事业逐渐走向高峰,音乐已无处不在，音乐己与我们密不可分。全球数字娱乐业的迅猛发展、网络电视等,无不充斥着激烈的竞争。音乐网站在这种背景下逐渐发展起来。音乐网站改变了传统音乐产业的产业结构。而现在许多音乐网站不能提供在线播放,并且在技术支持上也不完善。于是设计和实现这样一个音乐网站就成为了必须，不仅仅满足用户的可以试听音乐的功能,而且还要保证在速度上不能慢，更要在功能和性能上满足用户更多的体验和需求。（二）本课题研究的意义随着网络通信技术、多媒体技术及数据存储技术的快速发展，音乐网站作为一种大众的 Web 服务，给喜爱音乐的网络用户提供了极大的便利，增添了音乐用户的选择。但有一些音乐网站由
8、于各种不同的原因遭到了社会的淘汰，其原因主要集中在页面设计、查询浏览的速度、功能模块等不同方面。因此，为了用户可以方便、快捷、简单、安全地实现音乐搜索去查找自己喜欢的音乐，并能实时地试听音乐、7下载音乐、将音乐加入到自己的音乐盒中、点歌并将自己的建议写入到留言板以便网站的完善等，需要建立一个自由、安全的音乐网站。本音乐网站基于 Dreamweaver采用先进的 HTML5 技术与 Jquery 框架进行设计开发。（三）音乐网站国内外现状1. 国内现状2015 年中国在线音乐市场规模为 40.2 亿元，增长 67.2%。随着版权市场逐渐规范，特别是 2015 年 7 月以来国家对在线音乐版权市场
9、的监管力度逐渐加大，在线音乐市场发展将更为正规有序。在音乐市场收入结构中，广告、游戏联运等模式比较成熟，增长稳定；直播、用户付费等增长快速，是企业重要的收入来源，预计未来仍将保持较快增长；另外，O2O 演出、衍生商品售卖等虽然目前在市场中占比较小，但未来也有较大成长空间。在市场商业模式多元化的作用下，用户付费、广告、直播、音乐周边产品销售等收入模式将共同促进市场继续平稳快速增长。图 1-3-1 2010-2018 年中国在线音乐市场收入规模及增长率根据调研数据显示，中国在线音乐用户对于音乐网站及应用的整体满意度较高，其中，手机端产品满意度略高于 PC 端；在手机端，接近 40%的用户同时拥有
10、2 款音8乐 App，24.5%用户同时拥有 3 款音乐 App。近年来，中国在线音乐产品不断提升用户体验、丰富音乐内容、扩展自身业务能力与运营能力，得到了较好的成效。同时，音乐版权在中国的发展正处于初级阶段，音乐网站的战略布局使各产品具有不同特色，拥有的内容也不尽相同，用户对于音乐内容的选择随着其喜好和使用场景的不同而发生变化，在音乐产品的选择上也具有较大灵活性。图 1-3-2 2016 年中国手机音乐用户同时拥有音乐 App 的数量分布图2. 国外现状网络音乐风靡美国，对其传统音乐产业带来了巨大冲击，尤其是音像制品的销售额逐年锐减。据美国录音工业协会（Recording Industry
11、Association America, RIAA）调查显示：美国近几年的音乐 CD、磁带等音像制品销售额逐年减少，一个主要原因是人们通过在线方式狭隘网络音乐，而减少了传统音乐音像制品的消费。根据 RIAA 的数据显示，在 2015 年上半年 CD 的销售额为 4.94 亿美元，与 2014 年同期相比下降了 31.4%。而且被数字专辑出售（5.72 亿美元）和数字单曲下载（6.88 亿美元）的收入超过。不过虽然如此，在 2015 上半年 CD 的销售额仍然比广告支持的流媒体（1.63 亿美元）以及流媒体付费订阅（4.78 亿美元）收入更多，同时也超过公共音乐版权的收入（3.87 亿美元） ，
12、公共音乐版权收入来自于网络电台服务例如9Pandora、IHeartRadio 等。所以 CD 虽然表现有所下降但是并未走致死路。根据尼尔森的数据，在 2015 上半年实体专辑包括 CD、黑胶、磁带三部分在美国独立零售店的销售量有所上升，尽管只是上升了 0.6%。在非传统零售方面，例如亚马逊或 16 其他在线商店出售的专辑数量总体上升了8%，那么 CD 销量究竟为什么是下降的呢？根据尼尔森的数据，大众零售市场在 2015 年的实体专辑销量相比 2014 年同期下降了 510 万张，达 18.2%。而美国的连锁店市场也受到影响，实体专辑的销量与2014 年相比也下降了百万张。图 1-3-3 美国
13、 2015 H1 音乐产业收入图二、系统环境概述（一）开发环境和技术介绍本音乐网站系统的设计是基于 HTML5 和 B/S 架构以及 MySQL 数据库来实现的。本系统的开发工具主要有 Dreamweaver、MySQL 数据库管理工具等。101. Dreamweaver简介Dreamweaver 是一款所见则所得网页编辑器，是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DREAMWEAVER 特点：（1）最佳的制作效率D
14、reamweaver 可以用最快速的方式将 Fireworks，FreeHand，或 Photoshop 等档案移至网页上。使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。对於选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver 能与您喜爱的设计工具，如 Playback Flash，Shockwave 和外挂模组等搭配，不需离开Dremweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。（2）网站管理使用网站地图可以快速制作网站雏形、设计、
15、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML 码、HTML 属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。（3）无可比拟的控制能力是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。可以全方位的呈现在任何平台的热门浏览器上。2. HTML5简介HTML 5 是近十年来 Web 开发标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的新使命是将 Web 带入一个成熟的应用平台，在 HTML 115 平台上，视频，音频，图象，动画，以及同电脑的交互都被标
16、准化。什么是 HTML5?HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。为 HTML5 建立的一些规则：（1）新特性应该基于 HTML、CSS、DOM 以及 JavaScript。（2）减少对外部插件的需求(比如 Flash)（3）更优秀的错误处理（4）更多取代脚本的标记（5）HTML5 应该独立于设备（6）开发进程应对
17、公众透明与 HTML 4 的不同之处：新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput 元素的新属性：日期和时间，email, url。新的通用属性：ping, charset, async 全域属性：id, tabindex, repeat。移除元素：center, font, strike。HTML 5 有两大特点：首先，强化了 Web 网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。12其次，追加了本地数据库等 Web 应用的功能。3. Jquery简介jQuery
18、是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架） 。jQuery 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。jQuery 的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的 css 选择器，并且可对 CSS 选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。j
19、Query 兼容各种主流浏览器，如 IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。4. MySQL简介MySQL 是一个精巧的 SQL 数据库管理系统，虽然 MySQL 不是开放源代码的产品，但 MySQL 数据库是开放源码的一种小型关联式数据库管理系统。MySQL 数据库的特点是体积小、处理速度快、总体成本低等，使得在因特网上的中小型的网站的应用非常广泛。并优于其开放源码这特点，有很多的中小型网站为了降低网站总体成本就必定会选择 Mysql 数据库作为网站数据库。 对于其他大型数据库例如 Oracle、SQLserver、db2 等相比，MySQL 数据库肯
20、定有其不足的地方例如稳定性和功能。但这也丝毫不会减少它受欢迎的程度，因为对于一般的个人和中小型企业来说，MySQL 数据库所提供的功能是绝对可以满足的。13三、系统分析（一）功能需求1. 注册模块作为音乐网站的用户，需要注册成为本网站的会员才能享受到网站的所有权利，注册就是使普通用户变成会员的途径，本模块主要完成的任务是提示用户添加自己的基本信息，将用户信息添加到数据库。2. 登录模块用户注册成为本站会员后就可以登录本网站了，在此模块会判断用户是不是本站注册会员，会判断用户的用户账号和密码是否匹配，如果匹配则将用户信息显示出来并可以执行其他操作，如果不匹配会提示用户输入用户账号和密码错误。登录
21、后用户可以选择修改自己的个人资料。3. 添加音乐模块用户注册成为本站会员后就可以登录本网站了，在此模块会判断用户是不是本站注册会员，会判断用户的用户账号和密码是否匹配，如果匹配则将用户信息显示出来并可以执行其他操作，如果不匹配会提示用户输入用户账号和密码错误。登录后用户可以选择修改自己的个人资料。4. 上传音乐模块上传音乐是网站增加音乐的主要方式，用户选择自己的音乐，并选择该音乐所属专辑，最后上传音乐。5. 音乐查找模块音乐查找是音乐网站的核心，音乐网站应该提供按照音乐名和音乐出品人查找这两种最基本的音乐查找方式，除了这两种基本查找音乐方式外还应有按照专辑查14找，按音乐类型查找，按音乐地区查
22、找等查找方式。音乐查找结果最后列表显示，用户点击对应属性链接可以实现按照这个属性查找或者排序。点击对应的音乐名可以试听音乐。（二）性能需求1. 软件环境需求操作系统 Windows XP 或以上服务器 Tomcat 7 或以上数据库 Mysql 5.5 或以上浏览器 IE 10 或以上表 3-2-1 软件环境需求表2. 硬件环境需求内存 128MB 以上CPU Intel 奔腾 3 级以上或同等级兼容 CPU硬盘 300MB 或以上空余空间显示器分辨率 800600 或以上表 3-2-2 硬件环境需求表四、系统设计（一）系统功能设计系统总体规划本网站按照需求开发，可分为一下几个模块：注册模块、
23、登录模块、增加音乐模块、上传音乐模块、音乐查找模块15音乐网站注册模块登录模块添加音乐模块上传音乐模块音乐查找模块图 4-1-1 音乐网站系统功能模块图（二）数据库设计数据库是音乐网站的核心组成部分，所有信息处理子系统都将基于某种数据库平台，以便将其处理的信息资源完整、安全地保存起来，并且对其进行各种管理和利用。选择一个好的数据库平台是非常重要的。在选择数据库平台时，应考虑下列因素： （1）性能：数据库的数据处理能力； （2）开放性：数据库是否能在多种操作系统下使用； （3）安全性：数据库是否具有高度的安全性； （4）可靠性：数据库是否具有高度的可靠性； （5）并行性：数据库是否并行运行在多节
24、点上； 根据本网站开发应用的实际需要，我们选择了 MYSQL 作为数据库开发平台。数据库概念结构设计由于实体属性较多，此处主要体现了各个实体间的关系，详细设计见数据库设16计中表结构的字段。如图 4-2-1 所示：会员会员网站 音乐会员排行榜心情内容分类名称管理员用户名 密码图 4-2-1 数据库概念结构设计 E-R 图音乐音乐名称音乐名称音乐编号标记存储地址上传时间点击次数音乐类型上传 ID歌手名称图 4-2-2 实体设计 E-R 图（三）数据库逻辑结构设计根据实体属性及其产生的行为，从实际需要出发，同时又考虑各实体间的联系和统一性，设计出如下各表。 浏览评论浏览 展示管理17（1）admi
25、 表：admin 表是用来存放管理员信息的表，管理员信息包括用户账号、密码等信息。Admin 表结构如表 4-3-1 所示。列名 类型 主键/ 外键 是否为空 备注/说明ID Int (4) 主键 否 代理主键，美不管理员唯一标识，自增Name Varchar (50) N/A 否 管理员帐号Password Varchar (50) N/A 否 管理员密码表 4-3-1 admin 表结构（2）User 表：User 表是用来存放用户信息的表，用户信息除了包括用户账号、密码、昵称等信息还包括机箱选填信息，User 表结构如表 4-3-2 所示。列名 类型 主键/ 外键 是否为空 备注/说明I
26、D Int (4) 主键 否 代理主键，内部管理员唯一标识，自增UserAccount Varchar (50) N/A 否 用户账号，外部用户唯一标识，不可修改UserName Varchar (50) N/A 否 用户昵称，可以为中文，不可修改Password Varchar (50) N/A 否 用户密码，可以修改Sex Varchar (2) N/A 是 用户性别，选填，默认（不填）为“男”Email Varchar (50) N/A 否 用户 email，用来修改和找回个人资料Userleave Int (4) N/A 否 用户级别，记录用户各种表现，默认为 0 Tag Int (4
27、) N/A 否 用户标记，用来区分管理员/ 会员表 4-3-2 User 表结构（3）Music 表：Music 表是存放音乐信息的表，此表将音乐的属性简单描述，包括音乐类型、地区、音乐名等常见属性，此表设置代理主键（自增）作为主键，这个主键也是其他音乐关联表的外键，表结构如表 4-3-3 所示。列名 类型 主键/外键 是否为空 备注/说明ID Int (4) 主键 否 代理主键，内部管理员唯一标识，自增MusicName Varchar (50) N/A 否 音乐名，可以重复MusicType Varchar (50) N/A 否 音乐类型/曲风PubYear Datetime N/A 是
28、发行时间，可以不填PlayNum Int (8) N/A 否 试听人数/人气判断依据MusicLocale Varchar (50) N/A 是 音乐地区/语言UpLoader Int (4) 外键 是 上传者，可以为空/数据库直接添加则为空UploadTime Datetime N/A 否 上传时间，上传作品时自动生成StoreaddressVarchar (50) N/A 否 存储地址，用来记录音乐位置Tag Int (4) N/A 否 标记，用来标记音乐是否被删除Player Varchar (50) N/A 是 音乐表演者/歌手/出品人表 4-3-3 User 表结构18（4）Clip
29、list 表：该表用来存放音乐固定专辑（唱片公司发行的）信息，由于本网站规模和本人对专辑认识的限制，对专辑属性的设置相对比较简单。因为专辑英语音乐术语“多对多”关系，所以在此表中不设置与音乐的关联，将关联写至 Cm表，Cliplist 表结构如表 4-3-4 所示。列名 类型 主键/ 外键 是否为空 备注/说明Idcliplist Int (4) 主键 否 代理主键，内部使用唯一标识，自增ClipName Varchar (50) N/A 否 专辑名称，不唯一Player Varchar (50) N/A 否 专辑出品人/作者PubYear Datetime N/A 是 专辑发行时间Com V
30、archar (50) N/A 是 发行专辑的公司Cover Varchar (50) N/A 是 专辑海报/封面图片的存储地址表 4-3-4 Cliplist 表结构（5）Cm 表：该表是 music 表和 cliplist 表的关系表，用来处理音乐和专辑的关系，这里一个音乐作品可以属于多个专辑，同时一个专辑包含多个音乐作品。Cliplist 表结构如表 4-3-5 所示。列名 类型 主键/ 外键 是否为空 备注/说明ID Int (4) 主键 否 代理主键，内部使用唯一标识，自增Name Int (4) 外键 否 专辑 id，专辑表里的主键，作为外键使用Musicid Int (4) 外键
31、 否 音乐 id，音乐表里的主键，作为外键使用表 4-3-5 Cm 表结构五、代码实现与运行图（一）创建 CSS文件样式定义，统一页面风格body font: 14px “Helvetica Neue“,Helvetica,Arial,“Lucida Grande“,sans-serif;background: #333;color: #fff;a outline: none;text-decoration: none;19.left float: left;.right float: right;.clear clear: both;#background background: url(b
32、g.jpg);background-size: cover;position: fixed;top: 0;left: 0;width: 100%;height: 100%;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;user-select: none;#player width: 500px;height: 130px;padding: 25px;margin: 50px auto 30px;position: relative;#player .c
33、over background: rgba(0, 0, 0, 0.5);border: 1px solid #333;position: absolute;top: 25px;left: 25px;overflow: hidden;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;20-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;width: 130px;height: 130px;-moz-box
34、-shadow: 0 2px 10px black;-webkit-box-shadow: 0 2px 10px black;-o-box-shadow: 0 2px 10px black;box-shadow: 0 2px 10px black;#player .cover img -moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;width: 130
35、px;height: 130px;#player .ctrl margin-left: 155px;text-shadow: 0 1px 2px #000;line-height: 16px;#player .ctrl .tag strong, #player .ctrl .tag span display: block;text-overflow: ellipsis;#player .ctrl .tag span font-size: 12px;margin-top: 5px;color: #ccc;（二）播放器 Jquery 实现代码(function($)/ Settingsvar re
36、peat = localStorage.repeat | 0,shuffle = localStorage.shuffle | false,continous = true,autoplay = true,playlist = title: 秋殇别恋,artist: 格子兮、牙牙乐,21album: 格子兮、牙牙乐 - 秋殇别恋.mp3,cover:img/1.jpg,mp3: mp3/格子兮、牙牙乐 - 秋殇别恋.mp3,ogg: ,title: 亡灵序曲,artist: 魔兽世界,album: 魔兽世界 - 亡灵序曲.mp3,cover: img/2.jpg,mp3: mp3/The Da
37、wn.mp3,ogg: ,title: 别再让步,artist: 童可可,album: 童可可 - 别再让步.mp3,cover: img/3.jpg,mp3: mp3/童可可 - 别再让步.mp3,ogg: ,title: 漂洋过海来看你,artist: 丁当,album: 漂洋过海来看你 - 丁当.mp3,cover: img/4.jpg,mp3: mp3/漂洋过海来看你 - 丁当.mp3,ogg: ,title: 龙的传人,cover: img/5.jpg,artist: 成龙,album: 龙的传人,mp3: mp3/龙的传人 成龙.mp3,;/ Load playlistfor (v
38、ar i=0; i+item.artist+ - +item.title+);var time = new Date(),currentTrack = shuffle = true ? time.getTime() % playlist.length : 0,22trigger = false,audio, timeout, isPlaying, playCounts;var play = function()audio.play();$(.playback).addClass(playing);timeout = setInterval(updateProgress, 500);isPlay
39、ing = true;var pause = function()audio.pause();$(.playback).removeClass(playing);clearInterval(updateProgress);isPlaying = false;/ Update progressvar setProgress = function(value)var currentSec = parseInt(value%60) = playlist.length)track = currentTrack = 0; else track = i;$(audio).remove();loadMusi
40、c(track);if (isPlaying = true) play();/ Shufflevar shufflePlay = function()var time = new Date(),lastTrack = currentTrack;currentTrack = time.getTime() % playlist.length;24if (lastTrack = currentTrack) +currentTrack;switchTrack(currentTrack);/ Fire when track endedvar ended = function()pause();audio
41、.currentTime = 0;playCounts+;if (continous = true) isPlaying = true;if (repeat = 1)play(); else if (shuffle = true)shufflePlay(); else if (repeat = 2)switchTrack(+currentTrack); else if (currentTrack ).html().appendTo(#player);$(.cover).html();$(.tag).html(+item.title+item.artist+item.album+);25$(#p
42、laylist li).removeClass(playing).eq(i).addClass(playing);audio = newaudio0;audio.volume = $(.mute).hasClass(enable) ? 0 : volume;audio.addEventListener(progress, beforeLoad, false);audio.addEventListener(durationchange, beforeLoad, false);audio.addEventListener(canplay, afterLoad, false);audio.addEv
43、entListener(ended, ended, false);loadMusic(currentTrack);$(.playback).on(click, function()if ($(this).hasClass(playing)pause(); else play(););$(.rewind).on(click, function()if (shuffle = true)shufflePlay(); else switchTrack(-currentTrack););$(.fastforward).on(click, function()if (shuffle = true)shuf
44、flePlay(); else switchTrack(+currentTrack););$(#playlist li).each(function(i)var _i = i;$(this).on(click, function()switchTrack(_i);););if (shuffle = true) $(.shuffle).addClass(enable);if (repeat = 1)$(.repeat).addClass(once); else if (repeat = 2)$(.repeat).addClass(all);26$(.repeat).on(click, funct
45、ion()if ($(this).hasClass(once)repeat = localStorage.repeat = 2;$(this).removeClass(once).addClass(all); else if ($(this).hasClass(all)repeat = localStorage.repeat = 0;$(this).removeClass(all); else repeat = localStorage.repeat = 1;$(this).addClass(once););$(.shuffle).on(click, function()if ($(this)
46、.hasClass(enable)shuffle = localStorage.shuffle = false;$(this).removeClass(enable); else shuffle = localStorage.shuffle = true;$(this).addClass(enable););)(jQuery);图 5-2-1 播放器运行图六、系统测试在所有管理信息系统的开发和实施过程中,系统测试是保证系统得以顺利运行的关键性一步,它是提高软件质量和可靠性的有效手段。测试就是指用意在发现错误而27执行一个程序的过程，所以一个好的测试用例就是系统的保证，它有很高的几率发现一个尚未
47、发现的错误。而测试的关键问题就是如何设计测试用例。以下具体介绍测试的原则以及方法。（一）系统测试的主要内容 1. 功能测试：对浏览网站的每一个环节都要经过测试，才能保证各个功能的正常。 2. 性能测试：对系统的突变性、整体性、以及目的性都要进行仔细的检验。 3. 强化测试：多次的测试才能知道系统的强大，也能查处系统的错误，早早的处理，就可以避免造成生命财产的重要损失。 4. 安全测试：网站后台需要输入大量信息，因此数据的合法性至关重要。（二）系统测试的方法1. 模块测试是对一个模块进行测试，根据模块的功能说明，检验模块是否有错误。一般由编程人员自己进行。 2. 联合测试是将整个系统作为一个整体
48、进行调试。高层由上而下，低层由下而上，到中层进行会合。 3. 验收测试是检验系统说明书的各项功能与性能是否实现，是否满足要求。4. 系统测试是对整个系统的测试，将硬件、软件、操作人员看作一个整体，检验是否有不符合系统说明书的地方。28（三）系统测试计划 第一步：测试模块。这一部分工作主要在做项目的过程中完成，以保证每个模块作为一个独立单元能够正确运行。 第二步:联合测试。在各个模块完成后，再将各相关模块连接起来，进行联合测试，以保证各个单元模块能从整体上协调运作。 第三步：确认测试。经过联合测试后进行确认测试，进一步检查系统是否达到预期的全部要求，这一阶段除了对整个系统的功能、性能进行测试外，还要对配置进行检查，看构件的全部构成成分是否齐全，质量是否合乎要求。（四）系统测试用例该网站系统系统采用黑盒法测试用例测试。如下表所示：1. 管理员登录功能输 入 输 出 实际输入 实际输出 状 态管理员:admin密码：admin 进入后台管理主窗体用户名：admin密码：admin 进入后台管理主窗体 测试正常用户名：admin密码：000 提示：密码不正确用户名：admin密码：000 提示：密码不正确 测试正常表 6
