流行的Spring Boot + Vue架構整合開發的網易雲+QQ音樂(附源碼)

前言

雖然 B/S 是目前開發的主流,但是 C/S 仍然有很大的市場需求。受限於瀏覽器的沙盒限制,網頁應用無法滿足某些場景下的使用需求,而桌面應用可以讀寫本地文件、調用更多系統資源,再加上 Web 開發了低成本、高效率的優勢,這種跨平臺方式越來越受到開發者的喜愛。
Electron 是一個基於 Chromium 和 Node.js,使用 HTML、CSS 和 JavaScript 來構建跨平臺應用的跨平臺開發框架,兼容 Mac、Windows 和 Linux。目前,Electron 已經創建了包括 VScode 和 Atom 在內的大量應用。

正文
環境搭建
創建 Electron 跨平臺應用之前,需要先安裝一些常用的工具,如 Node、vue 和 Electron 等。
安裝Node
進入 Node 官網下載頁 ,然後下載對應的版本即可,下載時建議下載穩定版本。如果安裝 Node 使用 Homebrew 方式,建議安裝時將 npm 倉庫鏡像改爲淘寶鏡像,如下所示。
npm config set registry http://registry.npm.taobao.org/或者npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝/升級 vue-cli
先執行以下命令,確認下本地安裝的 vue-cli 版本。
vue -V
如果沒有安裝或者不是最新版,可以執行以下命令安裝/升級。
npm install @vue/cli -g

安裝 Electron
使用如下命令安裝 Electron 插件。
npm install -g electron或者cnpm install -g electron
爲了驗證是否安裝成功,可以使用如下的命令。
electron --version

創建運行項目
Electron 官方提供了一個簡單的項目,可以執行以下命令將項目克隆到本地。
git clone https://github.com/electron/electron-quick-start
然後在項目中執行如下命令即可啓動項目。
cd electron-quick-startnpm installnpm start
啓動後項目的效果如下圖。
在這裏插入圖片描述

除此之外,我們可以使用 vue-cli 腳手架工具來創建項目。
vue init simulatedgreg/electron-vue
然後根據下面的提示一步步選中選項即可創建項目,如下所示。
在這裏插入圖片描述

然後,使用 npm install 命令安裝項目所需要的依賴包,安裝完成之後,可以使用 npm run dev 或 npm run build 命令運行 electron-vue 模版應用程序,運行效果如下圖所示。
在這裏插入圖片描述

Electron 源碼目錄
Electron 的源代碼主要依據 Chromium 的拆分約定被拆成了許多部分。爲了更好地理解源代碼,您可能需要了解一下 Chromium 的多進程架構。
Electron 源碼目錄結構和含義具體如下:
在這裏插入圖片描述

平時開發時,需要重點關注的就是 src、package.json 和 appveyor.yml 目錄。除此之外,其他需要注意的目錄如下:
script - 用於諸如構建、打包、測試等開發用途的腳本
tools - 在 gyp 文件中用到的工具腳本,但與 script 目錄不同, 該目錄中的腳本不應該被用戶直接調用
vendor - 第三方依賴項的源代碼,爲了防止人們將它與 Chromium 源碼中的同名目錄相混淆, 在這裏我們不使用 third_party 作爲目錄名
node_modules - 在構建中用到的第三方 node 模塊
out - ninja 的臨時輸出目錄
dist - 由腳本 script/create-dist.py 創建的臨時發佈目錄
external_binaries - 下載的不支持通過 gyp 構建的預編譯第三方框架

應用工程目錄
使用 electron-vue 模版創建的 Electron 工程結構如下圖。
在這裏插入圖片描述

和前端工程的項目結構類似,Electron 項目的目錄結構如下所示:
electron-vue:Electron模版配置。
build:文件夾,用來存放項目構建腳本。
config:中存放項目的一些基本配置信息,最常用的就是端口轉發。
node_modules:這個目錄存放的是項目的所有依賴,即 npm install 命令下載下來的文件。
src:這個目錄下存放項目的源碼,即開發者寫的代碼放在這裏。
static:用來存放靜態資源。
index.html:則是項目的首頁、入口頁,也是整個項目唯一的HTML頁面。
package.json:中定義了項目的所有依賴,包括開發時依賴和發佈時依賴。

對於開發者來說, 90% 的工作都是在 src 中完成,src 中的文件目錄如下。
在這裏插入圖片描述

Electron 應用程序分成三個基礎模塊:主進程、進程間通信和渲染進程。
1、主進程
Electron 運行 package.json 的 main 腳本(background.js)的進程被稱爲主進程。在主進程中運行的腳本通過創建web頁面來展示用戶界面。一個 Electron 應用總是有且只有一個主進程。
2、渲染進程
由於 Electron 使用了 Chromium 來展示 Web 頁面,所以 Chromium 的多進程架構也被使用到。每個 Electron 中的 Web 頁面運行在它自己的渲染進程中。在普通的瀏覽器中,Web 頁面通常在一個沙盒環境中運行,不被允許去接觸原生的資源。然而 Electron 允許用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交互。
3、主進程與渲染進程通信
主進程使用 BrowserWindow 實例創建頁面。每個 BrowserWindow 實例都在自己的渲染進程裏運行頁面。當一個 BrowserWindow 實例被銷燬後,相應的渲染進程也會被終止。主進程管理所有的 Web 頁面和它們對應的渲染進程。每個渲染進程都是獨立的,它只關心它所運行的 Web 頁面。
src 目錄結構
在 Electron 目錄中,src 會包包含 main 和 renderer 兩個目錄。
main 目錄
main 目錄會包含 index.js 和 index.dev.js 兩個文件。
index.js:應用程序的主文件,electron 也從這裏啓動的,它也被用作 webpack 產品構建的入口文件,所有的 main 進程工作都應該從這裏開始。
index.dev.js:此文件專門用於開發階段,因爲它會安裝 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以擴展開發的需求。
渲染進程
renderer 是渲染進程目錄,平時項目開發源碼的存放目錄,包含 assets、components、router、store、App.vue 和 main.js。
assets:assets 下的文件如(js、css)都會在 dist 文件夾下面的項目目錄分別合併到一個文件裏面去。components:此文件用於存放應用開發的組件,可以是自定義的組件。router:如果你瞭解 vue-router,那麼 Electron 項目的路由的使用方式和 vue-router 的使用方式類似。modules:electron-vue 利用 vuex 的模塊結構創建多個數據存儲,並保存在 src/renderer/store/modules 中。

綜合示例
1、網易雲音樂
electron-vue-cloud-music是一款使用Electron+Vue+Ant Design Vue技術開發跨平臺桌面應用。下載鏈接:https://github.com/xiaozhu188/electron-vue-cloud-music。具有如下特點:
拖拽播放
桌面歌詞
mini模式
自定義托盤右鍵菜單
任務欄縮略圖,歌曲操作
音頻可視化
自動/手動檢查更新
Nedb數據庫持久化
自定義安裝路徑,安裝界面美化
瀏覽器中啓動客戶端
Travis CL,AppVeyor自動構建
換膚,下載,本地歌曲匹配,網絡變化桌面通知,分享歌曲/歌單/MV/視頻等到QQ空間
登錄,私人Fm,歌單,專輯,歌手,排行榜,MV,視頻,評論,搜索,用戶,動態,粉絲,關注,雲盤,收藏…
心動模式,歌詞微調,下一首播放,追加播放,單曲循環,隨機播放,列表循環
路由導向,局部刷新,首頁欄目調整並持久化…

以下是部分運行效果:
在這裏插入圖片描述
在這裏插入圖片描述

2、qq音樂播放器
qq音樂播放器基於 electron-vue 開發的音樂播放器,界面模仿QQ音樂,使用的技術棧electron-vue+vue+vuex+vue-router+element- UI。可以使用如下的方式來運行項目。
git clone https://github.com/SmallRuralDog/electron-vue-music.gitcd electron-vue-musicnpm install# 運行開發模式npm run dev# 打包安裝文件npm run build
部分運行效果如下圖。
在這裏插入圖片描述

歡迎大家在評論區留下你的觀點。如果今天的文章讓你有新的啓發,學習能力的提升上有新的認識,歡迎轉發分享給更多人。

來自:xiangzhihong | 鏈接:segmentfault.com/a/1190000021376934

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章