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

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 官网开发文档: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 调试,如图:

在这里插入图片描述

在这里插入图片描述

兴趣使然的草帽路飞 CSDN认证博客专家 MySQL Spring Java
双非本科软件工程大三在校生,一个靠自学为主的Java萌新,希望和大家一起共同进步,记录自己的成长历程!冲冲冲!O(∩_∩)O~
<p> <strong><span style="font-size:24px;">课程简介:</span></strong><br /> <span style="font-size:18px;">历经半个多月的时间,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。</span><span></span> </p> <p> <span style="font-size:18px;">其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程!</span><span></span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong>核心技术栈列表</strong></span><span style="font-size:24px;"><strong>:</strong></span> </p> <p> <br /> </p> <p> <span style="font-size:18px;">值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括</span><span style="font-size:18px;">Spring Boot</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring MVC</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis-Plus</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Shiro(</span><span style="font-size:18px;">身份认证与资源授权跟会话等等</span><span style="font-size:18px;">)</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring AOP</span><span style="font-size:18px;">、防止</span><span style="font-size:18px;">XSS</span><span style="font-size:18px;">攻击、防止</span><span style="font-size:18px;">SQL</span><span style="font-size:18px;">注入攻击、过滤器</span><span style="font-size:18px;">Filter</span><span style="font-size:18px;">、验证码</span><span style="font-size:18px;">Kaptcha</span><span style="font-size:18px;">、热部署插件</span><span style="font-size:18px;">Devtools</span><span style="font-size:18px;">、</span><span style="font-size:18px;">POI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Vue</span><span style="font-size:18px;">、</span><span style="font-size:18px;">LayUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">ElementUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">JQuery</span><span style="font-size:18px;">、</span><span style="font-size:18px;">HTML</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Bootstrap</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Freemarker</span><span style="font-size:18px;">、一键打包部署运行工具</span><span style="font-size:18px;">Wagon</span><span style="font-size:18px;">等等,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070402564453.png" alt="" /> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:24px;">课程内容与收益</span><span style="font-size:24px;">:</span><span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070403452052.png" alt="" /> </p> <p> <span style="font-size:18px;">总的来说,</span><span style="font-size:18px;">本课程是一门具有很强实践性质的“项目实战”课程,即“</span><span style="font-size:18px;">企业应用员工角色权限管理平台</span><span style="font-size:18px;">”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于</span><span style="font-size:18px;">Shiro</span><span style="font-size:18px;">的资源授权实现员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">操作权限、员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图:</span> </p> <p> <span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070404285736.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>以下为项目整体的运行效果截图:</strong></span> <span></span> </p> <img src="https://img-bss.csdn.net/201908070404538119.png" alt="" /> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405002904.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405078322.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405172638.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405289855.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405404509.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405523495.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p style="text-align:left;"> <span style="font-size:18px;">值得一提的是,在本课程中,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070406328884.png" alt="" /> <p> <br /> </p>
相关推荐
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后端技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前端技术】<br /> Vue        互联网最火的前端框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前端 HTTP 框架<br /> Element UI 前端 UI 框架<br /> Vue Element Admin 前端模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户端<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
<div> 适用人群 <p> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页