音乐网站的系统开发分为（Java）后端和（VUE）前端，其中的前端的界面主要通过前后台两部分实现。音乐网站的系统结构分为：为服务用户的前台界面的客户端，为管理系统数据的后台界面和服务端的组成的管理端。如图所示：
（1）项目文件结构：
```
project
├── ruoyi-common // 工具类
│ └── annotation // 自定义注解
│ └── config // 全局配置
│ └── constant // 通用常量
│ └── core // 核心控制
│ └── enums // 通用枚举
│ └── exception // 通用异常
│ └── filter // 过滤器处理
│ └── utils // 通用类处理
├── ruoyi-framework // 框架核心
│ └── aspectj // 注解实现
│ └── config // 系统配置
│ └── datasource // 数据权限
│ └── interceptor // 拦截器
│ └── manager // 异步处理
│ └── security // 权限控制
│ └── web // 前端控制
├── ruoyi-generator // 代码生成（可移除）
├── ruoyi-quartz // 定时任务（可移除）
├── ruoyi-system // 系统代码
├── ruoyi-admin // 后台服务
├── ruoyi-music // 音乐模块
├──
├── ruoyi-ui //项目后台
├── ruoyi-client //项目前台
```
（2）前端后台结构：
```
ruoyi-ui
├── build // 构建相关
├── bin // 执行脚本
├── public // 公共文件
│ ├── favicon.ico // favicon图标
│ └── index.html // html模板
│ └── robots.txt // 反爬虫
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── layout // 布局
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ ├── permission.js // 权限管理
│ └── settings.js // 系统配置
├── .editorconfig // 编码格式
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── .env.staging // 测试环境配置
├── .eslintignore // 忽略语法检查
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── babel.config.js // babel.config.js
├── package.json // package.json
└── vue.config.js // vue.config.js
```
（3）前端前台结构：
```
ruoyi-client
├── build // webpack相关配置文件
├── config // vue基本配置文件
├── node\_modules // 包
├── index.html // 入口页面
├── package.json // 管理包的依赖
├── src // 项目源码目录
│ ├── assets // 静态资源，图片、js、css 等
│ ├── api // 封装请求的 api
│ ├── mixins // 公共方法
│ ├── router // 路由
│ ├── store // 管理数据
│ ├── components
│ │ ├── AlbumContent.vue // 展示歌单歌手包含的歌曲
│ │ ├── Comment.vue // 评论
│ │ ├── ContentList.vue // 展示歌单歌手区
│ │ ├── LoginLogo.vue // 登录界面的logo
│ │ ├── PlayBar.vue // 页面底部的播放控制区
│ │ ├── ScrollTop.vue // 回到顶部
│ │ ├── SongAudio.vue // 接收音乐并播放的位置
│ │ ├── Swiper.vue // 轮播图
│ │ ├── TheFooter.vue // 页脚
│ │ ├── TheHeader.vue // 页头
│ │ ├── TheAside.vue // 播放列表
│ │ ├── Upload.vue // 修改头像
│ │ ├── Info.vue // 个人信息区
│ │ └── search // 搜索区
│ │ ├── SearchSongLists.vue // 按歌单搜索
│ │ └── SearchSongs.vue // 按歌手搜索
│ ├── pages // 组件
│ │ ├── 404.vue // 404
│ │ ├── Home.vue // 首页
│ │ ├── Setting.vue // 设置
│ │ ├── Login.vue // 登录区
│ │ ├── LoginUp.vue // 注册区
│ │ ├── Lyric.vue // 歌词显示区
│ │ ├── MyMusic.vue // 我的收藏区
│ │ ├── Search.vue // 搜索区
│ │ ├── Singer.vue // 歌手区
│ │ ├── SingerAlbum.vue // 歌手详情
│ │ ├── SongList.vue // 歌单区
│ │ └── SongListAlbum.vue // 歌单详情
│ ├── main.js // 入口js文件
│ └── App.vue // 根组件
├── static // 存放静态资源
├── test // 测试文件目录
├── .babelrc // bable 编译配置
└── .gitignore // 提交忽略的文件配置
```
