用Vue.js+Meteor.js实现仿微信web即时通讯软件

3,792 阅读2分钟

概述

  • 毕业设计打算使用vue.js+egg.js实现前后端分离的方式开发仿微信即时通讯应用,但选题的时候导师建议我用meteor框架实现,刚开始并没有了解过meteor框架,兴致冲冲就同意了下来﹋o﹋,结果到要学习相关知识的时候却头皮发麻,meteor框架在国内占取的份额太低了,即便是学习网站哔哩哔哩都很少有相关的视频,没办法,只能去看官方文档和GitHub上clone别人的项目,了解代码结构,差不多过去了快三个月,毕业设计代码部分也算完成了,到现在才发现,meteor框架的响应式数据是真的舒服,在即时聊天方面完全不需要webscoket进行长连接,可惜代码耦合度太高了,适合中小型项目。
  • 实现功能点:
    • 登录注册退出
    • 个人聊天/群聊
    • 朋友圈
    • 添加好友/删除好友/拉黑
    • 消息类型:文字/图片/表情包/红包
    • 支付功能(样式实现,和真实支付没有关系)
    • 其他小点就不一一列举了
  • 源码地址:vue-wechat

效果图

支付界面 69552133810d9a5521ea2ea14b62d45567026d4b16681ca1.md.gif 1215b0b86d00eb848cdbb3c038f6319f33aa24f0bf3e070d.md.gif 356225fb28d81b25e59ec94466e8912f64e34533cb25f780.md.gif d5d44177f30846f5539597efbdeb8ded9205aaedfae3d2c7.md.gif 6d523b45728b3ff3da1e692bcce42b0143c8d946f39fb78e.md.gif faacbe2f6664acd3a6ed0e69134994afcd113b8e9ab77c2a.md.gif 066f30e0606a6c85c3132f7c6c25ad7e42a751b37d4e662e.md.gif 3737f0795ccc0f0ed441e33f90379eecf6151b455c5a3ab2.md.gif

不知道Markdown怎么排版,有时间再研究一下(•̀⌄•́),图片只是部分功能,有兴趣的小伙伴可以看一下代码。


设计表
61f65ee47f914af8499d2c93e1bc7af539faa35fce04acb7.jpg
meteor.js推荐采用mongo作数据库存储,而mongo数据库属于非关系型数据库,因此设计上我尽量减少了数据表的数量,节省联表查询的频率,数据表包括用户表,消息表,首页消息框表,群表,好友表,朋友圈表以及好友申请表。

总结

代码部分就不展示了,毕竟太多了,单单页面就有三十五个,如果有兴趣的小伙伴希望可以点个赞,发现b站还没有即时通讯实现仿微信类的视频,如果对此类视频需求多的话(赞能有50个)(◔◡◔),我想录制相关的视频,从页面设计到功能实现,也算加深自己的学习!!