音乐网站 Ccmusic-client前台 说明文档

Posted 2023-01-16 是Cc哈

一、开发环境

1. 操作系统：windows 10
2. IDE: Visual Studio Code
3. 技术框架：node.js、vue2、echarts

二、项目结构

├── 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 // 组件
│ │ ├── Home.vue // 首页
│ │ ├── Setting.vue // 设置
│ │ ├── Login.vue // 登录区
│ │ ├── LoginUp.vue // 注册区
│ │ ├── Lyric.vue // 歌词显示区
│ │ ├── MyMusic.vue // 我的收藏区
│ │ ├── Search.vue // 搜索区
│ │ ├── Singer.vue // 歌手区
│ │ ├── SingerAlbum.vue // 歌手详情
│ │ ├── SongSheet.vue // 歌单区
│ │ └── SongSheetAlbum.vue // 歌单详情
│ ├── main.js // 入口js文件
│ └── App.vue // 根组件
├── static // 存放静态资源
├── test // 测试文件目录
├── .babelrc // bable 编译配置
└── .gitignore // 提交忽略的文件配置

三、开发思路

创建一个vue项目后，在 views 文件夹中写一个页面的组件，因为代码都放在一起对后期维护和修改都不方便，所以把他们根据功能或者位置拆分开，放到 components 文件夹下面去实现，最后再整合到 views 文件夹下。加载到 App.vue 文件中，最后渲染到页面中。

最开始构建页面可以写死，当基本样子搭起来之后就可以去向后端去请求数据，请求数据用到的是axios插件，获取到数据后console一下，在控制台查看请求的数据，确保数据保存到正确的变量中去（这里如果遇到跨域的问题可以在后端用 CORS 解决）。

切换组件: 在 router 文件夹中引入组件，给它们设定访问它们的路径。这里用到了vue-router插件。
随着组件的增多，组件之间的传值就是问题，不可能一些数据一直好几个组件里一直传，我们需要把它们单独拿出来放到 store 文件夹下面保存起来，当需要的时候在获取（这里通过 sessionStorage 解决vuex刷新数据丢失问题）。这里用到了vuex组件。

不同的组件有时候会用到相同的方法，当要修改方法时就要改好多地方，所以把它们单独拿出来放到mixins文件夹下面，当用到这些方法的时候在对应组件中引入即可。

四、部分页面展示

1.首页

2.登陆、注册

3.歌单、歌手页


4.我的音乐

5.歌曲播放页

五、项目github地址
https://github.com/chenchen9331/ccmusic-client