欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot + Vue + Electron 開發(fā) QQ 版聊天工具的詳細(xì)教程

 更新時(shí)間:2020年05月20日 14:51:16   作者:不安分的猿人  
這篇文章主要介紹了SpringBoot + Vue + Electron 開發(fā) QQ 版聊天工具的教程,本文通過截圖實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在這里插入圖片描述

一、簡(jiǎn)介

這是一款基于 JS 實(shí)現(xiàn)的超輕量級(jí)桌面版聊天軟件。主要適用于私有云項(xiàng)目?jī)?nèi)部聊天,企業(yè)內(nèi)部管理通訊等功能,主要通訊協(xié)議websocket。也支持web網(wǎng)頁(yè)聊天實(shí)現(xiàn)。文字聊天,互傳文件,離線消息,群聊,斷線重連等功能。

先看一下效果,下圖左邊是web版,右邊為PC版。

二、本地搭建

2.1 技術(shù)棧

后端技術(shù)棧:

  • springboot: 讓開發(fā)人員快速開發(fā)的一款Java的微服務(wù)框架。
  • tio: 是百萬級(jí)網(wǎng)絡(luò)框架oauth2.0: OAuth 2.0 是一個(gè)行業(yè)的標(biāo)準(zhǔn)授權(quán)協(xié)議。
  • OAuth 2.0 專注于簡(jiǎn)化客戶端開發(fā)人員,同時(shí)為 Web 應(yīng)用程序,桌面應(yīng)用程序,手機(jī)和客廳設(shè)備提供特定的授權(quán)流程。

前端技術(shù)棧:

  • vue: 套用于構(gòu)建用戶界面的漸進(jìn)式前端框架。
  • iview: 一套基于 Vue.js 的開源 UI 組件庫(kù),主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。
  • electron: 用HTML,CSS和JavaScript來構(gòu)建跨平臺(tái)桌面應(yīng)用程序的一個(gè)開源庫(kù)。

2.2 啟動(dòng)后端服務(wù)

下載項(xiàng)目

使用gitBash 工具下載項(xiàng)目到本地

git clone https://gitee.com/lele-666/V-IM.git

這里說明一下,項(xiàng)目的前后端代碼這樣就一次下載下來了。

  • V-IM-PC: 前端代碼
  • V-IM-Server:后端代碼

修改配置文件application.properties

這里主要修改數(shù)據(jù)庫(kù)連接和文件上傳的路徑:

#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
...

注: 后端服務(wù)的端口根據(jù)自己的需要進(jìn)行設(shè)置即可,默認(rèn) 8080。

初始化數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)初始化腳本在V-IM-Server\doc\init-20181231.sql,通過Navicat數(shù)據(jù)庫(kù)可視化工具導(dǎo)入數(shù)據(jù)庫(kù)腳本即可。

運(yùn)行VServerApplication.java

將項(xiàng)目導(dǎo)入到Idea,自動(dòng)下載項(xiàng)目的相關(guān)依賴后,直接運(yùn)行項(xiàng)目VServerApplication類的main方法,就可以開發(fā)環(huán)境啟動(dòng)后端服務(wù)了。

2.3 啟動(dòng) web 前端服務(wù)

下載依賴

一次執(zhí)行下面命令,就可下載前端項(xiàng)目所需的所有依賴包。

cd V-IM-PC #切換目錄
npm install #npm安裝依賴
yarn #yarn 

本地運(yùn)行

本地運(yùn)行兩種方式,分別是 WebPC。命令如下:

npm run serve #以web方式運(yùn)行
npm run electron:serve #以客戶端方式運(yùn)行

注: web啟動(dòng)時(shí),前端項(xiàng)目訪問的端口是8080,會(huì)與后端的端口相同,所以將前端的訪問的端口修改下就可以了。修改的文件為index.js:

export default {
 app_name: "V-IM",
 http_protocol: "http",
 http_port: 8080, #修改這個(gè)地方
 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版的效果:

打包命令

本地測(cè)試功能問題,就可以進(jìn)行項(xiàng)目打包了,打包命令也有兩個(gè):

npm run build #打包為web形式
npm run electron:build #打包為可執(zhí)行文件

2.4 啟動(dòng) PC 前端

安裝PC版

這里有兩種方式,直接下載作者已經(jīng)打包好的*.exe文件,或者使用上面的命令自己構(gòu)建PC版本。
我這里直接下載的PC版本。

下載地址:https://gitee.com/lele-666/V-IM/raw/master/v-im%20Setup%200.5.3.exe
本地運(yùn)行

安裝好PC版后,雙擊運(yùn)行即可。效果如下圖:

這里配置一下服務(wù)就可連接到對(duì)應(yīng)的后臺(tái)服務(wù)了。

三、最后

按照這樣的步驟走下來,幾分鐘就可以搭建QQ版聊天工具了。本篇講了開發(fā)環(huán)境搭建聊天工具的步驟。當(dāng)然服務(wù)器部署也特別簡(jiǎn)單的。如果你對(duì)這款聊天工具有興趣,不妨動(dòng)動(dòng)手指哦!

附t-io項(xiàng)目地址: https://gitee.com/tywo45/t-io

總結(jié)

到此這篇關(guān)于SpringBoot + Vue + Electron 開發(fā) QQ 版聊天工具的詳細(xì)教程的文章就介紹到這了,更多相關(guān)springboot vue electron qq聊天工具內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 關(guān)于Xmind免費(fèi)激活方法(推薦)

    關(guān)于Xmind免費(fèi)激活方法(推薦)

    這篇文章主要介紹了關(guān)于Xmind免費(fèi)激活方法,下載好之后需要打開安裝路徑然后激活,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2021-10-10
  • superset在linux和windows下的安裝和部署詳細(xì)教程

    superset在linux和windows下的安裝和部署詳細(xì)教程

    Superset 是 Airbnb開源的數(shù)據(jù)探查與可視化平臺(tái),是個(gè)輕量級(jí)的BI工具,開發(fā)者可以在其開源代碼上根據(jù)需要進(jìn)行二次開發(fā)。這篇文章主要介紹了superset在linux和windows下的安裝和部署詳細(xì)教程,需要的朋友可以參考下
    2020-10-10
  • vscode安裝使用的詳細(xì)教程

    vscode安裝使用的詳細(xì)教程

    Visual Studio Code (簡(jiǎn)稱 VS Code / VSC) 是一款免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器,這篇文章主要介紹了vscode安裝使用的詳細(xì)教程,需要的朋友可以參考下
    2020-08-08
  • 軟件測(cè)試面試如何測(cè)試一個(gè)杯子

    軟件測(cè)試面試如何測(cè)試一個(gè)杯子

    本文主要介紹軟件測(cè)試面試如何測(cè)試一個(gè)杯子,這里幫大家整理了詳細(xì)的面試資料,和面試需要準(zhǔn)備的知識(shí)點(diǎn),有興趣的小伙伴可以參考下
    2016-08-08
  • 基于Jupyter notebook搭建Spark集群開發(fā)環(huán)境的詳細(xì)過程

    基于Jupyter notebook搭建Spark集群開發(fā)環(huán)境的詳細(xì)過程

    Jupyter Notebook是一個(gè)開源并且使用很廣泛項(xiàng)目,本文介紹如何基于Jupyter notebook搭建Spark集群開發(fā)環(huán)境,通過實(shí)例截圖相結(jié)合給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2021-10-10
  • vscode中使用Autoprefixer3.0無效的解決方法

    vscode中使用Autoprefixer3.0無效的解決方法

    這篇文章主要介紹了vscode中使用Autoprefixer3.0無效的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • 詳情解析TCP與UDP傳輸協(xié)議

    詳情解析TCP與UDP傳輸協(xié)議

    本文通過講解TCP與UDP傳輸協(xié)議傳輸數(shù)據(jù)是的過程及詳細(xì)介紹什么是 socket及現(xiàn)在我么們和大家一起來學(xué)習(xí)吧
    2021-08-08
  • MobaXterm連接服務(wù)器如何在關(guān)閉會(huì)話的情況下依然執(zhí)行程序(最新推薦)

    MobaXterm連接服務(wù)器如何在關(guān)閉會(huì)話的情況下依然執(zhí)行程序(最新推薦)

    這篇文章主要介紹了MobaXterm連接服務(wù)器如何在關(guān)閉會(huì)話的情況下依然執(zhí)行程序,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-06-06
  • 5個(gè)Linux平臺(tái)程序員最愛的開發(fā)工具匯總

    5個(gè)Linux平臺(tái)程序員最愛的開發(fā)工具匯總

    這篇文章主要介紹了5個(gè)Linux平臺(tái)程序員最愛的開發(fā)工具匯總,程序最重要的工具就是源碼編輯器了,或者是一個(gè)全能的IDE,本文就羅列了5個(gè)Linux平臺(tái)最常用的編輯給大家,需要的朋友可以參考下
    2014-09-09
  • HTTP提交方式之PUT詳細(xì)介紹及POST和PUT的區(qū)別

    HTTP提交方式之PUT詳細(xì)介紹及POST和PUT的區(qū)別

    這篇文章主要介紹了HTTP提交方式之PUT詳細(xì)介紹及POST和PUT的區(qū)別,本文簡(jiǎn)潔易懂,需要的朋友可以參考下
    2014-07-07

最新評(píng)論