毕业设计基于BS架构的音乐欣赏网站设计与开发.docx
- 文档编号:22799094
- 上传时间:2023-04-28
- 格式:DOCX
- 页数:33
- 大小:581.51KB
毕业设计基于BS架构的音乐欣赏网站设计与开发.docx
《毕业设计基于BS架构的音乐欣赏网站设计与开发.docx》由会员分享,可在线阅读,更多相关《毕业设计基于BS架构的音乐欣赏网站设计与开发.docx(33页珍藏版)》请在冰豆网上搜索。
毕业设计基于BS架构的音乐欣赏网站设计与开发
毕业设计(论文)
基于B/S架构的音乐欣赏网站设计与开发
系部:
学生姓名:
专业班级:
学号:
指导教师:
二○一X年X月XX日
【摘要】计算机网络是计算机技术和通信技术相结合的产物,我们无时无刻不与网络接触。
过去,我们都是通过磁带、CD、等方式来听音乐。
现在人们不再满足于单调的文字或者图像,而希望能在网上传输音乐、试听音乐。
【关键词】Dreamweaver、音乐、多媒体、网站设计、HTML5、JavaScript、JQuery、MySQL
【Abstract】Computernetworkisacombinationofcomputertechnologyandcommunicationtechnologyproducts,wearealwayswiththenetworkcontact.Inthepast,wearethroughthetape,CD,etc.tolistentomusic.Nowpeoplearenolongersatisfiedwithmonotonouswordsorimages,andwanttobeabletotransfermusiconline,listentomusic.
【Keywords】Dreamweaver,Music,Multimedia,WebsiteDesign,HTML5,JQuery,JavaScript,MySQL
引言
互联网的兴起给我们的生活娱乐带来的新的契机。
网络的交互性、实时性、丰富性和便捷性等优势促使传统娱乐业迅速融入网络的浪潮。
通过网络查询信息。
进行音乐的收到、下载等在国外已成为一种时尚。
网站音乐播放系统是计算机技术、网络通信技术、多媒体技术和数据压缩技术等多学科、多领域融合交叉的产物,是可对音乐节目内容进行自主选择的交互式音乐点播系统。
与传统信息服务相比,在线音乐播放系统具有互动性、友善性和数字化等特点,其本质是信息的使用者根据自己的需求主动获取多媒体信息,它区别于信息发布的最大不同:
一是主动性;二是选择性。
借助其独特的优点,无论在国内还是国外,在线音乐播放系统技术都获得了长足的发展,在社会各领域(如服务、教育等)都十分广泛,显示出了强大的生命力。
一、本课题研究的内容及意义
(一)本课题研究的内容
随着计算机网络技术的发展,音乐网站系统正逐渐的渗透到各个领域,网络化和信息化的发展也促进了Web网页应用和技术的快速发展。
音乐网站正是在这样的前提下而产生的,人们通过互联网给日常生活增添了很大的乐趣,让人们在工作之后可以进行休闲的娱乐。
因为宽带用户的增加,带动了互联网音乐产业的蓬勃兴起。
无论国内还是国外,音乐网站市场都呈现一派生气。
目前,音乐网站从传播形式来看,大致可分为三类:
有固定网址的音乐网站、搜索类音乐网站、P2P类音乐网站,三者功能各异,互为补充。
近年来,全球数字娱乐业持续发展。
网络传播以其特有的快速、高效、便捷的传输方式被人们所接受,越来越多的走进了大家。
并 且在当今音乐浪潮的影响下。
随着音乐事业逐渐走向高峰,音乐已无处不在,音乐己与我们密不可分。
全球数字娱乐业的迅猛发展、网络电视等,无不充斥着激烈的竞争。
音乐网站在这种背景下逐渐发展起来。
音乐网站改变了传统音乐产业的产业结构。
而现在许多音乐网站不能提供在线播放,并且在技术支持上也不完善。
于是设计和实现这样一个音乐网站就成为了必须,不仅仅满足用户的可以试听音乐的功能,而且还要保证在速度上不能慢,更要在功能和性能上满足用户更多的体验和需求。
(二)本课题研究的意义
随着网络通信技术、多媒体技术及数据存储技术的快速发展,音乐网站作为一种大众的Web服务,给喜爱音乐的网络用户提供了极大的便利,增添了音乐用户的选择。
但有一些音乐网站由于各种不同的原因遭到了社会的淘汰,其原因主要集中在页面设计、查询浏览的速度、功能模块等不同方面。
因此,为了用户可以方便、快捷、简单、安全地实现音乐搜索去查找自己喜欢的音乐,并能实时地试听音乐、下载音乐、将音乐加入到自己的音乐盒中、点歌并将自己的建议写入到留言板以便网站的完善等,需要建立一个自由、安全的音乐网站。
本音乐网站基于Dreamweaver采用先进的HTML5技术与Jquery框架进行设计开发。
(三)音乐网站国内外现状
1.国内现状
2015年中国在线音乐市场规模为40.2亿元,增长67.2%。
随着版权市场逐渐规范,特别是2015年7月以来国家对在线音乐版权市场的监管力度逐渐加大,在线音乐市场发展将更为正规有序。
在音乐市场收入结构中,广告、游戏联运等模式比较成熟,增长稳定;直播、用户付费等增长快速,是企业重要的收入来源,预计未来仍将保持较快增长;另外,O2O演出、衍生商品售卖等虽然目前在市场中占比较小,但未来也有较大成长空间。
在市场商业模式多元化的作用下,用户付费、广告、直播、音乐周边产品销售等收入模式将共同促进市场继续平稳快速增长。
图1-3-12010-2018年中国在线音乐市场收入规模及增长率
根据调研数据显示,中国在线音乐用户对于音乐网站及应用的整体满意度较高,其中,手机端产品满意度略高于PC端;在手机端,接近40%的用户同时拥有2款音乐App,24.5%用户同时拥有3款音乐App。
近年来,中国在线音乐产品不断提升用户体验、丰富音乐内容、扩展自身业务能力与运营能力,得到了较好的成效。
同时,音乐版权在中国的发展正处于初级阶段,音乐网站的战略布局使各产品具有不同特色,拥有的内容也不尽相同,用户对于音乐内容的选择随着其喜好和使用场景的不同而发生变化,在音乐产品的选择上也具有较大灵活性。
图1-3-22016年中国手机音乐用户同时拥有音乐App的数量分布图
2.国外现状
网络音乐风靡美国,对其传统音乐产业带来了巨大冲击,尤其是音像制品的销售额逐年锐减。
据美国录音工业协会(RecordingIndustryAssociationAmerica,RIAA)调查显示:
美国近几年的音乐CD、磁带等音像制品销售额逐年减少,一个主要原因是人们通过在线方式狭隘网络音乐,而减少了传统音乐音像制品的消费。
根据RIAA的数据显示,在2015年上半年CD的销售额为4.94亿美元,与2014年同期相比下降了31.4%。
而且被数字专辑出售(5.72亿美元)和数字单曲下载(6.88亿美元)的收入超过。
不过虽然如此,在2015上半年CD的销售额仍然比广告支持的流媒体(1.63亿美元)以及流媒体付费订阅(4.78亿美元)收入更多,同时也超过公共音乐版权的收入(3.87亿美元),公共音乐版权收入来自于网络电台服务例如Pandora、IHeartRadio等。
所以CD虽然表现有所下降但是并未走致死路。
根据尼尔森的数据,在2015上半年实体专辑包括CD、黑胶、磁带三部分在美国独立零售店的销售量有所上升,尽管只是上升了0.6%。
在非传统零售方面,例如亚马逊或16其他在线商店出售的专辑数量总体上升了8%,那么CD销量究竟为什么是下降的呢?
根据尼尔森的数据,大众零售市场在2015年的实体专辑销量相比2014年同期下降了510万张,达18.2%。
而美国的连锁店市场也受到影响,实体专辑的销量与2014年相比也下降了百万张。
图1-3-3美国2015H1音乐产业收入图
二、系统环境概述
(一)开发环境和技术介绍
本音乐网站系统的设计是基于HTML5和B/S架构以及MySQL数据库来实现的。
本系统的开发工具主要有Dreamweaver、MySQL数据库管理工具等。
1.Dreamweaver简介
Dreamweaver是一款所见则所得网页编辑器,是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
DREAMWEAVER特点:
(1)最佳的制作效率
Dreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至网页上。
使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。
对於选单,快捷键与格式控制,都只要一个简单步骤便可完成。
Dremweaver能与您喜爱的设计工具,如PlaybackFlash,Shockwave和外挂模组等搭配,不需离开Dremweaver便可完成,整体运用流程自然顺畅。
除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
(2)网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。
改变网页位置或档案名称,Dreamweaver会自动更新所有连结。
使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
(3)无可比拟的控制能力
是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。
可以全方位的呈现在任何平台的热门浏览器上。
2.HTML5简介
HTML5是近十年来Web开发标准最巨大的飞跃。
和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。
什么是HTML5?
HTML5将成为HTML、XHTML以及HTMLDOM的新标准。
HTML的上一个版本诞生于1999年。
自从那以后,Web世界已经经历了巨变。
HTML5仍处于完善之中。
然而,大部分现代浏览器已经具备了某些HTML5支持。
HTML5是如何起步的?
HTML5是W3C与WHATWG合作的结果。
为HTML5建立的一些规则:
(1)新特性应该基于HTML、CSS、DOM以及JavaScript。
(2)减少对外部插件的需求(比如Flash)
(3)更优秀的错误处理
(4)更多取代脚本的标记
(5)HTML5应该独立于设备
(6)开发进程应对公众透明
与HTML4的不同之处:
新的解析顺序新的元素:
section,video,progress,nav,meter,time,aside,canvasinput元素的新属性:
日期和时间,email,url。
新的通用属性:
ping,charset,async全域属性:
id,tabindex,repeat。
移除元素:
center,font,strike。
HTML5有两大特点:
首先,强化了Web网页的表现性能。
除了可描绘二维图形外,还准备了用于播放视频和音频的标签。
其次,追加了本地数据库等Web应用的功能。
3.Jquery简介
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:
具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
jQuery兼容各种主流浏览器,如IE6.0+、FF1.5+、Safari2.0+、Opera9.0+等。
4.MySQL简介
MySQL是一个精巧的SQL数据库管理系统,虽然MySQL不是开放源代码的产品,但MySQL数据库是开放源码的一种小型关联式数据库管理系统。
MySQL数据库的特点是体积小、处理速度快、总体成本低等,使得在因特网上的中小型的网站的应用非常广泛。
并优于其开放源码这特点,有很多的中小型网站为了降低网站总体成本就必定会选择Mysql数据库作为网站数据库。
对于其他大型数据库例如Oracle、SQLserver、db2等相比,MySQL数据库肯定有其不足的地方例如稳定性和功能。
但这也丝毫不会减少它受欢迎的程度,因为对于一般的个人和中小型企业来说,MySQL数据库所提供的功能是绝对可以满足的。
三、系统分析
(一)功能需求
1.注册模块
作为音乐网站的用户,需要注册成为本网站的会员才能享受到网站的所有权利,注册就是使普通用户变成会员的途径,本模块主要完成的任务是提示用户添加自己的基本信息,将用户信息添加到数据库。
2.登录模块
用户注册成为本站会员后就可以登录本网站了,在此模块会判断用户是不是本站注册会员,会判断用户的用户账号和密码是否匹配,如果匹配则将用户信息显示出来并可以执行其他操作,如果不匹配会提示用户输入用户账号和密码错误。
登录后用户可以选择修改自己的个人资料。
3.添加音乐模块
用户注册成为本站会员后就可以登录本网站了,在此模块会判断用户是不是本站注册会员,会判断用户的用户账号和密码是否匹配,如果匹配则将用户信息显示出来并可以执行其他操作,如果不匹配会提示用户输入用户账号和密码错误。
登录后用户可以选择修改自己的个人资料。
4.上传音乐模块
上传音乐是网站增加音乐的主要方式,用户选择自己的音乐,并选择该音乐所属专辑,最后上传音乐。
5.音乐查找模块
音乐查找是音乐网站的核心,音乐网站应该提供按照音乐名和音乐出品人查找这两种最基本的音乐查找方式,除了这两种基本查找音乐方式外还应有按照专辑查找,按音乐类型查找,按音乐地区查找等查找方式。
音乐查找结果最后列表显示,用户点击对应属性链接可以实现按照这个属性查找或者排序。
点击对应的音乐名可以试听音乐。
(二)性能需求
1.软件环境需求
操作系统
WindowsXP或以上
服务器
Tomcat7或以上
数据库
Mysql5.5或以上
浏览器
IE10或以上
表3-2-1软件环境需求表
2.硬件环境需求
内存
128MB以上
CPU
Intel奔腾3级以上或同等级兼容CPU
硬盘
300MB或以上空余空间
显示器分辨率
800×600或以上
表3-2-2硬件环境需求表
四、系统设计
(一)系统功能设计
系统总体规划
本网站按照需求开发,可分为一下几个模块:
注册模块、登录模块、增加音乐模块、上传音乐模块、音乐查找模块
图4-1-1音乐网站系统功能模块图
(二)数据库设计
数据库是音乐网站的核心组成部分,所有信息处理子系统都将基于某种数据库平台,以便将其处理的信息资源完整、安全地保存起来,并且对其进行各种管理和利用。
选择一个好的数据库平台是非常重要的。
在选择数据库平台时,应考虑下列因素:
(1)性能:
数据库的数据处理能力;
(2)开放性:
数据库是否能在多种操作系统下使用;
(3)安全性:
数据库是否具有高度的安全性;
(4)可靠性:
数据库是否具有高度的可靠性;
(5)并行性:
数据库是否并行运行在多节点上;
根据本网站开发应用的实际需要,我们选择了MYSQL作为数据库开发平台。
数据库概念结构设计
由于实体属性较多,此处主要体现了各个实体间的关系,详细设计见数据库设计中表结构的字段。
如图4-2-1所示:
评论
管理
展示
浏览
浏览
图4-2-1数据库概念结构设计E-R图
图4-2-2实体设计E-R图
(三)数据库逻辑结构设计
根据实体属性及其产生的行为,从实际需要出发,同时又考虑各实体间的联系和统一性,设计出如下各表。
(1)admi表:
admin表是用来存放管理员信息的表,管理员信息包括用户账号、密码等信息。
Admin表结构如表4-3-1所示。
列名
类型
主键/外键
是否为空
备注/说明
ID
Int(4)
主键
否
代理主键,美不管理员唯一标识,自增
Name
Varchar(50)
N/A
否
管理员帐号
Password
Varchar(50)
N/A
否
管理员密码
表4-3-1admin表结构
(2)User表:
User表是用来存放用户信息的表,用户信息除了包括用户账号、密码、昵称等信息还包括机箱选填信息,User表结构如表4-3-2所示。
列名
类型
主键/外键
是否为空
备注/说明
ID
Int(4)
主键
否
代理主键,内部管理员唯一标识,自增
UserAccount
Varchar(50)
N/A
否
用户账号,外部用户唯一标识,不可修改
UserName
Varchar(50)
N/A
否
用户昵称,可以为中文,不可修改
Password
Varchar(50)
N/A
否
用户密码,可以修改
Sex
Varchar
(2)
N/A
是
用户性别,选填,默认(不填)为“男”
Varchar(50)
N/A
否
用户email,用来修改和找回个人资料
Userleave
Int(4)
N/A
否
用户级别,记录用户各种表现,默认为0
Tag
Int(4)
N/A
否
用户标记,用来区分管理员/会员
表4-3-2User表结构
(3)Music表:
Music表是存放音乐信息的表,此表将音乐的属性简单描述,包括音乐类型、地区、音乐名等常见属性,此表设置代理主键(自增)作为主键,这个主键也是其他音乐关联表的外键,表结构如表4-3-3所示。
列名
类型
主键/外键
是否为空
备注/说明
ID
Int(4)
主键
否
代理主键,内部管理员唯一标识,自增
MusicName
Varchar(50)
N/A
否
音乐名,可以重复
MusicType
Varchar(50)
N/A
否
音乐类型/曲风
PubYear
Datetime
N/A
是
发行时间,可以不填
PlayNum
Int(8)
N/A
否
试听人数/人气判断依据
MusicLocale
Varchar(50)
N/A
是
音乐地区/语言
UpLoader
Int(4)
外键
是
上传者,可以为空/数据库直接添加则为空
UploadTime
Datetime
N/A
否
上传时间,上传作品时自动生成
Storeaddress
Varchar(50)
N/A
否
存储地址,用来记录音乐位置
Tag
Int(4)
N/A
否
标记,用来标记音乐是否被删除
Player
Varchar(50)
N/A
是
音乐表演者/歌手/出品人
表4-3-3User表结构
(4)Cliplist表:
该表用来存放音乐固定专辑(唱片公司发行的)信息,由于本网站规模和本人对专辑认识的限制,对专辑属性的设置相对比较简单。
因为专辑英语音乐术语“多对多”关系,所以在此表中不设置与音乐的关联,将关联写至Cm表,Cliplist表结构如表4-3-4所示。
列名
类型
主键/外键
是否为空
备注/说明
Idcliplist
Int(4)
主键
否
代理主键,内部使用唯一标识,自增
ClipName
Varchar(50)
N/A
否
专辑名称,不唯一
Player
Varchar(50)
N/A
否
专辑出品人/作者
PubYear
Datetime
N/A
是
专辑发行时间
Com
Varchar(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)
外键
否
音乐id,音乐表里的主键,作为外键使用
表4-3-5Cm表结构
五、代码实现与运行图
(一)创建CSS文件
样式定义,统一页面风格
body{
font:
14px"HelveticaNeue",Helvetica,Arial,"LucidaGrande",sans-serif;
background:
#333;
color:
#fff;
}
a{
outline:
none;
text-decoration:
none;
}
.left{
float:
left;
}
.right{
float:
right;
}
.clear{
clear:
both;
}
#background{
background:
url(bg.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:
50pxauto30px;
position:
relative;
}
#player.cover{
background:
rgba(0,0,0,0.5);
border:
1pxsolid#333;
position:
absolute;
top:
25px;
left:
25px;
overflow:
hidden;
-moz-border-radius:
10px;
-webkit-border-radius:
10px;
-o-border-radius:
10px;
-ms-border-radius:
10px;
-khtml-border-radius:
10px;
border-radius:
10px;
width:
130px;
height:
130px;
-moz-box-shadow:
02px10pxblack;
-webkit-box-shadow:
02px10pxblack;
-o-box-shadow:
02px10pxblack;
box-shadow:
02px10pxblack;
}
#player.coverimg{
-moz-b
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 毕业设计 基于 BS 架构 音乐 欣赏 网站 设计 开发