一、项目结构和介绍
- 项目描述:这是一个基于SpringBoot+Vue框架开发的在线聊天系统。首先,这是一个前后端分离的项目,代码简洁规范,注释说明详细,易于理解和学习。其次,这项目采用TS+Vue3.0+ElementUI-Plus搭建前端,项目大量使用Vue3.0新特性,对Vue3.0感兴趣的小伙伴可以了解下。
- 项目功能:登录注册、添加好友,创建群聊、单聊群聊、发送表情、发送图片、发送视频、上传文件、下载文件、查看好友群聊信息、删除会话、邀请加入群聊、管理个人信息、管理群聊信息、注销用户等等功能。
- 应用技术:SpringBoot + VueCli + Vue3.0 + MySQL + MyBatis + Redis + ElementUI-Plus + TypeScript
- 运行环境:IntelliJ IDEA2019.3.5 + MySQL5.7(项目压缩包中自带) + Redis5.0.5(项目压缩包中自带) + JDK1.8 + Maven3.6.3(项目压缩包中自带)+ Node14.16.1(项目压缩包中自带)
二、项目包解析
1.web
Public中的static文件是存放静态资源的文件夹
src文件夹是前端源文件夹:
该项目是由Vue3.0、ts、ElementU实现的,其中view是是视图文件,utils是工具类文件,router文件是实现页面跳转的文件,components是组件文件:
- ChatList.Vue是聊天列表的页面
- Elcon.Vue是图标展示
- FriendList是好友列表的页面:
- GroupList是群聊列表的页面:
- ProfileInfo是个人信息的页面:
-
Views中Home.Vue是整个页面的展示,Login.Vue是登录页面,Register.vue是注册页面:
2.server(后端)
Java文件夹(源代码)和resources文件夹(配置文件)
generator文件是配置文件的存放位置,帮助生成实体类文件(dao、domain等
mapper文件存放sql语句的地方(生成器生成简单的增删改查)
uplode.photo文件夹是存放上传图片的地方。
Application.properties是配置文件,主要有数据库连接、apperwe文件扫描路径、图片上传设置等。
Java底下的com.yjq.programmer文件介绍:
- annotation文件夹ValidateEntity是实体检验自定义注解类,根据我们自定义的注解去检查实体各个字段是否在规定的值内(dto中实体类UserDTO判断用户输入字段的规范进行表单验证,比如:用户名的输入长度限制)
- bean包中的CodeMsg是错误码文件,给用户提示当前操作为什么会失败(成功提示code:0,失败提示code为负)
- config底下是配置文件CorsConfig是跨域配置文件,WebSocketConfig是注入ServerEndpointExporter的bean对象,自动注册使用了@ServerEndpoint注解的bean。
- controller是控制器包,用来接收前端发来请求,同时把处理后的数据返回给前端,相当于前后端交互的桥梁。
- dao包是和数据库访问接口的,通过dao的接口运行sql语句,实现在数据库中存下数据。
- domain底下是进行sql语句的构造。
- dto底下是数据返回实体类(前后端交互的实体类)
- enums底下是枚举类文件,如:ChatShowEnum枚举出yes和no展示出显示和不显示
- exception包中ExceptionsHandler捕获运行时异常
- service业务逻辑代码。
- utiL包工具类:
如:CommonUtil:通用工具类(验证字符串是否为空,判断后缀是否是图片文件的后缀等)
CopyUtil:实体字段的值复制工具类(DTO、domain相互转换)
EmojiConverterUtil:表情转换工具(将字符串中的emoji表情转换成可以在utf-8字符集数据库中保存的格式(表情占4个字节,需要utf8mb4字符集))
UuidUtil:用户UUID生成的工具类
ValidateEntityUtil:表单验证的工具类(检查对象是否是数字类型等) - ws:ChatEndpoint是WebSocket连接
-
OnlineChatSystemApplication:启动类文件。
三、项目运行操作
1.开发环境:建议使用该包下的软件(idea2019.3.5、jdk1.8或jdk8.0、mysqi5.7、redis5.0.5、node-v14.16.1、maven3.6.3)
2.首先启动redis-server(启动后不要关闭)
3.导入sql文件,打开数据库文件,将数据库内容导入进去(没有数据库可新建一个数据库)然后新建数据库,输入数据库名称(db_online_chat_system),选择字符集utf8 -- UTF-8 Unicode,排序规则选择utf8_general_ci,右键打开数据库运行sql文件,导入数据库文件。
4.把压缩包的maven解压好放到D盘(maven3.6.3和idea2019.3.5版本匹配)
5.打开idea打开源码(源码文件路径有中文,将源码路径更改到D盘),打开后找到左上角File点击设置(setting),点击Build, Execution, Deployment,设置maven home directory(D:/apache-maven-3.6.3)、User setting file(maven-3.6.3文件中的settings.xml)勾选override(重写)等待加载的同时可以右键项目中的server文件选择maven-reimport(重新加载项目)等待加载完成。
6.选择server-src-main-resources底下的application-dev.properties文件,设置数据库密码: ,修改 路径为 (左上角项目名称旁边)
7.如果MySql版本是8.0以上的版本的则需修改pom.xml文件改成8.0.15(查询MySQL版本sql语句:select version();) 改成com.mysql.cj.jdbc.Driver
8.启动node-v14,16,1(压缩包中有,必须14开头的版本)
9.点击 运行,启动成功后启动前端 ,等待成功后,点击网址后即可看到聊天系统页面(先启动后端在启动前端)。