音樂項目-環境搭建
1.後端環境搭建
1.新建工程
2.依賴導入
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="//maven.apache.org/POM/4.0.0" xmlns:xsi="//www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="//maven.apache.org/POM/4.0.0 //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=//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
