基于vue框架技术音乐平台的设计与实现-毕业论文

---文档均为word文档，下载后可直接编辑使用亦可打印---

摘 要

Internet使全球走向信息化，走向数字化时代,为全球的用户提供了数字便利和数据传输便利的操作平台，大大缩短了人与人之间信息传递和信息交换以及信息资源交换的时间。音乐软件APP几乎人人都有，但在这个音乐软件百花齐放百家争鸣的时代，我们听不同歌手的歌需要不同的软件，于是我开发了这个基于的在线音乐平台。本平台的构建技术是以为基底，后台数据库支撑用的是MongoDB分布式文档存储数据库。该数据库的特点是高性能，易部署，易使用。此网站严格按照软件工程中的指导方法来进行构建以及测试。赋予了音乐网站 管理 用户信息注册登陆 用户播放MV 音乐搜索等功能。

关键词：音乐 登录注册 音乐搜索

Abstract

The Internet has enabled the world to move towards informationization

and the digital era. It has provided users with a platform for digital

convenience and data transmission, which has greatly shortened the time for

information transfer, information exchange, and information resource

exchange between people. Almost everyone has a music software app, but in

this era of music software with hundreds of flowers, we need different

software to listen to the songs of different singers, so I developed this online

music platform based on . The construction technology of this platform

is based on , and the back-end database supports the MongoDB

distributed document storage database. The database is characterized by high

performance, ease of deployment, and ease of use. This website is built and

tested in strict accordance with the guidelines in software engineering. It

provides music website management, user information registration and login,

and users can play MV music search and other functions.

Keywords: Music Login Registration Music Search

目 录

第一章 绪论 ............................................. 1

1.1 课题的研究背景及意义 ............................... 1

1.2 国内外研究现状 ..................................... 1

1.2.1国内研究现状 .................................... 1

1.2.2国外研究现状 .................................... 1

1.3 主要内容及安排 ..................................... 2

第二章 关键技术介绍 ..................................... 3

2.1 介绍 ......................................... 3

2.1.1 的概述和特点 ............................. 3

2.2 AXIOS介绍 .......................................... 3

2.2.1 AXIOS的概述和特点 .............................. 3

2.3 SASS预处理器概述和特点 ............................. 3

2.3.1 SASS预处理器的概述和特点 ....................... 3

2.4 JavaScript CSS HTML概述和特点 ...................... 4

2.4.1 HTML的概述和特点 ............................... 4

2.4.3 CSS的概述和特点 ................................ 4

2.4.5 JavaScript的概述和特点 ......................... 4

2.5 vue-router概述和特点 ............................... 4

2.5.1 vue-router的概述和特点 ......................... 4

第三章 可行性分析与需求分析 .............................. 5

3.1 可行性分析 ......................................... 5

3.1.1 技术可行性 ...................................... 5

3.1.2经济可行性 ...................................... 5

3.2 系统的需要具备的特点 ............................... 5

3.3 功能结构分析 ....................................... 6

3.3.1在线音乐网站功能分析 ............................ 6

3.4 在线音乐网站操作流程描述 ........................... 7

3.4.1在线音乐网站功能分析 ............................ 7

第四章 在线音乐网站系统设计 .............................. 8

4.1 系统开发环境 ....................................... 8

4.1.1 开发硬件环境 .................................... 8

4.1.2 软件环境 ........................................ 8

4.1.3 开发语言 ........................................ 8

4.1.4 数据库 .......................................... 8

4.2 系统所需数据库表的设计 ............................ 8

4.3 数据库E-R图和功能流程图 ......................... 10

4.3.1 数据库E-R图 ................................... 10

4.3.2 歌曲搜索流程图 ................................. 10

4.3.3 歌手搜索流程图 ................................. 11

4.3.4 歌曲排行榜使用流程图 ........................... 11

第五章 系统实现与功能展示 ............................... 13

5.1网站前端功能实现 ................................... 13

5.1.1 网站首页模块功能实现 ........................... 13

5.1.2 网站首页模块代码解析 ........................... 14

第六章 系统测试 ........................................ 23

6.1功能测试 ........................................... 23

6.1.2搜索列表功能测试 ............................... 25

6.2性能测试 ........................................... 26

总结与展望 ............................................. 27

致 谢 ................................................. 28

参 考 文 献 ............................................ 29

第一章 绪论

1.1 课题的研究背景及意义

目前，随着中国的进步和开放型经济的到来，在这个计算机技术和互联网飞速发展的时代，人们的日常生活也发生巨大的改变，人们的生活水平提高消费水平也提高，但压力也是随之而来的提高，所以人们经常听歌解压，这也正是我研究这个音乐平台的主要原因，由于盈利和版权问题还有资源的互利，现有几大音乐巨头公司，例如QQ音乐，网易云音乐，酷狗音乐，酷我音乐盒等，不同的平台有着不同的资源，导致我们现在听歌需要下载到很多听歌软件，而且不同软件又有不同的功能

所以这次选题的意义就是实现一个音乐网站基于现在年轻人喜欢的多样性的集合各软件优点的音乐网站。让人们在工作中为生活带来无尽的欢乐和放松生活的闲暇之余带来音乐的快乐。

1.2 国内外研究现状

1.2.1国内研究现状

从目前来看，随着互联网技术和人们生活水平的提高，当人们的温饱不再是生活中的大部分压力的时候，人们开始追求更高质量的生活，有的人把精力放在培养自己的身体上，例如健身，养身，运动。有的人则是追求精神上的更高领域，例如知识，眼界，音乐等等，作为当代大学生的我来说，我在课余时间还有闲暇之余十分喜欢听歌，所以这也是我研究音乐在线网站的一个重要原因之一。

还有一个重要的原因就是国内听歌软件由于几大音乐软件巨头占据了绝对的优势和垄断地位使得喜欢听音乐的人需要下载很多听歌软件，国内的听歌软件由网易于音乐，QQ音乐，酷狗音乐等几大巨头占据，近年来音乐版权成本增长明显，三大唱片公司（环球音乐，华纳音乐，索尼音乐）打包版权。[1]就比如我来我想听周杰伦的歌我就要去QQ音乐听取。如果我想看更多有趣和真实的评论我就需要下载网易云音乐，所以对一个喜欢听音乐的人来说，他需要下载好几个音乐软件，且产品同质化的现象较为严重，一家公司推出一个功能另一家公司也立即跟风推出，且风格极为类似。

1.2.2国外研究现状

国外的听歌软件主要是两个，一个是iTunes音乐商城和Spotify，iTunes是一种网络音乐销售商点，界面整合在iTunes播放软件中，使得透过网络购买版权音乐档案的机制变得更便利，iTunes音乐商城最大的特点即是与硬件设备捆绑，这也离不开苹果iPod终端本身在设计和产品理念上的出众。[1]

Spotify则是使用会员收费制和用户创造内容模式随着整个Spotify生态的不断发展壮大，它能够吸引更多用户来创造更多内容，并形成良性循环。[1]

1.3 主要内容及安排

本文遵循软件工程方法论进行系统分析、总体设计、详细设计和软件测试，实现了在线音乐网站的登录注册，网站首页，歌曲推荐，精选歌单，热门榜单，新歌首发，热门电台，歌手列表，歌曲排行榜，歌词，音乐搜索，MV播放等功能。章节内容安排如下：

第一章：分析国内外关于在线音乐网站和听歌软件及听歌APP研究现状。

第二章：对本文所采用的搭建工具、技术、环境以及数据库进行介绍。

第三章：进行在线音乐网站的需求分析，包括可行性分析、功能结构分析。

第四章：系统开发环境搭建，数据库中表设计以及系统前后台运行流程描述。

第五章：进行系统实现与展示。

第六章：系统测试。

第二章 关键技术介绍

2.1 介绍

2.1.1 的概述和特点

是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，被设计为可以自底向上逐层应用。的核心库只关注视图层，方便与第三方库或既有项目整合。[2]

的特点：

（1）灵活开放：可以把当做JavaScript，也可以用它的工具来搭建系统，是可以灵活选择的，所以说是灵活开放的。

（2）易学易用：我认为的核心易学点是注重关注视图层，用户只需使用简单的API将数据绑定即可，在有HTML CSS JavaScript的基础上，快速上手。[2]

（3）性能好，易优化：20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。[2]

（4）有多种方式实现过渡效果：在过渡CSS和动画应用class，第三方动画库如，。

2.2 AXIOS介绍

2.2.1 AXIOS的概述和特点

AXIOS是一个基于promise的HTTP库可以应用在浏览器和。

AXIOS的特点：

（1）转换请求数据：可通过将相关的传递给AXIOS来发出请求，例如一个data作为请求数据，则可以对data进行转换处理。

（2）响应数据：对数据进行快速响应。

（3）取消请求：能够取消请求，例如data取消请求。

2.3 SASS预处理器概述和特点

2.3.1 SASS预处理器的概述和特点

SASS预处理器是CSS预处理器的一种。SASS预处理器添加程序属性。不需要考虑浏览器兼容性。

SASS预处理器的特点：

（1）简洁：代码编辑和实现方面较为简洁。

（2）适应性强：对配置和环境的要求不高，在当前属于频繁使用。

（3）可读性强：代码及其运行十分简单，理解起来不困难且代码赏心悦目。

（4）易维护：易于后期代码的维护，以及后期的更新迭代等问题。

2.4 JavaScript CSS HTML概述和特点

2.4.1 HTML的概述和特点

HTML(Hyper Text Markup Language,超文本标记语言)是标准通用标记语言下的应用。[3]

HTML的特点：

（1）兼容性好：硬件与软件间，软件与软件间。

（2）开放性高：该语言有相当多的空间可以去拓展。

（3）性能高：效用及其效率高。

（4）嵌入型强：更易嵌入，减少软件间或软硬件的磨合。

2.4.3 CSS的概述和特点

CSS是Cascading Style Sheets（层叠样式表）的简称，CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）[4]

CSS的特点：

（1）缩短代码量：在功能一样情况下，CSS的代码量会缩短。

（2）提高预览速度：因代码量缩短，故而预览速度加快，及响应速度加快。

（3）易编写：CSS不需要编译，相较于其他的来说，是相对易编写的。

（4）易布局：数据段，代码段。

2.4.5 JavaScript的概述和特点

JavaScript是Net-scape公司推出的一种基于对象和事件驱动的解释性编程语言。[5]

JavaScript的特点：

（1）无需预编译：JavaScript无需预编译，故而易编写。

（2）可嵌入：更易嵌入，减少软件间或软硬件的磨合。

（3）自带基本数据：提供能多数据，这些数据都是可以直接加载的。

（4）可实现交互：可实现对象交互。

2.5 vue-router概述和特点

2.5.1 vue-router的概述和特点

vue-router可以理解为前端路由跳转的管理。vue-router采用的是路径质检的切换。[6]

第三章 可行性分析与需求分析

3.1 可行性分析

3.1.1 技术可行性

网站搭建和开发所需要的设备有电脑、服务器、还有一些配件等都是现在社会上常见易得的设备且价格也不贵，基本上都能满足，电脑基本上家家户户都有且对电脑的配置不是很高，所以基本可以满足需求。

开发系统是windows系统，开发语言是HTML CSS SASS JavaScript

。开发语言是现在常见的语言技术，是容易理解通俗易懂的，前端使用的开发语言是HTML CSS SASS JavaScript 。软件并不是普通的入侵式前端框架结构资源库，在配合其他数据库的使用过程中，软件能够给提供庞大的空间。[7]

是非常灵活且开放的前端框架资源库。[8]

后端是。

3.1.2经济可行性

本音乐在线网站开发是基本不需要什么经费的除了技术员本身的经费，数字技术代表的高科技日益增多，数字技术已颠覆各大录音大厂，传统的制作和播放模式将被淘汰。[9]

其次我国唱片市场现状处于萎靡，销量见底，传统唱片销售链断裂等[10]

诸多原因，从而产生许多大厂开始转型数字音乐。数字音乐付费制度是必然的。[11]

该音乐网站的接口是来自各大音乐平台公司的开源接口，电脑已成为人们生活中的一部分，故电脑实际不算是经济经费之一。数字音乐的诞生引发用户听歌习惯的改变。[11]

该音乐在线网站目前是免费对外使用，故而现在是处于无再创价值的，至于该在线音乐网站的价值，在于后期完善后可以，打包整合出售给需要且能对接的上的公司，例如音乐公司，或与歌手的运营团队对接，承接热搜或购买排行榜，例如某明星花钱浏览将自己的歌推送到音乐平台的排行榜，从而实现加大自身走红力度和知名度。2013年中国网络音乐用户4.5亿，收入74.1亿，其中在线音乐收入43.6亿。[12]可承接小额广告盈利，该网站不能主要以接广告为盈利，毕竟这样的话就脱离了本人创作该音乐平台的初衷。

3.2 系统的需要具备的特点

该在线音乐网站是能够在互联网上实操和运行的，能更好的推动音乐的发展和在线音乐网站这一模块的发展。该音乐在线网站应当需要强大的后台技术人员，这样可以对歌曲进行实时的更新和贴合当代人的音乐口味，从而使用户产生对该软件的依赖，否则将会因未更新迭代问题被淘汰。

在线音乐网站具有以下特点：

（1）实时性：因为该在线音乐网站是调用各大平台的开源接口，在不侵权的情况下可以同步跟同其他音乐软件进行实时更新。

（2）易扩展性：该系统提供了一个新的功能强大的多任务接口和个人网站的链接，亦可插入第三方。

3.3 功能结构分析

3.3.1在线音乐网站功能分析

（1）登录注册：每个软件都应该的独立区分用户和保护用户使用安全的，所以设有登录注册功能。

（2）歌曲推荐：听歌软件或网站都该有的功能之一，因为不是每个用户都是打开听歌软件后只能自己常听的歌曲，否则的话市面上也不会有多个音乐软件存在，所以这个是音乐网站必备的功能之一。

（3）歌曲搜索功能：对于用户来说如果一个音乐网站没有搜索功能，这个音乐网站是存在极大的缺陷的，而且这样的音乐网站是不能长久存在的，因为对用户来说，有时候用户也不知道自己要听的歌曲的全名，所以需要有搜索和索引功能，总不能一首歌想听缺找不到吧。

（4）歌手列表：该功能在市面上的音乐软件亦是常见的功能之一，多数时候与其说用户在听歌不如说用户在听歌手，例如追星一样，是用户喜欢的歌手，那么该歌手的歌是多数会被喜欢的，且歌手列表有时候也可以成为搜索功能的辅助，本人就是有时候知道一首歌，不记得歌名却记得歌手，这样的话就可以，减轻搜索功能的负担，故而是音乐网站必备功能之一。

（5）MV播放功能：MV相信对大家来说就不陌生了，MV是对歌曲的一种升华和辅助，进而使得该歌曲更加的大众化。

（6）歌词滚动：如果说一首歌只有声音没有歌词，那么对于该歌词来说是没有灵魂，例如一些快歌，难歌，没有歌词可能用户理解起来意思会变味，且没有歌词歌曲的音乐网站在这个时代不用推出就会被淘汰。

（7）排行榜：排行榜是歌曲和歌手的一个分水岭吧，也可以说是各大音乐软件的盈利点之一，有很多歌手将自己的歌曲买上热搜，从而达到盈利，还有就是排行榜亦可以是搜索功能的辅助，多数时候在排行榜上的歌要不是路人皆知的歌曲，要么是新歌，所有对于某些用户来说只需要点开排行榜无需搜索，从而减轻搜索功能的负担。

（8）歌曲评论功能：评论功能相信经常使用听歌软件的用户来说是不陌生，增加歌曲的可玩性和用户之间的互动性，例如网易云音乐，网易云音乐就是以评论互动功能大火，从而在整个音乐听歌软件市场占有一席之地，评论功能增加了用户的

交流，一首歌一百个人听一百种味道，评论功能有助提升用户使用体验。

（9）实时更新歌曲功能：一个听歌软件一经成立不可能一直停留在原有的歌曲止步不前，这样的话市场份额将会被慢慢的吞噬，为何各大巨大听歌软件可以稳固市场份额，因为各软件都有独立签约的歌手，从而利用歌手捆绑歌迷使用其音乐软件，从而达到体量和用户群体，进而进行盈利，例如会员，购买专辑等。

3.4 在线音乐网站操作流程描述

3.4.1在线音乐网站功能分析

（1）用户进入音乐网站，进行登录注册，然后进入音乐网站首页。

（2）跳转到音乐网站首页封面，可以看见一个封面的推荐滚轮，会有实时的滚动。

（3）下面就是歌手推荐，然后有歌手的头像，还有歌手名字，点进去能看到歌手的歌曲和分类。

（4）右边是排行榜，点击打开可以看见排行榜歌曲，歌曲是调用接口实时更新的。

（5）新歌推荐，点击进去可以看见新歌推荐，新歌推荐也是调用接口实时更新的。

（6）用户可以使用搜索功能进行搜索歌曲。

（7）点击歌曲开始听歌，可以看见歌词是实时滚动的。

（8）歌曲下面会有评论功能。

（9）歌曲右边有些因版权问题只能看到MV。

第四章 在线音乐网站系统设计

前面对系统的可行性分析和需求分析等作出了详细的分析，本章节主要是对在线音乐网站系统的设计进行详细的说明与有关设计。具体介绍本网站的开发环境还有环境的配置，还有借口等进行概要设计和详细的设计流程。

4.1 系统开发环境

4.1.1 开发硬件环境

处理器：AMD Ryzen 5 3600 6-Core Processor

已安装的内容（RAM）：16.0GB（此处非最低配置，只是本人实现在线音乐网站的硬件配置）；

4.1.2 软件环境

操作系统：windows 10 专业工作站版。（此处非最低配置，windows 7亦可适配）

4.1.3 开发语言

前端使用：HTML CSS SASS JavaScript

后端使用：

4.1.4 数据库

本音乐在线网站的数据库是使用MongoDB数据库，该数据库是分布式文档存储数据库，该数据库的优点有以下几点：

（1）高性能。

（2）易部署。

（3）易使用。

4.2 系统所需数据库表的设计

在线音乐网站数据库表的设计包括字段名、字段说明、各字段的长度、是否为主键、类型、是否为空，以及系统所需数据库ER图，具体如下表4-1至表4-6所示:

表4-1 歌手信息表

序号

1

2

字段名

id

name

字段说明

id

歌手信息

长度

Varchar(4)

Varchar(100)

主键

是

否

类型

int

string

是否允许为空

否

否

表4-2 歌曲信息表

序号

1

2

3

4

字段名

id

time

name

musicInfo

字段说明

id

歌曲时长

歌曲名字

歌曲详情

长度

Varchar(4)

Varchar(10)

Varchar(80)

Varchar(90)

主键

是

否

否

否

类型

int

int

string

string

是否允许为空

否

否

否

否

表4-3 搜索信息表

序号

1

2

3

4

字段名

id

NameGS

NameGM

NameZJ

字段说明

id

歌手

歌名

专辑

长度

Varchar(4)

Varchar(16)

Varchar(80)

Varchar(40)

表4-4 精选歌单信息表

序号

1

2

3

4

字段名

id

GDname

GDbt

GDbfl

字段说明

id

歌单列表

歌单标题

歌单播放量

长度

Varchar(4)

Varchar(300)

Varchar(200)

Varchar(10)

表4-5 热门榜单信息表

序号

1

2

3

4

字段名

id

RMlb

RMbt

RMgq

字段说明

id

热门类别

热门标题

热门歌曲

长度

Varchar(4)

Varchar(40)

Varchar(40)

Varchar(80)

表4-6 新歌首发信息表

序号

1

2

3

主键

是

否

否

否

类型

int

string

string

string

是否允许为空

否

否

否

否

主键

是

否

否

否

类型

int

string

string

string

是否允许为空

否

否

否

否

主键

是

否

否

否

类型

int

string

string

string

是否允许为空

否

否

否

否

字段名

id

XGdq

XGgqm

字段说明

id

新歌首发地区

新歌首发歌长度

Varchar(4)

Varchar(32)

Varchar(40)

主键

是

否

否

类型

int

string

string

是否允许为空

否

否

否

曲名

4 XGgqsc

新歌首发歌曲时长

Varchar(10) 否 string 否

4.3 数据库E-R图和功能流程图

4.3.1 数据库E-R图

数据库E-R图如图4-1所示：

图4-1 数据库E-R图

4.3.2 歌曲搜索流程图

歌曲搜索的具体操作流程如图4-2所示：

图4-2 歌曲搜索流程图

4.3.3 歌手搜索流程图

歌手搜索的具体操作如图4-3所示：

图4-3 歌手搜索流程图

4.3.4 歌曲排行榜使用流程图

排行榜操作的具体流程如图4-4所示：

图4-4 排行榜流程图

第五章 系统实现与功能展示

5.1网站前端功能实现

5.1.1网站首页模块功能实现

在线音乐网站的设计包括首页、歌手、排行榜、搜索等页面，主要功能模块包括音频播放功能、音乐搜索功能，其中音乐搜索功能是使用酷狗的搜索模块，使用其中的搜索引擎，并将数据渲染到页面，以便播放，播放的同时，音频对应的歌词也能对应渲染到页面来。项目设计包括主页、歌手页面、搜索页面、排行榜页面、音乐播放页面、音乐搜索页面、MV播放页面，具体设计效果如下图5-1至5-4所示：

图5-1 在线音乐网站首页

图5-2在线音乐网站首页

图5-3在线音乐网站首页

图5-4在线音乐网站首页

5.1.2网站首页模块代码解析

（1）导航栏：导航栏的布局设计是利用ul>li标签设计的，其中的logo是小组利用logo生成软件生成，然后通过PS软件调整图片大小、分辨率以及其他修改制作成的，然后这里的导航栏我们还在其中添加hover鼠标悬浮后产生变色效果，然后通过a标签链接实现路径的跳转，当然，这里还涉及到路由设计的问题。具体布局代码实现如图5-5所示：

图5-5导航栏具体代码实现

（2）轮播图：轮播图这里我们利用了elementUI框架，然后模仿主流网站的轮播图特效实现的，当然，我们没有添加a标签效果，这里仅仅只是拥有特效的轮播图。具体布局代码实现如图5-6所示：

图5-6轮播图具体代码实现

（3）精选歌单：精选歌单也是利用ul>li的布局，利用浮动以及清除浮动来实现这样的效果，当然这里还也同样使用了hover效果以及a标签链接效果。这里的图片资源我们是从一些主流音乐网站中相关图片地址大部分是访问相关的API或者下载到本地再重新保存起来的。而这里的图片资源以及相关的文本内容，我们并非通过布局或者CSS样式直接添加，而是把相关图片资源存在后台，然后把文本内容利用数组的知识存到js文件里，在提供API给前端进行请求。如下，然后我们再利用JS再把它的文本内容以及图片链接最终渲染到页面上，具体布局代码实现如图5-7所示：

图5-7精选歌单具体代码实现

（4）热门榜单：热门榜单也同上面一样，布局原理以及效果都是相同的，图片资源以及文本内容也是通过js将本地资源渲染上的。这里具体实现代码由于与上面类似。

（5）新歌首发：新歌首发实现界面如图5-8所示，新歌首发的文本内容包括名称，区域，以及时间，都是通过利用本地资源渲染到网页上的，具体代码实现如图5-9所示：

图5-8新歌首发界面实现

图5-9新歌首发界面实现

（6）热门榜单：同上热门榜单的布局类似，代码以及方法相近，所以这里不多做解释。

（7）热门电台：热门电台也是利用u1＞li实现布局，并且采用弹性布局，还有添加hover效果，由于这方面的技术不是本人强项，所以这里没有对热门电台跳转的页面做太多处理，这里也相当于静态页面，具体界面如图5-10所示：

图5-10新歌首发界面实现

（8）热门歌手：热门歌手同样是通过后台提供API接口，然后前端再进行访问得到歌手信息，最后在渲染出来，显示在页面上，显示效果如图5-11所示：

图5-11新歌首发界面实现

（9）排行榜页面：排行榜页面是通过API进行请问访问得到数据进行渲染的，包括这里的名称和时间，排行榜页面没有跳转功能，因为这里的歌曲不一定能很好的播放，而且项目中有搜索功能，所以完全可以通过搜索功能进去找到该歌曲并播放，具体界面如图5-12所示，具体排行榜代码实现功能如图5-13所示：

图5-12排行榜界面实现

图5-13排行榜界面具体代码展示

（10）歌曲搜索页面：搜索功能是利用的酷狗的搜索引擎，可以搜索歌曲，歌手，专辑等关键字对应的歌曲，将其相对应的文本内容渲染到搜索框下面已经设计好的列表里，这里通过搜索获取的歌曲列表的动态渲染出来的，具体实现界面如图5-14所示，歌曲搜索具体代码如图5-15所示：

图5-14歌曲搜索界面实现

图5-15歌曲搜索具体代码展示

（11）音乐播放页面：音乐播放页面比较简洁，主要是主打简约风格，支持目前播放器的所有特征，同时还可以进行列表播放，音乐播放页面如图5-16所示：

图5-16音乐播放页面

（12）MV播放页面：MV播放界面相对来说比较简陋，麻雀虽小五脏俱全，因为资源都是访问酷狗后台的API，所有会有版权和部分原因的限制，包括跨域，403请求被拒等，MV播放页面如图5-17所示：

图5-17 MV播放页面

（13）歌手页面：首先这里的图片资源和名称文本内同是通过JS从QQ音乐中获取的，而我们这里列表是只了渲染五行六列，共三十个，通过分类索引我们也可以进行一个分类，不过这里也最多只能显示30个，这里的歌手列表虽然是通过动态渲染，但是没有链接效果的，所以基本上也只能算是静态页面。而这里的布局也是通过ul>li实现的。歌手页面如图5-18所示：

图5-18 歌手页面实现

第六章 系统测试

6.1 功能测试

功能测试就是对已有的功能，进行功能测试，并达到预期效果，如未达到预期效果则视为系统功能测试不通过，则该功能视为无用功能，且功能测试能够大大加强该在线音乐网站的功能完善和提升用户体验，并从中得到反馈，从而使得该音乐网站更加的贴合市场贴合现实，系统功能测试结果如表6-1所示：

表6-1 系统功能测试结果

用例描述 测试步骤 测试结果

允许点击且完导航栏 点击导航栏，选中标签 成对应指定的跳转

轮播图正常运轮播图

选中轮播图中的图片，选取任一图片进行点击

转，且点击轮播图跳转到相应界面

精选歌单功能点击精选歌单功能，选中精选歌单中的歌曲，点击歌曲播放

允许点击且点击歌单中的歌曲歌曲允许播放

点击热门榜单功能，跳转至热门榜单热门榜单 页面，点击热门榜单歌曲，点击歌曲播放

热门榜单功能允许点击且点击榜单中的歌曲允许播放

新歌首发功能点击新歌首发功能，跳转至新歌首发新歌首发 页面，点击新歌首发歌曲，点击歌曲播放

允许点击且点击新歌首发中的歌曲允许播放

热门MV

真实结果

允许点击且完成对应指定的跳转

轮播图正常运转，且点击轮播图跳转到相应界面

精选歌单功能允许点击且点击歌单中的歌曲歌曲允许播放

热门榜单功能允许点击且点击榜单中的歌曲允许播放

新歌首发功能允许点击且点击新歌首发中的歌曲允许播放

热门MV功能允精选歌单

点击热门MV功能，跳转至MV界面，热门MV功能允

用例描述 测试步骤

选中MV，点击播放

测试结果

许点击且MV播放正常，视频音频同时输出

热门电台功能真实结果

许点击且MV播放正常，视频音频同时输出

热门电台功能允许点击且点击后电台音乐允许播放

热门歌手功能允许点击且点击热门歌手列表跳转后，点击歌曲，允许播放

歌手界面允许点击且歌手头像允许点击，跳转后点击歌曲，歌曲播放完成

排行榜界面允许点击且排行榜界面歌曲允许点击播放，音频输出完成

热门电台

点击热门电台功能，跳转至热门电台界面，选择电台，播放电台

允许点击且点击后电台音乐允许播放

热门歌手功能点击热门歌手界面，跳转至热门歌手热门歌手 界面，选择热门歌手中的歌手头像，跳转至歌手歌曲，点击歌曲播放

允许点击且点击热门歌手列表跳转后，点击歌曲，允许播放

歌手界面允许点击且歌手头歌手界面

点击歌手界面跳转至歌手列表，点击歌手头像，点击歌曲播放

像允许点击，跳转后点击歌曲，歌曲播放完成

排行榜界面允排行榜界面

点击排行榜界面跳转至排行榜界面，点击排行榜歌曲，点击歌曲播放

许点击且排行榜界面歌曲允许点击播放，音频输出完成

6.1.2搜索列表功能测试

搜索功能测试主要是对搜索功能的搜索是否为空、字母搜索、模糊搜索、精确搜索、数字搜索、还有刷新功能等，搜索列表功能测试结果如表6-2所示：

表6-2 搜索列表功能测试结果

搜索操作 测试步骤 预期结果

搜索不能为空，且弹出不能为空窗口

可以进行字母字母

点击搜索框，输入字母并进行搜索索引，跳转至相应的歌曲界面

搜索，并进行索引，跳转至相应界面

进行相近字、模糊

点击搜索框，输入相近字或错字并进行搜索索引，跳转至相应界面

或部分错字搜索，且搜索成功并给出歌曲

点击搜索框，输入准确的歌曲名，搜索歌曲，点击播放

输入准确的歌曲名，搜索歌曲，点击播放

输入数字，搜索歌曲，点击播放

部分歌曲输入特殊字符

点击搜索框，输入特殊字符，进行搜索索引

特殊字符，显示搜索输入不正确

输入数字加字数字+字母

点击搜索框，输入数字加字母，进行搜索索引

真实结果

搜索不能为空，且弹出不能为空窗口

可以进行字母搜索，并进行索引，跳转至相应界面

进行相近字、或部分错字搜索，且搜索成功并给出歌曲

输入准确的歌曲名，搜索歌曲，点击播放

输入数字，搜索歌曲，点击播放

部分歌曲输入特殊字符，显示搜索输入不正确

输入数字加字空

点击搜索框，不输入字符并进行搜索索引

精确

数字

点击搜索框，输入数字，搜索歌曲，点击播放

母，搜索歌曲，母，搜索歌曲，点击播放，输出音频

点击播放，输出音频

输入数字加中数字+中文

点击搜索框，输入数字加中文，进行搜索索引

输入数字加中文，搜索歌曲，文，搜索歌曲，点击播放，输点击播放，输

搜索操作 测试步骤 预期结果

出音频

输入中文加字真实结果

出音频

输入中文加字中文+字母

点击搜索框，输入中文加字母，进行搜索索引

母，搜索歌曲，母，搜索歌曲，点击播放，输出音频

点击播放，输出音频

6.2 性能测试

性能测试是对一个完整的系统的最低要求，如果性能测试不能通过，那么该系统是一个较为落后的系统，且系统响应如果超时则该系统则是有缺陷的，结果如表6-3所示：

表6-3 系统性能测试结果

测试项

系统响应

数据库连接

API接口

跨域

预期结果

系统在10s内可以进行各项功能响应

可以正常连接MongoDB数据库

直接访问音乐软件官网的API接口

成功解决跨域问题

结果

完成

完成

完成

完成

总结与展望

通过对音乐在线网站的开发，让我充分的了解音乐的强大，查阅了很多资料，询问了很多关于技术方面的问题，还有对自身的技术方面的实力提升了不少，让我在就业方面增加了自己的筹码，对相关知识有了飞跃的长进，以前都是按照老师们的发布的任务去完成性的完成作业，这次的毕业设计让我在技术的海洋学会了游泳，也让我对前路充满希望，对相关技术有了更多的了解和巩固大学的知识。

在这段时间的设计课程中，不单单是完成老师对我们的要求，还主动去学习新的知识点，使得音乐在线网站不在局限于自身所会的技能还学会了新的技能，严格按照相关的要求进行在线音乐网站的创作，所说该网站还未完全成熟和创作盈利价值，但是我对该毕业设计还有充满信心的，让我在人生阅历上又有新的见识和技能，在这段摸索和探究的过程中，我想感谢我的指导老师叶小莺，没有叶小莺老师的指导我会极其艰难的完成我的毕业设计，也很难创新，所以我想再次感谢我的指导老师叶小莺！

致 谢

在本次的毕业设计和毕业论文中，我最想感谢的是我的指导老师叶小莺老师，在选题和选材方面叶老师给了我们充分的题材展示和内容展示，让我们在创造方面更贴合实际也更贴合社会和创新，老师充分的给了我们空间，在我们懒惰的时候策马鞭励我们，在我们实习的时候也孜孜不倦的督促我们，让我们的学业生涯末端也不松懈，不怠慢，老师似一盏明灯，在我对这个社会一无所知的时候照明了我的人生启航路，在疫情期间最困难的时候也没有对我们降低要求，让我们在这个疫情时期有充分的时间对我的毕业设计进行精心的审核和修改，是老师总在我的身后为我点亮学子的热诚，是老师在我最困难，陷入焦灼，陷入泥潭，想放弃的时候拉我一把，是老师的不辞辛苦让我读懂了李商隐的春蚕到死丝方尽，蜡炬成灰泪始干。在这里我真挚的感谢老师春风化雨般的教诲和匠人精神，在这里我想用白居易的诗词祝福我的指导老师叶小莺和学业生涯中的所有老师，令公桃李满天下，何用堂前更种花。

还要感谢我的家人，是我的家人把我辛勤抚养，让我在学海中有了支柱，让我可以没有后顾之忧，一心向学。是家人给了我无限的关怀，让我无温饱之忧，置身于学海之中，让我在低谷被社会鞭挞的时候，给了我爱的港湾，我如婴儿襁褓受到家人的无限关爱和保护。

其次，我也想祝福大学四年里的同学，同窗，朋友们，我们曾有过争执也有过互助，人之相识，贵在相知，人之相知，贵在知心，我想祝福所有大学期间帮助过我的同学和心心相惜的朋友们，祝你们春风得意马蹄疾，一日看尽长安花。你们是我的知心朋友也是我的良师益友，今日乐相乐，别后莫相忘。

最后，我想对自己说，离开学校踏入社会，让我带着一颗无限热诚的心，在这个广阔的天空闯出一片天地，我曾踏足山巅，也曾跌入谷底这两者都让我受益良多，我会牢记家人，老师长辈的教诲，做一个对社会有贡献的人，不忘初心，砥砺前行，长风破浪会有时，直挂云帆济沧海，最后祝福我自己一往无前虎山行，拨开云雾见光明。

参 考 文 献

[1] 朱婷婷.数字音乐付费背景下未来商业模式的探索[J].中国传媒大学经济与管理学院,2014(11):110-111.

[2] 吕英华.渐进式JavaScript框架的全家桶应用[J].电子技术与工程,2019(11):39-40.

[3] 沈锐,陈伯亨.HTML的技术现状与发展趋势[J].四川大学锦城学院,2018(11):154-154.

[4] 张俊兰,刘翼,铁宏军.基于CSS技术的网页设计应用研究[J].延安大学学报（自然科学版）,2010(09):34-39.

[5] 徐振民.校园网站设计与实现[J].安徽电子信息职业技术学院学报,2018(05):31-36.

[6] 王璐,崔保磊,潘红霞,赵莉,田宇.基于的在线设计开放平台研究与实现[J].信息技术与信息化,2019,(11):168-170.

[7] 陈岩.轻量级响应式框架应用分析[J].中国管理信息化,2018(02):181-183.

[8] 麦冬，陈涛，梁宗湾.轻量级响应式框架应用分析[J].信息与电脑（理论版）,2017(07):58-59.

[9] 郭倩颖.浅谈我国数字音乐版权问题[J].音乐时空,2015(07):96-97.

[10]叶青.网络数字音乐力量与我国唱片音乐产业转型[J].音乐传播,2012(02):38-46.

[11]熊琦.数字音乐付费制度的未来模式搜索[J].知识产权,2013(07):41-46.

[12] 肖洋，谢红焰.比较视域下的在线音乐出版盈利模式研究[J].出版科学.2014(12):78-82.

[13]周志军.市场规模稳步扩大，在线演艺强劲发展[N].中国文化报,2014-04-11（6）.