vue+koa2+mongodb前后端分离聊天系统开源
前言
继上个纯前端模仿telegram聊天系统后我决定加上后端功能,这次考虑使用更加简洁界面和更加优雅的实现把UI界面也重构了。主要技术栈为Vue2+MongoDB+Koa2。该项目本应该是我2020年12月初就完成可以发布的了,综合考虑到毕业的相关工作,还是决定答辩完才开源。考虑到前端技术的发展飞快,我也考虑用Vue3+TS重构。考虑整个2021年我的工作主要内容还是AR特效滤镜和3D这方面学习投入比较多,我希望有想法的小伙伴能参与到这个项目中来!
技术栈
Vue2全家桶+MongoDB+Koa2+socket.io+vant 2+ES6/7
项目启动
启动环境:node、mongodb
git clone https://github.com/xxydrr/vue-koa-chat
cd backend
npm install //安装后端依赖
mongod //启动数据库
npm run init //初始化一个系统账号
npm run dev //启动服务器
cd ../
cd frontend
npm run serve
实现功能
- [x] 登录/注册/登出
- [x] 消息类型(文本/表情/图片/文件)
- [x] 好友(添加/删除/修改备注/模糊搜索好友)
- [x] 群组(普通群/广播群)/创建群/加入群/退群/模糊搜索添加的群
- [x] 未读消息统计/标为已读
- [x] 分组(未读/群组会话分组)
- [x] 添加好友/加群校验
- [x] 设置修改个人信息(密码/头像/年龄/手机号码/性别/邮箱/城市/昵称)
- [x] 查看好友/群组信息
- [ ] 持续完善...
项目截图
项目功能扩展想法
- 主题皮肤设置
- better scroll + 分页查询
- 我的页面加入游戏功能
- 我的页面加入stories功能
视频语音webRTC(暂时没有思路)
说明
欢迎有对项目有扩展想法的伙伴能参与到这个项目来❤️❤️❤️
如果项目对您有帮助,您可以 "Star" 支持一下 感谢!🌹🌹🌹
我的vue2 + vuex 聊天系统入门项目。地址
参考资料
1 声望
0 粉丝
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。
leftstick赞 64阅读 45k评论 18
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...
款冬赞 27阅读 13.3k评论 7
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...
熊的猫赞 19阅读 2.5k
vue中style scope深度访问新方式(:deep())
1、>>>如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...
寒水寺一禅赞 11阅读 34.8k评论 9
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]
jigsaw赞 16阅读 8.4k评论 3
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!
熊的猫赞 14阅读 1.6k
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...
熊的猫赞 14阅读 1.6k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。