# vue3-xm-qq

**Repository Path**: lucson/vue3-xm-qq

## Basic Information

- **Project Name**: vue3-xm-qq
- **Description**: 使用 Vue3+Vant+Koa+SocketIo+Mongodb 开发的仿QQ实时聊天应用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 7
- **Created**: 2022-05-01
- **Last Updated**: 2025-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Koa, socketio, Vant, MongoDB

## README

## 项目介绍

该项目是一类社交类项目 模仿的QQ的界面 通过该项目可以提升对Vue和NodeJs的使用  并培养一定的编程思维和解决问题的能力

整个项目包括前后端 总体的技术栈为

**Vue3.2 + VueRouter4 + Vuex4 + Vant3 + Axios + NodeJS + Koa2 + Mongodb + Socket.io + Socket.io-stream + LocalStorage + Indexdb**

Indexdb 原生的API操作比较繁琐 因此我封装了一个库 本次项目使用到了 

GIT 和  NPM 地址如下

[GIT 码云地址](https://gitee.com/lucson/indexdb)
[NPM 地址](https://www.npmjs.com/package/@liwenxiang/indexdb)

> VueRouter4 和 Vuex4 是在 Vue3 中使用的版本

技术栈也是相对来说较为丰富的 包含了前后端 可以练习到很多技术 增加熟练度

[视频介绍地址](https://www.bilibili.com/video/BV12t4y1V7qX?spm_id_from=333.999.0.0&vd_source=e33e82c7faa4a8c8cbbe238dcd0e8c3f)

> 希望大家参照项目的代码和功能点 自己复刻一下磨练出更多的项目经验

## 后端接口

+ 后端接口可以在 server/router 文件夹下看到 统一的前缀为 /api 不同模块的前缀详见代码

+ 同时也可以在 src/api/api_constant.js 中查看接口地址

**开发项目时 所有接口(除了登录接口)都需要在请求头中携带token 可以参考 src/api/request.js**

**token 在请求登录接口后 返回**

> 如果不会后端 只需要给后端启动起来 然后参考 src/api/api_constant.js 中的 URL 地址 使用 axios 发送请求获取数据即可  注意要给数据库的数据导入进去 并启动  **相关的数据库地址 项目接口地址 可以在 server/config 与 src/config 查看并修改**

## 项目启动

### 接口导入

在 navicat 里链接本地数据库 并创建一个新的数据库  然后将根目录的  db_data 下面的json文件 通过 navicat连接本地mongodb数据库并导入数据

本次项目Mongodb是单机模式 所以直接安装 启动就可以了 无需配置 如果你自己设置了需要验证 那么可以参考如下的 Mongoose 链接格式：

+ mongodb://admin:123456@localhost:27017/qq?authSource=qq
  + protocol://username:password@host:port/dbName?authSource=dbName

[Navicat导入数据视频演示地址](https://www.bilibili.com/video/BV12t4y1V7qX?p=2&vd_source=e33e82c7faa4a8c8cbbe238dcd0e8c3f)

> **关注微信公众号 阿祥说 回复 navicat 即可拿到 navicat 安装包和注册机**

### 安装依赖

先移动到项目根目录 在执行如下任意一个命令 参考 package.json

+ yarn install
+ npm install
+ cnpm install 

> 以上均可 但是 cnpm 和 yarn 需要安装 可自行百度 推荐 yarn

### 项目启动 - 前端

```
$ cd vue3-xm-qq // 项目根目录
$ yarn serve | npm run serve
```

### 项目启动 - 后端

```
$ cd vue3-xm-qq // 项目根目录
$ cd server 
$ node server.js || nodemon server.js 
```

> nodemon 需要安装  **启动时注意相关的链接地址已经修改正确**

## 功能点 知识点

+ 移动端页面大概10多个
+ 数据验证 - 前后端都有做简单的验证
+ 登录 - 完整的登录流程
+ 注销 - 完整的注销流程
+ 注册 - 完整的注册流程
+ 添加好友
+ 好友申请通知
+ 添加群
+ 加群申请通知
+ 创建群
+ 好友列表展示 - 按字母
+ 群列表展示 - 按首字母
+ 在线状态展示
+ 标题动态切换
+ 未读消息数提示 - 单人 和 总共两个人发送5条新动态依旧展示2人新发表
+ 新好友申请数提示
+ 好友新发布动态提示 数量 + 人数 - 
+ 个人空间列表展示
+ 好友空间展示
+ 发布说说 - 图文
+ 一起画画 - 单机版 本来是想写成多人版的 但是觉得没啥必要 手机屏幕那么小 一起画都画糊了 0.0 带有记忆功能 可以点击回放上一次绘制的图形
+ 私聊文本消息功能
+ 私聊图片消息功能
+ 私聊视频消息功能
+ 私聊语音消息功能
+ 私聊视频发送进度提示功能
+ 发布消息滚动条触底功能
+ 消息发送的相对时间提示
+ 获取QQ头像展示
+ 进入聊天界面滚动条触底功能
+ 当前私聊的图像预览功能
+ 初次初始化提示 - 创建存储数据需要的基本环境
+ 私聊消息持久化功能 - 包括 文本 图像 视频 语音 的持久化
+ 信息提示 - 无聊天列表 - 无好友 - 无群
+ 清除本地聊天记录缓存信息
> 群聊功能没写 不过在项目里做出了私聊群聊的区分 一个浏览器没做保存多个不同用户的聊天记录 所以切换用户时记得清空缓存

**src/pages/chat 是主要的聊天逻辑组件 内部代码没有抽离 也没有封装 最原始的模样 更容易看懂理解一点**

**更多细节细小的功能在代码里看吧！注意演示时使用F12的手机模式进行调试 消息列表使用的是移动端事件**