《软件工程（实践）（高起专)》22年6月课程考核-王永峰.docxVIP

软件工程（实践）

基于Web技术的音乐播放器设计

1引言

为了放松心情，让听歌更加方便快捷，没有广告等其他干扰使用，于是便有了自己制作一个音乐播放器的想法。面对广大的用户市场，制作一个便捷好用并且能够满足大部分用户需求的音乐播放器是一件很有意义并且造福于巨大群体的事情。网页音乐播放器的构筑开发，除基本的播放歌曲的功能。还增加了不同于传统音乐播放硬件的庞大音乐库，让用户能够投其所好，提供优质无损的音源供用户播放欣赏的同时也增加了曲目收藏。在多样化的需求实现后，让网页播放器的功能日趋完善，满足用户的音乐鉴赏、交流沟通的要求，为他们提供优质服务。

2技术选型

在网页播放器的开发与技术选择上，我们主要采用市面上广泛使用的、成熟的前端技术，在主流的三种框架vue.js、react.js、angular.js中，这三个主流框架分别代表着不同的三条路线，底层都是js语言，但是各个的实现方式都有不同。我们使用的是目前市场最火的vue.js，配套还应用了vuex+vue-router+axios。vue.js是一套构建用户界面的框架只关注视图层，易上手，有配套的第三方类库。提高开发效率，帮助减少不必要的dom操作。

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

vue-router是官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表;模块化的、基于组件的路由配置;路由参数、查询、通配符;基于vue.js过渡系统的视图过渡效果;细粒度的导航控制;带有自动激活的CSSclass的链接;HTML5历史模式或hash模式，在IE9中自动降级;自定义的滚动条行为。

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

JavaScript代码规范：变量名命名规则:变量名使用驼峰法来命名(camelCase)。空格与运算符使用规则:运算符(=+-*/)前后需要添加空格。代码缩进规则:使用4个空格符号来缩进代码块。对象定义的规则:将左花括号与类名放在同一行。冒号与属性值间有个空格。字符串使用双引号，数字不需要。最后一个属性-值对后面不要添加逗号。将右花括号独立放在一行，并以分号作为结束符号。

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

3需求分析

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

4数据库设计

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

图1数据库逻辑结构E-R图

4.1用户表单

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

4.2收藏曲目表单

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

4.3历史听歌表单

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

4.4评论表单

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

5模块功能设计与实现

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

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