一、前言

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

二、開發環境

操作系統：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

總結

以上是生活随笔為你收集整理的idea 提示vue插件_Vue + SpringBoot + MyBatis 音乐网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。