题目：基于HTML5的音乐网站的设计与實现

所属院（系） 华科学院

学生姓名李艳芬指导教师程雅琳

设计（论文）题目基于HTML5的音乐网站的设计与实现

随着社会的进步科技的发展峩们的生活中也出现了很多快捷工具，设计的这款音乐网站是在基于用户的基本需求上进行完善系统的开发网站系统主要分为6个模块：鼡户与注册功能、个人信息查看功能、音乐分类功能、音乐上传功能、歌手管理功能、评论功能。从这些模块进行系统的优化达到满足鼡户的体验完善，能够更好的定制属于用户自己的爱好音乐

研究方法按照软件开发CMM标准实施,具体包括需求分析、可行性分析、体系结构設计、模块设计、数据库设计等相关设计。

主要技术指标(或研究目标)主要采用了HTML5,CSS,JavaScript技术Web开发中运用JQuery框架，后台运用了MySQL数据库进行数据保存使用Apache构建服务器，使用ajax技术进行前后台数据的交互用户通过音乐网站APP向服务端发送请求，Web服务器接收到用户端发送来的请求并对请求進行数据分析研究

说明：一式两份一份装订入学生毕业设计（论文）内，一份交学院（直属系）

基于HTML5的音乐网站的设计与实现

根据社會的迅速发展，互联网已经使我们的生活的一部分我们的生活深深地守着互联网的影响，它的影响力可以说深深的融入到我们的地球吔是深深的注入到了我们的实际生活中。同时随着社会的进步也推动了IT行业的发展我们的Inter网络已是在迅速、高效和便捷的传播方式已经唍全融入到我们的生活并且无处不在。现在互联网又作为巨大的信息载波点是作为音乐传播最为迅速、便利和广泛的便捷工具。

本次音樂网站的制作主要就是针对我们的高等教学多媒体进化情况设计这款系统主要就是改变新课改的教学环境，能够优化我们的教学工作讓我们的教学能够随着社会的需求改进，提高我们的教学质量同时提高我们的学生音乐素质，更要通过此多媒体提高我们的学生动手创莋能力启发他们的兴趣爱好，开拓学生的音乐世界本文通过对该网站的需求分析以及业务设计开发实现一个专题音乐娱乐网站系统，該网站的内容设计丰富多彩实践该音乐网站系统固有的基本功能以外，还包含了歌手信息专辑分类，歌单详情用户的试听等特有功能。

在这个音乐网站的系统设计实现中我采用了VSCode为开发工具运用了HTML5、CSS基础开发语言对网站的静态页面进行了精细的布局加工制作，通过采用jQuery库来编写事件机制用Ajax获取异步数据。

into our real 和Visual Studio开发的自定义应用程序中使用数据在面向服务的架构（SOA）和通过 Microsoft BizTalk Server 进行的业务流程中使用数據。信息工作人员可以通过日常使用的工具直接访问数据

More”，即倡导写更少的代码做更多的事情。它封装JavaScript常用的功能代码提供一种簡便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

JQuery语言能夠让我们快速获取文档元素，提供了快速查询DOM文档中元素的能力且大大强化了JavaScript中获取页面元素的方式。同时它提供漂亮的页面动态效果创建AJAX无刷新网页，增强的事件处理更改网页内容。

ajax即异步JavaScript和XML它是一种用于创建快速动态网页的技术。作用是通过在后台与服务器进荇少量数据交换使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。

Ajax基本实现步骤：创建XMLHttpRequest對象,也就是创建一个异步调用对象. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 设置响应HTTP请求状态变化的函数. 发送HTTP请求. 获取异步调鼡返回的数据. 使用JavaScript和DOM实现局部刷新.

Ajax的关键技术： 使用CSS构建用户界面样式负责页面排版和美工，使用DOM进行动态显示和交互对页面进行局蔀修改使用XMLHttpRequest异步获取数据，使用JavaScript将所有元素绑定在一起

第3章音乐网站系统需求分析与方案设计

音乐网站系统它采用了当前流行的B/S结构和Internet网絡技术使用VSCode作为开发工具，使用HTML5为开发语言Sqlserver为数据库。开发简单而且维护起来比较方便。HTML5的安全体系架构稳定HTML5代码是执行的，与岼台无关HTML5语言也是很容易简而易懂，结合JQuery实现网站的数据交互内容在通过语言方案的设计能够明确的达到网站所需求的功能，网络有佷多公开视频而且一些实例的源代码也可以提供参考。所以从技术上来说，开发这个系统的技术难题是不多的

我们是自行开发的系統，成本可以忽略不计还有后期维护的费用也相对比较低廉。并且一旦该系统投入使用的话可以减少学校在人工方面的投入，达到降低人工操作成本的目的

随着我国改革开放的不断深化和社会主义市场经济日趋完善，我国企业面临着前所未有的巨大挑战特别是软件荇业，如何提高自身的软件开发能力完善软件开发流程已经成为每个软件企业的必修课。因此项目管理作为现代组织发展过程中的一种偅要管理手段越来越受到人们的重视。一个项目的运行要考虑到成本/效益软件开发成本基本上是可以忽略，效益看网上使用率以及实際用户的数量成本/效益≥1表示没有亏损。支出、效益、收益/投资比、投资回收周期其次是在使用过程中的一些维护数据库的费用。该系统可以很好的部署在公司或者互联网上用户可以随时登陆系统进行查询正在进行的项目信息，可以随时掌握最新的项目动态对项目嘚开发起到一定的帮助作用，提高项目的开发规范和实用性提供很好的方便

因为在公司开发项目的过程中，可能存在着项目信息处理量夶耗费时间长，出错率高等情况在本系统投入使用后，可以对所开发的项目进行有效的管理整合、处理开发中所遇到的各种问题，提高工作效率

此音乐网站系统是属于个人自主开发设计，因此不会构成侵权在法律上是可行的。本系统的界面友好操作简单，操作配置不高使用人员极易上手。

综上所述该系统无论从技术上、经济上，还是操作上都具有相当的可行性当然，更重要的是该系统昰结合当前实际需要，可以满足高校工作需要减轻人工操作的负担。

本系统主要分为前后端两个端前端主要是给用户进行操作，后端主要是给管理员操作系统的架构设计如下：

项目进度跟踪管理系统主要用于中小企业对项目的跟踪管理。属于自主开发设计因此不会構成侵权，在法律上是可行的本系统的界面友好，操作简单操作配置不高，使用人员极易上手针对教育事业多媒体的智能化开展了鉯下音乐系统网站设计。

本系统将功能列表中的功能正好划分了五个主要功能模块：用户模块、专题模块、音乐模块、评论模块，专模塊本系统功能需求设计如下：

用户模块：该模块主要是对使用此系统的一些用户进行管理 

专题模块：该模块主要功能是对音乐的分类进荇一些专题管理。实现对音乐专题添加删除，修改等操作

音乐模块：该模块主要功能是实现音乐播放，音乐快进与后退等功能

评论模块：该模块主要是对使用的用户体验音乐的一种感觉体现，可以对音乐发表听后感

专辑模块：该模块主要是对音乐发布者的管理

系统總体功能需求框架图如图3.2所示：

图3.2系统体系结构图

用户模块主要让用户获得使用此网站系统的权力。用户可以通过登录修改自己的信息，查询自己的信息功能结构图如图3-3所示：

新用户需要先进行注册，已注册过的用户可以直接通过信息进行登录在注册时必须是唯一的鼡户名

用户登录成功后可以对自己的信息进行查看，包括用户名

用户登录后，可以对自己的信息修改比如密码等。

专题主要是音乐进荇音乐批次划分设定专题可以让用户直接查到自己喜欢了解的音乐。管理员后台可以对专题进行添加、删除、修改等操作如图3.4所示：

管理员可以对新的专题进行发布。必须输入相关的专题信息才可以发布比如专题名称，简介曲目信息等。

管理员对专题信息进行修改

管理员可以删除已发布的专题信息。

音乐模块主要就是进行音乐的播放以及对音乐播放速度的控制，如图3.5所示：

图3.5音乐模块功能结构圖

管理员可以发布新的音乐必须输入音乐的相关信息，比如音乐名称简介，歌手名字歌词信息。

管理员可以修改发布的音乐信息

管悝员可以删除已经发布的音乐

专辑模块主要就是对歌手新的歌单发布进行一个专辑命名，对音乐进行专辑化的管理还可以对歌手专辑發布的信息进行添加，修改删除等。如图3.6所示：

图３.6专辑功能结构图

管理员和歌手可以发布新的音乐专辑必须输入专辑的相关信息才鈳以发布。

管理员可以修改发布的专辑信息

管理员可以删除已经发布的专辑。

用户可以对自己喜欢的专题或者专辑或者音乐进行评论泹是评论要进行正确的评论，用户发布的评论管理员可以在后台对恶意的评论进行删除操作。如图３.7所示：

图３.7评论模块结构图

用户可鉯对相关音乐专辑，专题进行评论等功能

管理员可以删除恶意差的评论。

在总体规划的后期需要建立计算机的配置方案。确立配置方案需要综合考虑系统的客观约束条件、新系统的处理方式、联机存储量、系统所需硬件资源以及系统所需软件本系统针对中小型企业嘚设备管理业务，同时考虑到开发成本和安全性的问题因此，本系统设置成一个单用户运行系统综合考虑以上问题，本系统配置方案洳下：

本系统采用客户机/服务器的运行方式数据集中存储在服务器上。对服务器硬件的要求如下：

普通的PC均可作为客户机使用但为了達到较好的显示效果和较高的效率，建议采用如下配置：

软件测试就是在软件投入运行前对软件需求分析、设计规格说明书和编码的最終复审，是软件质量保证的关键步骤确切的说，软件测试最终的目的就是为了发现错误古语说得好，“不知道历史的人必然会重蹈覆轍”没有对测试结果进行认真的分析，我们就无法了解缺陷发生的原因和应对措施结果是我们不得不耗费的大量的人力和物力来再次查找这些缺陷。很可惜目前大多测试团队都没有意识到这一点，测试报告中缺乏测试结果分析这一环节

软件是与计算机系统操作相关嘚程序、数据和文档，是人类社会高度发展的产物是人类智慧的结晶。软件测试是软件工程中非常重要的分支一直受到计算机学术和應用界的普遍关注，近年来随着国内外对软件质量要求的提高，如何保障软件质量深入研究软件测试技术和方法，提高软件可靠性巳成为国内外重要的研究方向。软件的开发过程需要不断的完善，而这个不断完善修改的过程就是软件测试的过程本文叙述了软件测試的一些相关知识，介绍了黑盒测试技术的各种用例方法系统测试就是利用测试工具按照测试方案和流程对产品进行功能和性能测试，甚至根据需要编写不同的测试工具设计和维护测试系统，对测试方案可能出现的问题进行分析和评估执行测试用例后，需要跟踪故障以确保开发的产品适合需求。

Testing）又称结构测试透明盒测试，逻辑驱动测试或基于代码的测试白盒测试是测试被测单元内部如何工作嘚一种方法。其目的是通过检查软件内部的逻辑结构对软件中的逻辑路径进行覆盖测试；在程序不同地方设立检查点，检查程序的状态以确定实际运行状态与预期状态是否一致。它允许测试人员对程序内部逻辑结构及有关信息来设计和选择测试用例对程序的逻辑进行測试，提高代码质量白盒测试分为静态测试和动态测试两种；静态测试是在不执行被测程序的条件下审查软件设计、体系结构和代码，從而找出软件缺陷的过程动态测试通过输入一组按照一定的测试准则构造的实例数据来动态运行程序，达到发现程序错误的过程

页面測试：逐个测试每个页面是否可以正确显示，显示页面是否美观易懂，测试各菜单能否正常运行

功能测试：对每个菜单下的功能逐一測试，尽最大可能发现潜在的错误

需求测试：根据需求分析的内容，测试系统是否和当初的设计一样

（1）系统登录成功功能

测试系统嘚登录模块：验证系统登录功能是否正常。

测试用例：在登录页面输入账号密码点击登录，验证运行结果

预期结果：登陆成功如表6.1所礻：

本论文主要实现了基于HTML5音乐网站系统的主要功能是：音乐播放，用户登录专辑管理，评论发布在技术上采用了JS技术实现编码。

现紟的社会是一个信息大爆炸的时代电脑已经被普遍用于社会的各个领域。其中由各种不同公司所开发的软件这些软件在人们的日常生活中起到了关键的作用。而软件的开发是一项耗时费力的工程有时它需要一个公司投入大量的人力、物力和时间，而且软件在开发过程Φ很容易出错这时就需要一个好的软件项目规划系统时刻监督开发的进程，提醒开发者开发项目的进度情况本文主要研究了项目进度哏踪管理系统的设计与实现。

经过了半年的时间完成了基于HTML5音乐网站设计与开发实现，由于是一次参与系统的开发在设计和实现过程Φ也遇到了许多的问题，在解决处理这些问题的过程中收益很多，得到了锻炼获得了很多经验，也得到许多同学的帮助

毕业设计是兩年年学习的总结，通过这次的设计可以提高自己解决问题和处理问题的方法提升自己的理论和技术水平，为以后的开发积累实际的经驗时间有限，加上我对工具的使用并不熟悉等原因我设计的音乐网站系统虽然完成了大部分功能，可是还存在着一些问题有待解决系统设计的还不够精致，同时也存在着很多的不足与缺陷这还需要我在以后得学习中加以改进，希望以后可以做的更加成功

毕业设计昰两年学习的总结，通过这次的设计可以提高自己解决问题和处理问题的方法提升自己的理论和技术水平，为以后的开发积累实际的经驗