基于Springboot+Vue+H5实现MiniTalk聊天APP

455 阅读3分钟

0. 前言:

项目简介

项目名称:MINITALK

项目基本功能:仿照微信实现一款基于 Netty 的聊天通信 APP,包含聊天功能,扫码添加好友功能,FastDFS 文件系统实现头像上传下载功能。

项目待完善功能:朋友圈功能,图片发送功能等,好友详细信息展示功能之后会完善(主要是学校课比较多没足够的时间),后续完成后会再发一篇博客进行补充,完整代码之后会传到GitHub 和 Gitee 上分享。

注意事项:如果该项目对您有帮助,请点赞关注加收藏,之后我也会更新一些其他开源项目的笔记或文档供大家参考,感激不尽!

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 官网开发文档:dev.dcloud.net.cn/mui/ui/

HTML5 PLUS 官方文档: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:gitee.com/caoshipeng

GitHub:github.com/CodeFarmer1…

4. 项目需要的运行环境:

项目需要如下环境支持:
在这里插入图片描述
其中jdk8 也是可以的,我自己用的就是jdk8

相关环境文件获取链接:

链接:pan.baidu.com/s/10DS0W-ow…
提取码:m197

5. 项目运行步骤:

  • 将项目前后端下载到本地
  • 前端导入HbuilderX
  • 后端代码导入IDEA,并测试本机启动

注意事项

前端运行环境比较复杂:

  • 首先需要手机和电脑同时处于同一WIFI 条件下,主要是因为真机调试的时候需要同网段IP 才能找到移动端设备,如果项目部署 并 打包发布APP 后就可以将后端地址改为服务器ip即可。
  • 手机和电脑通过USB 线进行连接,手机需要打开开发者模式并开启USB 调试,如图:

在这里插入图片描述

在这里插入图片描述

  • 与此同时,因为我们的头像上传下载都是存在本机的CentOS7 虚拟机中 FastDFS 分布式文件系统中,因此这时候需要启动虚拟机并运行 niginx 和 fastDFS (虚拟机中配置FastDFS 和 Nginx 参考我的另一篇博客:
  • blog.csdn.net/weixin_4359…
  • 也可以使用PC 端手机模拟器运行app ,参考文章:
    -blog.csdn.net/qq_41870483… (进行聊天功能测试的时候如果没有两台手机连接电脑 ,这时候就可以使用一台手机和mumu 手机模拟器运行)