基于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 手機模擬器運行)