0 项目说明

基于Vue的在线聊天系统

提示：适合用于课程设计或毕业设计，工作量达标，源码开放

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

1 界面展示

主页

聊天

朋友圈

移动端

2 系统功能图

普通用户

管理员

3 技术路线

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

• 客户端使用Vue、VueX、Vue-Router等；
• 管理员端使用React、antd等技术栈；
• 后端使用的是node.js；
• 数据库使用的是MongoDB；
• 在实现聊天的全双工数据通信使用的是WebSocket。

4 启动项目

• 克隆项目
• 删除相关代码

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

• 启动服务器（3333端口）

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

• 启动客户端（8080端口）

cd chatClient
npm install
npm run dev

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

cd chatAdmin
npm install
npm start

启动完成后流群访问localhost:8080以及localhost:3000可以分别访问客户端以及管理员端。

5 项目打包

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

7 最后