林陈佑康 王风硕

摘要：随着互联网的不断发展进步，网络逐渐成为人们日常生活的必需品，加上生活节奏的不断加快、生活压力的增大，听音乐也成为人们娱乐、放松的主要方式之一。该文阐述了基于Web开发的一个在线的音乐播放器网站前端的设计与开发，主要使用了Vue.js框架，应用Element-UI组件，完成了整个在线音乐播放器网页的前端页面搭建，是一个可以实现用户自定义注册、登录账号，可以自由听、搜索和收藏音乐，评论歌曲的在线音乐播放器网站。

关键词：前端开发;Vue.js;Element-UI;音乐播放器

中图分类号：TP311     文献标识码：A

文章编号：1009-3044（2021）36-0089-03

开放科学（资源服务）标识码（OSID）：

1引言

在互联网不断高速发展的当下，人们的听歌模式已经从传统的线下设备改变到数字音乐，数字音乐是依托互联网技术传播和存在的，它可以很方便地被下载、播放、传播、复制等[1]。人们想在现在这样的快节奏的生活方式中，找到良好的消遣、放松心情的方法，而听音乐正是目前娱乐的主要的方式之一，随着听音乐的用户群体数量越来越大，导致用户对音乐播放平台有各种各样的需求，所以构建与开发一个在线音乐播放器，是当今社会的必要需求。

在线音乐播放器网站的开发，对于每一个用户来说，既没有大量的广告干扰，还可以找到符合自己听歌口味的歌曲，由于是数字音乐，所以其音质也不会被改变，这样就可以有一个良好的听歌体验。网站基于用户的多样化的需求，让自身的定位更加明确，给用户带来更良好的使用体验。

2 技术选型

目前，在Web的开发中，普遍采用前后端分离的技术进行实现，在前端的技术中，主要有Angular、React、Vue[2]。而本文前端的开发主要使用的是Vue.js框架，加上Element-UI组件库，再搭配上JavaScript、CSS等技术，来实现了整个在线音乐播放器网页的前端的布局、样式以及交互操作。

Vue.js：这是一个轻巧、高性能、可组件化的MVVM库，其主要特征在于灵活性突出具有良好的使用性能[3]。Vue.js作为一个构建数据驱动的渐进式JavaScript框架，采用的是自底而上的增量开发的设计。Vue的核心库只关注图层，能让网页的前端开发更加容易，并且十分容易学习，还可以与其他的库或者已完成的项目进行整合。同时Vue.js还提供vue-cli脚手架，所以构建一个新项目并运行起来是十分轻松的。

Element-UI：这是基于Vue的一个ui框架，该框架基于Vue.js提供了很多已经封装好的组件库，其基本涵盖了前端页面所需的所有组件，可以方便我们快速开发前端页面。因为Element-UI使用简单的特点，所以其提供的组件的参考实例代码都可以直接进行复制，并粘贴到自己所构建的项目中使用。

3 需求分析

随着互联网的不断进步，使得网络成为人们生活中的必需品，再伴随生活节奏的加快，听音乐成为人们消遣、娱乐，减轻疲劳，放松，休息的主要方式之一。所以开发一个在线的音乐播放器网页来让人们放松，拓宽人们的娱乐方式是大势所趋。本在线音乐播放器的目标受众是所有使用电脑端的用户，而目标受众基本覆盖了每个年龄阶段的用户，所以本在线音乐播放器以操作简单易行、功能完备、页面清爽易懂为目的进行设计与开发，以满足各个年龄层的用户的基本需求。目前国内的市场上存在各种各样的音乐播放器，每个音乐播放器都有自己的特点，而本在线音乐播放器参考了当下市场最热门的同类型的音乐播放器平台的设计，把基本的需求大致分为：用户的注册、登录，用户管理，评论管理，收藏管理，歌曲管理等。

4 功能模块分析

本在线音乐播放器网站的开发主要分为了五个部分：用户安全管理模块，评论管理模块，歌曲管理模块，收藏管理模块，数据库管理模块。用户安全管理模块包括用户账号注册，登录账户，用户注销，用户个人主页。评论管理模块包括用户在歌曲详情页发布评论，删除评论，回复评论。歌曲管理模块包括播放歌曲、MV，切换歌曲，历史听歌记录歌单，检索歌曲、歌手等，推荐实时最新发布的歌曲，推荐各种各样的歌单。收藏管理模块包括增加歌曲到收藏列表，删除收藏列表中的歌曲。数据库管理模块是整个在线音乐播放器网页的主要数据内容来源，包括用户表单，收藏歌单表单，历史听歌歌单表单，评论表单。具体功能模块图如图1所示。

5模块功能设计

5.1用户安全管理模块

5.1.1 注册

用户没有账号时需要进行注册账号，当用户点击注册按钮，切换到注册页面，输入自己的账号密码后确认。后台获取输入的内容后传递给服务器并发送请求。若服务器请求成功，便把获取到的内容保存到后端数据库的用户表单里，并返回注册成功的消息;若请求失败，则发送注册失败的提示。

5.1.2 登录

用户需登录才能进入网站的主页面，当用户点击登录按钮，切换到登录页面，输入自己注册的账号密码后确认。后台获取输入的内容传递给服务器并发送请求。若服务器请求成功，便把获取到的内容与后端数据库中的用户表单中保存的账号密码进行比对，并返回对应的结果;若请求失败，则提示登录失败。

5.1.3 注销

用户点击退出按钮，即从登录状态变为非登录状态，页面将直接刷新并返回到登錄页面。

5.1.4 个人主页

用户需登录后才能进入个人主页。用户可以在个人主页中看到自己的用户信息，以及收藏的歌曲歌单。

5.2 歌曲管理模块

5.2.1 展示

在线音乐播放器首页的页面展示，例如首页上的歌曲推荐板块、歌单推荐板块等。点击每一首歌曲会进入到相对应歌曲的歌曲详情页中，在歌曲的基本信息介绍下方是歌曲的评论区，用户可以自由发布评论或者对其他用户的评论进行回复评论操作。

5.2.2 检索

用户在搜索框输入需要检索的内容，例如歌曲、歌手等，点击搜索按钮后，搜索成功则显示搜索到的内容。若搜索项不存在，则提示消息没有搜索到相关的内容。

5.2.3 播放

用户在首页双击歌曲时，可以进行音乐的播放;也能在播放器歌单列表中点击歌曲进行播放。可以在播放器中点击切换播放与暂停。

5.2.4 歌曲推荐

用户可以在在线音乐播放器首页中看到实时最新发布的歌曲、MV推荐，以及各种各样的歌单推荐。

5.2.5 切歌

用户点击切歌按钮时，可以进行歌曲的上一首或者下一首进行切换。把切歌功能进行封装，利用条件判断是随机播放还是顺序播放，再判断是切换上一首还是下一首，最后把歌曲播放时间、进度条归回到原位进行播放。切歌功能关键代码如下。

//歌曲上下首封装

skipFn（type） {

switch （this.playType） {

case 2： // 随机播放

this.index = Math.floor（Math.random（） * this.songList.length）;

break;

default：

if （type == "skipBack"） {

this.index - 1 >= 0 ？ this.index-- ： 0;

} else {

this.index =this.index + 1 >= this.songList.length

？ this.songList.length - 1

： this.index + 1;

}

break;

}

this.song = this.songList[this.index];

this.playing = true;

setTimeout（（） => {

this.totalTime = "00：00";

audio.play（）;

}， 100）;

}，

// 上一首

skipBack（） {

this.skipFn（"skipBack"）;

}，

// 下一首

skipForward（） {

this.skipFn（"skipForward"）;

}，

5.3 评论管理模块

5.3.1 发布评论

用户在歌曲详情页中的评论区，输入评论的内容，点击发布按钮时，后台获取评论信息并向服务端发送请求。若服务器请求成功，评论的信息会获取当前发布的时间并发布到评论区内，同时传递到后端数据库保存到评论表单中;若请求失败，则提示发布失败。

5.3.2 删除评论

用户可以在评论区看到自己发布的评论，点击删除按钮进行删除操作，同时在数据库的评论表单中删除当前用户的评论信息。

5.3.3 回复

用户可以在评论区看到所有已发布的评论，点击回复按钮进行评论的回复或者评论其他用户的评论，回复的评论信息也会被保存在数据库的评论表单中。

5.4 收藏管理模块

5.4.1 添加收藏

用户在歌曲详情页中的点击收藏按钮时，收藏的歌曲的信息会保存到数据库中的收藏歌曲表单中，并且会显示在个人主页的收藏歌曲列表中。

5.4.2 删除收藏

用户可以在个人主页的收藏歌曲列表中看到自己已经收藏的歌曲，点击删除按钮进行删除操作。

5.5 数据库模块

导入用户表单、收藏歌曲表单、历史听歌歌单表单、评论表单到数据库中。数据库ER图如图2所示。

6 结束语

本文基于Web构建的音乐播放器前端的设计与实现，在线音乐播放器网页的雏形和大部分功能已经基本实现，满足了用户使用在线音乐播放器的基本需求。通过使用Vue.js框架开发的在线音乐播放器网页前端，不仅可以合理地布局，还可以方便维护网站各个模块。同时本在线音乐播放器还可以进行更进一步的深度的研究与开发，例如根据每个用户的大数据分析与推送，移动端的App开发等。所以在后续的工作过程中，将不断地完善、优化该在线音乐播放器网站，致力于提高用户黏性，从而提高本在线音乐播放器的价值，给用户带来更好的使用体验。

参考文献：

[1] 刘伟.浅谈改革開放以来数字音乐的产业化发展[J].产业科技创新，2020，2（5）：5-8.

[2] 陶琳.基于Spring Boot和Vue框架的高校实验室耗材管理系统的分析与设计[J].电脑知识与技术，2021，17（13）：83-85.

[3] 沈皎佶.Vue.js技术在移动应用可视化平台网页设计中的应用[J].数码世界，2020（9）：96-97.

【通联编辑：梁书】