SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程_其它综合

来源:脚本之家  责任编辑:小易  

www.zgxue.com防采集请勿采集本网。

在这里插入图片描述

一、简介

最佳答案二者主要区别是:1、Spring Boot提供极其快速和简化的操作,让 Spring 开发者快速上手。2、Spring Boot提供了 Spring 运行的默认配置。3、Spring Boot为通用 Spring

这是一款基于 JS 实现的超轻量级桌面版聊天软件。主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。也支持web网页聊天实现。文字聊天,互传文件,离线消息,群聊,断线重连等功能。

spring boot是由pivotal团队提供的全新框架,其设计目的是用来简化新spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需

先看一下效果,下图左边是web版,右边为PC版。

最佳答案因为Spring Boot解决的问题(1) Spring Boot使编码变简单(2) Spring Boot使配置变简单(3) Spring Boot使部署变简单(4) Spring Boot使监控变简单(5) Spring

二、本地搭建

最佳答案它是 springcloud的前提,springcloud才是真正做微服务的框架,springboot是做微服务的入门级框架。但是也可以做电商之类的大型项目。

2.1 技术栈

ide-sts安装gradle插件1点击首菜单栏help -> eclipse marketplace2进入marketplace end使用spring boot创建gradle工程1点击主菜单file->new->spring starter project,新

后端技术栈: 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=8081spring.mvc.static-path-pattern=/**#上传的文件路径web.upload-path=D:/Tempspring.datasource.driver-class-name=com.mysql.jdbc.Driverspring.datasource.url=jdbc:mysql://127.0.0.1:3306/vim?useSSL=falsespring.datasource.username=rootspring.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

本地运行

本地运行两种方式,分别是 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版的效果:

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聊天工具内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • android如何获取qq与微信的聊天记录并保存到数据库详解
  • 基于vue2实现的仿手机qq单页面应用功能(接入聊天机器人 )
  • js实现仿qq聊天窗口抖动特效
  • 看别人怎么查qq聊天记录 比较详细查询qq聊天记录的方法?
  • mercurial入门学习介绍
  • base64 编码介绍、base64编码转换原理与算法
  • 新手程序员编程必不可少的工具
  • 设计引导--一个鸭子游戏引发的设计理念(多态,继承,抽象,接口,策略
  • github eclipse配置使用教程详解
  • 分享下get和post的真正区别
  • matlab画三维图像的示例代码(附demo)
  • 最新idea2020注册码永久激活(激活到2100年)
  • http请求返回415错误码定位解决方法
  • bs架构和cs架构的区别_动力节点java学院整理
  • 为什么选择Spring Boot作为微服务的入门级微框架
  • spring boot exmaple 怎么导入
  • springboot matchifmissing表示什么意思
  • spring boot cacheable在什么情况下不生效
  • spring boot和spring的区别是什么?
  • Spring Boot 是什么,有什么用
  • spring boot有什么用
  • spring boot 只能做微服务吗
  • spring boot 怎么指定sqlsessionfactory
  • 为什么选择Spring Boot作为微服务的入门级
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页其它综合android如何获取qq与微信的聊天记录并保存到数据库详解基于vue2实现的仿手机qq单页面应用功能(接入聊天机器人 )js实现仿qq聊天窗口抖动特效看别人怎么查qq聊天记录 比较详细查询qq聊天记录的方法?mercurial入门学习介绍base64 编码介绍、base64编码转换原理与算法新手程序员编程必不可少的工具设计引导--一个鸭子游戏引发的设计理念(多态,继承,抽象,接口,策略github eclipse配置使用教程详解分享下get和post的真正区别matlab画三维图像的示例代码(附demo)最新idea2020注册码永久激活(激活到2100年)bs架构和cs架构的区别_动力节点java学院整理最新idea2020注册码永久激活(激活删除svn三种方法delsvn(windows+intellij idea激活码获取方法(ic/s和b/s两种架构的概念、区别和网址(url)支持的最大长度是多少5个linux平台程序员最爱的开发工url中斜杠/和反斜杠\的区别小结提示“处理url时服务器出错”和“支付宝 接口开发帮助(asp,php,as科普:多线程与异步的区别aop的实现原理_动力节点java学院整理关注程序员健康:程序最需要注意的几件事使用ffmpeg 合并aac格式音频文件的方法chrome扩展学习 右键菜单实现代码程序员的新年祝福 happy new yeartrie树_字典树(字符串排序)简介及实现web jmeter–接口测试工具详解windows开发记事本程序纪实(二)逻辑篇1
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved