springboot2整合vue開發在線音樂網站【源碼開源】

週末，孟哥給大家整理一個基於springboot+vue的在線音樂網站。

 

項目不管是功能還是界面都非常的nice，源碼免費開源給大家。

 

公衆號，回覆：boot音樂

 

1，系統的安裝

 

  a.下載數據庫中記錄的資源

後臺回覆：歌曲圖片

下載網站依賴的歌曲及圖片，將 data 夾裏的文件直接放到 music-server 文件夾下。

  b.修改

1）數據庫：將sql文件夾中的 tp_music.sql 文件導入數據庫。

2）music-server：啓動後端服務之前，有一些地方需要修改，先去 /music-website/music-server/src/main/resources 這個目錄下的文件裏修改自己的 spring.datasource.username 和 spring.datasource.password，並且修改下圈出來的的文件中 MyPicConfig 類下的 addResourceLocations方法中的路徑，否則資源加載不了。（Mac 和 win 下路徑有些差異，我的是 Mac 上的路徑，win 上需要在 file: 後標明是哪個盤，例如："file:C:\\user\\XXX\\"

c.啓動項目

music-server 是本項目的後端，用於監聽前端發來的請求，提供接口。music-client 和 music-manage 都是本項目的前端部分，前者是前臺，後者是後臺。運行時後端必須啓動，兩個前端項目可以都啓動，也可以只啓動其中一個，他們是獨立的。

然後進入 music-server 文件夾，運行下面命令啓動服務器

// 方法一
./mvnw spring-boot:run

// 方法二
mvn spring-boot:run // 前提裝了 maven

進入 music-client 文件夾，運行下面命令啓動前臺項目

npm install // 安裝依賴

npm run dev // 啓動前臺項目

進入 music-manage 文件夾，運行下面命令啓動後臺管理項目

npm install // 安裝依賴


npm run dev // 啓動後臺管理項目

2,系統的截圖如下所示：

 

下面是對系統的簡介：

一、前言

這裏對音樂網站這個項目的開發流程做一下描述，我覺得了解了具體實現的來龍去脈，上手自己做就容易得多了，要知道數據是怎麼從數據庫一步步跑到前端頁面的，當知道了整個的流程再去處理中間的細節，具體實現的細節等有時間了就補充，接下來我們就開始吧。

二、開發環境

操作系統：Mac

JDK：jdk-8u141

mysql：mysql-5.7.21-1-macos10.13-x86_64

node：v12.4.0

IDE：IntelliJ IDEA 2018

 

三、後端項目構建

1、創建數據庫及需要的表

2、創建項目

打開 idea，新建一個項目，在 new 一個新項目的時候，選擇 Spring Initializr，在選擇項目依賴的時候勾選 web下的 Spring Web Starter 和 SQL下的 MySQL Driver 和 MyBatis Framework ，然後一直繼續後會得到如下結構（總體分三層）。

3、配置文件

1）application.properties

配置 application.properties 文件，用於連接數據庫（代碼見項目源碼）。

2）generatorConfig.xml

利用MyBatis Generator 自動生成代碼（實體類，Mapper接口和Mapper.xml文件），需要指定 mysql-connector-java （ src/main/resources 目錄下）和生成文件的路徑。在 src/main/resources 目錄下創建 generatorConfig.xml 文件並配置（代碼見項目源碼）。

3）pom.xml

pom.xml 文件負責配置項目相關的依賴和插件，包括上面的 MyBatis Generator（項目plugins 標籤中注視掉的代碼是對 Mybatis-generator 插件的配置），在創建項目時，idea 已經幫我們引入了一些依賴，下面我們需要在 dependencies 標籤中引入項目需要的一些依賴，配置的代碼可以直接看代碼，這裏就不往出寫了，下面對主要依賴進行下描述：

package	說明
mybatis-spring-boot-starter	MyBatis核心for Spring Boot
mysql-connector-java	java與mysql連接的jar包驅動程序

在 plugins 標籤中對 Mybatis-generator 進行配置，用於自動生成代碼。

至此，項目的配置就弄完了，在命令行執行 ./mvnw mybatis-generator:generate 自動生成代碼，得到的項目結構如下所示。此時會看到多生成了 dao、domain、mapper 目錄及下面的文件。生成項目後，需要將上面 pom.xml 文件中 Mybatis-generator 插件的配置注視，因爲這個文件就是初始時候自動生成代碼用的，如果不注視每次運行都會再生成一次，即覆蓋之前的代碼。

4、測試（以新建一個用戶爲例）

創建好項目之後先測試一下，首先在 src/main/java/com/example/demo 目錄下創建 service 包，service 包下創建 ConsumerService 接口和 impl包，impl包下創建 ConsumerServiceImpl 類，具體創建這個幹嘛下面寫接口時候再介紹。

（1）ConsumerService 接口的代碼如下

ConsumerServiceImpl 類的代碼如下

（2）在 src/main/java/com/example/demo 下的 ConsumerMapper 接口中添加如下代碼。

在 src/main/resources/mapper 下的 ConsumerMapper.xml 文件中將 insertSelective 改成 addUser

（3）打開 SpringBoot 的啓動類，加上 @MapperScan 註解，指向 dao 層接口所在的包路徑。@MapperScan(「com.example.demo.dao」)

（4）然後在 src/test/java/com/example/demo 下的測試文件中寫測試代碼，如下，然後點如下所示運行，沒有提示錯誤，且數據庫中成功存入數據，說明項目構建成功，接下來就可以開始寫接口了。

5、開發接口（以返回所有用戶信息爲例）

在寫接口之前，先對項目層次做一下介紹。項目層次我將主要根據 domain、 DAO、Service、Controller 這幾層主要實現的功能和它們之間的聯繫進行介紹。

1）實體類（domain 目錄下）

定義數據庫表所對應的實體類。

2）Mapper 層 / DAO 層（dao、mapper 目錄下）

數據操作層：向數據庫發送 SQL 語句，完成數據庫操作。

分爲 Mapper 接口 和 Mapper 接口映射文件。Mapper 接口在 dao 目錄下，定義操作數據庫的函數（函數不能直接去進行 CURD）， Mapper 接口映射文件在 mapper 目錄下，完成對數據庫的訪問。

3）Service 層（service 目錄下）

服務層：完成業務邏輯處理。調用 Mapper 層操作數據庫。

分爲 Service 接口 + Service 實現，用面向接口的編程思想，方便後續功能的解耦及擴展。

4）Controller 層（controller 目錄下）

控制層：對請求和響應進行控制，調用 Service 層進行業務邏輯處理，最後將處理好的數據返回給前端。

5）實戰（寫一個返回所有用戶信息的接口）

假如前端訪問 http://localhost:8888/allUser 就要拿到所有用戶的信息，那麼按照上面的層次我們可以這麼寫。

（1）訪問的接口由 Controller 層來處理，所以這裏這樣定義，要返回所有用戶信息，把它當一個命令，交給 Service 層去做。

（2）到了 Service 層，Service 層的 ConsumerService 接口中先定義下面方法

然後在 ConsumerServiceImpl 類中這樣去實現它。

（3）Service 層會讓 dao 層的 ConsumerMapper 接口調 allUser 方法去返回數據，

而 ConsumerMapper 接口操作數據庫又要依賴 Mapper.xml 文件。

（4）這樣，一個返回所有用戶信息的接口就寫完了，打開 Terminal 輸入如下命令跑一下項目。如下所示

./mvnw spring-boot:run

在瀏覽器中輸入 http://localhost:8888/allUser 查看結果。

知道一個接口怎麼寫，其他接口也類似，需要注意的地方有兩點，第一個是解決跨域問題（可以查看代碼 config 文件夾下面設置），第二個問題是關於靜態資源的處理（這個就是最開始跑這個項目時候修改圖片、音樂路徑做的事情）。

6）最後再總結一下

當前端要訪問數據的時候後端就提供相應接口，接口的編寫是通過 Controller 層監聽請求， 數據的處理交給 Service 層，而 Service 層再通過 Mapper 層操作數據庫，操作完成後數據再一層層往上走，最後返回給前端。

6、最終項目結構

. ├── avatorImages // 用戶頭像 ├── img │   ├── singerPic // 歌手圖片 │   ├── songListPic // 歌單圖片 │   └── songPic // 歌曲圖片 ├── song // 存放歌曲 ├── src │   ├── main │   │   ├── java │   │   │   └── com.example.demo │   │   │   ├── config // 配置（跨域） │   │   │   ├── controller // 控制層，接收請求返回響應 │   │   │   ├── dao // 數據操作層 │   │   │   ├── domain // 實體類 │   │   │   ├── service │   │   │   │ └── impl // Service 層的接口 │   │   │   └── HwMusicApplicationTests.java // 項目入口 │   │   └── resources │   │   ├── mapper // mapper.xml文件，操作數據庫 │   │   ├── static // 存放靜態資源 │   │   ├── templates │ │   ├── application.properties // 連接數據庫 │ │   └── generatorConfig.xml // MyBatis Generator 自動生成代碼 │   └── test │   └── java │   └── com.example.demo // 測試用的 ├── pom.xml // 添加相關依賴和插件 └── target

 

四、客戶端項目構建

1、創建項目

這裏項目的創建比後端要簡單的多，直接用官方提供的腳手架，運行如下命令先全局安裝 vue，然後進行安裝

npm install -g @vue/cli # 要創建項目的地方 vue init webpack music-client

進入項目，執行如下命令安裝項目依賴，

npm install

然後直接如下命令項目就跑起來了。

npm run dev

但是假如你是新手，不建議上來就用腳手架，先看一下 官網 瞭解一下組件、路由等等。

2、開發思路

創建一個vue項目後，在 views 文件夾中寫一個頁面的組件，因爲代碼都放在一起對後期維護和修改都不方便，所以把他們根據功能或者位置拆分開，放到 components 文件夾下面去實現，最後再整合到 views 文件夾下。加載到 App.vue 文件中，最後渲染到頁面中。

最開始構建頁面可以寫死，當基本樣子搭起來之後就可以去向後端去請求數據，請求數據用到的是axios插件，獲取到數據後console一下，在控制檯查看請求的數據，確保數據保存到正確的變量中去（這裏如果遇到跨域的問題可以在後端用 CORS 解決）。

組件的問題解決了接下來就是訪問的問題，我們如何通過點擊的時候切換組件呢？我們在 router 文件夾中引入組件，給它們設定訪問它們的路徑。這裏用到了vue-router插件。

隨着組件的增多，組件之間的傳值就是問題，不可能一些數據一直好幾個組件裏一直傳，我們需要把它們單獨拿出來放到 store 文件夾下面保存起來，當需要的時候在獲取（這裏通過 sessionStorage 解決vuex刷新數據丟失問題）。這裏用到了vuex組件。

不同的組件有時候會用到相同的方法，當要修改方法時就要改好多地方，所以把它們單獨拿出來放到mixins文件夾下面，當用到這些方法的時候在對應組件中引入即可。

vue支持很多的第三方組件，能給我們項目帶來很好的交互和顯示效果，具體在需要的時候npm或yarn就行了，當然了，一些樣式和js語句也可以放到assets文件夾下。

3、最終項目結構

. ├── 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 // 提交忽略的文件配置

 

五、管理端項目構建

這裏相比前臺的開發要簡單得多，因爲基本使用 Element UI 快速搭建的，實現和前臺一樣。

最終項目結構

. ├── build ├── config ├── node_modules ├── index.html ├── package.json ├── src │   ├── App.vue │   ├── main.js │   ├── api │   ├── assets │   ├── mixins │   ├── components │   │   ├── Header.vue │   │   ├── Home.vue │   │   ├── Sidebar.vue │   │   └── SongAudio.vue │   ├── pages │   │   ├── CollectPage.vue │   │   ├── CommentPage.vue │   │   ├── ConsumerPage.vue │   │   ├── InfoPage.vue │   │   ├── ListSongPage.vue │   │   ├── Login.vue │   │   ├── SingerPage.vue │   │   ├── SongListPage.vue │   │   └── SongPage.vue │   ├── router │   └── store ├── static └── test

公衆號，回覆：boot音樂

你的點贊，評論是對我最大支持，感謝。