马杰瑞 王风硕

摘要：该文首先进行了系统的需求分析，使用E-R图绘制出需求模块，使用MySQL数据库，node.js框架及相关技术，完成基于web的音乐播放器后端的设计与实现。

关键词：前端开发;node.js;音乐播放器;MySQL

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

文章编号：1009-3044（2021）35-0072-03

1 引言

为了放松心情，让听歌更加方便快捷，没有广告等其他干扰使用，于是便有了自己制作一个音乐播放器的想法。面对广大的用户市场，制作一个便捷好用并且能够满足大部分用户需求的音乐播放器是一件很有意义并且造福于巨大群體的事情。

网页音乐播放器的构筑开发，除基本的播放歌曲的功能。还增加了不同于传统音乐播放硬件的庞大音乐库，让用户能够投其所好，提供优质无损的音源供用户播放欣赏的同时也增加了曲目收藏。在多样化的需求实现后，让网页播放器的功能日趋完善，满足用户的音乐鉴赏、交流沟通的要求，为他们提供优质服务。

2 技术选型

在网页播放器的开发与技术选择上，我们主要采用市面上广泛使用的、成熟的前端技术，在主流的三种框架vue.js、react.js、angular.js中，这三个主流框架分别代表着不同的三条路线，底层都是js语言，但是各个的实现方式都有不同。我们使用的是目前市场最火的vue.js，配套还应用了vuex + vue-router + axios 。

vue.js是一套构建用户界面的框架只关注视图层，易上手，有配套的第三方类库。提高开发效率，帮助减少不必要的dom操作。

vuex一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化[1]。

vue-router是官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表;模块化的、基于组件的路由配置;路由参数、查询、通配符;基于vue.js过渡系统的视图过渡效果;细粒度的导航控制;带有自动激活的CSS class 的链接;HTML5 历史模式或 hash模式，在IE9中自动降级;自定义的滚动条行为[2]。

axios：可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：在浏览器中创建XMLHttpRequest请求;在node.js中发送http请求;支持Promise API;拦截请求和响应;转换请求和响应数据;取消要求;自动转换JSON数据;客户端支持防止CSRF/XSRF（跨域请求伪造）。

JavaScript 代码规范

变量名命名规则：变量名使用驼峰法来命名（camelCase）[3]。

空格与运算符使用规则：运算符 （ = + - * / ） 前后需要添加空格。

代码缩进规则：使用 4 个空格符号来缩进代码块。

对象定义的规则：将左花括号与类名放在同一行。冒号与属性值间有个空格。字符串使用双引号，数字不需要。最后一个属性-值对后面不要添加逗号。将右花括号独立放在一行，并以分号作为结束符号。

语句规则：1）简单语句：一条语句通常以分号作为结束符。2）复杂语句：将左花括号放在第一行的结尾。左花括号前添加一空格。将右花括号独立放在一行。不要以分号结束一个复杂的声明。

3 需求分析

本项目的是开发一个基于网页可以播放主流的音乐文本格式的播放器。能控制播放，暂停，停止，音量控制，选择上一曲，选择下一曲，歌曲列表文件的管理操作，在线播放，读取个人信息等多种播放控制。

4 数据库设计

数据库逻辑结构E-R图如图1所示。

4.1 用户表单

该表为核心表，用于保存全部注册用户的昵称、账号、密码等基础信息。其中唯一账号为主键。

4.2 收藏曲目表单

该表用于保存用户个人收藏歌曲，除账号主键外，还保存了歌曲id、歌曲名、歌曲链接。

4.3 历史听歌表单

该表包含用户全部听歌历史，在用户选择播放时会进行更新数据，同收藏曲目表结构相同。

4.4 评论表单

该表包含歌曲下的全部评论，以歌曲id为主键，保存了歌曲下用户的全部评论内容同时保存评论时间，在用户评论下方其他用户可以进行回复，传入数据库中，分别以回复用户和回复内容保存在数据库中。

5 模块功能设计与实现

通过线上线下的调查归纳与数据收集，并且进行需求分析后，该在线音乐播放器主要分为五个部分，进行模块化开发。分别是：评论管理模块;收藏管理模块;用户安全管理模块;数据库管理模块;歌曲管理模块。

其中评论模块主要包括发布评论;删除评论;回复评论这三个功能。收藏管理模块包括对喜爱歌曲的增删功能。用户安全管理模块主要包括：用户账号的登录;注册;注销以及对个人主页的编辑。数据库管理模块用于保存用户使用本在线播放器的数据：用户表单;收藏歌曲表单;历史听歌歌单表单;评论表单。歌曲管理模块主要负责用户的基础音乐播放器使用实现，包括：歌曲详情页;播放歌曲;切换曲目;检索曲目;以及推荐歌单。

功能模块分析如图2所示。

5.1 用户管理模块

5.1.1 注册

用户在使用本在线音乐播放器时，最先接触的功能，用户所注册的账户用于保存用户的个人基本资料以及后续使用播放器时产生的各种与用户相关的数据。用户所输入的账户名与密码将保存到后端数据库中。

5.1.2 登录

注册成功后，页面将自行跳转到登录窗口，登录窗口也可在网页主页自行点击进入。在用户输入个人用户名与密码之后，服务端将数据与数据库中保存的账户信息进行比对，若账户与密码匹配成功，显示登录成功，并成功进入主页，服务端将拉取数据库中与该用户相关的历史数据，供用户使用访问修改。

5.1.3 个人主页

在用户登录后，服务端将从数据库拉取用户使用历史数据，包括历史歌单、收藏曲目与推荐曲目。

5.1.4 注销

注销功能用于用户在使用播放器后，保护个人隐私的功能，该功能将账户从登录状态，返回至非登录状态，页面将进行刷新，并且清除用户使用数据。

关于服务器连接数据库的node.js代码，这里使用管理员身份用户对用户表实现增删改查功能为例进行演示。

代码如图3所示。

5.2 歌曲管理模块

5.3.1 展示

该功能用于播放器首页，主界面设计得非常简洁大方，能够让用户快速上手 使用，极佳的人性化设计能让用户快速直观地找到自己感兴趣的歌曲或MV。

5.3.2 检索

检索功能能让用户在众多歌曲中尽快找到自己所想寻找的曲目，支持歌名搜索与歌手搜索。节约用户在庞大的歌曲库中依次寻找的时间，提升使用体验。

5.3.3 播放＼暂停

音樂播放器的基础功能，用户可在主界面直接双击曲目播放，也可在添加歌单后直接播放，该功能控制基础的播放与暂停。

5.3.4 歌曲推荐

用户可以在歌曲推荐中，直观地看到实时更新的最新音乐曲目以及歌曲MV，并且还有根据个人喜好推荐的歌单，以及大量用户收藏的曲目推荐。

5.3.5 切换播放

切换播放可以进行切换上一首曲目播放或是下一首曲目播放。作为一个功能进行了单独的封装，单独制作了循环播放或随机播放的判断，在用户选定了播放顺序后，点击切换播放按钮，该功能将进行播放另外一首曲目，并将当前进度条归零。

5.3 评论管理模块

5.3.1 发布评论

用户在歌曲详情界面，可以在评论区，输入文本及表情，发布自己的文章。服务器将文本保存至个人数据库中，并发布至网页供其他用户查看、评论，发表的文章将包含发布时间及其发布用户昵称。

5.3.2 删除评论

用户在发表评论后，可对自己的个人评论进行删除操作，该操作会同步至后端数据库，删除该条评论数据，该操作不可撤回。

5.3.2 回复

用户可以在自己感兴趣的评论下面跟帖，回复、评论别人的文章，进行交流。

5.4 收藏管理模块

5.4.1 添加收藏

在用户使用过程中，在遇到自己喜欢的歌曲时，可在歌曲详情页进行收藏保存。同时，服务器会将歌曲信息保存至该用户个人歌曲收藏表中，并在个人主页的歌曲收藏表中显示出来，在后期使用中便于用户快速切换使用该歌单。

5.4.2 删除收藏

在收藏歌单中可以删除已收藏曲目，该操作也会同步至数据库，更新个人收藏歌单表中的数据。

6 结束语

本文介绍了基于Web的音乐播放器的后端设计与实现，网页在线音乐播放器在满足调查后用户的基本需求的同时，也进行了简化，提升用户的使用体验。该播放器基于vue.js框架，使用了模块化编程，引用了数据驱动化开发的思想，极大地降低了后期更新换代与维护运营的成本。该音乐播放器还有可以更深入改进的地方，例如：加入大数据算法分析用户收藏表单，将分析后的数据与曲库比对，然后更新推送用户可能喜欢歌曲。在后续也将陆续增添各种功能，并且优化系统算法，减少播放器的故障。也会采纳用户使用后的建议与意见，争取完善出一个贴合用户使用的优秀播放器。

参考文献：

[1] 尤雨溪.Vuex [EB/OL].[2021-04-25].https：//vuex.vuejs.org/zh/.

[2] 尤雨溪.Vue Router Vue.js官方路由[EB/OL]. [2021-04-25].https：//router.vuejs.org/zh/.

[3] Wall L，Schwartz R L.Programming Perl[M]. O′Reilly Associates Inc，1991.

【通联编辑：梁书】