音乐项目-环境搭建
1.后端环境搭建
1.新建工程
2.依赖导入
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.xuge</groupId>
<artifactId>music</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>music</name>
<description>音乐网站</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<!-- <exclusions>-->
<!-- <exclusion>-->
<!-- <groupId>org.springframework.boot</groupId>-->
<!-- <artifactId>spring-boot-starter-logging</artifactId>-->
<!-- </exclusion>-->
<!-- </exclusions>-->
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.16</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.8</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<executable>true</executable>
<fork>true</fork>
</configuration>
</plugin>
</plugins>
</build>
</project>
3.数据库创建
2.前端环境搭建
1.在windows搭建vue开发环境
1.安装node.js
2.设置node的全局和缓存路径
npm config set prefix"D:\ProgramFiles(x86)\Node\node_global"
npm config set cache "D:\Program Files (x86)\Node\node_cache"
3.安装淘宝镜像
npm install -g cnpm - -registry=https://registry.npm.taobao.org
4.设置环境变量
5.安装Vue
cnpm install vue -g
6.安装Vue-cli脚手架
cnpm install - g vue@cli
cnpm install -g @vue/cli
出错后:
npm i npm -g
npm i @vue/cli -g
cnpm i @vue/cli -g
7.创建一个Vue项目
vue create first
cd first
npm run serve
npm uninstall -g @vue/cli
npm install - g vue-cli
npm i npm -g
npm i vue-cli -g
cnpm i vue-cli -g
2.客户端项目构建
1、创建项目
这里项目的创建比后端要简单的多,直接用官方提供的脚手架,运行如下命令先全局安装 vue,然后进行安装
vue init webpack music-manage
vue 在帮我们创建项目的时候依赖包也会装好,装好后进入项目,执行如下命令项目就跑起来了。
npm run serve
但是假如你是新手,不建议上来就用脚手架,先看一下 官网 了解一下组件、路由等等。
2、开发思路
因为代码都放在一起对后期维护和修改都不方便,所以要根据功能把他们拆分到不同目录。
在 pages 目录下放一些视图,里面的每一个组件主要是对整个试图的控制,具体里面的实现可以根据具体情况自己封装组件,或者直接使用第三方组件,components 目录下放置我们封装好的组件,利用 vue-router 把试图都组织起来,加载到 App.vue 文件中,最后渲染到页面中。
最开始构建页面可以写死,当基本样子搭起来之后就可以去向后端去请求数据,请求数据用到的是axios
插件,获取到数据在控制台查看请求的数据,确保数据保存到正确的变量中去(这里如果遇到跨域的问题可以在后端用 CORS 解决)。
随着组件的增多,组件之间的传值就是问题,不可能一些数据一直好几个组件里一直传,我们需要 vuex 插件来对数据进行管理(这里通过 sessionStorage 解决 vuex 刷新数据丢失问题)。
不同的组件有时候会用到相同的方法,当要修改方法时就要改好多地方,所以把它们单独拿出来放到 mixins 文件夹下面,当用到这些方法的时候在对应组件中引入即可。
vue 支持很多的第三方组件,能给我们项目带来很好的交互和显示效果,具体在需要的时候引入就行了,当然了,一些样式和图片也可以放到 assets 文件夹下管理。
这个项目的话组件基本是自己实现的,第三方用的少,对练习组件的封装还是很有帮助的。
3、最终项目结构
.
├── build // webpack相关配置文件
├── config // vue基本配置文件
├── node_modules // 包
├── index.html // 入口页面
├── package.json // 管理包的依赖
├── src // 项目源码目录
│ ├── assets // icon,图片、css 等
│ ├── api // 封装请求的 api
│ ├── mixins // 公共方法
│ ├── enums // 枚举
│ ├── utils // 工具方法
│ ├── router // 路由
│ ├── store // 管理数据
│ ├── components
│ │ ├── Comment.vue // 评论
│ │ ├── PlayList.vue // 展示歌单歌手区
│ │ ├── SongList.vue // 展示歌单歌手包含的歌曲
│ │ └── layouts
│ │ ├── YinAudio.vue // 接收音乐并播放的位置
│ │ ├── YinCurrentPlay.vue // 播放列表
│ │ ├── YinFooter.vue // 页脚
│ │ ├── YinHeader.vue // 页头
│ │ ├── YinLoginLogo.vue // 登录界面的logo
│ │ ├── YinPlayBar.vue // 页面底部的播放控制区
│ │ └── YinScrollTop.vue // 回到顶部
│ ├── views // 组件
│ │ ├── error
│ │ │ └── 404.vue // 404
│ │ ├── Home.vue // 首页
│ │ ├── YinContainer.vue
│ │ ├── personal
│ │ │ ├── Personal.vue // 个人中心
│ │ │ ├── PersonalData.vue // 修改信息
│ │ │ └── Upload.vue // 修改头像
│ │ ├── setting
│ │ │ └── Setting.vue // 设置
│ │ ├── SignIn.vue // 登录区
│ │ ├── SignUp.vue // 注册区
│ │ ├── Lyric.vue // 歌词显示区
│ │ ├── search
│ │ │ ├── Search.vue // 搜索区
│ │ │ ├── SearchSong.vue // 按歌手搜索
│ │ │ └── SearchSongList.vue // 按歌单搜索
│ │ ├── singer
│ │ │ ├── Singer.vue // 歌手区
│ │ │ └── SingerDetail.vue // 歌手详情
│ │ └── song-sheet
│ │ ├── SongSheet.vue // 歌单区
│ │ └── SongSheetDetail.vue // 歌单详情
│ ├── main.js // 入口js文件
│ └── App.vue // 根组件
├── static // 存放静态资源
├── test // 测试文件目录
├── .babelrc // bable 编译配置
└── .gitignore // 提交忽略的文件配置
3.管理端项目构建
这里相比前台的开发要简单得多,因为是使用 Element UI 快速搭建的,实现和前台一样。
1、最终项目结构
.
├── build
├── config
├── node_modules
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── main.js
│ ├── api
│ ├── assets
│ ├── mixins
│ ├── enums
│ ├── components
│ │ ├── dialog
│ │ │ └── YinDelDialog.vue
│ │ └── layouts
│ │ ├── YinAside.vue
│ │ ├── YinAudio.vue
│ │ └── YinHeader.vue
│ ├── views
│ │ ├── CollectPage.vue
│ │ ├── CommentPage.vue
│ │ ├── ConsumerPage.vue
│ │ ├── Home.vue
│ │ ├── InfoPage.vue
│ │ ├── ListSongPage.vue
│ │ ├── Login.vue
│ │ ├── SingerPage.vue
│ │ ├── SongListPage.vue
│ │ └── SongPage.vue
│ ├── router
│ ├── store
│ └── utils
├── static
└── test