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

文章目录

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


0 简介

Hi,大家好,这里是丹成学长,今天向大家介绍一个 WEB项目

基于Vue的在线聊天系统

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


计算机毕设选题大全及项目分享:

https://blog.csdn.net/WEB_DC/article/details/125563252


1 实现效果展示

【毕业设计】基于Vue与SSM的在线聊天系统_第1张图片

【毕业设计】基于Vue与SSM的在线聊天系统_第2张图片
【毕业设计】基于Vue与SSM的在线聊天系统_第3张图片
【毕业设计】基于Vue与SSM的在线聊天系统_第4张图片
【毕业设计】基于Vue与SSM的在线聊天系统_第5张图片
【毕业设计】基于Vue与SSM的在线聊天系统_第6张图片
【毕业设计】基于Vue与SSM的在线聊天系统_第7张图片

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 普通用户

【毕业设计】基于Vue与SSM的在线聊天系统_第8张图片

4.2 管理员

【毕业设计】基于Vue与SSM的在线聊天系统_第9张图片

5 技术路线

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

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

6 启动项目

删除相关代码

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

【毕业设计】基于Vue与SSM的在线聊天系统_第10张图片

启动服务器(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。


计算机毕设选题大全及项目分享:

https://blog.csdn.net/WEB_DC/article/details/125563252


7 最后

你可能感兴趣的:(java,web,毕业设计,管理系统,vue,ssm,在线聊天系统,毕业设计,java,web)