基于SpringBoot+MyBatis+Vue的音乐网站

news/2024/5/20 14:52:01/文章来源:https://blog.csdn.net/zhipengfang/article/details/125904039

欢迎关注方志朋的博客,回复”666“获面试宝典

项目说明

本音乐网站的客户端和管理端使用 Vue 框架来实现,服务端使用 Spring Boot + MyBatis 来实现,数据库使用了 MySQL。

实现思路可以看这里:

https://yin-hongwei.github.io/2019/03/04/music/

项目启动方法看文章末尾~

项目预览

1、前台截图预览

4666bac8bb24a5c9541f864dbc91c9be.pnga36ec6127e6701dc9b87a6ed0fdde119.png

77bf5a2ff90b2238b1f10ed0b52fe681.png

e8966b27ec492d8c72328fff2db1265d.png

e491ce662181201aa3352c0dea3bccf4.png

0783c6c241a3203b10dffc97bd68f758.png426b03f0e6ee54d7a1fa15d1904d4981.png6dd905e4f0851333948c9c27d82580d3.png4dd891a913055f9b4abaae321b2f593a.pnga9137b6bec0fa8c98b1063c51fdf9604.pngff5f23c7d904ecd1c8f062a17a1b6e14.png

2、后台截图预览

107404ee0d2e03265f36702a97f9c0d4.pngde2e5fa8d124b6fb2aec6081f8aa0d70.pngc410de8b76d482ffe7ad1000d7922b74.png7181bde62612d8d9f89691d922f57ef9.pngad9c1751b942c6c987a6f197810b494e.pngfca15b09ff517243bda01da345dd9f2b.png

项目功能

  • 音乐播放

  • 用户登录注册

  • 用户信息编辑、头像修改

  • 歌曲、歌单搜索

  • 歌单打分

  • 歌单、歌曲评论

  • 歌单列表、歌手列表分页显示

  • 歌词同步显示

  • 音乐收藏、下载、拖动控制、音量控制

  • 后台对用户、歌曲、歌手、歌单信息的管理

技术栈

1、后端

SpringBoot + MyBatis

2、前端

Vue3.0 + TypeScript + Vue-Router + Vuex + Axios + ElementPlus + Echarts

开发环境

JDK:jdk-8u141

mysql:mysql-5.7.21-1-macos10.13-x86_64(或者更高版本)

node:v14.17.3

IDE:IntelliJ IDEA 2018、VSCode

下载运行

1、下载项目到本地

git clone git@github.com:Yin-Hongwei/music-website.git# 上面下载慢可以用下面这个
git clone git@gitee.com:Yin-hongwei/music-website.git

2、下载数据库中记录的资源

下载链接https://pan.quark.cn/s/088e0b8a6957

去下载网站依赖的歌曲及图片,将 data 夹里的文件放到 music-server 文件夹下。

注意:资源整理了一下,按照下面的截图存放。

4c093058a7050f982e4d646f36cfb8c3.png

3、修改配置文件

1)创建数据库 将 music-website/music-server/sql 文件夹中的 tp_music.sql 文件导入数据库。

2)修改用户名密码 修改 music-website/music-server/src/main/resources/application.properties 文件里的 spring.datasource.username 和 spring.datasource.password;

4、启动项目

  • 启动管理端:进入 music-server 文件夹,运行下面命令启动服务器

// 方法一
./mvnw spring-boot:run// 方法二
mvn spring-boot:run // 前提装了 maven
  • 启动客户端:进入 music-client 目录,运行下面命令

npm install // 安装依赖npm run serve // 启动前台项目
  • 启动管理端:进入 music-manage 目录,运行下面命令

npm install // 安装依赖npm run serve // 启动后台管理项目

项目源码下载

下载链接:https://pan.quark.cn/s/5613280cf2ba

热门内容:
  • 太强了,一个注解搞定接口返回数据脱敏

  • 阿里三面凉凉!输在了:微服务,Redis,JVM……

  • 吐血推荐17个提升开发效率的“轮子”

  • 微信为什么使用 SQLite 保存聊天记录?

  • Spring中毒太深,离开Spring居然连最基本的接口都不会写了

  • 面试官:线上MySQL的自增id用尽怎么办?

  • 别再写 main 方法测试了,太 Low!这才是专业 Java 测试方法!

f4aaa1a4801918f651058adae9aafe3a.jpeg

最近面试BAT,整理一份面试资料《Java面试BAT通关手册》,覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。
获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。

明天见(。・ω・。)

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

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

相关文章

网站速度优化模块HttpCompressionModule

为了优化网站的访问速度&#xff0c;准备采用HttpCompressionModule 6对传输数据进行压缩&#xff0c;下载了HttpCompressionModule 6 , 并按照示例程序中的web.config配置了网站的web.config。<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:offi…

Python 实战:定时对网站进行签到

作者 | 朱小五来源 | 快学Python我今天呢&#xff0c;要给大家分享一下升级款——request方式。具体做法首先打开我们需要签到的网站&#xff0c;使用Chrome浏览器的F12快捷键&#xff08;或通过鼠标右键菜单“检查”&#xff09;打开浏览器的开发者工具&#xff0c;点击 Netwo…

有哪些好的刷题网站?2017年最受欢迎的编程挑战网站

程序猿&#xff08;ID&#xff1a;imkuqin&#xff09; 猿妹编译编译自&#xff1a;https://medium.freecodecamp.org/the-10-most-popular-coding-challenge-websites-of-2016-fb8a5672d22f 编程几乎已经成为了人类所知每个行业的必要组成部分&#xff0c;如今有越来越多的人开…

侠客X官方网站成立,第一个内测版本即将放出,敬请期待.

这是一个难忘的日子&#xff0c;西方的情人节&#xff0c;本站的成立代表侠客X&#xff0c;即将与大家见面了。 我们的要做的是&#xff0c;传承侠客站群经典模式&#xff0c;打造SEO王者力作&#xff0c;侠客X即将公开测试&#xff0c;敬请期待。 http://xpk.in Qin 转载于:ht…

SEO研究:网站结构

在衡量所有权重之间&#xff0c;网站结构大概占到30%&#xff0c;这也是很多网站排名不好&#xff0c;或者有站长根本不用优化就能获得很好排名的原因。说到结构必须明白两个概念&#xff0c;一个是物理概念,就是文件存放的路径&#xff0c;另一个是逻辑结构。比较好的情况是逻…

【百度地图API】——国内首款团购网站的地图插件

摘要&#xff1a; 本文介绍了一款应用在团购网站上的地图插件&#xff0c;适用于目前非常流行的团购网站。使用这款地图插件&#xff0c;无需任何编程技术&#xff0c;你就把商家的位置轻松地标注在地图上。 前台地址 http://map.baidu.com/fwmap/upload/r/map/fwmap/tuangou/u…

用Python轻松制作一个股票K线图网站

在前面的文章中&#xff0c;我们学习了如何使用 Tkinter 构建股票数据抓取以及展示K线图功能&#xff0c;虽然大致的功能已经具备&#xff0c;但是在当今这个人手一个 Web 服务的年代&#xff0c;GUI 程序还是没有 Web 服务来的香啊。我们需要用到的知识包括 PyEcharts 的使用&…

边玩游戏边学Git?这个开源网站我爱了

Git作为世界上最流行的版本控制系统&#xff0c;可以说是每一位与程序打交道的朋友最值得学习的软件之一。除了管理自己的项目&#xff0c;如果你对参与开源项目感兴趣&#xff0c;那么Git更是联结Github、Gitlab等知名代码项目托管网站&#xff0c;与他人协作管理推进开源项目…

15个新鲜的单页网站设计实例

单页网站因为结合着css3 html5和jquery技术 使得这样的网站看这些网站看起来更具吸引力和新鲜的感&#xff0c;逐渐成为互联网上一个新趋势 &#xff0c;今天介绍网站设计一些新鲜的例子 。我希望大家将欣赏这美妙的设计师做的工作。随时分享您的看法&#xff0c; 1) Pigspotte…

【第15周复盘】B站是个学习的网站

「青少年编程竞赛交流群」已成立&#xff08;适合6至18周岁的青少年&#xff09;&#xff0c;公众号后台回复【Scratch】或【Python】&#xff0c;即可进入。如果加入了之前的社群不需要重复加入。 微信后台回复“资料下载”可获取以往学习的材料&#xff08;视频、代码、文档&…

【组队学习】【26期】编程实践(Django网站开发)

编程实践&#xff08;Django网站开发&#xff09; 论坛版块&#xff1a; http://datawhale.club/c/team-learning/28-category/28 开源内容&#xff1a; https://github.com/datawhalechina/team-learning-program/tree/master/Django 学习目标 从零开始搭建一个属于自己…

大型网站架构演变和知识体系

存爱好&#xff0c;作为收藏&#xff0c;原地址&#xff1a;http://www.blogjava.net/BlueDavy/archive/2008/09/03/226749.html&#xff0c;同时向原创致敬之前也有一些介绍大型网站架构演变的文章&#xff0c;例如LiveJournal的、ebay的&#xff0c;都是非常值得参考的&#…

正确设置php-fpm和nginx防止网站被黑

2019独角兽企业重金招聘Python工程师标准>>> 核心总结&#xff1a;php-fpm 子进程所使用的用户&#xff0c;不能是网站文件所有者。 凡是违背这个原则&#xff0c;则不符合最小权限原则。 根据生产环境不断反馈&#xff0c;发现不断有 php网站被挂木马&#xff0c;绝…

jiathis:社交化数据分析 帮助网站提高流量

随着微博的兴起&#xff0c;社会化营销逐渐走进我们的生活&#xff0c;不管是杜蕾斯微博事件还是最近在小米大战360&#xff0c;都是在社会化平台上面进行&#xff0c;而 如何方便的将网站内 容分享至社会化媒体&#xff0c;&#xff0c;大部分博主会选择工具&#xff0c;但选择…

[Python爬虫] 之二十二:Selenium +phantomjs 利用 pyquery抓取界面网站数据

一、介绍 本例子用Selenium phantomjs爬取界面&#xff08;https://a.jiemian.com/index.php?msearch&aindex&typenews&msg电视&#xff09;的资讯信息&#xff0c;输入给定关键字抓取资讯信息。 给定关键字&#xff1a;数字&#xff1b;融合&#xff1b;电视 抓取…

45个优秀的国外电子商务网站设计实例

这篇文章与大家分享45个国外优秀的电子商务网站设计案例&#xff0c;希望能带给你灵感。对于电子商务网站来说&#xff0c;也许销售更多产品比漂亮的外观设计更重要&#xff0c;不过漂亮的东西总是能给用户留下深刻的印象&#xff0c;一起欣赏。 TALBOTS Free People Armani Ex…

个人谈谈seo

为什么80%的码农都做不了架构师&#xff1f;>>> 我不知道大家有没有做过seo的工作。以前我是一各技术人员。纯技术开发或技术管理人员。基本上也没有接触过seo的相关工作&#xff0c;整天在写代码或看别人的代码 。干了六年只见他们都在谈友情链接。做推广&#xf…

中国最齐全的主要电子商务网站(B2C)

中国最齐全的主要电子商务网站(B2C)------[连载之电子商务网站架构]访问量超过100万的电子商务网站技术架构版本&#xff1a;V1出处&#xff1a;http://jimmyli.blog.51cto.com/ 我站在巨人肩膀上Jimmy Li作者&#xff1a;Jimmy Li关键词&#xff1a;中国 电子商务 网站 B2C连接…

quartz定时任务开发cron常用网站

http://cron.qqe2.com/ cron表达式 只能看下5个时点http://www.cronmaker.com/ 能看500个时点https://unixtime.51240.com/unix时间戳 quartz定时任务开发常常需要用到一些工具。 如cron表达式的构造&#xff0c;绝对时间&#xff0c;时间戳的定位&#xff0c;单调的时候要看…

web网站加速之CDN(Content Delivery Network)技术原理

2019独角兽企业重金招聘Python工程师标准>>> 在不同地域的用户访问网站的响应速度存在差异,为了提高用户访问的响应速度、优化现有Internet中信息的流动,需要在用户和服务器间加入中间层CDN. 使用户能以最快的速度&#xff0c;从最接近用户的地方获得所需的信息&…