【《基于Vue的移动端音乐网站设计》11000字（论文）】

基于Vue的移动端音乐网站设计摘要本设计完成了基于移动端WebApp的音乐网站的设计。该软件系统前台主要服务于用户，后台针对管理员使用。其中，前台页面使用前端技术Vue.js+ES6+Vuex开发，协同CubeUI进行页面搭建和渲染。前台主要功能包含注册、登录、歌单分类（官方歌单、达人歌单、最新专辑）、歌手模块、排行榜模块、歌曲收藏、歌曲搜索、音乐播放器等。后台管理系统主要包含的模块有用户管理、歌单管理、音乐管理、歌手管理和轮播图管理。后台搭建使用热门框架springboot。在巨大的市场需求下,许多音乐平台争相涌出。然而,不同音乐平台的曲库不同,用户为了能够听到想听的音乐就需要下载各种各样的App,这会给用户带来困扰。本系统是一款轻量切曲库强大的移动端WebApp,让用户不需下载多个App,就可以听想听的歌曲，正好弥补了其他音乐软件的不足。关键词：Vue.js，音乐，WebApp，移动端，数据库目录TOC\o"1-3"\h\u91681绪论 绪论研究背景及意义随着互联网的发展以及智能手机的不断升级，人们的互联网娱乐活动也越来越丰富多彩，以音乐为主的休闲娱乐模式已渗入每个人的生活当中。用户手机里的众多软件中，肯定会有一个音乐软件。人们对于音乐的需求，使得网络中出现了各色各样的音乐网站。然而我国的音乐网站市场混乱，各个音乐平台的曲库数量也不同，用户们不能同时在一个网站享受到所有喜欢的音乐。用户们经常为了听喜欢的歌曲或者钟爱的歌手的作品，而去下载不同的音乐软件，这就导致每个用户可能同时有好几款音乐软件，时间长了，歌曲多了，就记不清歌曲在哪个音乐软件里。这大大降低了用户的友好度。例如：如果用户喜爱的两首歌分别在不同的平台，那么当用户听的时候，只能把一个个软件打开找到这首歌去听，然后再去另一个平台听。这样不仅使用的时候体验感不好，而且多个软件还占用很多不必要的内存空间。为了使上述问题很好的解决，开发了一个基于Vue的移动端WebAPP音乐网站，该音乐软件会收录所有音乐，解决用户们使用多个音乐软件的困扰。并且该网站是运行在移动端设备的浏览器或者内嵌在其他原生APP中的。对于开发人员来说，可以一套代码多端使用，减少开发人员的投入成本；对于用户来说减少了下载的操作和内存占用空间，更重要的是用户体验得到好评。基于以上阐述，随着前端技术的不竭发展和人们不停的创新，该产品在未来将会有很大的发展前景以及市场空间。研究现状根据调查，用户更多选择在手机听歌，因为这是最便携的方式。在各式各样的的软件中，音乐软件需求量逐日攀升，自然催生更多音乐软件的产生。不过他们的缺点是音乐曲库数量不全，很多歌曲都没有相应的版权，导致用户只能同时下载多个音乐软件来满足听歌需求。多个软件占用手机内存过大以及听歌切换软件的弊端，致使用户体验感严重下降。随着移动端软件的疾速发展，移动端应用越来越被人们所喜爱。许多基于桌面Web的应用系统需适配移动端。对技术开发人员来说，移动端App通常需要根据不同的系统，开发出多套代码，原生开发技术难度大，人力财力资源消耗过大。这就会出现App耗时、费力甚至亏损的状况。而且对于用户来说，下载那么多应用，却几乎不怎么使用，加重了手机负载，使手机不流畅，卡顿。那么WebApp作为H5新型的一类技术和推广，可以很容易地适配所有移动终端的机型，实现了一套代码，多端运行，开发效率和投入成本都有了很大提升。对于用户来说也不需要去下载应用，打开网页就能完成自己想做的事情。那么针对以上问题，有必要设计出一款移动端WebApp音乐网站。系统核心技术Vue.js框架Vue作为近年来前端知名技术框架之一，深受前端开发者的喜爱。因为它有着轻量、简单易上手、API文档齐全等特点。它的核心思想是数据和视图同步更新，在ECMAScript5中利用Object.defineProperty方法实时监听数据的变化，在最新Vue3中使用了ECAMScript6的Proxy方法来实现数据劫持REF_Ref2800\r\h[1]。VueRouterVueRouter用于完成前端单页面路由，通过组件切换来进行路径切换REF_Ref2908\r\h[2]，不需要重新向页面发起请求，就可以更新视图。VuexVuex是官方实现的全局状态管理方案REF_Ref2983\r\h[3]。Vuex的关键就是state存储，其中包含了应用中的大部分状态参数，在大型项目中使用它可以很好的解决组件间的传值问题。Vuex数据流程图如图2-1所示。图2-1Vuex数据流程图ES6ES6,全称ECMAScript6.0，ES6中新增了很多特性，弥补了ES5的很多不足之处，同时ES6的写法也更加优雅灵活。Axios请求库Axios是一个简洁易用的请求库。它底层使用Promise来封装XHR，避免了传统的回调地狱问题。axios有庞大的团队支持，相关npm包数量一直在增长。Better-ScrollBetter-Scroll是用JavaScript书写的，无须其他底层语言。它主要是用来处理电脑端和手机端各种滚动场景需求的插件。开发环境 开发系统：Windows10开发工具：VisualStudioCode、lntelliJIDEA 环境版本：如图2-2所示图2-2主要开发环境版本信息软件分析功能分析 经过对该软件系统进行分析后，主要实现的功能如下：（1）用户注册：用户可以通过手机号作为唯一身份标识来进行注册，生成自己的账号，用于登录该软件。（2）用户登录：注册完，用户便可使用注册的手机号以及密码登录系统进行操作。（3）收藏：登录后，用户可对喜爱的歌曲进行收藏，收藏后将全部显示在收藏中心。（4）首页：网站首页包括轮播图、官方歌单、达人歌单和最新专辑这四部分组成。（5）歌手：进入歌手路由，会展示全部歌手列表。（6）排行：排行榜模块分为飙升榜、热歌榜和新歌榜，飙升榜是按照用户对歌曲的搜索量排序出现，热歌榜是根据用户对歌曲的播放量排序出现，新歌榜是歌手发布的最新音乐排序。（7）搜索：支持对歌手和歌曲的模糊搜索。（8）歌单详情组件：支持歌手详情列表、歌单详情列表的呈现。（9）播放页面：播放页面：展示歌手名字、歌曲名字，支持进度条拖拽播放，歌曲的前进、后退、暂停，歌曲单曲循环和随机播放。（10）退出登录：此功能用于用户退出登录或切换账号。需求分析本音乐软件主要是采用目前比较风行的前端后端分离的开发模式，搭载H5兴起的WebApp技术框架REF_Ref3091\r\h[4]。本音乐前台主要有首页、歌手、排行、搜索、收藏以及登录注册模块。用户不但可以多端播放自己想听的歌曲，而且免去了下载App的痛苦。用户可以在该音乐软件随时听自己想听的歌曲，随时搜索自己感兴趣的歌曲并且收藏到歌单里。后台系统包括用户管理、音乐管理、歌手管理、歌单管理和轮播图管理五部分组成。管理员对用户、音乐、歌手和歌单模块进行添加修改和删除，并定期维护系统。技术可行性Vue.js是一个轻量、简洁的框架，对新手非常友好REF_Ref3156\r\h[5]。MVVM模型如图3-1所示。Vue结合了AngularJS和ReactJS的优点，相比前两者，更容易使用。尤雨溪提供了很多中文文档，这更有利于Vue的快速发展。Vue搭建很容易，能满足快速上线，目前很多大公司都在使用Vue。图3-1MVVM模型操作可行性本音乐软件的宗旨就是为用户打造出一款便捷、轻量、简洁、大气的音乐软件。即便是不会操作手机的人也能按照系统提示和操作说明书很好的使用该音乐软件。本系统适应于各个年龄段的人，各个模块的操作是符合所有用户的操作习惯的。本着这些原则，该音乐软件在操作上是可以实施的。经济可行性经济方面的话主要是考虑开发成本和后期维护、运营成本，目前本音乐软件对于用户是免费使用的，所以在软件的前期资金投入会比较大，但是鉴于现在是流量、信息爆炸时代，流量至上已是是每个互联网人的共识。于是我们可以随着后期用户数的增长，采用广告引流的方式来提供收益。在本音乐软件投入使用后，带着自身巨大的优势，必然能为用户创造出良好的用户体验。因此，经济上是可行的。 概要设计功能模块划分本WebApp音乐软件分为前台页面和后台运营管理两个部分，用户通过在手机号进行注册后，通过输入账号和密码登陆到软件界面，该WebApp主要分为五部分，第一部分为首页推荐信息，有轮播图实时展示，有歌单模块展示，歌单模块分为官方、达人和最新专辑三部分。第二部分为歌手模块。该模块展示了所有歌手列表。第三部分为排行榜，排行榜部分分为飙升歌曲、热歌和新歌三部分，飙升歌曲是用户对歌曲搜索产生的排行，热歌是用户对歌曲多次播放产生的排行，新歌是歌手发布的最新音乐实时排行。第四部分是收藏，当用户登录了之后，可以收藏歌曲，收藏的歌曲会在收藏中心以列表的形式存在。下次登录之后，用户便可以在收藏模块听歌。最后是搜索，用户能够通过歌手或者歌曲名模糊搜索，迅速找到想听的歌曲。前台系统结构图，如图4-1所示，后台系统结构图，如图4-2所示。图4-1前台系统结构图图4-2后台系统结构图前台功能模块设计（1）注册用户通过手机号生成唯一身份标识的账号，进行登录。（2）登录用户输入注册好的手机号及密码，成功进入系统。登录注册功能模块流程图如图4-3所示。图4-3登录注册流程图（3）首页在首页上有实时更新的轮播图，有官方音乐歌单、达人音乐歌单和最新专辑三个版块，供用户选择。（4）歌手本模块汇总了所有歌手及音乐，可以听相关歌手的所有歌曲。（5）排行排行榜模块又分为三个版块：飙升榜、热歌榜、新歌榜，用户可以清晰明了的对他们有个分类。（6）收藏在播放页面拥有一个收藏功能，当用户登录过后，便可以把音乐添加到收藏列表，之后用户便可以听收藏的歌单。收藏功能流程图如图4-4所示。（7）搜索用户可以通过歌手或者歌名搜索出相关音乐。后台功能模块设计（1）系统登录管理员输入账号密码，成功登入系统后，负责对用户模块、音乐模块、歌手模块、歌单模块和轮播图模块进行管理。（2）用户管理管理员在此模块对用户的信息进行添加，删除，修改操作。（3）音乐管理管理员在此模块对音乐进行添加、修改、删除和搜索操作。（4）歌手管理管理员在此模块对歌手进行添加、修改、删除和搜索。（5）歌单管理管理员在此模块对歌单进行添加、修改、删除、搜索以及把相关音乐关联到歌单。（6）轮播图管理管理员在此模块可以添加轮播图、修改轮播图、删除轮播图。数据库设计ER图设计该数据库设计的由音乐实体、歌单实体、歌手实体、轮播图实体、用户实体和收藏实体五大部分构成，他们之间的关联性如图4-5所示。音乐实体代表着每首歌曲的相关信息，歌单实体是歌单的相关信息，并且音乐实体和歌单实体具有关联性，可以把音乐关联到歌单里面；轮播图展示的是音乐的宣传图，音乐和轮播图是一对一的关联关系；每个用户实体有自己的相关账号信息，同时用户还拥有收藏功能，所以用户实体和收藏实体是逐一对应的关系。图4-4收藏功能流程图图4-5系统E-R图逻辑结构设计本音乐软件内含6张数据表，分别是用户表、歌单数据表、歌手数据表、音乐数据表、收藏数据表、轮播图数据表。数据表如下所示：（1）用户表(User)该表用来存放用户的手机号、密码等，表格结构如表4.1所示。表4.1用户数据表名称数据类型允许空值是否主键说明user_idIntNPK用户idnameString用户名authorString用户头像phoneString手机号passwordString密码create_timeDate创建时间update_timeDate更新时间（2）歌单数据表（SongList）该表用来存储歌单信息，表格结构如表4.2所示。表4.2歌单数据表名称数据类型允许空值是否主键说明song_list_idIntNPK歌单idsong_list_typeString歌单类型song_list_nameString歌单名称song_list_imagesString歌单图片musicsString音乐列表create_timeDate创建时间update_timeDate更新时间（3）歌手数据表（Singer）该表用来存储歌手的名字、歌曲等信息，表格结构如表4.3所示。表4.3歌手数据表名称数据类型允许空值是否主键说明singer_idIntNPK主键singer_nameString歌手名字singer_imagesString歌手图片play_timesString播放次数create_timeDate创建时间update_timeDate更新时间（4）音乐数据表（Music）该表用于音乐管理和存储，表格结构如表4.4所示。表4.4音乐数据表名称数据类型允许空值是否主键说明music_idIntNPK主键music_nameString音乐名字singer_idInt歌手idsinger_nameString歌手名字music_imagesString音乐图片audioString播放次数search_timesString搜索次数play_timesString播放次数create_timeDate创建时间update_timeDate更新时间（5）收藏数据表（Collect）该表用于音乐的收藏存储与管理，表格结构如表4.5所示。表4.5收藏数据表名称数据类型允许空值是否主键说明collect_idIntNPK主键user_idInt用户idmusic_idInt音乐idmusic_nameString音乐名singer_idInt歌手idsinger_nameString歌手名字music_imagesString音乐图片audioString音频create_timeDate创建时间update_timeDate更新时间（6）轮播图数据表（Carousel）该表主要用于对轮播图图片和名字进行存储和管理，表格结构如表4.6所示。表4.6轮播图数据表名称数据类型允许空值是否主键说明carousel_idIntNPK主键carousel_nameString轮播图名称music_nameString音乐名carousel_imagesString轮播图图片create_timeDate创建时间update_timeDate更新时间详细设计登录注册模块（1）模块功能用户初次使用该软件需先成功注册一个账号，当用户注册成功后，切换到登录模块，输入手机号和密码，点击按钮触发HTTP请求，服务端处理返回的请求。前台通过Axios封装的POST方法传递手机号和密码到服务端进行判断和校验。成功后，接口返回一个唯一标识Token，前台把该Token标识存储到本地缓存中，之后接口请求时，部分接口的请求头要带上Token字段。（2）模块设计思想用户在前台登录模块分别输入手机号和密码，点击提交触发HTTP请求，把数据发送给服务端，服务端收到数据之后，会去数据库查找比对，如果有该用户，再比对密码是否一致，如果密码正确，服务端校验成功，那么前台可以控制跳转到指定页面。如果密码错误，则会弹出用户密码输入错误的对话框，如果数据库没有该用户信息，那么用户需先进行注册，然后再进行登录。此模块效果图如图5-1所示。图5-1登录注册歌单模块（1）模块功能用户在歌单模块能选择喜爱的音乐模块，该模块设计有官方歌单、达人歌单和热门歌单三部分，选择对应的歌单后，跳转到对应的列表详情页，可以进行列表播放。（2）模块设计思想在首页中会展示歌单模块，依次是官方歌单、达人歌单和热门歌单。鉴于这三个模块的歌单详情页布局是一样的，所以可以封装出一个musicList组件，并向外暴露相关接口参数，父组件可以给musicList组件传递不同的值来进行渲染，封装组件可以降低代码的维护难度，同时也避免了代码的重复拷贝，给开发人员减轻了工作量。首页歌单模块如图5-2所示，歌单详情页如图5-3所示。图5-2歌单模块图5-3歌单详情模块歌手模块（1）模块功能歌手模块用于展示所有歌手信息，点击某歌手进入该歌手的列表详情页，显示该歌手的所有歌曲。（2）模块设计思想歌手列表详情页复用musicList组件，只需要把歌手详情页的数据传递给musicList组件即可。歌手模块如图5-4所示。图5-4歌手模块排行榜模块（1）模块功能本模块主要分为三部分，分别是飙升类、热歌类和新歌类。（2）模块设计思想飙升榜是根据歌曲的播放次数生成的排名顺序，热歌榜是根据用户对歌曲的搜索次数生成的排名顺序，新歌榜是根据歌手发布的最新音乐的时间进行排名生成的排名顺序。排行榜模块如图5-5所示。飙升榜、热歌榜和新歌榜三部分的列表详情同样复用music-list组件。图5-5排行榜模块搜索模块（1）模块功能该模块用于对歌曲的模糊搜索。（2）模块设计思想该模块主要用来实现用户对歌曲的搜索查询，支持歌名和歌手的模糊搜索。当用户进行搜索时，返回的搜索结果的歌曲，其播放次数也会分别加一，用于生成热歌榜音乐排名。搜索模块如图5-6所示。图5-6搜索模块收藏模块（1）模块功能在用户Token没失效的情况下，可收藏喜爱的歌曲，收藏后的歌曲会在收藏列表里。（2）模块设计思想点击收藏功能、收藏中心和取消收藏只有用户登录后才可进行操作。在用户登录成功的条件下，前台请求该接口时，请求头要携带Token(令牌)，用于验证用户身份，避免身份伪造。后台获取令牌后，进行判断，如果令牌存在且未过期，则请求成功。如果令牌已过期或者不存在，则会跳到登录界面，重新获取用户令牌REF_Ref3414\r\h[6]。收藏模块如图5-7所示。图5-7收藏模块播放页面（1）模块功能该模块是音乐播放器，有播放模式切换、进度条、前一首歌、后一首歌、停止播放、收藏等功能。（2）模块设计思想用户点击歌曲进入播放器页面时，后台会返回歌曲的时长信息，可以根据当前播放时间和总时长的百分比来动态显示音乐的进度条，进而根据度条的拖动来动态的改变音乐的播放进度，也可以暂停音乐、前进和后退、改变列表播放模式、收藏音乐等。点击前进和后退实际上操作的是vuex中存储的播放列表，用一个参数来记录当前播放的音乐，当前进的时候参数需加一，后退的时候参数需减一。播放形式有多种，其中随机播放用到了Fisher–Yatesshuffle洗牌算法的思想。同时播放页面支持普通播放模式和迷你播放模式两种，可以随意切换。播放页面如图5-8所示。图5-8播放页面用户管理（1）模块功能管理员通过用户管理模块在后台对用户信息进行修改和删除，当用户数据量增多的时候，会出现分页，这时候可以通过搜索昵称或手机号快速找到该用户，实现对用户的操作管理。（2）模块设计思想管理员可以通过点击事件触发用户数据的修改按钮，跳转到修改页面，对用户的昵称、用户头像、手机号和密码进行修改，点击提交表单请求，成功之后跳到列表页面，并利用js触发页面数据刷新。管理员点击删除按钮，发送Ajax异步请求，请求成功后只更新改动的部分，列表页数据更新成功。随着注册用户的增多，后台用户管理的数据量的增长，设置分页查询功能，每页显示10条数据。分页功能使用了pagehelper这个分页框架，原理就是会先查询全部数据，然后这个框架对这个查询做了拦截操作，最终完成分页，这时候就变成了物理分页的查询。同时用户能够搜索昵称和手机号，提交表单，返回用户数据，方便用户查找操作。用户管理模块如图5-9所示。图5-9用户管理模块音乐管理管理员在后台音乐管理模块，可以添加、修改、删除和搜索音乐。可通过点击“添加”，跳转到添加页面，填写信息，提交表单信息，添加成功之后跳转到列表页面并刷新数据。修改功能、删除功能和分页搜索功能同用户管理，不再赘述。音乐管理模块如图5-10所示。图5-10音乐管理模块歌手管理管理员在后台歌手管理模块，可以对歌手进行信息添加、修改和删除，当歌手数据量增多的时候，会出现分页，这时候可以通过搜索歌名或歌手快速找到该歌手，实现对歌手的快捷操作。歌手管理模块如图5-11所示。图5-11歌手管理模块歌单管理管理员在后台歌单管理模块，可以对歌单进行添加、修改和删除。目前歌单类型设置的有官方歌单、达人歌单和热门歌单三种，当添加歌单的时候，可以从这三种类型中选择其一。同时歌单可以关联相关音乐，以此来丰富歌单内容。随着歌单的不断增加，同用户管理，设置了分页查询功能，不再赘述。歌单管理模块如图5-12所示。关联音乐界面如图5-13所示。图5-12歌单管理模块图5-13关联音乐效果图轮播图管理管理员在后台轮播图管理模块，可实现轮播图的添加、修改和删除。当有最新音乐发布时，前台首页轮播图可以实时展示出来，做到宣传和吸引用户，并且可以增加网站的美观性。后台轮播图模块如5-14所示。图5-14轮播图管理模块测试功能测试为了确保该音乐软件能够成功上线，尽量减少软件潜在的隐患所造成的风险，软件测试是不可忽视的组成部分。通过对软件的测试，可以降低软件的质量问题，提高软件的健康度。（1）前台用户注册登录功能测试用例，如表6-1所示。表6-1用户注册登录测试用例表序号用例名称操作步骤测试用例预期结果执行结果1用户登录（1）打开平台，默认展示首页。（2）点击首页用户图标，进入登录页面，输入手机号和密码。（3）首页导航栏菜单‘收藏’，单击进入。手机号=159****8126密码=******登录成功，进入首页。登录成功，进入首页。2用户注册（1）默认进入首页。（2）点击首页右上角用户图标，进入登录注册页，默认展示登录，需切换到注册。昵称=Jane手机号=159****1234密码=******显示注册成功。显示注册成功。（2）前台歌单模块、歌手模块、排行榜模块、收藏模块功能及播放页面功能测试用例，如表6-2所示。表6-2前台功能测试用例表序号用例名称操作步骤测试用例预期结果执行结果1歌单（1）打开平台，点击首页的官方歌单。无需测试用例查询tb_song_list歌单表查询成功，页面展示歌单列表2歌手（1）点击首页导航栏的‘歌手’。无需测试用例查询tb_song_list歌手表查询成功，页面展示歌手列表3排行榜（1）点击首页导航栏的‘排行榜’。无需测试用例查询tb_music音乐表查询成功，页面展示排行榜列表4收藏列表（1）打开平台，默认展示首页。（2）点击首页用户图标，进入登录页面，输入手机号和密码。（3）首页导航栏菜单‘收藏’，单击进入。无需测试用例查询tb_collect收藏表查询成功，页面展示收藏列表5播放（1）打开平台，默认展示首页。（2）点击首页的歌单列表。（3）点击某一首歌曲。无需测试用例查询tb_music音乐表，播放成功播放成功6收藏（1）打开平台，默认展示首页。（2）点击首页用户图标，进入登录页面，输入手机号和密码。（3）点击进入播放页面，点击收藏按钮，收藏该歌曲。无需测试用例收藏表tb_collect增加一条数据，收藏成功收藏成功7播放模式打开平台，进入歌单列表。点击歌曲，进入播放页面，点击前进、赞提、后台、拖动进度条，以及切换播放模式。无需测试用例操作成功操作成功（3）后台用户管理功能测试用例，如表6-3所示。表6-3后台用户管理功能测试用例表序号用例名称操作步骤测试用例预期结果执行结果1用户修改（1）进入后台管理系统。找到用户管理页面。（2）点击修改按钮。（3）点击确定提交。昵称=‘星河入梦’用户头像=‘头像.jpg’手机号=‘159****4567’密码=‘******’用户表tb_user修改一条数据，修改成功。修改成功，返回用户列表页，页面更新数据。2用户删除（1）进入后台管理系统。找到用户管理页面。（2）点击删除按钮。（3）点击确定提交。昵称=‘星河入梦’用户头像=‘头像.jpg’手机号=‘159****4567’密码=‘******’用户表tb_user删除一条数据。删除成功，页面刷新。删除成功，页面刷新。3用户搜索（1）进入后台管理系统。找到用户管理页面。（2）在右侧输入框，输入昵称或手机号。（3）点击提交。keyWords=‘星河入梦’用户表tb_user查询数据，查询成功，显示查询结果。查询成功，显示查询结果。（4）后台音乐管理功能测试用例，如表6-4所示。表6-4后台音乐管理功能测试用例表序号用例名称操作步骤测试用例预期结果执行结果1音乐修改（1）进入后台管理系统。找到音乐管理页面。（2）点击修改按钮。（3）点击提交。音乐名=‘十年’歌手=‘陈奕迅’音乐图片=‘音乐.jpg’音频=‘十年.mp3’音乐表tb_music修改一条数据，修改成功，返回音乐列表页，页面更新数据。修改成功，返回音乐列表页，页面更新数据。2音乐删除（1）进入后台管理系统。找到音乐管理页面。（2）点击删除按钮。（3）点击确定提交。音乐名=‘十年’歌手=‘陈奕迅’音乐图片=‘音乐.jpg’音频=‘十年.mp3’音乐表tb_music删除一条数据，删除成功，页面刷新。删除成功，页面刷新。3音乐搜索（1）进入后台管理系统。找到音乐管理页面。（2）在右侧输入框，输入歌手或歌名。（3）点击提交。keyWords=‘十年’音乐表tb_music查询数据，查询成功，显示查询结果。查询成功，显示查询结果。4音乐添加（1）进入后台管理系统。找到音乐管理页面。（2）点击左上角的“添加音乐”。（3）输入添加信息，并提交。音乐名=‘十年’歌手=‘陈奕迅’音乐图片=‘音乐.jpg’音频=‘十年.mp3’音乐表tb_music添加一条数据，添加成功。添加成功。（5）后台歌手管理功能测试用例，如表6-5所示。表6-5后台歌手管理功能测试用例表序号用例名称操作步骤测试用例预期结果执行结果1歌手修改（1）进入后台管理系统。找到歌手管理页面。（2）点击修改按钮。（3）点击提交。歌手=‘陈奕迅’歌手图片=‘头像.jpg’歌手表tb_singer修改一条数据，修改成功，返回歌手列表页，页面更新数据。修改成功，返回歌手列表页，页面更新数据。2歌手删除（1）进入后台管理系统。找到歌手管理页面。（2）点击删除按钮。（3）点击确定提交。歌手=‘陈奕迅’歌手图片=‘头像.jpg’歌手表tb_singer删除一条数据，删除成功，页面刷新。删除成功，页面刷新。3歌手搜索（1）进入后台管理系统。找到歌手管理页面。（2）在右侧输入框，输入昵称或手机号。（3）点击提交。keyWords=‘陈奕迅’歌手表tb_singer查询数据，查询成功，显示查询结果。查询成功，显示查询结果。4歌手添加（1）进入后台管理系统。找到歌手管理页面。（2）点击左上角‘添加歌手’。（3）填写添加信息，并提交。歌手=‘任然’歌手图片=‘歌手.jpg’歌手表tb_singer添加一条数据，添加成功。添加成功。（6）后台歌单管理功能测试用例，如表6-6所示。表6-6后台歌单管理功能测试用例表序号用例名称操作步骤测试用例预期结果执行结果1歌单修改（1）进入后台管理系统。找到歌单管理页面。（2）点击修改按钮。（3）点击提交。歌单=‘xxxx’歌单类型=‘官方歌单’歌单图片=‘歌单.jpg’歌单表tb_song_list修改一条数据，修改成功，返回歌单列表页，页面更新数据。修改成功，返回歌单列表页，页面更新数据。2歌单删除（1）进入后台管理系统。找到歌单管理页面。（2）点击删除按钮。（3）点击确定提交。歌单=‘xxxx’歌单类型=‘官方歌单’歌单图片=‘歌单.jpg’歌单表tb_song_list删除一条数据，删除成功，页面刷新。删除成功，页面刷新。3歌单搜索（1）进入后台管理系统。找到歌单管理页面。（2）在右侧输入框，输入歌单名称。（3）点击提交。keyWords=‘华语-早安民谣’歌单表tb_song_list查询数据，查询成功，显示查询结果。查询成功，显示查询结果。4歌单添加（1）进入后台管理系统。找到歌单管理页面。（2）点击页面左上角‘添加歌单’。（3）填写信息，并点击提交。歌单=‘xxxx’歌单类型=‘官方歌单’歌单图片=‘歌单.jpg’歌单表tb_song_list添加一条数据，添加成功。添加成功。5关联音乐（1）进入后台管理系统。找到歌单管理页面。（2）点击歌单上的‘关联音乐’。（3）选择要关联的音乐，点击关联。无需测试用例歌单表tb_song_list修改一条数据，关联成功。关联成功。（7）后台轮播图管理功能测试用例，如表6-7所示。表6-7后台轮播图管理功能测试用例表序号用例名称操作步骤测试用例预期结果执行结果1轮播图修改（1）进入后台管理系统。找到轮播图管理页面。（2）点击修改按钮。（3）点击提交。轮播图名称=‘星河入梦’音乐名=‘十年’轮播图图片=‘图片.jpg’轮播图表tb_carousel修改一条数据，修改成功，返回列表页，页面更新数据。修改成功，返回列表页，页面更新数据。2轮播图删除（1）进入后台管理系统。找到轮播图管理页面。（2）点击删除按钮。（3）确定删除。轮播图名称=‘星河入梦’音乐名=‘十年’轮播图图片=‘图片.jpg’轮播图表tb_carousel删除一条数据，删除成功，页面刷新。删除成功，页面刷新。3轮播图添加（1）进入后台管理系统。找到轮播图管理页面。（2）点击添加按钮。（