基于BS架构的音乐欣赏网站设计与开发毕业论文

1毕业设计（论文）基于 B/S 架构的音乐欣赏网站设计与开发系 部： 学生姓名： 专业班级： 学 号： 指导教师： 二一 X 年 X 月 XX 日2【摘要】计算机网络是计算机技术和通信技术相结合的产物，我们无时无刻不与网络接触。过去，我们都是通过磁带、CD、等方式来听音乐。现在人们不再满足于单调的文字或者图像，而希望能在网上传输音乐、试听音乐。【关键词】Dreamweaver、音乐、多媒体、网站设计、HTML5、JavaScript、JQuery、MySQL【Abstract】Computer network is a combination of computer technology and 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, Music, 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. 上传音乐模块 .135. 音乐查找模块 .13（二）性能需求 .1441. 软件环境需求 .142. 硬件环境需求 .14四、系统设计 .14（一）系统功能设计 .14系统总体规划 .14（二）数据库设计 .15数据库概念结构设计 .15（三）数据库逻辑结构设计 .16五、代码实现与运行图 .18（一）创建 CSS文件 .18样式定义，统一页面风格 .18六、系统测试 .26（一）系统测试的主要内容 .27（二）系统测试的方法 .27（三）系统测试计划 .28（四）系统测试用例 .28结 语 .29参考文献 .30致 谢 .315引 言互联网的兴起给我们的生活娱乐带来的新的契机。网络的交互性、实时性、丰富性和便捷性等优势促使传统娱乐业迅速融入网络的浪潮。通过网络查询信息。进行音乐的收到、下载等在国外已成为一种时尚。网站音乐播放系统是计算机技术、网络通信技术、多媒体技术和数据压缩技术等多学科、多领域融合交叉的产物，是可对音乐节目内容进行自主选择的交互式音乐点播系统。与传统信息服务相比，在线音乐播放系统具有互动性、友善性和数字化等特点，其本质是信息的使用者根据自己的需求主动获取多媒体信息，它区别于信息发布的最大不同：一是主动性；二是选择性。借助其独特的优点，无论在国内还是国外，在线音乐播放系统技术都获得了长足的发展，在社会各领域（如服务、教育等）都十分广泛，显示出了强大的生命力。6一、本课题研究的内容及意义（一）本课题研究的内容随着计算机网络技术的发展，音乐网站系统正逐渐的渗透到各个领域，网络化和信息化的发展也促进了 Web 网页应用和技术的快速发展。音乐网站正是在这样的前提下而产生的，人们通过互联网给日常生活增添了很大的乐趣，让人们在工作之后可以进行休闲的娱乐。因为宽带用户的增加，带动了互联网音乐产业的蓬勃兴起。无论国内还是国外，音乐网站市场都呈现一派生气。目前，音乐网站从传播形式来看，大致可分为三类：有固定网址的音乐网站、搜索类音乐网站、P2P 类音乐网站，三者功能各异，互为补充。近年来,全球数字娱乐业持续发展。网络传播以其特有的快速、高效、便捷的传输方式被人们所接受，越来越多的走进了大家。并 且在当今音乐浪潮的影响下。随着音乐事业逐渐走向高峰,音乐已无处不在，音乐己与我们密不可分。全球数字娱乐业的迅猛发展、网络电视等,无不充斥着激烈的竞争。音乐网站在这种背景下逐渐发展起来。音乐网站改变了传统音乐产业的产业结构。而现在许多音乐网站不能提供在线播放,并且在技术支持上也不完善。于是设计和实现这样一个音乐网站就成为了必须，不仅仅满足用户的可以试听音乐的功能,而且还要保证在速度上不能慢，更要在功能和性能上满足用户更多的体验和需求。（二）本课题研究的意义随着网络通信技术、多媒体技术及数据存储技术的快速发展，音乐网站作为一种大众的 Web 服务，给喜爱音乐的网络用户提供了极大的便利，增添了音乐用户的选择。但有一些音乐网站由于各种不同的原因遭到了社会的淘汰，其原因主要集中在页面设计、查询浏览的速度、功能模块等不同方面。因此，为了用户可以方便、快捷、简单、安全地实现音乐搜索去查找自己喜欢的音乐，并能实时地试听音乐、7下载音乐、将音乐加入到自己的音乐盒中、点歌并将自己的建议写入到留言板以便网站的完善等，需要建立一个自由、安全的音乐网站。本音乐网站基于 Dreamweaver采用先进的 HTML5 技术与 Jquery 框架进行设计开发。（三）音乐网站国内外现状1. 国内现状2015 年中国在线音乐市场规模为 40.2 亿元，增长 67.2%。随着版权市场逐渐规范，特别是 2015 年 7 月以来国家对在线音乐版权市场的监管力度逐渐加大，在线音乐市场发展将更为正规有序。在音乐市场收入结构中，广告、游戏联运等模式比较成熟，增长稳定；直播、用户付费等增长快速，是企业重要的收入来源，预计未来仍将保持较快增长；另外，O2O 演出、衍生商品售卖等虽然目前在市场中占比较小，但未来也有较大成长空间。在市场商业模式多元化的作用下，用户付费、广告、直播、音乐周边产品销售等收入模式将共同促进市场继续平稳快速增长。图 1-3-1 2010-2018 年中国在线音乐市场收入规模及增长率根据调研数据显示，中国在线音乐用户对于音乐网站及应用的整体满意度较高，其中，手机端产品满意度略高于 PC 端；在手机端，接近 40%的用户同时拥有 2 款音8乐 App，24.5%用户同时拥有 3 款音乐 App。近年来，中国在线音乐产品不断提升用户体验、丰富音乐内容、扩展自身业务能力与运营能力，得到了较好的成效。同时，音乐版权在中国的发展正处于初级阶段，音乐网站的战略布局使各产品具有不同特色，拥有的内容也不尽相同，用户对于音乐内容的选择随着其喜好和使用场景的不同而发生变化，在音乐产品的选择上也具有较大灵活性。图 1-3-2 2016 年中国手机音乐用户同时拥有音乐 App 的数量分布图2. 国外现状网络音乐风靡美国，对其传统音乐产业带来了巨大冲击，尤其是音像制品的销售额逐年锐减。据美国录音工业协会（Recording Industry Association America, RIAA）调查显示：美国近几年的音乐 CD、磁带等音像制品销售额逐年减少，一个主要原因是人们通过在线方式狭隘网络音乐，而减少了传统音乐音像制品的消费。根据 RIAA 的数据显示，在 2015 年上半年 CD 的销售额为 4.94 亿美元，与 2014 年同期相比下降了 31.4%。而且被数字专辑出售（5.72 亿美元）和数字单曲下载（6.88 亿美元）的收入超过。不过虽然如此，在 2015 上半年 CD 的销售额仍然比广告支持的流媒体（1.63 亿美元）以及流媒体付费订阅（4.78 亿美元）收入更多，同时也超过公共音乐版权的收入（3.87 亿美元） ，公共音乐版权收入来自于网络电台服务例如9Pandora、IHeartRadio 等。所以 CD 虽然表现有所下降但是并未走致死路。根据尼尔森的数据，在 2015 上半年实体专辑包括 CD、黑胶、磁带三部分在美国独立零售店的销售量有所上升，尽管只是上升了 0.6%。在非传统零售方面，例如亚马逊或 16 其他在线商店出售的专辑数量总体上升了8%，那么 CD 销量究竟为什么是下降的呢？根据尼尔森的数据，大众零售市场在 2015 年的实体专辑销量相比 2014 年同期下降了 510 万张，达 18.2%。而美国的连锁店市场也受到影响，实体专辑的销量与2014 年相比也下降了百万张。图 1-3-3 美国 2015 H1 音乐产业收入图二、系统环境概述（一）开发环境和技术介绍本音乐网站系统的设计是基于 HTML5 和 B/S 架构以及 MySQL 数据库来实现的。本系统的开发工具主要有 Dreamweaver、MySQL 数据库管理工具等。101. Dreamweaver简介Dreamweaver 是一款所见则所得网页编辑器，是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。DREAMWEAVER 特点：（1）最佳的制作效率Dreamweaver 可以用最快速的方式将 Fireworks，FreeHand，或 Photoshop 等档案移至网页上。使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。对於选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver 能与您喜爱的设计工具，如 Playback Flash，Shockwave 和外挂模组等搭配，不需离开Dremweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。（2）网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用