SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程 聊天工具 qq electron vue springboot 其它综合  第1张

一、介绍

它是一款根据 JS 完成的超轻量pc端社交软件。关键适用私有云存储新项目內部闲聊,公司内控管理通信等作用,关键通信协议websocket。也适用web网页聊天完成。聊天,传输文档,线下信息,微信群,断开重新连接等作用。

先看一下实际效果,下面的图左侧是web版,右侧为PC版。

SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程 聊天工具 qq electron vue springboot 其它综合  第2张

二、当地构建

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数据库查询数据分析工具导进数据库查询脚本制作就可以。

SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程 聊天工具 qq electron vue springboot 其它综合  第3张

运作VServerApplication.java

将新项目导到Idea,全自动下载新项目的有关依靠后,立即运作新项目VServerApplication类的main方式 ,就可以开发工具起动后端开发服务项目了。

SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程 聊天工具 qq electron vue springboot 其它综合  第4张

2.3 起动 web 前端开发服务项目

下载依靠

一次实行下边指令,就可下载前端项目需要的全部依赖包。

cd V-IM-PC #转换文件目录
npm install #npm安装依靠
yarn #yarn 

当地运作

当地运作二种方法,分别是 WebPC。指令以下:

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版的实际效果:

SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程 聊天工具 qq electron vue springboot 其它综合  第5张

PC版的实际效果:

SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程 聊天工具 qq electron vue springboot 其它综合  第6张

打包指令

当地检测作用难题,就可以开展新项目打包了,打包指令也是有2个:

npm run build #打包为web方式
npm run electron:build #打包为exe文件

2.4 起动 PC 前端开发

安裝PC版

这里有二种方法,立即下载创作者早已打包好的*.exe文件,或是应用上边的指令自身搭建PC版本。
我这里立即下载的PC版本。

下载详细地址:https://gitee.com/lele-666/V-IM/raw/master/v-im Setup 0.5.3.exe
当地运作

安裝好PC版后,双击鼠标运作就可以。实际效果如下图:

SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程 聊天工具 qq electron vue springboot 其它综合  第7张

这儿配备一下服务项目就可联接到相匹配的后台管理服务项目了。

三、最终

依照那样的流程走出来,数分钟就可以构建QQ版聊天工具了。这篇讲了开发工具构建聊天工具的流程。自然服务器部署也尤其简易的。假如你对这个聊天工具有兴趣爱好,何不操作指哦!

附t-io新项目详细地址: https://gitee.com/tywo45/t-io

小结

到此这篇有关SpringBoot Vue Electron 开发设计 QQ 版聊天工具的详尽实例教程的文章内容就详细介绍到这了,大量有关springboot vue electron qq聊天工具內容请搜索之前的文章内容或再次访问下边的类似文章期待大伙儿之后多多的适用!