在线听音乐网站的设计与实现_kaic.docx

《在线听音乐网站的设计与实现_kaic.docx》由会员分享，可在线阅读，更多相关《在线听音乐网站的设计与实现_kaic.docx（40页珍藏版）》请在三一办公上搜索。

1、在线听音乐网站的设计与实现目录摘要AbstractI1绪论11.1 题目背景、目的11.2 系统重点12系统相关技术22.1 系统开发的技术要求22.2 系统相关技术、平台和数据的选择22.3 系统开发框架和工具库的介绍22.3.1 JavaScript22.3.2 SSM22.3.3 Vuejs32.3.4 Tomcat32.3.5 MySQL32.4 前后端分离开发模式33系统需求分析43.1 系统开发目的43.2 性能需求43.2.1 系统响应时间要求43.2.2 系统可靠性要求43.2.3 系统易用性要求43.2.4 存储容量要求43.3 可行性分析43.3.1 经济可行性43.3.2

2、 技术可行性43.3.3 操作可行性53.4 系统功能分析53.4.1 在线音乐网站系统的目标53.4.2 功能块划分53.4.3 面向用户的主要功能53.4.4 面向管理员的主要功能53.5 操作流程图63.5.1 用户操作流程图63.5.2 管理员操作流程图63.6 需要满足的目标74系统概要设计84.1 系统功能模块划分84.1.2 管理员操作功能模块84.1.3 系统功能结构图94.2 数据库的设计94.2.2 设计分析94.2.3 流程分析94.2.4 E-R模型104.2.5 各个实体的E-R模型105系统详细设计145.1 数据库表结构145.1.1 用户信息表145.1.2 管

3、理员信息表145.1.3 用户评论表145.1.4 评分记录表155.1.5 收藏表155.1.6 歌曲表155.1.7 歌曲列表165.1.8 歌单表165.1.9 歌手表165.2 管理员端设计175.2.1 开发思路175.2.2 项目结构175.2.3 用例图185.3 模块设计185.3.1 管理员登录185.3.2 系统首页185.3.3 用户管理195.3.4 歌手管理195.3.5 歌单管理195.3.6 信息统计195.4 用户端设计195.4.1 创建项目195.4.2 项目结构错误!未定义书签。6系统实现206.1 用户登录界面206.2 用户注册界面206.3 用户浏览

4、首页信息界面216.4 用户浏览歌单界面216.5 用户浏览歌手界面226.6 用户浏览我的音乐界面226.7 管理员登录界面237测试与分析247.1 测试目的247.2 测试方法247.3 测试环境247.4 功能测试模块247.4.1 用户登陆功能测试247.4.2 管理员登陆功能测试247.4.3 用户浏览/搜索歌曲的功能测试257.4.4 用户收藏歌曲的功能测试257.4.5 用户浏览/搜索歌手的功能测试257.4.6 用户浏览/评论歌曲的功能测试257.4.7 用户下载歌曲的功能测试267.4.8 管理员对用户的管理功能测试267.4.9 管理员对歌曲的管理功能测试267.4.10

5、 管理员对歌手的管理功能测试27结论28参考文献29致谢30基于SSM的在线音乐网站的设计与实现摘要现在随着信息科技与物联网技术的发展，居民小区的智能化与信息化也得到了促进，这是时代发展的必然趋势。而疫情的突然来袭对小区信息管理提出更高要求。本文根据景河小区日常管理工作的需求和小区疫情防控系统的管理流程，结合科学管理的理论，设计实现了一个基于JAVAWeb的景河小区疫情防控系统。不仅可以有效的进行疫情防控同时也是提高小区管理水平的重要技术手段。随着互联网的发展，人们越来越开始享受网上学习带来的各种辅助产品，例如在线音乐网站系统，在线音乐网站系统给喜欢听音乐的网络系统用户可以提供很大的便利，也增

6、加了他们的选择一个音乐的空间。它给人们的日常生活带来了很多乐趣，让他们在漫长的一天工作后放松,可以享受自己的独自时光。本文的在线音乐网站系统分为三大模块：前端显示模块、管理员显示模块和后端模块。前台模块主要负责音乐播放、用户登录注册、歌单、歌曲评论等。管理员模块主要负责对用户，歌曲,榜单等信息进行管理。该在线音乐网站在WindoWS操作管理系统工作环境下，使用java语言，以JDK+Mavcn作为系统开发平台，以SSM作为管理架构，并且利用MySqI数据存储和前端VUe渐进式框架技术开发的。该网站的特点是用户体验良好，界面美观、直接、易于使用。关键词：前后端分离；SSM；Spring；Vue.

7、jsAbstractDesignandImplementationofOnlineMusicWebsiteBasedonSSMAbstractWiththedevelopmentoftheInternet,peoplebegintoenjoyallkindsofauxiliaryproductsbroughtbyonlinelearningmoreandmore,suchasonlinemusicwebsitesystem,whichprovidesgreatconveniencefortheuserswholikelisteningtomusicandincreasestheirspacet

8、ochooseamusic.Itbringsalotoffuntopeoplesdailylife,allowingthemtorelaxafteralongdayatworkandenjoytheirowntimealone.Thisonlinemusicwebsitesystemisdividedintothreemodules:front-enddisplaymodule,administratordisplaymoduleandback-endmodule.FrontDeskmoduleismainlyresponsibleformusicplaying,userloginregist

9、ration,songlist,songreviews.Administratormoduleismainlyresponsibleforusers,songs,listsandotherinformationmanagement.TheonlinemusicwebsiteusesJavalanguage,JDKMavenasthesystemdevelopmentplatform,SSMasthemanagementframework.ItusesMysqldatastorageandfront-endVueprogressiveframeworktechnology.Thesystemfe

10、aturesgooduserexperienceandbeautifulinterface.Userscanregisteronthesiteandratetheirmusictofindtheirfavoritemusic.Themaininterfaceandgradinginterfacearebeautiful,directandeasytouse.Keywords:front-endandback-endseparation,SSM,Spring,Vue.jsKeywords:front-endandback-endseparation；SSM；Spring；Vuejs1绪论1.1

11、题目背景、目的现在跟随着互联网的发展，互联网已经进入了很多领域，人们的生活和娱乐方式越来越多花样，但是音乐始终占据着我们的生活。在这个时代中，音乐也在发生着巨大变化，音乐的种类越来越多，用户不再喜欢单调的音乐，而是在寻找各种各样有特色的音乐。传统的页面展示再也满足不了用户的需求，在线音乐网站的设计和实施已经改变了这种情况。在线音乐网站系统是一个数字音乐交互网站，用户可以通过它方便地杳找音乐并试听音乐,将自己热爱地歌曲放入收藏夹中，可以对它进行评论等。现在的口常生活中，大多数人们都是对着电脑工作，工作了一段时间后必定会有疲惫的感觉，当这时候打开一个音乐网站听到自己喜欢的歌曲，可以充分感觉放松，边

12、工作边音乐可以让我们的日常无聊的时候中多了一份乐趣，而网络上也有很多的在线音乐网站系统，但大多数的在线音乐网站系统是收费的，但我设计的在线音乐网站系统，完全免费，并在小范围内使用，可以通过最大的满足局部用户的需求，让忙碌和疲劳的人们在空闲的时间里享受着自己的生活。1.2 系统重点该系统是一个前端和后端两个独立的在线音乐网站，并以用户为导向，因此着重于前后端两个方面的分离，以及用户的体验。后端有后台管理系统，便于管理员进行数据采集和管理，前端为用户，负责与用户进行互动，获取用户的操作、显示和数据，注重用户体验。2系统相关技术1.1.1 开发的技术要求根据在线音乐网站的需求，选用适当的技术是发展的

13、关键。该系统旨在建立一个在线音乐网站，让用户能够在网上尽情地欣赏、享受、放松。作为一家在线音乐网站，用户体验才是最重要的，所以最佳的发展方式应该是将前、后端分离，让前、后两个页面都不相同，从而更加注重用户体验。1.1.2 相关技术、平台和数据的选择本系统的选择如表2.1所示。表2.1系统选择表项目选择开发平台Window10开发工具IntelliJIDEA2020.1x64和VisualStudioCode开发语言HTML,CSSJavaScript,VUE.js,nodc.js开发框架SSM,Vuejs2.x,maven开发模式前后端分离浏览器Chrome数据库MySQL音乐文件在线下载歌词

14、和图片文件QQ音乐APP下载2.3系统开发框架和工具库的介绍2.3.1JavaScriptJavaScript是一种在Web程序开发设计中应用十分广泛的脚本语言网。JavaScript（Java脚本）是一种基于对象（ObjeCt）和事件驱动（EVentDriVen）并具有安全性能的脚本语言使用JaVaSCriPt可以轻松的实现与HTML的交互操作，并且完成丰富的页面交互效果，它是通过嵌入或调入在标准的HTML语言中实现的。基于对象：指的是程序的内部已经为用户提供好了若干个对象，用户直接使用这些对象即可口，叫1.1.3 SSMSSM+VUE即SSM框架+VUE框架结合的形式,SSM即由SPrin

15、g,SpringMVC,Mybatis集成的框架，其中SPring用来管理业务逻辑层，SPringMVC用来做控制层，MybatiS做dao层7。标准SSM架构分为四个层次：（1）持久层：Dao层（mapper）,主要负责数据持久层的工作，以及与数据库通讯有关的某些工作。（2）服务层：服务层它的主要功能是设计用于商业模块的逻辑。（3）控制层：它的主要功能是对某一业务模块的流程进行控制。（4）VieW层的主要作用是与控制层紧密结合，它的主要作用是对网页进行展示。通过SPring实现了业务对象的管理，通过请求转发和视图视图管理SpringMVC的执行，mybatis作为一个持久的数据对象引擎。1.

16、1.4 VuejsVueJs是一个轻量级，高性能，可组件化的MVVM库，它的APl很容易使用；Vuejs是MVVM中最流行的一种。VUE.js是一套构建用户界面的渐进式框架。该公司拥有一个20kb的轻型框架，该框架在2014年之前还没有被开发出来。定位一开始并不是一种架oVuejs以数据为中心，Dom是一种天然的数据映射，其次是组件化，扩展HTML元素，并将代码封装起来。1.1.5 TomcatTOmCat是一款以JaVa为基础的轻便程序服务器，它是一种完全开放的、免费的SerVIet容器实现。该系统支持静态资源，如HTML和JS,可以用作一个轻量级的Web服务器。Servlet是一个小型的在

17、服务器上运行的插件，它的特性如下：1.提供了可以被服务器装载和执行的程序代码，并且为客户机的请求服务。SerVE不依赖于浏览器，SerVIet也可以在服务器上使用，所以不管它是否支持java,它都可以要求对SerVlet进行访问。1.1.6 MySQLMySQL是一种开放源代码的关系型数据库管理系统（RDBMS）,使用最常用的数据库管理语言一结构化查询语言（SQL）进行数据库管理。MySQL因为其速度、可靠性和适应性而备受青睐。关系型数据库的特点是将数据保存在不同的表中，再将这些表放入不同的数据库中，而不是将所有的数据统一放在一个数据库里，这样的设计加快了MySQL的读取速度。访问及管理MyS

18、QL数据库的最常用标准化语言为SQL结构化查询语言口。使用SQL可以很容易的对数据库进行存储、更新和存取信息的操作。2.4前后端分离开发模式前端和后端分离是一个很受欢迎的发展方式，这使得劳动分工更加清晰，后台负责进行处理、存储信息数据，前端负责显示数据，前端和后端开发人员通过界面交换数据。在应用程序的前端分离模式下，后台仅会传回前端需要的资料，而HTML网页则不再显示,而前端则不再受控制。对于前端用户而言，怎样把前端所搜集的资料装入前端，是整个网页大发App官网的核心问题，但无论前端收集的数据是什么，后端需求的本质都是一样的，只有外部提供数据的逻辑支持，为用户提供个性化的服务。3系统需求分析3

19、.1 系统开发目的该系统是一个在线音乐网站，目的是让人们能够在网上收听音乐，让那些繁忙、劳累的人们在空闲的时候能够感受到快乐。本系统的大部分歌曲、歌词资料都是从管理员那里下载的，用户也可以在留言板上留言，由管理员自己下载。同时，该系统还为用户提供了一个可以分享自己喜爱的音乐的平台。同时，所有的音乐都可以免费播放给使用者。3.2 性能需求3.2.1 系统响应时间要求该系统应具有快速响应功能，用户打开在线音乐网站、刷新界面的平均响应时间应少于2秒。用户在网上搜索歌曲和播放歌曲，收集操作所需处理时间不超过1秒。3.2.2 系统可靠性要求系统的整体可靠性主要体现在对在线音乐网站运营的处理、从服务器获得

20、数据的可靠性等方面。3.2.3 系统易用性要求该在线音乐网站操作界面、后台管理人员操作要简单易学、风格统一、易学。从系统的可操作性来看。全部交互式界面均采用中文图形界面，能很好地适应一般的视窗模式。3.2.4存储容量要求该在线音乐网站使用Tomcat服务器把数据保存在本地，数据主要是整数和字符串格式，使用的空间较少。3.3 可行性分析系统可行性研究是在线音乐网络建设的一个重要环节，它的研究领域十分广阔，因此，如何设计出一种简便、实用的网络音乐网站是十分有意义的。3.3.1 经济可行性该系统的开发不需要太多的资金，只要一台正常的计算机就可以从因特网中获得所需的资料，采用的计算机语言、框架都是开源

21、的、免费的，因此不存在任何的财务费用。同时，为降低开发周期，引入成熟的开发架构，使系统的开发效率更高，成本更低。3.3.2 技术可行性开发环境是WindOWS,可以能够满足系统开发的要求，前端页面使用VUe渐进式框架完成对页面的模块化设计，使用JQUery与AjaX进行前端数据处理并用于传输数据。后端逻辑代码由JavaEE开发源代码,SSM框架构建项目整合框架,Maven管理项目以及库文件，MySQL数据库技术进行数据持久化处理。操作上十分简洁。使用以上的开发语言，其调试过程比较简便，易于实现，因此技术上是完全可行的。3.3.3 操作可行性该系统的工作可以分成两部分：管理员部分和用户部分。管理

22、员：有管理员负责管理网页，可以对数据库和使用者进行数据管理；用户：这个系统是以使用者为中心的，使用者可以随意地浏览网页。该系统的工作可以有效地提升用户对音乐的快速查找和享受，而且前端网页更适合于用户进行操作，不需要严格的部署环境，也不需要太多的维护。因此该系统在实际操作上具有可行性，具有较强的实用性，操作简便，便于应用，具有一定的实用价值。3.4 系统功能分析3.4.1 在线音乐网站系统的目标本系统在以B/S结构为基础，设计并实现在线音乐网站系统，以达到用户的基本要求，同时尽可能地实现用户的使用体验。同时也要跟上时代步伐，采取更加先进的技术。3.4.2 功能块划分系统由两大部分组成，低一部分是

23、面向用户的，主要功能有：登陆、登记、在线音乐、搜索、评论、下载、音乐、收藏等；第二部分是管理员，管理员可以在访问时，对所有的资料库进行操作。管理员是由一个超级管理员建立的，它赋予了一个合适的使用权限，可以按照你的需求来选择它。3.4.3 面向用户的主要功能1、注册登录功能注册：注册功能使用的是一种比较简单的方法，即输入姓名，邮箱，手机号码，并输入用户的密码，注册后将自动登录，从而实现快速注册。登陆：输入使用者名称和密码进行登陆。2、主要功能（1）搜索功能：用户可以通过歌曲名称、歌手等多种情况对歌曲进行检索，从而获得所需信息。（2）播放功能：使用者按一下对应的位置，即可播放，应有歌词滚动，可根据

24、不同的播放顺序暂停、切换等。收藏歌曲，播放历史，歌曲评分，歌曲评论：用户可以对喜欢的歌曲进行评论，也可以对其他用户的歌曲进行评论。将歌曲加入到播放历史中也不需要使用者手工操作，当歌曲被播放时，会被自动加入到歌曲当中。与此同时.，用户可以管理这些内容（4）个人中心：包括个人信息、个人签名、收藏的音乐、头像修改。3.4.4 面向管理员的主要功能这个系统会以一个超级管理员的最高权限开始。通过建立普通的管理员，并根据实际情况赋予不同的权限，例如增加，修改，删除数据库数据，管理用户信息。3.5 操作流程图3.5.1 用户操作流程图系统的用户操作流程图如下图3.1所示。(?)T1HI*!图3.1用户操作流

25、程图3.5.2 管理员操作流程图系统的管理员操作流程如下图3.2所示。图3.2用管理员操作流程图3.6需要满足的目标该系统Fl标是设计一个在线音乐网站系统，本系统主要包括前端、本地服务器、数据库、后台管理四大模块。采用VUE.js开发语言建立后端管理员系统，具有调试简便、操作简便、接口简洁、能接受用户的操作、请求服务器、采集数据、从逻辑层向VUEjs提供实时的反馈。在线音乐网站的设计界面如下：1用户登录注册界面：获取注册，登录信息，成功登录。1音乐网站首页界面：浏览歌曲。1音乐搜索界面：搜索指定歌曲。1歌曲分类界面：按照歌曲类别浏览所有歌曲。1歌曲详情界面：浏览该歌曲的详细信息。1歌曲排行榜界

26、面：浏览歌曲排行的详细信息。1管理员登陆界面：系统管理员输入账号以及密码，即可完成登陆至主页界面。1管理员对歌曲管理界面：对歌曲信息的增删改查，以及歌曲分类管理。I管理员对用户管理界面：查看用户个人信息等。1管理员对歌手管理界面：对歌手信息的增删改查。1管理员对歌单管理界面：对歌单信息的增删改查。1管理员对榜单管理界面：对榜单信息的增删改成。4系统概要设计1.1.1 功能模块划分用户的功能模块的用例图如下图4.1所示。1.1.2 管理员操作功能模块管理员的操作功能如下图4.2所示。图4.2管理员功能模块图1.1.3 系统功能结构图在线音乐网站的功能结构图如下图4.3所示。图4.3系统功能结构图

27、4.2数据库的设计4. 2.1设计分析数据库设计就是在一定的数据库设计环境下，根据数据库的实际情况，构造出最佳的数据库方案，从而实现对数据的高效存储，并满足不同的应用需求和处理过程的需要。在资料库的领域中，不同的系统都是利用资料库的系统。数据库设计的主要内容有：需求分析，概念结构设计，逻辑结构设计，物理结构设计，数据库实现，数据库的操作与维护。5. 2.2流程分析根据分析，在线音乐网站的数据库流程分析图如下图4.4所示。图4.4数据库流程分析图6. 2.3E-R模型根据分析，在线音乐网站的E-R图如下图4.5所示。图4.5E-R图7. 2.4各个实体的E-R模型1、用户信息实体:包括编号、用户

28、名、密码、性别、电话号码、电子邮件、出生日期、个人简介、地址、个人头像、创建的时间、更新的时间。通过登录页面的用户输入，获取这些信息，并保存到这里。如下图4.6所示。2、歌曲列表实体属性包括：编号、歌曲编号、歌单编号（由于歌曲列表编号作为主键，无法提供一个固定值作为查询条件，则设置歌曲编号、歌单编号作为固定值，以判断歌曲列表的唯一性），如下图4.7所示。3、评分实体属性包括：编号、歌单编号、用户编号、评分，如下图4.8所示。图4.8评分实体E-R图4、歌手的实体属性包括：编号、歌手的姓名、歌手的性别、歌手的图像、歌手的出生日期、出生地址、个人简介。如下图4.9所示。图4.9歌手实体E-R图歌曲

29、实体属性包括：编号、歌手编号、歌名、歌曲简介、创建时间、更新时间、歌曲头像、歌词、访问路径（数据库读取本地磁盘找出想要的歌曲），如下图4.10所示。图4.10歌曲列表实体E-R图6、歌单实体属性包括：编号、标题、图像、简介、类型。如下图4.11所示。图4.11歌单实体E-R图7、系统管理员实体属性包括：管理员的编号、姓名、密码，如下图4.12所示。图4.12管理员实体E-R图8、收藏实体属性包括：编号、创建时间，因为该表与其他表有关联，所以还需要创建用户编号、歌曲编号、歌曲列表编号等关联属性，如下图4.13所示。图4.13收藏实体E-R图5系统详细设计5.1数据库表结构8. 1.1用户信息表用

30、户信息表的信息如表5.1所示。表5.1用户信息表字段名用户编号账号密码性别电话邮箱生日签名地区头像创建时间更新时间代码idusernamepasswordsexphone_numemailbrithintroductionlocationavatorcreate_timeUpdate_time类型int(ll)varchar(255)varchar(255)tinyint(l)char(15)char(30)datetimevarchar(255)varchar(255)varchar(255)datetimedatetime是否主键是否否否否否否否否否否否是否为空否是是是是是是是是是是是5.

31、1.2管理员信息表管理员表的信息如表5.2所示。表5.2管理员信息表字段名管理员编号账号密码代码idnamepassword类型int(ll)varchar(255)varchar(255)是否主键是否否是否为空否否否5.1.3用户评论表用户评论表的信息如表5.3所示0表5.3用户评论表字段名主键代码id类型int(Il)是否主键是是否为空否用户编号USejidint(ll)否否评论类型typetinyint(l1)否是歌曲编号song_idint(ll)否是歌单编号song_list_idint(ll)否是评论内容contentvarchar(255)否是收藏时间create_timedat

32、etime否是评论点赞数upint(ll)否是5.1.4评分记录表评分记录表的信息如表5.4所示。表5.4评分记录表字段名代码类型是否主键是否为空主键idint(l1)是否歌单编号Song_IiSLidint(l1)否否用户编号ConsumerJdint(11)否否评分scoreint(l1)否是5.1.5收藏表收藏表的信息如表5.5所示。表5.5收藏表字段名代码类型是否主键是否为空主键idint(ll)是否用户编号user_idint(l1)否否收藏类型typetinyint(l1)否是歌曲编号song_idint(l1)否是歌单编号song_list_idint(ll)否是收藏时间crea

33、te_timedatetime否是5.1.6歌曲表歌曲表的信息如表5.6所示。表5.6歌曲表字段名代码类型是否主键是否为空主键idint(ll)是否歌手编号singer_idint(ll)否是歌名简介创建时间更新时间歌曲图片歌词歌曲地址nameintroductioncreate_timeupdate_timepiclyricurlvarchar(255)varchar(255)datelimedatetimevarchar(255)textvarchar(255)否否否否否否否是是是是是是是5.1.7歌曲列表歌曲列表的信息如表5.7所示。表5.7歌曲列表字段名主键歌曲编号歌单编号代码idSo

34、ng_idsong_list_id类型是否主键int(ll)是int(ll)否int(ll)否是否为空否是是5.1.8歌单表歌单表的信息如表5.8所示。表5.8歌单表字段名代码类型是否主键是否为空主键idint(l1)是否标题titlevarchar(255)否是歌单图片picvarchar(255)否是简介introdutiontext否是风格stylevarchar(255)否是5.1.9歌手表歌手表的信息如表5.9所示。表5.9歌手表字段名代码类型是否主键是否为空主键idint(ll)是否歌手姓名namevarchar(255)否是歌手性别sexvarchar(I)否是歌手头像picda

35、tetime否是歌手生日brithvarchar(255)否是歌手地区Iocatonvarchar(255)否是歌手简介introductionvarchar(255)否是8.2 管理员端设计8.2.1 2.1开发思路在建立了vue项目之后，在views文件夹中编写一个组件，由于所有的代码都集中在一起，很难进行后续的维护和修改，因此，将它们按照各自的功能和位置，分别放置在ComPOnentS文件中，然后将它们集成到VieWS文件夹中。装入App.vue文件，并在页面上呈现。一开始的时候，你可以把它写成一张死板，等你把它弄好了，你就可以向后台申请数据了，然后用AXioS插件来处理这些数据，然后在

36、控制台上检查你的数据，确定你的数据是否被保存到了合适的变量上。组件问题解决了下一步就是存取，我们怎么在单击的同时转换元件？我们将元件导入router资料夹，并为其设置路径。在此使用vue-router插件。因为部件越多，部件之间的传递就越困难，总不能总是有几个部件互相传递，所以我们必须将它们分开存放在存储库中，以备不时之需（此处使用SessionStorage解决vuex刷新数据丢失问题）。有时候，不同的部件使用的方式是一样的，在改变一个方法的时候，需要做很多的改动，因此，请将它们分别放到mixins文件夹中，然后在相应的组件中使用。VUe支持大量的第三方构件，可以为我们的项目提供良好的互动和

37、展示，特别是在必要的时候，npm或者yam,当然，某些风格和vue.js声明也可以放在assets目录中。8.2.2 项目结构后台项目结构如下图5.1所示。图5.1后台项目结构图8.2.3 用例图该系统管理员的用例图如下图5.2图5.2管理员用例图8.3 模块设计5 .3.1管理员登录要进入在线音乐网站系统，需要输入管理员的账号，然后密码验证，按下回车，如果账号密码正确，就可以进入你相应的界面，使用当前权限下的信息，如果验证信息不对，会有系统提示重新输入。6 .3.2系统首页系统首页上分别是用户、歌曲、歌手和歌单的一个统计，下面是用户性别比列、歌手性别比列、歌曲类型分布和歌手国籍分布的图形统计

38、展示。5.3.3用户管理用户管理界面，可以批量增加或删除用户，还可以修改用户性别、电子邮箱等，以及查看收藏的歌曲。5.3.4 歌手管理歌手管理界面，可以添加歌手或批量删除，以及修改歌手的信息如简介、生日等，查看歌手的歌曲管理。进行歌曲的添加或删除，更新图片或歌曲及歌词。5.3.5 歌单管理歌单管理界面，可以添加歌单或批量删除，以及修改歌单的信息如标题、风格等，以及查看歌单的歌曲。进行歌曲的添加或删除，更新图片或歌曲及歌词。5.3.6 信息统计该模块使用氏harts完成，歌曲类型分布、歌手国籍分布以柱状图的方式显示，用户性别比列、歌手性别比列以饼状图显示该类型所占总类型的百分百，管理员可清楚、直

39、观的看到数据的统计情况。5.4用户端设计5.4.1 创建项目直接用官方提供的脚手架，运行如下命令先全局安装vue,然后进行安装npminstallgvue/cli要创建项R的地方VUeinitwebpackmusic-client进入项目，执行如下命令安装项目依赖，npminstall然后直接如下命令项目就跑起来了。npmrundev6系统实现6.1 用户登录界面在主界面，您可以把账号和密码与您的资料库里的账号和密码相对比，若符合，你就会成功登入，并在弹出框中弹出，提醒用户密码或用户名是否错误。用户登录界面如图6.1所示。图6.1用户登录界面图6.2 用户注册界面用户在注册的时候必须填写用户名

40、、密码、性别、邮箱等信息，注册成功后，再返回登录。用户登录界面如图6.2所示。图6.2用户注册界面图6.3 用户浏览首页信息界面用户进入系统首页，上面分别是首页推荐、歌单、歌手和搜索框，下面是歌单和歌手展示。用户浏览首页界面如图6.3所示。图6.3用户浏览首页界面图6.4 用户浏览歌单界面用户进入歌单界面，首先是全部歌曲及分类，分别以地区、乐器、语言来进行分类，图片下面有对歌单的简介描述。进入一个歌单，有歌单列表，简介，歌单评分，列表下面可以进行发表评论。最下面有播放按钮、进度条、音量控制、收藏按钮、下载按钮和播放列表。用户浏览歌单界面如图6.4所示。图6.4用户浏览歌单界面图6.5 用户浏览

41、歌手界面用户进入歌手界面，首先是全部歌手及分类，分别以男歌手、女歌手、组合歌手来进行分类，图片下面有对歌手的姓名。进入一个歌手，有歌单列表，简介。用户浏览歌手界面如图6.5所示。图6.5用户浏览歌手界面图6.6 用户浏览我的音乐界面用户进入我的音乐界面，左面会显示用户头像，以及昵称、性别、生日和故乡，右面是个性签名，下面是我的收臧。用户浏览我的音乐界面如图6.6所示。图6.6用户浏览我的音乐界面图6.7 管理员登录界面,*ZCS-0000/C02) 示用户。管理员登录界面如图6.7所示。图6.7管理员登录界面图7测试与分析7.1 测试目的通过一系列的测试，来验证该音乐网站系统是否满足所定的需求

42、功能，并找出与需求规格不符或者无法实现某些功能的地方，并进行修改。7.2 测试方法测试方法主要有黑盒测试和白盒测试，由于受到时间、精力和技术的限制，本项目决定采用黑盒测试方法对本项目进行相关的测试。7.3 测试环境操作系统：WindowslOoTomcat：9.0,JDK版本：1.8。MySQL版本：5.7。InteniJIDEA版本:2020.k7.4 功能测试模块7.4.1 用户登陆功能测试用户登陆功能测试表如下表7.1所示。表7.1用户登录功能测试表测试功能用于测试用户登陆功能。输入数据输入用户账号和密码。执行步骤点击确认登陆。预期输出如果账号密码正确，成功登录跳转首页，否则显示“用户名

43、或密码错误”。实际结果与预期一致，成功实现。7.4.2管理员登陆功能测试管理员登陆功能测试表如下表7.2所示。表7.2管理员登录功能测试表测试功能用于测试管理员登陆功能。输入数据输入管理员账号和密码。执行步骤点击确认登陆。预期输出如果账号密码正确，成功登录，否则显示“用户名或密码错误”实际结果与预期一致，成功实现。7.4.3 用户浏览/搜索歌曲的功能测试用户浏览/搜索歌曲功能测试表如下表7.3所示。表7.3用户浏览/搜索歌曲功能测试表测试功能用于测试用户浏览/搜索歌手信息功能。输入数据测试搜索歌手功能，输入“LOCO”o执行步骤1、点击首页、分别浏览首页、分类歌手页。2、点击歌手，查看歌手的详

44、细信息。点击搜索栏跳转到所示页面，输入歌手关键词即可查找对应歌手预期输出成功显示歌手信息，成功搜索到对应的歌手。实际结果与预期一致，成功实现。7.4.4 用户收藏歌曲的功能测试用户收藏歌曲的功能测试表如下表7.4所示。表7.4用户收藏歌曲的功能测试表测试功能用于测试用户浏览/搜索歌手信息功能。输入数据测试搜索歌手功能，输入“LOCO”.执行步骤1、点击首页、分别浏览首页、分类歌手页。2、点击歌手，查看歌手的详细信息。点击搜索栏跳转到所示页面，输入歌手关键词即可查找对应歌手预期输出成功显示歌手信息，成功搜索到对应的歌手。实际结果与预期一致，成功实现。7.4.5 用户浏览/搜索歌手的功能测试用户浏览/搜索歌手功能测试表如下表7.5所示。测试功能用于测试用户浏览/搜索歌手信息功能。输入数据测试搜索歌手功能，输入“LOCO”。执行步骤1、点击首页、分别浏览首页、分类歌手页。执行步骤2、点击歌手，查看歌手的详细信息。点击搜索栏跳转到所示页面，输入歌手关键词即可查找对应歌手。预期输出成功显示歌手信息，成功搜索到对应的歌手。实际结果与预期一致，成功实现。表7.5用户浏览/搜索歌手功能测试表7.4.6 用户浏览/评论歌曲的功能测试用户浏览/评论歌曲功能测试表如下表7.6所示。表7.6用户浏览/评论歌曲功能测试表测试功能用于测