【《基于Node-js的在线音乐网站设计与实现》10000字】

第第页基于Node-js的在线音乐网站设计与实现目录TOC\o"1-3"\h\u82391绪论 6182921.1选题背景与意义 6131951.2国内外现状 6103022系统的相关技术 7171962.1Vue.js框架 7234212.2MySQL数据库 868292.3Node.js 8149512.4ElementUI 8145002.5Bootstrap 8250823需求分析 8239233.1产品的功能模块 937243.2外部接口需求 9130323.2.1用户界面 930797包括以下特征： 9175073.2.3通讯接口 10123563.3功能接口 10198163.3.3用例说明 1382113.3.4业务流程介绍 1611493.4数据流设计 19291673.4.1数据流图 1924933.5输入/输出 21208183.6其它需求 22325773.6.1安全措施需求 2246983.6.2安全性需求 23167813.6.3性能需求 23319793.6.4软件质量属性 23104004系统设计 2487144.1系统设计 24159654.1.1系统功能层次设计 255404如图4.1所示： 25321054.1.3常见bug设计 26286354.2设计原则 279354.3技术设计 27325844.3.2系统开发技术 27158764.3.3技术架构设计 28104714.4数据库设计 28325574.4.1数据库表单汇总 28212434.4.2单个表单信息 29200915系统实现 33115045.1文件目录 33148335.2前台模块设计 34226545.2.1登录功能 34123125.2.3修改密码功能 35173395.3管理员模块 36237885.3.2歌手管理 38273255.3.3MV信息管理 39297135.3.4专辑信息管理 40171365.3.5用户信息管理 41195065.4前端模块 41275185.4.1歌曲模块 41180045.4.2MV模块 4535395.4.3歌手模块 47268225.4.4专辑模块 49223465.4.5个人化设置 5147605.4.6购买会员管理 52320776系统测试 5450546.1测试目的 5419026.3黑盒测试 5459566.4测试结果分析 5514143参考文献 561绪论1.1选题背景与意义ResearchshowsthattheinfluenceofmusiconpeopleisnotonlyemotionalREF_Ref10240\w\h[1].音乐是一种艺术，可以体现人类在现实生活中的情绪变化。同时也可以调节我们的心情、我们的生活，同时也是我们精神的家园。不同类型的音乐带给人们的感觉是不同的。庄严的音乐可让人们感觉到稳重，轻柔的音乐可以人们感觉到放松，轻松活跃的音乐可以让人们放松。当你急噪不安时，音乐可以给你一份镇定；当你忧伤感怀时，音乐可以给你一份笑容；当你伤心沮丧时，音乐可以给你一份鼓舞。甚至我们在同一的时间，同一的地点听同一首的歌都可能会有不同的感觉和效果。Alargenumberoftheoriesandexperimentshaveshownthatmusicplayspositiveeffectonchildren’sgrowthREF_Ref16363\w\h[2].现在很多音乐可以一夜之间就大火起来，被很多人传唱，比如红玫瑰与白玫瑰，绿色等等。随着短视频的流行，一些bgm随之流行大火起来。而音乐形式也巧然改变了，以前人们极力抢购的唱片到现在的数字专辑等等。随着互联网的出现，音乐传播速度有所提高，因此，音乐被给予了时效性，但同时音乐也被赋予了的持久性。然而音乐网站的出现正好兼顾了以上两个方面。1.2国内外现状 由于新冠疫情，中国音乐线下业务遭遇了前所未有的经营风险。但是，却为在线音乐行业缺提供了非常好的发展方向。自打数字音乐时代的到来，音乐线上行业开启了新的篇章。随着5G、AI等技术的发展，音乐行业的各个业务与互联网新技术进行打融合，在各个平台上蓬勃发展，比如今年的线上演唱会，跨越了地区的限制，很多粉丝可以与idol进行互动；很多主播选择与3D虚拟形象一起直播，更是赚足了眼球，吸引了更多粉丝前来观看。中国在线音乐行业发展趋势分析：1、随着云Live的变化，有望扩大在线音乐市场规模REF_Ref16699\w\h[3]2、科技助推在线音乐行业深入发展数字化3、科技赋能在线音乐行业持续正版化4、逐步转变运营模式1.3研究意义“音乐网站”的研究在学术界较为匮乏,仍有较大研究空间REF_Ref1572\w\h[4]。1.4文章组织结构 本文主要讲述了开发在线音乐网站时的设计思路、结构组成、功能模块，借助数据库表格、功能流程图、需求分析图等详尽描述开发思路。各章节，详细地介绍了系统所使用的相关技术与知识，系统需求分析，数据库设计，系统总体设计等REF_Ref16921\w\h[5]。该网站设计分为有前端界面和后端api。后端接口由Node.js+Mysql完成，前端框架以Vue.js框架为主，element-UI配合来完成前端代码对界面进行设计。由于Node.js具有单线程的特点，故而本系统的部署也是决定系统性能的关键因素REF_Ref17104\w\h[6]。2系统的相关技术本系统是由Node.js框架（后端语言），MySQL（数据库），Vue.js（前端框架）组成的。2.1Vue.js框架可以直接复用相关模块或者在模块的基础上进行二次开发,具有较好的可扩展性REF_Ref17176\w\h[7]。Vue.js一个方便用户构建界面的渐进式前端框架REF_Ref17339\w\h[8]。Vue.js的核心是单纯地关注图层，因此，快速上手是他的核心优势。2.2MySQL数据库 一种关系型数据库管理系统，可以将数据保存在不同的表中。因此增加了速度并提高了灵活性，基于此特性，MySQL目前是最受中小企业欢迎的数据库。2.3Node.js 一个完全异步的I/O模型。一定程度上提高了web服务的并发性。可以帮助使用者节约很多操作，使用者不用做less/scss的编译，es版本之间的转换，甚至是js代码的压缩合并等等。2.4ElementUI目前可以说是最流行的Vue.js框架之一。是有饿了么前端团队开源维护的，拥有很大的用户量。2.5Bootstrap Bootstrap框架技术使Twitter工程师MARKOTTO和JacobThornton为了提高Twitter内部的分析和管理能力而开发的一套前端工具集，并且使之开源REF_Ref17431\w\h[9]。基于HTML、CSS、JavaScript的前端开发框架，提高用户开发web服务的速度。支持响应式布局。另外,由于bootstrap的出现,解决了以前的命名过程中多次出现、毫无意义、不规范;页面错乱、不和谐等问题。3需求分析该章节中，详细描述了网站的功能、界面、接口、需求汇总等等。尽最大程度上，为用户提供该网站可以解决的问题。用户在阅读时，可以对整个网站有个整体的印象。该网站的使用者范围较广，因此，采用了表格、UML图、需求汇总图等方式，对该网站进行一个更为仔细地需求描述。就后续研发进度而言，其他开发人员可以阅读该文档，可以了解该网站的功能需求、功能模块，更快捷地上手开发，加快研发进度，提高研发质量。该章详述了设计测试用例的依据和网站实现的基础即系统需求和系统规格。3.1产品的功能模块 该网站共分为7个功能模块：登录模块，歌曲模块、个性化模块、歌手模块、MV模块、专辑模块、管理员模块。3.2外部接口需求3.2.1用户界面包括以下特征：（1）网站颜色走简约风，以蓝色、白色作为基准。（2）背景颜色为白色(#fff)，提示字体颜色为浅蓝色(#4eb5cb)，提示信息更为明显；（3）定义快捷键，提高效率；（4）错误信息提示应该简洁，明了、醒目，使用户更快理解错误信息；3.2.2开发设备与系统（1）在win10系统的电脑上进行开发（2）使用Vscode软件进行代码的编写（3）用Mysql，Native连接数据库进行前后端的交互（4）使用json数据格式进行接口的数据传送（5）使用postman测试后端接口（6）在Google浏览器进行网页测试，f12调试前端（7）本网站使用以Node.js的后台服务端提供的API包括数据库的CRUD（增删改查）操作和前后端数据流的传递。3.2.3通讯接口该部分讲述的是与使用该网站的通讯功能相联系的。 （1）在Google/百度/360浏览器上使用该网站，http://localhost:8080/#/（2）使用json来进行前后端数据的传送；3.3功能接口在此模块中，梳理功能需求，对其表明优先级，以此进行研发，按照优先级来开发，目标更明确，进度更快。首先，先对优先级进行划分，同一水准线。如下表：表3-1优先级划分表编号程度注释SSS高重要程度最高，需放在第一优先位置上完成，而且在完成时必须保障其研发质量，时间紧任务重SS中重要程度不可忽视，需要在规定时间内完成，且完成度具有一定水准S低重要程度一般，不必优先完成，但是需要完成3.3.2需求汇总表表3-2需求汇总表编号名称需求描述所属模块优先级G1-1注册用户填入新的账号密码登录模块SS编号名称需求描述所属模块优先级G1-2忘记密码当用户点击忘记密码按钮，进入相应界面，根据相关提示找回密码。登录模块SSSG1-3用户登录输入已存在的账号和密码进入系统登录模块SSSG2-1播放音乐用户点击，播放音乐歌曲模块SSSG2-2切换歌曲用户点击或者，切换歌曲歌曲模块SSG2-3歌曲收藏用户点击收藏按钮，可以对该歌曲进行收藏/取消收藏歌曲模块SSG2-4搜索歌曲用户在搜索输入框内，填入歌曲名字关键字，显示相匹配的歌曲歌曲模块SSSG2-5查看所有歌曲用户查看所有音乐列表歌曲模块SSG2-6下载音乐会员用户可以下载该音乐歌曲模块SSSG2-7热门推荐根据歌曲播放量，对用户进行推送播放量高的歌曲歌曲模块SSG3-1我的收藏用户可以查看已收藏的歌曲个性化模块SSSG3-2个人信息用户可以查看并修改个性化设置个性化模块SSSG3-3购买会员用户选择购买会员，可以进行音乐和MV的下载个性化模块SSG3-4查看已听过音乐用户可以查看自己听过的歌曲个性化模块SSSG4-1播放MV用户点击MV，跳转到MU播放界面MV模块SSSG4-2MV收藏用户点击收藏按钮，收藏/取消收藏MVMV模块SSG4-3搜索MV用户搜索MV名字关键字，显示匹配的MVMV模块SSSG4-4查看全部MV用户查看所有MV列表MV模块SSG4-5下载MV会员用户可以下载MVMV模块SSSG5-1搜索歌手用户搜索歌手名字关键字，显示匹配的歌手歌手模块SSSG5-2查看某个歌手信息用户可以查看某个歌手的信息（名字，性别，地区，简介，歌曲，专辑，mv）歌手模块SSG5-3查看所有歌手用户可以查看歌手列表歌手模块SSG5-4关注歌手用户可以点击关注按钮，关注/取消关注歌手歌手模块SSG6-1搜索专辑用户搜索专辑名字关键字，显示匹配的专辑专辑模块SSSG6-2查看某个专辑信息用户可以查看某个专辑的信息（名字，简介，歌手，包含的专辑和mv）专辑模块SSG6-3查看所有专辑用户可以查看歌手列表专辑模块SSG7-1查看所有用户管理员可以查看所有已注册用户信息管理员模块SSSG7-2查看所有音乐信息管理员可以查看在库的所有歌曲信息管理员模块SSSG7-3查看所有MV管理员可以查看所有MV信息管理员模块SSSG7-4查看所有歌手管理员可以查看所有歌手信息管理员模块SSSG7-5查看所有专辑管理员可以查看所有专辑信息管理员信息SSSG7-7查看所有会员用户管理员可以查看所有会员用户信息（账号、个人信息）管理员模块SSSG7-8删除歌手管理员可以删除某个歌手信息管理员模块SSSG7-9删除歌曲管理员可以删除某首歌曲信息管理员模块SSSG7-10删除MV管理员可以删除某个MV信息管理员模块SSSG7-11删除用户管理员可以删除某个用户管理员模块SSSG7-12删除专辑管理员可以删除某个专辑信息管理员模块SSSG7-13添加歌手管理员可以添加某个歌手信息管理员模块SSSG7-14添加歌曲管理员可以添加某首歌曲信息管理员模块SSSG7-15添加MV管理员可以添加某个MV信息管理员模块SSSG7-16添加专辑管理员可以添加某张专辑信息管理员模块SSS3.3.3用例说明根据使用者权限以及会员度的不同，可以分为游客、普通用户（即已登陆的用户）、VIP用户和管理员用户。游客，普通用户，VIP用户所能使用的功能都属于前端模块中的功能。管理员用户所使用的功能属于管理员模块下。如下图所示：图3.1游客用例图图3.2登录用户用例图图3.3会员用户用例图图3.4管理员用户用例图3.3.4业务流程介绍该部分对具有代表性的一部分功能进行业务方面流程性的介绍。登录流程如图3.5所示：用户登录后，后台需要进行判断，正确后，方可进入网站。图3.5登录流程图修改（忘记）密码流程，如图3.6所示：用户填入账号和新的密码后，后台需要进行判断，正确后，方可登录。图3.6忘记（修改）密码流程图（3）搜索音乐流程，如图3.7所示：图3.7搜索音乐流程图3.4数据流设计3.4.1数据流图对IPO图表中的数据进行分析，在这个基础上加上该网站的需求汇总和功能模块，可得到如下结论。可以获得使用该网站的用户与在线音乐网站之间的数据流向，如图所示：图3.8顶层数据流图（2）可以获得网站使用人群（用户和管理员）在其各自使用范围下的数据传送。如图所示：图3.90层数据流图（3）按照该网站的6个功能模块划分，可以获得每个模块下的数据流向，如图3.10所示：图3.101层数据流图3.5输入/输出该输入/输出部分对各个功能部分进行数据分析，详情如下：（1）登录功能，如下图3.11所示：图3.11登录IPO图（2）播放歌曲功能，如下图3.12所示图3.12播放歌曲IPO图（3）购买会员功能，如下图3.13：图3.13购买会员IPO图（4）查找歌曲功能，如下图3.13所示：图3.15查找歌曲IPO图3.6其它需求3.6.1安全措施需求（1）管理员用户或者非游客使用该系统时，必须通过登陆验证，方可进入相联系的系统，对系统或者个人进行操作。（2）用户必须登录通过后，才可以查看有关用户个人的功能（3）在用户购买会员时，必须保障其系统安全，不泄露用户银行卡账号、密码等有关信息。（4）功能运转起来之后，必须是闭环的。3.6.2安全性需求（1）保证网站不被有心人侵入，泄露用户信息（2）功能根据用户等级进行区分，游客不可以查看个人信息，VIP用户可以进行下载歌曲和MV。3.6.3性能需求（1）确保网站在使用时，不出现崩溃、网页不黑屏的问题，系统可以正常运行。（2）用户使用网站时，不会被泄露个人信息，比如手机号，家庭住址，账号，密码等。（3）网站设计应该简单、方便，让不同的适用人群都可以知道怎么使用。3.6.4软件质量属性本网站适用人群范围较广，要求如下：用户应该方便上手操作，不需要进行大量冗余的引导。用户在使用该网站时，应该具有较高的体验感，不要因为功能过多，不知道如何下手操作。

4系统设计该网站的系统设计部分是为了对功能进行划分，为后续编码部门做基础。包括产品结构、数据库构成、报错的处理方法等。4.1系统设计4.1.1系统功能层次设计如图4.1所示：图4.1系统功能层次图4.1.2网站页面展示设计按照VIP和登录区分，使用人群分为游客、登录用户和VIP用户，登录用户功能会比游客多。 作为一个音乐网站，界面风格应当简约，背景颜色不应超过两个，采用#fff，#4eb5cb。另外，对于信息的提示应该醒目，让用户可以直接获取到想要的信息。此外，由于受众范围较广，应该遵守界面友好性；（2）接口设计 服务端提供该网站前后端数据的通信的后台接口。该网站的使用需要配合键盘和鼠标等硬件。4.1.3常见bug设计（1）用户登录时，信息填错，系统需要给出错误提示（账号不存在或密码错误），让用户重新输入；此bug为输入型错误，是用户自身在造成的，账号或密码出错或者账号不存在。（2）用户播放音乐时，音乐加载不出来，系统需要出现loading状态，或者提示信息，让用户重刷页面；此bug为系统错误，是系统造成的，后台接口或数据库报错。（3）用户刷新网页时，网页响应超时，系统给出错误提示，提醒用户重连网络；此bug为网络错误，是系统或者用户造成的，系未连接或者用户无网络。（4）用户在操作某个数据时，未响应，系统系统给出错误提示；此bug为系统错误，是系统造成的，后台接口或数据库报错。4.2设计原则（1）命名规则：驼峰命名规则。（2）可重用性：遵循DRY原则（代表“不要重复自己”，这是软件开发的一个基本原则，目的是减少信息的重复）REF_Ref18681\w\h[10]。（3）高内聚性：子系统的内聚性会提高软件的可重用性和可维护性REF_Ref18900\w\h[11]。（4）用户网页设计原则：背景颜色不应太多，应该简洁了当，让用户直接地获取想要的信息。（5）数据库设计原则：减少数据冗余现象，遵守Mysql使用规范。4.3技术设计4.3.1技术实施方案（1）采用json数据进行前后端数据传送（2）采用Mysql数据库（3）为保障网站技术支持，采用具有可靠性、成熟的开发技术。4.3.2系统开发技术（1）后端使用Node.js，版本号为14.16.1（2）前端使用Vue.js，版本号为2.9.2（3）数据库使用Mysql，版本号为.3技术架构设计根据现有技术，分开设计网站前端界面与管理员后台界面。以Vue.js、html5、js、elementUI为主，如下图：图4.2系统技术架构图4.4数据库设计4.4.1数据库表单汇总共使用了11个数据表，具体如下：user表，即用户表，表里信息为已成功注册用户信息music表，即音乐表，表里信息为歌曲信息collect表，即音乐收藏表，表里信息为收藏音乐信息

singer表，即歌手表，表里信息为歌手信息playlist表，即专辑表，表里信息为已成功注册专辑信息listened表，即历史音乐表，表里信息为歌单信息manager表，即管理员表，表里信息为管理员信息Mvlist表，即MV表，表里信息为MV信息Expire表，即VIP用户表，表里信息为会员用户信息userInfo表，即个性化设置表，表里信息为用户个人化信息follow_singer表，即关注歌手表，表里信息为用户关注歌手的信息4.4.2单个表单信息（1）user（用户）表：如下所示表4-1user用户表名称类型是否为key值可否null含义user_idvarchar√×用户唯一标识user_namevarchar××用户账号user_psdvarchar××用户密码user_isexpirevarchar××用户是否为会员（2）music（音乐）表：如下所示表4-2music音乐表名称类型是否为key值可否null含义music_idvarchar√×音乐编号music_name varchar××音乐名称music_urlvarchar××音乐地址singer_idvarchar××歌手idmusic_imgvarchar××歌曲图片playlist_idvarchar××专辑idmusic_countsint××歌曲播放量（3）collect（收藏音乐）表：如下所示表4-3collect（收藏音乐）表字段名类型是否为key值可否null说明collect_useridvarchar√×用户idcollect_username varchar××用户名字collect_musicidvarchar××音乐idcollect_musicnamevarchar××音乐名字（4）singer（歌手）表：如下所示表4-4singer（歌手）表名称类型是否为key值可否为null含义singer_idvarchar√×歌手编号singer_namevarchar××歌手名字singer_imgvarchar××歌手图片singer_desvarchar××歌手描述singer_sexvarchar××歌手性别（5）playlist（专辑信息）表：如下所示表4-5playlist（专辑信息）表名称类型是否为key值可否为null含义playlist_idvarchar√×专辑编号playlist_namevarchar××专辑名称playlist_singeridvarchar××专辑歌手idplaylist_singernamevarchar××专辑歌手名字playlist_desvarchar××专辑描述playlist_imgint ××专辑图片（6）listened（歌单）表：如下所示表4-6listened（歌单）表名称类型是否为key值是否为null含义listened_useridvarchar√×用户编号listened_usernamevarchar√×用户名字listened_musicidvarchar√×音乐编号listened_musicnamevarchar××音乐名称（7）MV表：如下所示表4-7MV表名称类型是否为key值是否为null含义Mv_idvarchar√×Mv编号Mv_name varchar××Mv名称Mv_urlvarchar××Mv地址Mv_singeridvarchar××Mv歌手idMv_singernamevarchar××Mv歌手姓名Mv_imgvarchar××Mv图片（8）userInfo（个性化信息）表：如下所示名称类型是否为key值是否为null含义UserInfo_idvarchar√×用户编号UserInfo_name varchar××用户名称UserInfo_sexvarchar××用户性别UserInfo_desvarchar××用户签名UserInfo_imgvarchar××用户头像UserInfo_placevarchar××用户现居地表4-8userInfo（个性化信息）表Expire（会员）表：如下所示表4-9Expire（会员）表名称类型是否为key值是否为null含义Expiry_idvarchar√×会员用户编号Expiry_username varchar××会员用户名称Expiry_useridvarchar××会员用户idExpiry_timevarchar××会员购买时间（10）Manager（管理员）表：如下所示表4-10Manager（管理员）表名称类型是否为key值是否为null含义manager_idvarchar√×管理员idmanager_account varchar××管理员账号manager_psdvarchar××管理员密码（11）Follow（关注歌手）表：如下所示表4-11follow（关注歌手）表名称类型是否为key值是否为null含义Follow_useridvarchar√×关注的用户idFollow_username varchar××关注的用户名字Follow_singeridvarchar××被关注的歌手idFollow_singernamevarchar××被关注的歌手名字5系统实现5.1文件目录如图5.1所示：图5.1文件结构图5.2前台模块设计前台模块为除管理员用户以外的用户可使用的功能。5.2.1登录功能用户在前端登录界面，根据登录提示输入账号密码并点击登录按钮REF_Ref2817\w\h[12]，前端将数据传送到后端接口，后端将传过来的账号密码与数据库里的数据进行对比并将对比信息传送到前端界面进行展示。界面展示：图5.2登录界面5.2.2注册功能用户在注册界面，填入新的用户名和密码。用户点击注册按钮，前端将注册信息传输到后端接口/register。后端接受信息后，将其存储到数据库的用户表中，并将其结构返回给前端，前端根据状态码判断是跳转到登录界面还是错误信息提示。界面展示：图5.3注册界面5.2.3修改密码功能用户进入修改密码页面,填写账号和新密码，点击确认按钮之后。触发/changePsd接口，前端将其数据传送到后端，后端将其在数据库验证后，修改数据库里的值，并将对应结果返回给前端进行展示。前端根据接受的状态码判断，跳转到登录界面还是错误信息提示。界面展示：图5.4修改密码界面5.3管理员模块5.3.1歌曲信息管理（1）查看歌曲管理员在后台管理界面按下查看歌曲按钮，前端将触发getAll接口，后端将在数据库中查询所有歌曲信息并返回给前端，将在前端界面显示所有歌曲信息（歌曲名字、歌手、专辑）。（2）添加歌曲管理员也可以点击按下音乐按钮，根据提示填写信息，之后点击添加按钮，前端将信息传输到后端相应接口/setMusic，后端在数据库进行添加并返回对应结果到前端界面进行展示。（3）删除歌曲管理员点击删除按钮，前端将该歌曲信息传给后端，同时触发后端删除接口/deleteMusic，后端在数据库中搜索该歌曲信息，并进行删除，将处理结果返回给前端，前端界面收到后，刷新该页面；（4）为音乐添加专辑同时管理员点击添加专辑按钮触发/getList接口，显示所有专辑信息，管理员选择后，前端将歌曲和专辑信息传输到后端相应接口/Addlist_music，后端在数据库中进行比对，更新music表中信息，将对应结果返回给前端界面进行展示。（5）网页设计如下：图5.5歌曲信息管理界面图5.6新增歌曲界面5.3.2歌手管理（1）查看歌手管理员在后台管理界面点击查看歌手按钮，前端将触发getAllSinger接口，后端将在数据库中查询所有歌手信息并返回给前端将在前端界面显示所有歌手信息（歌手名字、歌手性别、地区等）。（2）添加歌手管理员也可以点击添加歌手按钮，进入添加歌手界面，管理员根据提示填写信息，之后点击添加按钮，前端将信息传输到后端相应接口/setSinger，后端在数据库进行添加并返回对应结果到前端界面进行展示。删除歌手管理员点击删除按钮，前端将该歌手信息传给后端，同时触发后端删除接口/deleteSinger，后端在数据库中搜索该歌手信息，并进行删除，将处理结果返回给前端，前端界面收到后，刷新该页面；（4）网页设计如下：图5.7歌手管理界面图5.8新增歌手界面5.3.3MV信息管理管理员用户可以查看MV、添加MV和删除MV，操作类似添加歌手和删除歌手，接口对应为/getAllMV，/setMV，/deleteMV。网页设计如下：图5.9MV信息管理界面图5.10添加MV界面5.3.4专辑信息管理管理员用户可以查看专辑、添加专辑和删除专辑，操作类似添加歌手和删除歌手，接口对应为/getAllList，/setList，/deleteList。网页设计如下：图5.11专辑信息管理界面图5.12添加专辑界面5.3.5用户信息管理管理员用户可以查看所有用户、添加用户和删除用户，操作类似添加歌手和删除歌手，接口对应为/getAlluser，/setUser，/deleteUser。同时，也查看VIP用户，添加VIP用户。网页设计如下：图5.13用户信息管理界面5.4前端模块5.4.1歌曲模块（1）查找歌曲用户在搜索页面，输入关键字，按下enter键或点击按钮。此时会将数据传送给后端，后端在数据库music表中搜索符合的数据，将其返回给前端界面。 （2）查看所有歌曲用户按下更多按钮，查看所有的音乐信息，此时数据库会将music表中的所有数据返回给前端，在前端界面中展示。（3）播放歌曲用户可以点击音乐，在界面下方展示播放界面，用户点击播放按钮，播放音乐，再次点击时，停止播放。收藏歌曲用户可以点击收藏按钮，进行音乐的收藏或取消，将音乐信息、用户信息数据传给数据库collect表，在数据库进行信息的同步更改。（5）网页设计如下：图5.14搜索音乐界面图5.15搜索结果为空界面图5.16播放歌曲界面图5.17正在播放歌曲界面图5.18收藏歌曲界面图5.19所有歌曲列表界面5.4.2MV模块（1）搜索MV用户在搜索页面，输入关键字，按下enter键或点击按钮。此时会将数据传送给后端，后端在数据库中搜索符合的数据，将其返回给前端界面。（2）查看所有MV用户可以点击更多的按钮，查看所有MV列表，此时数据库会将MV表中的所有数据返回给前端，在前端界面中展示。（3）播放MV用户可以点击MV，进入MV播放界面，用户点击播放按钮，播放MV。（4）网页设计如下：图5.20搜索MV界面图5.21MV详情界面图5.22播放MV界面图5.23MV列表界面5.4.3歌手模块（1）搜索歌手用户在搜索页面，输入关键字，按下enter键或点击按钮。此时会将数据传送给后端，后端在数据库中搜索符合的数据，将其返回给前端界面。查看所有歌手用户可以点击更多的按钮，查看所有歌手列表，此时数据库会将歌手表中的所有数据返回给前端，在前端界面中展示。查看单个歌手信息用户可以点击歌手，在显示歌手界面，用户可以查看歌手信息、歌曲、MV。 （4）关注歌手用户可以点击关注按钮，进行歌手的关注或这取消数据将传给数据库，在数据库follow表中进行信息的同步更改。（5）网页设计如下：图5.24搜索歌手界面图5.25歌手详情界面图5.26歌手MV界面图5.27歌手歌曲界面图5.28歌手列表界面5.4.4专辑模块（1）查找专辑用户在搜索页面，输入关键字，按下enter键或点击按钮。此时会将数据传送给后端，后端在数据库中搜索符合的数据，将其返回给前端界面。查看所有专辑用户可以点击更多的按钮，查看所有专辑列表，此时数据库会将专辑表中的所有数据返回给前端，在前端界面中展示。查看单个专辑用户可以点击专辑，在显示专辑界面，用户可以查看专辑信息、歌曲。（4）网页设计如下：图5.29搜索专辑界面图5.30专辑详情界面图5.31专辑列表界面5.4.5个人化设置用户可以在个人信息界面，查看自己的个性化设计并且修改。同时用户可以查看自己所收藏的歌曲。网页设计如下：图5.32个人信息界面图5.33编辑个人信息界面5.4.6购买会员管理用户可以点击我的工作台=>VIP会员菜单进行购买，用户再次点击确认。触发后端/buy接口，前端将用户数据传送给后端，后端在数据Expire表中同步数据，同时将状态码返回给前端，前端收到后，如果已成功购买会员，开放下载音乐和下载MV功能。网页设计如下：图5.34会员用户界面图5.35下载歌曲界面图5.35下载MV页面6系统测试6.1测试目的为了确保用户使用该网站时的流畅与无误，需要提前发现用户使用时可能会出现的bug已进行改正或移除。6.2测试模块测试人员需要对7个模块进行测试，测试结果如下：（1）登录模块：可用（2）歌曲模块：可用（3）个性化模块：可用（4）歌手模块：可用（5）MV模块：可用（6）专辑模块：可用（7）管理员模块：可用。6.3黑盒测试 6.3.1用例汇总表6-1用例汇总图序号描述期望结果是否与预期结果一致01用户可否登录用户填入正确账号的密码，可成功登录，进入http://localhost:8080/#/保持一致02用户可否注册填写新的用户信息，数据库中同步数据，可成功注册保持一致03用户可否找回密码填写账号和新的密码，数据库中同步更新，可成功验证