【毕业设计】基于Vue与SSM的在线聊天系统

妖狐艹你老母 2024-03-30 11:20 97阅读 0赞

#### 文章目录 ####

*  0 简介
 *  1 实现效果展示
 *  2 聊天系统实现功能
 *  3 概要
 *   *  3.1 PC端
     *  3.2 移动端
 *  4 系统功能图
 *   *  4.1 普通用户
     *  4.2 管理员
 *  5 技术路线
 *  6 启动项目
 *  7 最后

--------------------

## 0 简介 ##

Hi，大家好，学长今天向大家介绍一个 WEB项目

**基于Vue的在线聊天系统**

大家可用于 课程设计 或 毕业设计

## 1 实现效果展示 ##

![在这里插入图片描述][7592d0d948ef4dee902eab89f5fd8a5d.png]

![在这里插入图片描述][7116c13806c34b8a8a6bb37a122e9da4.png]  
![在这里插入图片描述][a5155995b1a547b9b3f7ac4f3ba52a89.png]  
![在这里插入图片描述][69677cb53d3e4513bd96d7fcac51854e.png]  
![在这里插入图片描述][caca636699fd4a18b5960e63366f2f30.png]  
![在这里插入图片描述][b524113f078a481d8fb4feaad3d0b818.png]  
![在这里插入图片描述][0fb91e976e334824968b0f31013ca7d0.png]

## 2 聊天系统实现功能 ##

*  登陆注册
 *  单聊
 *  群聊
 *  历史消息
 *  图片发送
 *  文件发送
 *  代码片段发送
 *  表情发送
 *  白板协作
 *  音视频聊天
 *  消息已读提醒
 *  好友分组
 *  好友备注
 *  好友上线提醒
 *  在线用户头像高亮
 *  添加好友
 *  添加群聊
 *  朋友圈功能
 *  发表朋友圈
 *  好友朋友圈
 *  朋友圈动态点赞
 *  朋友圈动态评论
 *  朋友圈动态回复评论
 *  日程设置

## 3 概要 ##

本系统分为Client，Server，Admin。其中Client为客户端，Server为服务器端，Admin为管理员端。

### 3.1 PC端 ###

**1、主页**

**2、聊天**  
聊天 已读设置 通知

**3、朋友圈**  
朋友圈 朋友圈评论

**4、主题设置**  
主题

**5、日程**  
日程 新建日程

**6、个人中心**  
设置

### 3.2 移动端 ###

**1、登录**

**2、聊天列表**

**3、聊天界面**

**4、图片预览**

**5、换肤**

**6、朋友圈**

## 4 系统功能图 ##

### 4.1 普通用户 ###

![在这里插入图片描述][deb28f1ed78d4b0bb5216e406bf5bf6d.png]

### 4.2 管理员 ###

![在这里插入图片描述][1a70a592d06a417a88d72e6bf2cc47f5.png]

## 5 技术路线 ##

本项目为前后端分离的开发模式

*  客户端使用Vue、VueX、Vue-Router等；
 *  管理员端使用React、antd等；
 *  后端使用的是node.js；
 *  数据库使用的是MongoDB；
 *  实现聊天的数据通信使用的是WebSocket。

## 6 启动项目 ##

**删除相关代码**

这部分代码是在我的数据库里，所以你需要删除或者替换相关代码以防报错

![在这里插入图片描述][3e822436e00849368268e46c3bd466c3.png]

**启动服务器（3333端口）**

cd chatServer
    npm install
    node init.js // 初始化数据库
    node app.js

**启动管理员端（3000端口）**

cd chatAdmin
    npm install
    npm start

**项目打包**

**1 客户端的代码打包后资源默认放在chatServer文件夹的public目录下；**  
**2 管理员端在chatAdmin的build目录下，需要自己手动将整个build目录复制到chatServer文件夹的public目录下，然后修改build目录文件的index.html，在引入资源路径前都加上/build。**

## 7 最后 ##

[7592d0d948ef4dee902eab89f5fd8a5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/999546f14bd240659b1e3ba0a3713b40.png
[7116c13806c34b8a8a6bb37a122e9da4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ff7289a80020450da36b6fcfd7ce3f9c.png
[a5155995b1a547b9b3f7ac4f3ba52a89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a8b10127288a44c2877acf327e773295.png
[69677cb53d3e4513bd96d7fcac51854e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ea01e90c89214176932bb4824e27d1f3.png
[caca636699fd4a18b5960e63366f2f30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0dd86cd5b1df48ebbbfad168d31ed4a2.png
[b524113f078a481d8fb4feaad3d0b818.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5f2a9f510f0e44bab403094732c8f46a.png
[0fb91e976e334824968b0f31013ca7d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cad21c9b4e4543be9d227fe076301834.png
[deb28f1ed78d4b0bb5216e406bf5bf6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cc07e594858a424fabab2454399d1632.png
[1a70a592d06a417a88d72e6bf2cc47f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a7c076f09e0a4672ac9b1c43b69772df.png
[3e822436e00849368268e46c3bd466c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/91e42f32f2df4ff0868ab4189c6a0dc0.png