项目介绍

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

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

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

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

GIT 和 NPM 地址如下

GIT 码云地址 NPM 地址

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

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

视频介绍地址

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

后端接口

• 后端接口可以在 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导入数据视频演示地址

关注微信公众号 阿祥说 回复 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的手机模式进行调试 消息列表使用的是移动端事件