SpringBoot + Vue + Electron 開發 QQ 版聊天工具的詳細教程
一、簡介
這是一款基於
JS實現的超輕量級桌面版聊天軟體。主要適用於私有云專案內部聊天，企業內部管理通訊等功能，主要通訊協議websocket。也支援web網頁聊天實現。文字聊天，互傳檔案，離線訊息，群聊，斷線重連等功能。
先看一下效果，下圖左邊是web版，右邊為PC版。
二、本地搭建
2.1 技術棧
後端技術棧：
- springboot: 讓開發人員快速開發的一款Java的微服務框架。
- tio: 是百萬級網路框架oauth2.0: OAuth 2.0 是一個行業的標準授權協議。
- OAuth 2.0 專注於簡化客戶端開發人員，同時為 Web 應用程式，桌面應用程式，手機和客廳裝置提供特定的授權流程。
前端技術棧：
- vue: 套用於構建使用者介面的漸進式前端框架。
- iview: 一套基於 Vue.js 的開源 UI 元件庫,主要服務於 PC 介面的中後臺產品。
- electron: 用HTML，CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫。
2.2 啟動後端服務
下載專案
使用gitBash 工具下載專案到本地
git clone https://gitee.com/lele-666/V-IM.git
這裡說明一下，專案的前後端程式碼這樣就一次下載下來了。
- V-IM-PC: 前端程式碼
- V-IM-Server:後端程式碼
修改配置檔案application.properties
這裡主要修改資料庫連線和檔案上傳的路徑:
#server.port=8081 spring.mvc.static-path-pattern=/** #上傳的檔案路徑 web.upload-path=D:/Temp spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vim?useSSL=false spring.datasource.username=root spring.datasource.password=123456 ...
注: 後端服務的埠根據自己的需要進行設定即可，預設 8080
初始化資料庫
資料庫初始化指令碼在V-IM-Server\doc\init-20181231.sql，通過Navicat資料庫視覺化工具匯入資料庫指令碼即可。
執行VServerApplication.java
將專案匯入到Idea，自動下載專案的相關依賴後，直接執行專案VServerApplication類的main方法，就可以開發環境啟動後端服務了。
2.3 啟動 web 前端服務
下載依賴
一次執行下面命令，就可下載前端專案所需的所有依賴包。
cd V-IM-PC #切換目錄 npm install #npm安裝依賴 yarn #yarn
本地執行
本地執行兩種方式，分別是 Web和PC。命令如下：
npm run serve #以web方式執行 npm run electron:serve #以客戶端方式執行
注: web啟動時，前端專案訪問的埠是8080,會與後端的埠相同，所以將前端的訪問的埠修改下就可以了。修改的檔案為index.js:
export default {
app_name: "V-IM",http_protocol: "http",http_port: 8080,#修改這個地方
ws_port: 9326,init: "/api/user/init",his_url: "/api/message/list",chat_users_url: "/api/user/chatUserList",token_path: "/oauth/token",register_url: "/register",ws_protocol: "ws",getHostUrl: function() {
return (
this.http_protocol +
"://" +
localStorage.getItem("host") +
":" +
this.http_port
);
},...
web版的效果:
PC版的效果:
打包命令
本地測試功能問題，就可以進行專案打包了，打包命令也有兩個:
npm run build #打包為web形式 npm run electron:build #打包為可執行檔案
2.4 啟動 PC 前端
安裝PC版
這裡有兩種方式，直接下載作者已經打包好的*.exe檔案，或者使用上面的命令自己構建PC版本。
我這裡直接下載的PC版本。
下載地址:https://gitee.com/lele-666/V-IM/raw/master/v-im%20Setup%200.5.3.exe
本地執行
安裝好PC版後，雙擊執行即可。效果如下圖:
這裡配置一下服務就可連線到對應的後臺服務了。
三、最後
按照這樣的步驟走下來，幾分鐘就可以搭建QQ版聊天工具了。本篇講了開發環境搭建聊天工具的步驟。當然伺服器部署也特別簡單的。如果你對這款聊天工具有興趣，不妨動動手指哦！
附t-io專案地址: https://gitee.com/tywo45/t-io
總結
到此這篇關於SpringBoot + Vue + Electron 開發 QQ 版聊天工具的詳細教程的文章就介紹到這了,更多相關springboot vue electron qq聊天工具內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！