[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8644":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},8644,"music-website","Yin-Hongwei\u002Fmusic-website","Yin-Hongwei","🎧 Vue + SpringBoot + MyBatis 音乐网站","",null,"Vue",6716,1644,39,131,0,7,31,72.25,"Other",false,"master",true,[5,25,26,27,28,29,30,31,32,33,34],"mvc","mybatis","mysql","spring-boot","ssm","typescript","vue","vue-spring-boot","vue-spring-boot-mybatis","vue3","2026-06-12 04:00:40","\u003Ch1 align=\"center\">music-website\u003C\u002Fh1>\n\n\u003Cp align=\"center\">\u003Ca href=\"README.en.md\">English README\u003C\u002Fa>\u003C\u002Fp>\n\n\u003Cbr\u002F>\n\n\u003Ch1 align=\"center\">\u003Cfont color=\"red\">声明\u003C\u002Ffont>\u003C\u002Fh1>\n\n**这项目我一直作为技术分享，不做收费（版权归我个人独有，大家拿来学习交流随时欢迎，拒绝商用）。希望大家可以尊重下我的劳动成果，谢谢。**\n\n\u003Cbr\u002F>\n\n## 项目说明\n\n本音乐网站的客户端和管理端使用 **Vue** 框架来实现，服务端使用 **Spring Boot + MyBatis** 来实现，数据库使用了 **MySQL**。实现思路可以看 **[这里](https:\u002F\u002Fwww.yuque.com\u002Fyinhongwei-ya0u7\u002Fbk3hhk\u002Fnu3i7emefxvetpz8)**；项目启动方法看文章末尾。\n\n\u003Cbr\u002F>\n\n## 项目预览\n\n> 前台截图预览\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax1.sinaimg.cn\u002Flarge\u002F007mxWTugy1icrcbfjswyj32c01ik4a1.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax3.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7ma2nisj32c01ik7wi.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax3.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7mwfp2sj32c01ikqv6.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax1.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7pxg6wlj32c01ik7tu.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax4.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7nn7l7tj32c01ik1ky.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax1.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7pxg6wlj32c01ik7tu.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax4.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7r9yn98j32c01iku0x.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax3.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7s5lnmjj32c01iknd9.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax2.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7sv48ohj32c01ikqe5.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftvax2.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr7un2vyvj32c01ikqht.jpg)\u003Cbr\u002F>\n\n\n> 后台截图预览\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftva1.sinaimg.cn\u002Flarge\u002Fe6c9d24ely1h158xvsdvij21c00u0wi8.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftva1.sinaimg.cn\u002Flarge\u002Fe6c9d24ely1h159x0re56j21c00u077a.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftva1.sinaimg.cn\u002Flarge\u002Fe6c9d24ely1h159xzbi85j21c00u0whn.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftva1.sinaimg.cn\u002Flarge\u002Fe6c9d24ely1h159zewsh4j21c00u079f.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftva1.sinaimg.cn\u002Flarge\u002Fe6c9d24ely1h159yz5x8hj21c00u0win.jpg)\u003Cbr\u002F>\n\n![](https:\u002F\u002Fi0.wp.com\u002Ftva1.sinaimg.cn\u002Flarge\u002Fe6c9d24ely1h159yo2nzmj21c00u0djp.jpg)\u003Cbr\u002F>\n\n## 项目功能\n\n- 用户登录注册\n- 用户信息编辑\n- 歌单推荐；歌单、歌手展示\n- 歌曲、歌单搜索\n- 歌单、歌曲评论、收藏\n- 歌词同步显示\n- 音乐播放、收藏、下载、拖动控制、音量控制\n- 后台对 banner、用户、歌曲、歌手、歌单信息的管理\n\n\u003Cbr\u002F>\n\n## 技术栈\n\n### 后端\n\n**SpringBoot + MyBatis + Redis + Minio**\n\n### 前端\n\n**Vue3 + TypeScript + Vue-Router + Pinia + Axios + ElementPlus**\n\n### 部署\n\n**docker**\n\n\u003Cbr\u002F>\n\n## 开发环境\n\nJDK： jdk-8u141\n\nmysql：mysql-5.7.21-1-macos10.13-x86_64（或者更高版本）\n\nredis：5.0.8 或 [docker启动redis | 想飞跃的鱼 (nanshaws.github.io)](https:\u002F\u002Fnanshaws.github.io\u002Fdocker\u002Fdocker启动redis(完美过程).html)\n\nnode：14+\n\nIDE：IntelliJ IDEA 2018、VSCode\n\nminio: 下载本地最新 或者 [docker完美启动minio | 想飞跃的鱼 (nanshaws.github.io)](https:\u002F\u002Fnanshaws.github.io\u002Fdocker\u002Fdocker完美启动minio(完美过程).html)\n\n\u003Cbr\u002F>\n\n## 下载运行\n\n### 1、下载项目到本地\n\n```bash\ngit clone git@github.com:Yin-Hongwei\u002Fmusic-website.git\n```\n\n### 2、下载数据库中记录的资源\n\n去【链接: https:\u002F\u002Fpan.baidu.com\u002Fs\u002F1Qv0ohAIPeTthPK_CDwpfWg 提取码: gwa4 】下载网站依赖的歌曲及图片，将 data 夹里的文件放到 music-server 文件夹下。\n\n> **注意：资源整理了一下，按照下面的截图存放。**\n\n\u003Cimg src=\"https:\u002F\u002Fi0.wp.com\u002Ftva1.sinaimg.cn\u002Flarge\u002Fe6c9d24ely1h6gz1le9wxj20fo0gggmh.jpg\" height=\"200px\"\u002F>\n\n### 3、修改配置文件\n\n1）创建数据库\n将 `music-website\u002Fsql` 文件夹中的 `yin_music.sql` 文件导入数据库。\n\n2）修改用户名密码\n修改 `music-website\u002Fmusic-server\u002Fsrc\u002Fmain\u002Fresources\u002Fapplication.properties` 文件里的 `spring.datasource.username` 和 `spring.datasource.password`；\n\n### 4、启动项目\n\n- **启动管理端**：进入 music-server 文件夹，运行下面命令启动服务器\n\n```bash\n# macOS \u002F Linux（推荐，使用项目自带 Maven Wrapper）\n.\u002Fmvnw clean spring-boot:run\n\n# Windows（推荐，使用项目自带 Maven Wrapper）\nmvnw.cmd clean spring-boot:run\n\n# 备选：本机已安装 Maven 时\nmvn clean spring-boot:run\n```\n\n- **启动 redis**：直接在终端输入下面命令\n\n```\nredis-server\n```\n\n> 下载地址：https:\u002F\u002Fredis.io\u002F\n>\n> Mac 安装使用示例：https:\u002F\u002Fwww.jianshu.com\u002Fp\u002Fce27d9ab4f8c\n\n- **启动客户端**：进入 music-client 目录，运行下面命令\n\n```js\nnpm install \u002F\u002F 安装依赖\n\nnpm run serve \u002F\u002F 启动前台项目\n```\n\n- **启动管理端**：进入 music-manage 目录，运行下面命令\n\n```js\nnpm install \u002F\u002F 安装依赖\n\nnpm run serve \u002F\u002F 启动后台管理项目\n```\n\n### 5、常见问题\n\n1、图片、音乐加载失败\n把 music-website\u002Fmusic-server 目录下的 img、song 目录移动到 music-website 目录。\n\n2、音乐播放不了\n可能是音乐损毁了，重新更换一下音乐资源。\n\n\u003Cbr\u002F>\n\n### 6、部署在linux上，用 docker【本地运行可以忽略】\n\n将以下东西存储到 Linux 服务器上：\n\n![image-20240108131746139](https:\u002F\u002Fi0.wp.com\u002Ftvax2.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr99ij9s5j30bs06hq4m.jpg)\n\n还有编译好的 jar 包，都放到同一目录里面，如下：\n\n![image-20240108131824788](https:\u002F\u002Fi0.wp.com\u002Ftvax4.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr99ioipxj3082076my5.jpg)\n\n```\ndocker compose up --build\n```\n\n运行结果：\n\n![image-20240108131927175](https:\u002F\u002Fi0.wp.com\u002Ftvax4.sinaimg.cn\u002Flarge\u002F007mxWTugy1icr99iumhpj319y0hjwyi.jpg)\n\n\u003Cbr\u002F>\n\n## 贡献者\n\n感谢所有为本仓库提交过代码与改进建议的贡献者。\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FYin-Hongwei\u002Fmusic-website\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=Yin-Hongwei\u002Fmusic-website\" alt=\"Contributors\" \u002F>\n\u003C\u002Fa>\n\n\u003Cbr\u002F>\n\n## 赞助\n\n如果此项目对你确实有帮助，欢迎给我打赏一杯咖啡～😄\n\n\u003Cimg src=\"https:\u002F\u002Fpiccdn2.umiwi.com\u002Ffe-oss\u002Fdefault\u002FMTc1NTU4NzgxOTM3.png\" width=\"300px\"\u002F>\n\n\u003Cbr\u002F>\n\n## License\n\nThis project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license. The project cannot be used for commercial purposes.\n\nCopyright (c) 2018 Yin-Hongwei \n","music-website 是一个基于 Vue 和 Spring Boot 的在线音乐平台。该项目利用了 Vue3、TypeScript 等前端技术栈以及后端的 Spring Boot 和 MyBatis 框架，结合 MySQL 数据库来实现用户登录注册、个人信息编辑、歌曲播放与搜索、歌单管理等功能。此外，它还支持歌词同步显示、音乐收藏下载等特性，并且提供了后台管理系统用于维护网站内容。此项目适用于想要学习前后端分离架构下的 Web 应用开发人员，特别是对 Vue 与 Spring Boot 结合使用感兴趣的开发者。同时，对于希望搭建个人音乐分享平台或进行相关技术研究的朋友来说，也是一个很好的参考案例。",2,"2026-06-11 03:19:04","top_language"]