毕业设计方案基于BS架构的音乐欣赏网站设计与开发.doc

毕业设计（论文）基于B/S架构音乐欣赏网站设计与开发系 部： 学生姓名： 专业班级： 学 号： 指引教师： 二一X年 X 月 XX 日【摘要】计算机网络是计算机技术和通信技术相结合产物，咱们无时无刻不与网络接触。过去，咱们都是通过磁带、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，MySQL目 录引 言5一、本课题研究内容及意义6（一）本课题研究内容6（二）本课题研究意义6（三）音乐网站国内外现状71. 国内现状72. 国外现状8二、系统环境概述9（一）开发环境和技术简介91. Dreamweaver简介102. HTML5简介103. Jquery简介124. MySQL简介12三、系统分析13（一）功能需求131. 注册模块132. 登录模块133. 添加音乐模块134. 上传音乐模块135. 音乐查找模块13（二）性能需求141. 软件环境需求142. 硬件环境需求14四、系统设计14（一）系统功能设计14系统总体规划14（二）数据库设计15数据库概念构造设计15（三）数据库逻辑构造设计16五、代码实现与运营图18（一）创立CSS文献18样式定义，统一页面风格18六、系统测试26（一）系统测试重要内容27（二）系统测试办法27（三）系统测试筹划28（四）系统测试用例28结 语29参照文献30致 谢31引 言互联网兴起给咱们生活娱乐带来新契机。网络交互性、实时性、丰富性和便捷性等优势促使老式娱乐业迅速融入网络浪潮。通过网络查询信息。进行音乐收到、下载等在国外已成为一种潮流。网站音乐播放系统是计算机技术、网络通信技术、多媒体技术和数据压缩技术等多学科、多领域融合交叉产物，是可对音乐节目内容进行自主选取交互式音乐点播系统。与老式信息服务相比，在线音乐播放系统具备互动性、友善性和数字化等特点，其本质是信息使用者依照自己需求积极获取多媒体信息，它区别于信息发布最大不同：一是积极性；二是选取性。借助其独特长处，无论在国内还是国外，在线音乐播放系统技术都获得了长足发展，在社会各领域（如服务、教诲等）都十分广泛，显示出了强大生命力。一、本课题研究内容及意义（一）本课题研究内容随着计算机网络技术发展，音乐网站系统正逐渐渗入到各个领域，网络化和信息化发展也增进了Web网页应用和技术迅速发展。音乐网站正是在这样前提下而产生，人们通过互联网给寻常生活增添了很大乐趣，让人们在工作之后可以进行休闲娱乐。由于宽带顾客增长，带动了互联网音乐产业蓬勃兴起。无论国内还是国外，音乐网站市场都呈现一派气愤。当前，音乐网站从传播形式来看，大体可分为三类：有固定网址音乐网站、搜索类音乐网站、P2P类音乐网站，三者功能各异，互为补充。近年来,全球数字娱乐业持续发展。网络传播以其特有迅速、高效、便捷传播方式被人们所接受，越来越多走进了人们。并且在当今音乐浪潮影响下。随着音乐事业逐渐走向高峰,音乐已无处不在，音乐己与咱们密不可分。全球数字娱乐业迅猛发展、网络电视等,无不充斥着激烈竞争。音乐网站在这种背景下逐渐发展起来。音乐网站变化了老式音乐产业产业构造。而当前许多音乐网站不能提供在线播放,并且在技术支持上也不完善。于是设计和实现这样一种音乐网站就成为了必要，不但仅满足顾客可以试听音乐功能,并且还要保证在速度上不能慢，更要在功能和性能上满足顾客更多体验和需求。（二）本课题研究意义随着网络通信技术、多媒体技术及数据存储技术迅速发展，音乐网站作为一种大众Web服务，给爱慕音乐网络顾客提供了极大便利，增添了音乐顾客选取。但有某些音乐网站由于各种不同因素遭到了社会裁减，其因素重要集中在页面设计、查询浏览速度、功能模块等不同方面。因而，为了顾客可以以便、快捷、简朴、安全地实现音乐搜索去查找自己喜欢音乐，并能实时地试听音乐、下载音乐、将音乐加入到自己音乐盒中、点歌并将自己建议写入到留言板以便网站完善等，需要建立一种自由、安全音乐网站。本音乐网站基于Dreamweaver采用先进HTML5技术与Jquery框架进行设计开发。（三）音乐网站国内外现状1. 国内现状中华人民共和国在线音乐市场规模为40.2亿元，增长67.2%。随着版权市场逐渐规范，特别是7月以来国家对在线音乐版权市场监管力度逐渐加大，在线音乐市场发展将更为正规有序。在音乐市场收入构造中，广告、游戏联运等模式比较成熟，增长稳定；直播、顾客付费等增长迅速，是公司重要收入来源，预测将来仍将保持较快增长；此外，O2O表演、衍生商品售卖等虽然当前在市场中占比较小，但将来也有较大成长空间。在市场商业模式多元化作用下，顾客付费、广告、直播、音乐周边产品销售等收入模式将共同增进市场继续平稳迅速增长。图1-3-1 -中华人民共和国在线音乐市场收入规模及增长率依照调研数据显示，中华人民共和国在线音乐顾客对于音乐网站及应用整体满意度较高，其中，手机端产品满意度略高于PC端；在手机端，接近40%顾客同步拥有2款音乐App，24.5%顾客同步拥有3款音乐App。近年来，中华人民共和国在线音乐产品不断提高顾客体验、丰富音乐内容、扩展自身业务能力与运营能力，得到了较好成效。同步，音乐版权在中华人民共和国发展正处在初级阶段，音乐网站战略布局使各产品具备不同特色，拥有内容也不尽相似，顾客对于音乐内容选取随着其喜好和使用场景不同而发生变化，在音乐产品选取上也具备较大灵活性。图 1-3-2 中华人民共和国手机音乐顾客同步拥有音乐App数量分布图2. 国外现状网络音乐风靡美国，对其老式音乐产业带来了巨大冲击，特别是音像制品销售额逐年锐减。据美国录音工业协会（Recording Industry Association America，RIAA）调查显示：美国近几年音乐CD、磁带等音像制品销售额逐年减少，一种重要因素是人们通过在线方式狭隘网络音乐，而减少了老式音乐音像制品消费。依照RIAA数据显示，在上半年CD销售额为4.94亿美元，与同期相比下降了31.4%。并且被数字专辑出售（5.72亿美元）和数字单曲下载（6.88亿美元）收入超过。但是虽然如此，在上半年CD销售额依然比广告支持流媒体（1.63亿美元）以及流媒体付费订阅（4.78亿美元）收入更多，同步也超过公共音乐版权收入（3.87亿美元），公共音乐版权收入来自于网络电台服务例如Pandora、IHeartRadio等。因此CD虽然表既有所下降但是并未走致死路。依照尼尔森数据，在上半年实体专辑涉及CD、黑胶、磁带三某些在美国独立零售店销售量有所上升，尽管只是上升了0.6%。在非老式零售方面，例如亚马逊或16其她在线商店出售专辑数量总体上升了8%，那么CD销量究竟为什么是下降呢？依照尼尔森数据，大众零售市场在实体专辑销量相比同期下降了510万张，达18.2%。而美国连锁店市场也受到影响，实体专辑销量与相比也下降了百万张。图 1-3-3 美国 H1音乐产业收入图二、系统环境概述（一）开发环境和技术简介本音乐网站系统设计是基于HTML5和B/S架构以及MySQL数据库来实现。本系统开发工具重要有Dreamweaver、MySQL数据库管理工具等。1. Dreamweaver简介Dreamweaver是一款所见则所得网页编辑器，是美国MACROMEDIA公司开发集网页制作和管理网站于一身所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展视觉化网页开发工具，运用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制布满动感网页。DREAMWEAVER特点：（1）最佳制作效率Dreamweaver可以用最迅速方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选取萤幕上颜色可设定最接近网页安全色。对於选单，快捷键与格式控制，都只要一种简朴环节便可完毕。Dremweaver能与您爱慕设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完毕，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动启动Firework或Photoshop来进行编辑与设定图档最佳化。（2）网站管理使用网站地图可以迅速制作网站雏形、设计、更新和重组网页。变化网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用增援文字、HTML码、HTML属性标签和普通语法搜寻及置换功能使得复杂网站更新变得迅速又简朴。（3）无可比拟控制能力是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步设计工具。可以全方位呈当前任何平台热门浏览器上。2. HTML5简介HTML 5是近十年来Web开发原则最巨大奔腾。和此前版本不同，HTML 5并非仅仅用来表达Web内容，它新使命是将Web带入一种成熟应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑交互都被原则化。什么是 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）开发进程应对公众透明与HTML 4不同之处：新解析顺序新元素：section，video，progress，nav，meter，time，aside，canvasinput元素新属性：日期和时间，email，url。新通用属性：ping，charset，async全域属性：id，tabindex，repeat。移除元素：center，font，strike。HTML 5有两大特点：一方面，强化了Web网页体现性能。除了可描绘二维图形外，还准备了用于播放视频和音频标签。另一方面，追加了本地数据库等Web应用功能。3. Jquery简介jQuery是一种迅速、简洁JavaScript框架，是继Prototype之后又一种先进JavaScript代码库（或JavaScript框架）。jQuery设计宗旨是“write Less，Do More”，即倡导写更少代码，做更多事情。它封装JavaScript惯用功能代码，提供一种简便JavaScript设计模式，优化HTML文档操作、事件解决、动画设计和Ajax交互。jQuery核心特性可以总结为：具备独特链式语法和短小清晰多功能接口；具备高效灵活css选取器，并且可对CSS选取器进行扩展；拥有便捷插件扩展机制和丰富插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。4. MySQL简介MySQL是一种精致SQL数据库管理系统，虽然MySQL不是开放源代码产品，但MySQL数据库是开放源码一种小型关联式数据库管理系统。MySQL数据库特点是体积小、解决速度快、总体成本低等，使得在因特网上中小型网站应用非常广泛。并优于其开放源码这特点，有诸多中小型网站为了减少网站总体成本就必然会选取Mysql数据库作为网站数据库。对于其她大型数据库例如Oracle、SQLserver、db2等相比，MySQL数据库必定有其局限性地方例如稳定性和功能。但这也丝毫不会减少它受欢迎限度，由于对于普通个人和中小型公司来说，MySQL数据库所提供功能是绝对可以满足。三、系统分析（一）功能需求1. 注册模块作为音乐网站顾客，需要注册成为本网站会员才干享有到网站所有权利，注册就是使普通顾客变成会员途径，本模块重要完毕任务是提示顾客添加自己基本信息，将顾客信息添加到数据库。2. 登录模块顾客注册成为本站会员后就可以登录本网站了，在此模块会判断顾客是不是本站注册会员，会判断顾客顾客账号和密码与否匹配，如果匹配则将顾客信息显示出来并可以执行其她操作，如果不匹配会提示顾客输入顾客账号和密码错误。登录后顾客可以选取修改自己个人资料。3. 添加音乐模块顾客注册成为本站会员后就可以登录本网站了，在此模块会判断顾客是不是本站注册会员，会判断顾客顾客账号和密码与否匹配，如果匹配则将顾客信息显示出来并可以执行其她操作，如果不匹配会提示顾客输入顾客账号和密码错误。登录后顾客可以选取修改自己个人资料。4. 上传音乐模块上传音乐是网站增长音乐重要方式，顾客选取自己音乐，并选取该音乐所属专辑，最后上传音乐。5. 音乐查找模块音乐查找是音乐网站核心，音乐网站应当提供按照音乐名和音乐出品人查找这两种最基本音乐查找方式，除了这两种基本查找音乐方式外还应有按照专辑查找，按音乐类型查找，按音乐地区查找等查找方式。音乐查找成果最后列表显示，顾客点击相应属性链接可以实现按照这个属性查找或者排序。点击相应音乐名可以试听音乐。（二）性能需求1. 软件环境需求操作系统Windows XP 或以上服务器Tomcat 7或以上数据库Mysql 5.5或以上浏览器IE 10或以上表3-2-1 软件环境需求表2. 硬件环境需求内存128MB以上CPUIntel奔腾3级以上或同级别兼容CPU硬盘300MB或以上空余空间显示屏辨别率800600或以上表3-2-2 硬件环境需求表四、系统设计（一）系统功能设计系统总体规划本网站按照需求开发，可分为一下几种模块：注册模块、登录模块、增长音乐模块、上传音乐模块、音乐查找模块音乐网站注册模块登录模块添加音乐模块上传音乐模块音乐查找模块图4-1-1音乐网站系统功能模块图（二）数据库设计数据库是音乐网站核心构成某些，所有信息解决子系统都将基于某种数据库平台，以便将其解决信息资源完整、安全地保存起来，并且对其进行各种管理和运用。选取一种好数据库平台是非常重要。在选取数据库平台时，应考虑下列因素：（1）性能：数据库数据解决能力；（2）开放性：数据库与否能在各种操作系统下使用；（3）安全性：数据库与否具备高度安全性；（4）可靠性：数据库与否具备高度可靠性；（5）并行性：数据库与否并行运营在多节点上；依照本网站开发应用实际需要，咱们选取了MYSQL作为数据库开发平台。数据库概念构造设计由于实体属性较多，此处重要体现了各个实体间关系，详细设计见数据库设计中表构造字段。如图4-2-1所示：评论管理展示浏览浏览会员会员 网站音乐会员排行榜心情内容分类名称管理员顾客名密码图4-2-1 数据库概念构造设计E-R图音乐音乐名称音乐名称音乐编号标记存储地址上传时间点击次数音乐类型上传ID歌手名称图4-2-2 实体设计E-R图（三）数据库逻辑构造设计依照实体属性及其产生行为，从实际需要出发，同步又考虑各实体间联系和统一性，设计出如下各表。（1）admi表：admin表是用来存储管理员信息表，管理员信息涉及顾客账号、密码等信息。Admin表构造如表4-3-1所示。列名类型主键/外键与否为空备注/阐明IDInt (4)主键否代理主键，美不论理员唯一标记，自增NameVarchar (50)N/A否管理员帐号PasswordVarchar (50)N/A否管理员密码表4-3-1 admin表构造（2）User表：User表是用来存储顾客信息表，顾客信息除了涉及顾客账号、密码、昵称等信息还涉及机箱选填信息，User表构造如表4-3-2所示。列名类型主键/外键与否为空备注/阐明IDInt (4)主键否代理主键，内部管理员唯一标记，自增UserAccountVarchar (50)N/A否顾客账号，外部顾客唯一标记，不可修改UserNameVarchar (50)N/A否顾客昵称，可觉得中文，不可修改PasswordVarchar (50)N/A否顾客密码，可以修改SexVarchar (2)N/A是顾客性别，选填，默认（不填）为“男”EmailVarchar (50)N/A否顾客email，用来修改和找回个人资料UserleaveInt (4)N/A否顾客级别，记录顾客各种体现，默以为0TagInt (4)N/A否顾客标记，用来区别管理员/会员表4-3-2 User表构造（3）Music表：Music表是存储音乐信息表，此表将音乐属性简朴描述，涉及音乐类型、地区、音乐名等常用属性，此表设立代理主键（自增）作为主键，这个主键也是其她音乐关联表外键，表构造如表4-3-3所示。列名类型主键/外键与否为空备注/阐明IDInt (4)主键否代理主键，内部管理员唯一标记，自增MusicNameVarchar (50)N/A否音乐名，可以重复MusicTypeVarchar (50)N/A否音乐类型/曲风PubYearDatetimeN/A是发行时间，可以不填PlayNumInt (8)N/A否试听人数/人气判断根据MusicLocaleVarchar (50)N/A是音乐地区/语言UpLoaderInt (4)外键是上传者，可觉得空/数据库直接添加则为空UploadTimeDatetimeN/A否上传时间，上传作品时自动生成StoreaddressVarchar (50)N/A否存储地址，用来记录音乐位置TagInt (4)N/A否标记，用来标记音乐与否被删除PlayerVarchar (50)N/A是音乐表演者/歌手/出品人表4-3-3 User表构造（4）Cliplist表：该表用来存储音乐固定专辑（唱片公司发行）信息，由于本网站规模和本人对专辑结识限制，对专辑属性设立相对比较简朴。由于专辑英语音乐术语“多对多”关系，因此在此表中不设立与音乐关联，将关联写至Cm表，Cliplist表构造如表4-3-4所示。列名类型主键/外键与否为空备注/阐明IdcliplistInt (4)主键否代理主键，内部使用唯一标记，自增ClipNameVarchar (50)N/A否专辑名称，不唯一PlayerVarchar (50)N/A否专辑出品人/作者PubYearDatetimeN/A是专辑发行时间ComVarchar (50)N/A是发行专辑公司CoverVarchar (50)N/A是专辑海报/封面图片存储地址表4-3-4 Cliplist表构造（5）Cm表：该表是music表和cliplist表关系表，用来解决音乐和专辑关系，这里一种音乐作品可以属于各种专辑，同步一种专辑包括各种音乐作品。Cliplist表构造如表4-3-5所示。列名类型主键/外键与否为空备注/阐明IDInt (4)主键否代理主键，内部使用唯一标记，自增NameInt (4)外键否专辑id，专辑表里主键，作为外键使用MusicidInt (4)外键否音乐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;.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：50px auto 30px; position：relative;#player .cover 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; -ms-border-radius：10px; -khtml-border-radius：10px; border-radius：10px; width：130px; height：130px; -moz-box-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：130px; 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 repeat = localStorage.repeat | 0,shuffle = localStorage.shuffle | false,continous = true,autoplay = true,playlist = title：秋殇别恋,artist：格子兮、牙牙乐,album：格子兮、牙牙乐 - 秋殇别恋.mp3,cover:img/1.jpg,mp3：mp3/格子兮、牙牙乐 - 秋殇别恋.mp3,ogg：,title：亡灵序曲,artist：魔兽世界,album：魔兽世界 - 亡灵序曲.mp3,cover：img/2.jpg,mp3：mp3/The Dawn.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 (var i=0；iplaylist.length；i+)var item = playlisti;$(#playlist).append(+item.artist+ - +item.title+);var time = new Date(),currentTrack = shuffle = true ?time.getTime() % playlist.length ：0,trigger = false,audio，timeout，isPlaying，playCounts;var play = function()audio.play();$(.playback).addClass(playing);timeout = setInterval(updateProgress，500);isPlaying = true;var pause = function()audio.pause();$(.playback).removeClass(playing);clearInterval(updateProgress);isPlaying = false;/ Update progressvar setProgress = function(value)var currentSec = parseInt(value%60) 10 ?0 + parseInt(value%60) ：parseInt(value%60),ratio = value / audio.duration * 100;$(.timer).html(parseInt(value/60)+:+currentSec);$(.progress .pace).css(width，ratio + %);$(.progress .slider a).css(left，ratio + %);var updateProgress = function()setProgress(audio.currentTime);/ Progress slider$(.progress .slider).slider(step：0.1，slide：function(event，ui)$(this).addClass(enable);setProgress(audio.duration * ui.value / 100);clearInterval(timeout);，stop：function(event，ui)audio.currentTime = audio.duration * ui.value / 100;$(this).removeClass(enable);timeout = setInterval(updateProgress，500););/ Volume slidervar setVolume = function(value)audio.volume = localStorage.volume = value;$(.volume .pace).css(width，value * 100 + %);$(.volume .slider a).css(left，value * 100 + %);var volume = localStorage.volume | 0.5;$(.volume .slider).slider(max：1，min：0，step：0.01，value：volume，slide：function(event，ui)setVolume(ui.value);$(this).addClass(enable);$(.mute).removeClass(enable);，stop：function()$(this).removeClass(enable);).children(.pace).css(width，volume * 100 + %);$(.mute).click(function()if ($(this).hasClass(enable)setVolume($(this).data(volume);$(this).removeClass(enable); else $(this).data(volume，audio.volume).addClass(enable);setVolume(0););/ Switch trackvar switchTrack = function(i)if (i = playlist.length)track = currentTrack = 0; else track = i;$(audio).remove();loadMusic(track);if (isPlaying = true) play();/ Shufflevar shufflePlay = function()var time = new Date(),lastTrack = currentTrack;currentTrack = time.getTime() % playlist.length;if (lastTrack = currentTrack) +currentTrack;switchTrack(currentTrack);/ Fire when track endedvar ended = function()pause();audio.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 playlist.length) switchTrack(+currentTrack);var beforeLoad