基于Vue+Java实现的在线聊天APP系统设计与实现_vue + java 在线聊天

一、需求分析

1.核心用户分析

在线聊天系统主要针对一些年轻用户群体以及因为工作需求而对于实时交流以及非实时交流有较大需求的群里。就青年群体而言，这一用户群体特征比较鲜明，其主要需求为基础聊天需求以及一些能够凸显个性的功能需求。在线聊天对于青年人来说也逐渐成为一种主流的设计方式。年轻人们通过在线交流和好友印象的可以了解到对方的性格，而且可以通过相互添加好友保持关系。而对于有工作需求的人来说能够实时交流以及处理未读消息就显得十分重要。

2. 系统的主要功能的概述

首先未注册的用户可以注册账号，已经注册的用户可以使用账号密码进行登录。

用户可以搜索好友，搜索之后可以进行添加好友

主界面分为两个部分，一个部分为消息盒子，一个部分为好友盒子

消息盒子主要存放未读消息，如果有一个好友向你发送消息你没有点到聊天框里查看的话就会在消息盒子界面显示

好友盒子显示如下几个部分，好友列表，添加好友的入口，个人信息的入口，朋友验证的入口

所有的好友会在好友列表中展示，一开始所有的好友的在默认分组。点击好友之后可以进入好友的资料卡页面

可以在好友资料卡中可以查看好友的基本消息，以及会显示好友的印象，当点击某个印象标签的时候会提示你可以进行删除。还可以在好友资料卡页面点击发送消息进入聊天窗口。除此之外右上角点击之后可以有删除好友，移动好友，添加标签的选项

删除好友：点击之后好友将被删除，你可以通过再次发送验证消息进行添加

移动好友：可以将好友移动到指定的分组，如果分组不存在则创建分组，若移动后分组内没有成员则删除分组。

添加标签：可以为好友添加一个标签。

当进入聊天框之后发送消息对方就可以发收到，点击下载聊天记录的按钮就可以下载所有的聊天记录，点击删除聊天记录可以删除和当前用户所有的云端记录。

个人信息，在这里可以修改个人信息包括修改头像，以及删除别人给自己的标签，并且可以在此处退出登录

3. 项目操作流程图

4. 功能详解

1. 登录

使用账号密码进行登录，登录成功之后跳转到主页面中的消息盒子的页面

2. 注册

账号采用邮箱格式，密码要求大于八位

3. 消息盒子

消息盒子显示你的所有的未读消息，一旦消息已读就会从消息盒子中去除

4. 好友盒子

好友盒子有如下这些部分组成：新的朋友，我的账号，朋友验证，好友列表

5. 好友列表

按照分组展示所有的好友，点击好友可以进入好友资料卡页面

6. 朋友验证

当你发送的请求别人已经处理完了或者别人向你发送了请求的话此处会有一个红点表示消息数量。点击进入之后进入验证消息模块

7. 我的账号

点击之后进入个人资料卡，在这里可以修改姓名，头像，性别，头像要求小于 30kb，年龄要求不能为负数，性别要求只能是男或者女，还可以在此处删除自己的标签，也可以退出登录。

8. 新的朋友

可以进行全局搜索，即不进行任何输入直接回车可以显示所有的好友，并且可以进行模糊搜索，只输入名字的部分也可搜索到。并且可以添加年龄和性别的限制条件。点击搜索结果可以进入好友资料卡。在这里可以填写验证消息，并且发送好友验证，自己不能添加自己，不能添加以及添加的好友，如果已经发送过依次请求对方为响应也不能发送。当这里发送之后对方的朋友验证会出现红点。

9. 验证消息

当我们点击朋友验证之后，进入验证消息页面，如果我们发送的消息被处理了，则会有一个红点标记，别人发送的请求我们可以选择拒绝和接受。如果我们进入了此页面的话，如果存在我们发送的消息被处理了且我们自己之前未读的，则会被设置为已读。对于别人发给自己的请求，则必须在处理完之后才会被设置为已读。

10. 好友资料卡

显示好友的基本信息，好友的标签，点击标签可以进行删除，并且可以在此页面点击发送消息进入聊天框进行聊天，此页面中点击右上角还可以进行删除好友，移动好友，添加标签。

11. 删除好友：将好友从列表中删除，删除后可以再次发送验证消息
12. 移动好友

输入要移动的分组如果不存在则创建分组，若某个分组内没有了用户则删除分组，所有用户默认在默认分组中

13. 添加标签

可以对一个用户添加一个标签，添加重复标签没有用

14. 聊天界面

聊天界面可以双方可以实时发送消息，显示的时候自己的消息在右侧，对方的消息在左侧，且按时间排序，点击下载按钮可以进行聊天记录下载，点击删除按钮可以删除云端数据

5. 系统的顶级用例图

6. 系统的原型图设计

原型图主要是用图片的形式站输出之前的功能模块，并且也是后面前端 UI 的主要依据

登陆界面，注册界面类似消息盒子界面

聊天界面 好友列表界面

搜索界面 好友申请界面

个人资料页面 验证消息界面

项目的页面和原型图过多这里就不一一展示，详情可见压缩文件

二、数据库设计

因为聊天系统的所有功能基本上都是围绕着用户进行的。聊天是用户和用户聊天，添加好友也是用户添加用户，印象管理也是用户给用户添加印象。所以主要的联表操作都和 user 表有关。这里就先给出整个项目的 ER 图

根据 ER 图可以构建数据库的物理设计如下

1. 好友关系表 friendship

2. 好友印象表 impression

3. 聊天记录表 record

4. 好友验证表 validation

5. 用户表 user

Redis 中的存储结构的说明，因为 Redis 的 Nosql 的性质很适合用于存储未读的聊天记录，我是用 Redis 中的哈希结构进行存储未读消息。每一条记录规则如下键为 unread+userId，值为一个 Java 中的 Map<String, Map<String, String>> 的类型。Map<String, Map<String, String>> 的类型数据格式如下:

senderId: {
	nickname:xxx,
	content:xxx,
	pic:xxx
}
1
2
3
4
5

除此之外在 Redis 中单独存储一个哈希结构，键为 unreadNum+userId，值为未读消息数量。

三、架构设计

1．技术栈

（1）前端

①Vue 作为前端框架

②vue-router 进行前端路由管理

③webpack 开发 SPA（单页面应用）

④mint-UI 作为 UI 框架

⑤STOMP 实现 Socket 通信的框架

⑥axios 发送请求

⑦sass(css 预处理器，进行 CSS 代码的编写)

前端架构说明:

Webpack 搭建项目前端框架，打包生成 SPA（单页面）的移动端应用。

1、 Webpack 配置文件

webpack.base.conf.js 为基础配置 一些最基本的 loader 与 plugin 都在这里面 webpack.dev.conf.js 为开发环境配置，配置了适合开发环境的 sourceMap，能快速的定位开发环境代码报错位置 webpack.prod.conf.js 为生产环境下配置，关闭了 sourceMap，极大的减小了线上环境代码包的大小，启用了 UglifyJsPlugin 进行代码压缩，使首屏加载