基于VUE的音乐qq网站设计与实现(Java+spring boot+MySQL+VUE)

获取源码或者论文请私信博主

演示视频:

基于VUE的音乐qq网站设计与实现(Java+spring boot+MySQL+VUE)

使用技术:

前端:html css javascript jQuery ajax thymeleaf 微信小程序

后端:Java springboot框架 mybatis

数据库:mysql5.7

开发工具:IDEA2019

主要功能:

管理员功能需求

本基于web技术移动端音乐APP根据业务需要分为用户端以及管理端,因此此平台包含两种角色,音乐APP管理人员以及听歌用户,两种身份的使用者操作着系统不同的模块,行使着不同的身份,管理员包含:音乐APP后台登录、用户管理、音乐类型管理、音乐管理、歌单管理、歌单歌曲设置、收藏记录管理、用户喜欢记录管理、用户播放记录管理等模块。

音乐APP后台登录:音乐APP管理人员进入使用系统之前需要进行身份验证,验证成功才可进入音乐APP后台进行对应身份的权限操作。

管理音乐APP前端使用者:登录成功对管理音乐APP前端使用者进行身份信息的管理,可以清理违规的操作人员,也可以增加新的管理人员。

音乐分类设置:系统为了吸引不同的使用者,会根据实际情况设置各种音乐分类满足不同用户的听歌需求。

音乐管理:实现音乐的上传操作,选择音乐的类型,选择对应的歌手,上传音乐的mp3格式音乐,实现音乐的后台上传管理。

歌单管理:管理员在此模块设置歌单,设置不同类型的歌单,比如经典老歌、抖音热歌、怀旧粤语等不同的歌单丰富整个APP的内容,满足不同用户的听歌需求。

歌单歌曲设置:管理员设置好歌单后通过此模块为不同的歌单设置不同的音乐。

收藏记录管理:管理员实现收藏记录的管理,查看用户的收藏记录,确定大家的听歌喜好。

用户喜欢记录管理:使用者通过音乐APP前端将喜欢的音乐进行添加后,维护人员是可以查看的,并且对违规的内容可以进行对应的操作。

音乐播放记录:使用者通过音乐APP前端播放过某些歌曲管理人员都可以通过后台进行查看,通过浏览这些播放记录确定哪些歌曲比较受欢迎对此可以针对性的制作歌单。

普通用户功能需求

普通用户拥有登陆注册、歌单推荐模块、歌手模块、排行模块、歌曲搜索模块、歌曲清单、歌曲播放、上一曲、下一曲、加入喜欢、加入收藏、我的喜欢、我的收藏以及播放记录等模块。

音乐APP登陆注册:需为各级音乐APP使用者实现注册及登录功能,同时设置用户相应的访问权限;

歌单推荐模块:普通用户进入网站的第一个功能模块,在此查看不同的歌单,根据自己的喜欢进入不同的歌单。

歌手展示:音乐APP的核心是歌曲的质量以及歌手的质量,如果没有优质的歌手进行歌曲的发布,这个平台是无法吸引用户的。

歌曲以及歌单排行:通过设置比较吸引人的歌曲集合,让音乐APP使用者能够被平台吸引,比如热歌榜单、新歌榜等不同的榜单以及榜单对应的歌曲信息。

歌曲搜索模块:此模块是此平台的核心功能,任何系统搜索是不可或缺的,用户通过此模块搜索自己喜欢的音乐,此模块利用了模糊搜索,用户不需要输入完整的歌曲名字也能搜索到对应的歌曲并且播放。

歌曲清单:歌单、排行榜、搜索结果都会进入此模块,此模块展示不同的音乐清单。

歌曲播放:用户打开自己喜欢的音乐,在此模块可以进行音乐的播放操作。

上一曲:用户听歌过程中如果遇到喜欢的歌曲希望在此播放可以点击上一曲继续听歌。

下一曲:用户听歌过程中如果遇到不喜欢的歌曲可以直接下一曲。

加入喜欢/收藏:用户听歌过程中如果遇到喜欢的歌曲可以点赞喜欢以及收藏此歌曲。

我的喜欢/收藏/播放记录:个人中心模块主要是实现了我的个人的一些操作记录,包括自己喜欢的歌曲以及收藏的歌曲还有查看自己的播放记录等功能。

功能截图: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/29017.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

东莞-戴尔R540服务器故障告警处理方法

DELL PowerEdge R540服务器故障维修案例:(看到文章就是缘分) 客户名称:东莞市某街道管理中心 故障机型:DELL R540服务器 故障问题:DELL R540服务器无法开机,前面板亮黄灯,工程师通过…

功能丰富的 Markdown 笔记工具:FSNotes Mac中文版图文安装教程

FSNotes Mac版是Mac平台上一款纯文本笔记本管理器,FSNotes for mac中文版支持Markdown、RTF等格式,轻松查看和编辑数据,还可以将数据存储在文件系统中,同时具备iCloud同步功能,使用非常便捷。 FSNotes for mac官方介绍…

GO 语言GC

目录 写屏障 读屏障 GO语言GC准备 堆内存结构: GC内存分配: GC触发: P的作用: 写屏障 实现强弱三色不式,为了避免误删,则实现写屏障. 写屏障是在写操作中插入指令,目的是把数据对象的修改通知到GC GO语言支持两种写屏障 读屏障 非移动垃圾回收(例如 三色)天…

Kyuubi的介绍优势(官网链接)

官网链接:https://kyuubi.apache.org/ Apache Kyuubi™ 是一个分布式多租户网关,用于在数据仓库和 Lakehouse 上提供无服务器 SQL。 Kyuubi 在各种现代计算框架(例如 Apache Spark、 Flink、 Doris、 Hive和Trino等)之上构建分布…

Element-UI 实现动态增加多个不同类型的输入框并校验(双重v-for表单验证)

文章目录 前言定义表单格式表单渲染和验证扩展 前言 在做复杂的动态表单,实现业务动态变动,比如有一条需要动态添加的el-form-item中包含了多个输入框,并实现表单验证,但在element-ui组件库中给出的表单校验中没有这样的格式&…

navicate_windows_14

1.新建文本文档2.输入如下内容 echo off set dnInfo set dn2ShellFolder set rpHKEY_CURRENT_USER\Software\Classes\CLSID :: reg delete HKEY_CURRENT_USER\Software\PremiumSoft\NavicatPremium\Registration14XCS /f %针对<strong><font color"#FF0000"…

Spring创建Ajax和接受Ajax数据-spring20

建一个AJAX.jsp页面 发送Ajax请求一般用jQuery 引入jQuery 引入文件&#xff1a; 弄一个请求 获得集合参数第二种应用场景 requestBody 的意思请求体 为什么找不到JQuery文件&#xff0c;原因是&#xff1a;前端控制器的配置&#xff1a;缺省&#xff0c;客户端发送请求&…

idea创建spark教程

1、环境准备 java -version scala -version mvn -version spark -version 2、创建spark项目 创建spark项目&#xff0c;有两种方式&#xff1b;一种是本地搭建hadoop和spark环境&#xff0c;另一种是下载maven依赖&#xff1b;最后在idea中进行配置&#xff0c;下面分别记录两…

Java开发中使用sql简化开发

引语&#xff1a; 在Java开发中&#xff0c;我们更希望数据库能直接给我们必要的数据&#xff0c;然后在业务层面直接进行使用&#xff0c;所以写一个简单的sql语句有助于提高Java开发效率&#xff0c;本文由简单到复杂的小白吸收&#xff0c;还请多多指教。 使用MySQL数据库…

Spark MLlib快速入门(1)逻辑回归、Kmeans、决策树、Pipeline、交叉验证

Spark MLlib快速入门(1)逻辑回归、Kmeans、决策树案例 除了scikit-learn外&#xff0c;在spark中也提供了机器学习库&#xff0c;即Spark MLlib。 在Spark MLlib机器学习库提供两套算法实现的API&#xff1a;基于RDD API和基于DataFrame API。今天&#xff0c;主要介绍下Data…

【JavaScript】Function的祖传方法call与apply

引言 内容速递 看了本文您能了解到的知识&#xff01; 在本篇文章中&#xff0c;将带你了解什么是call和apply&#xff0c;call和apply的用途、如何手写call和apply以及call和apply的使用场景。 1、什么是call和apply call()和apply()是JavaScript中的两个内置方法&#xff…

数据可视化揭示人口趋势:从数字到图像的转变

人口是一个关乎我们生活的重要话题&#xff0c;而数据可视化技术为我们提供了一种全新的方式来理解和解读人口变化的趋势。通过将大量的人口数据转化为直观的图表和图像&#xff0c;数据可视化帮助我们更好地观察、分析和解释人类发展的重要特征。 数据可视化揭示人口趋势的第一…