在线聊天系统说明书

一、项目结构和介绍

1. 项目描述：这是一个基于SpringBoot+Vue框架开发的在线聊天系统。首先，这是一个前后端分离的项目，代码简洁规范，注释说明详细，易于理解和学习。其次，这项目采用TS+Vue3.0+ElementUI-Plus搭建前端，项目大量使用Vue3.0新特性，对Vue3.0感兴趣的小伙伴可以了解下。
2. 项目功能：登录注册、添加好友，创建群聊、单聊群聊、发送表情、发送图片、发送视频、上传文件、下载文件、查看好友群聊信息、删除会话、邀请加入群聊、管理个人信息、管理群聊信息、注销用户等等功能。
3. 应用技术：SpringBoot + VueCli + Vue3.0 + MySQL + MyBatis + Redis  + ElementUI-Plus + TypeScript
4. 运行环境：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是组件文件：

1. ChatList.Vue是聊天列表的页面

   

2. Elcon.Vue是图标展示
3. FriendList是好友列表的页面：

   

4. GroupList是群聊列表的页面：

   

5. ProfileInfo是个人信息的页面：

   

6. 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文件介绍：

        

1. annotation文件夹ValidateEntity是实体检验自定义注解类，根据我们自定义的注解去检查实体各个字段是否在规定的值内（dto中实体类UserDTO判断用户输入字段的规范进行表单验证，比如：用户名的输入长度限制）

   

2. bean包中的CodeMsg是错误码文件，给用户提示当前操作为什么会失败（成功提示code:0，失败提示code为负）

   

3. config底下是配置文件CorsConfig是跨域配置文件，WebSocketConfig是注入ServerEndpointExporter的bean对象，自动注册使用了@ServerEndpoint注解的bean。
4. controller是控制器包，用来接收前端发来请求，同时把处理后的数据返回给前端，相当于前后端交互的桥梁。
5. dao包是和数据库访问接口的，通过dao的接口运行sql语句，实现在数据库中存下数据。
6. domain底下是进行sql语句的构造。
7. dto底下是数据返回实体类（前后端交互的实体类）
8. enums底下是枚举类文件，如：ChatShowEnum枚举出yes和no展示出显示和不显示

   

9. exception包中ExceptionsHandler捕获运行时异常
10. service业务逻辑代码。
11. utiL包工具类：

    如：CommonUtil：通用工具类（验证字符串是否为空，判断后缀是否是图片文件的后缀等）

    CopyUtil：实体字段的值复制工具类（DTO、domain相互转换）

    EmojiConverterUtil：表情转换工具（将字符串中的emoji表情转换成可以在utf-8字符集数据库中保存的格式（表情占4个字节，需要utf8mb4字符集））

    UuidUtil：用户UUID生成的工具类

    ValidateEntityUtil：表单验证的工具类（检查对象是否是数字类型等）
12. ws：ChatEndpoint是WebSocket连接

13.  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.点击 运行，启动成功后启动前端 ，等待成功后，点击网址后即可看到聊天系统页面（先启动后端在启动前端）。