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 项目打包
- 客户端的代码打包后资源默认放在
chatServer
文件夹的public
目录下; - 管理员端在
chatAdmin
的build
目录下,需要自己自己手动将整个build目录复制到chatServer
文件夹的public
目录下,然后修改build
目录文件的index.html
中引入资源路径前都加上/build
。
7 最后
**项目分享: ** https://gitee.com/asoonis/htw