基于Springboot+Vue+H5实现MiniTalk聊天APP
0. 前言:
项目简介
项目名称:MINITALK
项目基本功能:仿照微信实现一款基于 Netty 的聊天通信 APP,包含聊天功能,扫码添加好友功能,FastDFS 文件系统实现头像上传下载功能。
项目待完善功能:朋友圈功能,图片发送功能等,好友详细信息展示功能之后会完善(主要是学校课比较多没足够的时间),后续完成后会再发一篇博客进行补充,完整代码之后会传到GitHub 和 Gitee 上分享。
注意事项:如果该项目对您有帮助,请点赞关注加收藏,之后我也会更新一些其他开源项目的笔记或文档供大家参考,感激不尽!
- Gitee 码云地址:https://gitee.com/caoshipeng
1. 项目简介:
开发工具介绍
前端开发工具:HBuilderX
后端开发工具:IDEA 2020.1
数据库可视化工具:Navicate Premium (Navicate For MySQL、SQLyog 也可以)
技术选型:前后端分离
技术栈介绍
后端:SpringBoot2.x + Netty4.x + WebSocket + Mybatis
前端:H5 Plus + MUI + VUE + Axios
数据库:MySQL
文件存储:Nginx + FastDFS 搭建分布式服务器(先在自己的虚拟机进行搭建,项目扩展功能实现后再部署服务器中)
项目部署:腾讯云/阿里云/七牛云
项目基本要求
- 可以独立使用 Spring SpringMVC SpringBoot Mybatis 等常用企业级开发框架
- 熟悉 MySQL
- 了解 Linux 常用基本命令
- 必备前端基础,HTML5 CSS JavaScript VUE Axios
- 了解 Nginx FastDFS 等分布式常用中间件(完全没接触过的读者,先知道是用来做什么的会用即可,Nginx FastDFS 在本地虚拟机中具体部署和使用操作我会单独写一篇博客进行介绍)
- 了解 Netty WebSocket 等通信框架
- 熟练使用 IDEA HbuilderX 开发工具
前端框架 API 官方文档
MUI 官网开发文档:https://dev.dcloud.net.cn/mui/ui/
HTML5 PLUS 官方文档:http://www.html5plus.org/doc/
所有坐标依赖
<dependencies>
<!--netty-->
<dependency>
<groupId>io.netty</groupId>
<artifactId>netty-all</artifactId>
<version>4.1.49.Final</version>
</dependency>
<!--google QRcode 二维码生成插件-->
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>javase</artifactId>
<version>3.3.0</version>
</dependency>
<!--FastDFS-Client 分布式文件存储系统客户端-->
<dependency>
<groupId>com.github.tobato</groupId>
<artifactId>fastdfs-client</artifactId>
<version>1.27.2</version>
</dependency>
<!--fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
<!--druid-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.19</version>
</dependency>
<!--thymeleaf(项目中并未使用,只是用于测试,可不加)-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>
<!--IDEA 热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.45</version>
</dependency>
<!--lombok 非常好用的插件 帮助减少实体类的代码量-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--内置tomcat-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.2.8.RELEASE</version>
</dependency>
2. 效果展示:
3. 项目完整源码地址:
Gitee:https://gitee.com/caoshipeng
GitHub:https://github.com/CodeFarmer1999
4. 项目需要的运行环境:
项目需要如下环境支持:
其中jdk8 也是可以的,我自己用的就是jdk8
相关环境文件获取链接:
链接:https://pan.baidu.com/s/10DS0W-owS5Xg8Di5B-2k9A
提取码:m197
5. 项目运行步骤:
- 将项目前后端下载到本地
- 前端导入HbuilderX
- 后端代码导入IDEA,并测试本机启动
注意事项
前端运行环境比较复杂:
-
首先需要手机和电脑同时处于同一WIFI 条件下,主要是因为真机调试的时候需要同网段IP 才能找到移动端设备,如果项目部署 并 打包发布APP 后就可以将后端地址改为服务器ip即可。
-
手机和电脑通过USB 线进行连接,手机需要打开开发者模式并开启USB 调试,如图:
- 与此同时,因为我们的头像上传下载都是存在本机的CentOS7 虚拟机中 FastDFS 分布式文件系统中,因此这时候需要启动虚拟机并运行 niginx 和 fastDFS (虚拟机中配置FastDFS 和 Nginx 参考我的另一篇博客:
- https://blog.csdn.net/weixin_43591980/article/details/108856814
- 也可以使用PC 端手机模拟器运行app ,参考文章:
-https://blog.csdn.net/qq_41870483/article/details/106456202 (进行聊天功能测试的时候如果没有两台手机连接电脑 ,这时候就可以使用一台手机和mumu 手机模拟器运行)
相关文章
- import Vue from 'vue';
- 使用IDEA创建SpringBoot项目出现intellij idea No active profile set, falling back to default profiles: default
- vue - Vue介绍
- 【Vue】单文件的组件(.vue)代码实例
- 微服务技术系列教程(14) - SpringBoot - 实现原理
- springboot实战之自定义注解扫描并动态注册bean
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
- SpringBoot+vue实现文件下载
- springboot+jpa+tymeleaf实现分页功能
- springboot集成thymeleaf中遇到的问题
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue实战入门后台篇九:springboot+mybatis实现网站后台-代码整合及重构优化
- vue实战入门后台篇五:springboot+mybatis实现网站后台-操作日志功能实现
- vue实战入门后台篇一:springboot+mybatis实现网站后台-项目框架搭建
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- springboot+vue影城管理系统(源码+文档)
- springboot+vue校园新闻网站(源码+说明文档)
- springboot+vue自习室预定系统(源码+文档)
- Vue-cli 4在vue.config.js中配置别名
- SpringBoot 与Shiro 整合系列(三)多Realm验证和认证策略
- SpringBoot+Vue实现的在线点餐系统 附带详细运行指导视频
- Vue学习第19天——vue脚手架配置代理
- 【VUE】vue配置Gzip压缩
- SpringBoot整合Quartz
- SpringBoot 整合 thymeleaf
- 为什么springboot中引入WebMvcConfigurationSupport后SpringMvc的自动配置失效了
- SpringBoot无法访问引入静态资源,js、css、img等,控制台爆红404
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。