## 相关工具版本
1. node: 12.14.0
2. npm: 6.4.1
3. MongoDB: 5.0.3
## 相关地址
- [掘金-文章](https://juejin.im/post/5e8dd45cf265da47e34bf94d)
- [功能介绍-视频](https://www.bilibili.com/video/BV1aX4y1K7EF?p=1)
- [项目运行-视频](https://www.bilibili.com/video/BV1aX4y1K7EF?p=2)
## 功能
- [x] 登陆注册
- [x] 单聊
- [x] 群聊
- [x] 历史消息
- [x] 图片发送
- [ ] 文件发送
- [ ] 代码片段发送
- [x] 表情发送
- [x] 白板协作
- [x] 音视频聊天
- [x] 消息已读提醒
- [x] 好友分组
- [x] 好友备注
- [x] 好友上线提醒
- [x] 在线用户头像高亮
- [x] 添加好友
- [x] 添加群聊
- [x] 朋友圈功能
- [x] 发表朋友圈
- [x] 好友朋友圈
- [x] 朋友圈动态点赞
- [x] 朋友圈动态评论
- [x] 朋友圈动态回复评论
- [x] 日程设置
## 启动项目
### 1、克隆项目
下载压缩包解压。
### 2、删除相关代码
> 这部分代码是在我的数据库里,所以你需要删除或者替换相关代码以防报错
![removed code](./document/clean.png)
**需要注意的是这一步需要在启动服务端之前执行。不然会出现不可预料的错误**
### 2、启动MongoDB数据库
```bash
mongo
```
如果还没有安装MongoDB可以参考下面文章:
- [mongoDB - 菜鸟教程](https://www.runoob.com/mongodb/mongodb-tutorial.html)
- [mongoDB的安装和启动](https://juejin.cn/post/6844903958826188808)
### 3、启动服务器
```bash
cd chatServer
npm install
# 初始化数据库,初始化成功后可以看到自动创建了chat数据库
node init.js
node app.js
```
### 4、启动客户端
```bash
cd chatClient
npm install
npm run dev
```
启动成功后访问[127.0.0.1:8080](127.0.0.1:8080)即可访问。
### 5、启动管理员端(3000端口)
```bash
cd chatAdmin
npm install
npm start
```
启动成功后访问[127.0.0.1:3000](127.0.0.1:3000)即可访问。
### 6、Q&A
按照上述步骤启动一般是不会出问题,有问题请首先排查是否**执行顺序**不一致,以及数据库是否启动。
## 项目截图
**github上如果没有科学上网容易裂图,推荐在掘金上看:**
地址:https://juejin.im/post/5e8dd45cf265da47e34bf94d
### PC端
#### 1、主页
![主页](./document/screenshots/p-home.png)
#### 2、聊天
![聊天](./document/screenshots/p-chat1.png)
![已读设置](./document/screenshots/p-chat2.png)
![通知](./document/screenshots/p-notify.png)
#### 3、朋友圈
![朋友圈](./document/screenshots/p-pyq1.png)
![朋友圈评论](./document/screenshots/p-pyq2.png)
#### 4、主题设置
![主题](./document/screenshots/p-theme.png)
#### 5、日程
![日程](./document/screenshots/p-schedule1.png)
![新建日程](./document/screenshots/p-schedule2.png)
#### 6、个人中心
![设置](./document/screenshots/p-personcenter.png)
### 移动端
#### 1、登录
![移动端](./document/screenshots/m-login.png)
#### 2、聊天列表
![移动端](./document/screenshots/m-aside.png)
![移动端](./document/screenshots/m-conversationlist.png)
#### 3、聊天界面
![移动端](./document/screenshots/m-chat.png)
#### 4、图片预览
![移动端](./document/screenshots/m-picpreview.png)
#### 5、换肤
![移动端](./document/screenshots/m-theme.png)
#### 6、朋友圈
![移动端](./document/screenshots/m-pyq.png)
## 系统功能图
### 普通用户
![普通用户功能设计0404](./document/普通用户功能设计0404.png)
### 管理员
![普通用户功能设计0404](./document/系统管理员功能设计0404.png)
## 技术路线
> 本系统分为`Client`,`Server`,`Admin`三个端:其中`Client`为客户端,`Server`为服务器端,`Admin`为管理员端。使用前后端分离的开发模式
- 客户端使用`Vue`、`VueX`、`Vue-Router`;
- 管理员端使用`React`、`antd`;
- 后端使用的是`node.js`;
- 数据库使用的是`MongoDB`;
- 在实现聊天的全双工数据通信使用的是`WebSocket`、`socket.io`。
## 项目打包
1. 客户端的代码打包后资源默认放在`chatServer`文件夹的`public`目录下;
2. 管理员端在`chatAdmin`的`build`目录下,需要自己自己手动将整个build目录复制到`chatServer`文件夹的`public`目录下,然后修改`build`目录文件的`index.html`中引入资源路径前都加上`/build`。
## 交流
- qq群
![qq](./document/resources/qqgroup.jpg)
- `E-mail`:`ccdebuging@gmail.com`、`cAuth1218@163.com`
- `QQ`:`1831058205`
- 微信:`cAutg9248`
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
相关工具版本 node: 12.14.0 npm: 6.4.1 MongoDB: 5.0.3 功能 登陆注册 单聊 群聊 历史消息 图片发送 文件发送 代码片段发送 表情发送 白板协作 音视频聊天 消息已读提醒 好友分组 好友备注 好友上线提醒 在线用户头像高亮 添加好友 添加群聊 朋友圈功能 发表朋友圈 好友朋友圈 朋友圈动态点赞 朋友圈动态评论 朋友圈动态回复评论 日程设置 启动服务器 cd chatServer npm install # 初始化数据库,初始化成功后可以看到自动创建了chat数据库 node init.js node app.js 4、启动客户端 cd chatClient npm install npm run dev 启动成功后访问127.0.0.1:8080即可访问。 5、启动管理员端(3000端口) cd chatAdmin npm install npm start 启动成功后访问127.0.0.1:3000即可访问。 6、Q&A 按照上述步骤启动一般是不会出问题,有问题请首先排查是否执行顺序不一致
资源推荐
资源详情
资源评论
收起资源包目录
聊天室-毕业设计-vue-MongoDB-node.js (729个子文件)
.babelrc 242B
markdown.css 11KB
iconfont.css 10KB
base.css 4KB
index.css 31B
.editorconfig 156B
iconfont.eot 10KB
28.gif 541KB
404.gif 491KB
062.gif 360KB
110.gif 327KB
011.gif 264KB
a398436916.gif 229KB
7574a2f18a.gif 228KB
08.gif 217KB
20.gif 190KB
16.gif 180KB
23.gif 175KB
13.gif 172KB
13.gif 159KB
8f0127e6a0.gif 156KB
15.gif 153KB
14.gif 153KB
31.gif 151KB
112.gif 148KB
18.gif 145KB
07.gif 144KB
12.gif 143KB
01.gif 140KB
07.gif 139KB
17.gif 138KB
05.gif 138KB
11.gif 134KB
06.gif 128KB
77abaedbc4.gif 128KB
16.gif 128KB
423562bf7c.gif 124KB
d83c87951b.gif 122KB
6d8c28ba4f.gif 117KB
901a026cee.gif 115KB
9c895074de.gif 115KB
20.gif 110KB
14.gif 110KB
38009c8613.gif 109KB
082.gif 108KB
781702175f.gif 107KB
63dbdbada7.gif 104KB
03.gif 103KB
02.gif 101KB
1e94fd9fb7.gif 100KB
03.gif 100KB
04.gif 99KB
01.gif 99KB
00.gif 99KB
01.gif 99KB
09.gif 99KB
11.gif 99KB
15.gif 99KB
03.gif 99KB
06.gif 99KB
cbb1c9bd0d.gif 99KB
05.gif 99KB
02.gif 98KB
04.gif 98KB
14.gif 98KB
03.gif 98KB
08.gif 98KB
11.gif 98KB
23.gif 98KB
05.gif 98KB
16.gif 98KB
0f70e1837e.gif 98KB
22.gif 98KB
06.gif 97KB
06.gif 97KB
09.gif 97KB
05.gif 96KB
251deaf614.gif 96KB
19.gif 96KB
04.gif 95KB
05.gif 95KB
07.gif 95KB
04.gif 94KB
00.gif 93KB
03.gif 92KB
06.gif 92KB
10.gif 92KB
05.gif 91KB
04.gif 90KB
05.gif 90KB
01.gif 89KB
07.gif 89KB
07.gif 89KB
22.gif 88KB
02.gif 88KB
00.gif 88KB
1102.gif 87KB
05.gif 87KB
18.gif 87KB
00.gif 87KB
共 729 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
csdnGuoYuying
- 粉丝: 199
- 资源: 111
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- onenet_chongwukanhu_v06.apk
- 2022NOC软件创意编程赛项真题C++初中-决赛(有解析)
- 2022NOC软件创意编程赛项真题python初中-决赛(有解析)
- openLayer-本地数据加载 (day5)
- A题-正弦信号发生器.xdf
- 2022NOC软件创意编程赛项真题python小学高年级-决赛(有解析)
- mathml转换latex需要的xsl文件
- 2022NOC软件创意编程赛项真题图形化小学高年级-决赛(有解析)
- gbase驱动下载gbase-connector-java-8.3.81.53驱动下载
- 2022NOC软件创意编程赛项真题图形化小学低年级-决赛(有解析)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功