链氪巴士
  1. 首页
  2. 站点导航
  3. 文章
  4. 快讯
  5. 软件
  6. 书刊
  7. 关于

VueSocial:仿微博、微信的聊天社交平台

VueSocial是一个类似QQ、微博、微信的聊天社交平台,是基于vue+express+socket.io的前后端分离练手项目。它实现了诸如登录注册、图片分享、头像修改、评论、实时聊天、搜索等功能。其技术栈包含vue、express、socket.io等众多技术。在安装上需要分...

访问官网 →

【Github】项目名:VueSocial:仿微博、微信的聊天社交平台

项目简介

VueSocial是一个类似QQ、微博、微信的聊天社交平台,是一个基于vue+express+socket.io的前后端分离练手项目。前端代码在BlogPhone目录下,后端代码在server目录下。

已实现功能

  • 登录注册功能。
  • 图片分享功能:能够上传本地图片到云服务器(示例中为阿里云oss,可修改相关代码)。
  • 头像修改功能。
  • 评论功能:通过socket.io实现实时消息推送。
  • 查看个人主页功能。
  • 实时聊天功能:借助socket.io实现。
  • 首页下拉刷新功能:使用better-scroll实现。
  • 搜索功能:可搜索用户与动态,并且使用localStorage保存历史搜索记录。

技术栈

  • vue:前端框架。
  • express:后端框架。
  • socket.io:实现实时消息推送。
  • axios:基于Promise的HTTP库,用于发送ajax请求。
  • localStorage:浏览器本地存储。
  • Webpack:前端项目构建工具,用于模块打包。
  • mongoose:mongodb的框架。
  • better-scroll:解决移动端(也支持PC)滚动场景需求的插件。

安装步骤

分别在两个文件目录下安装依赖,即在server文件夹下执行npminstall,在blogPhone下执行npmrundev,然后打开localhost:8081即可。

项目总结

该项目展示了多种技术的应用,如socket.io的使用,在掌握好相关函数(如socket.emit()、socket.on()等)后能较好地实现消息的发送与监听。在vue方面也总结了一些项目中遇到的难点,如ajax和dom操作在生命周期函数中的运用等。此外,图片上传及预览部分也展示了相关的前端操作逻辑和后端保存图片的逻辑。如果您对这个项目感兴趣或者有任何想法,欢迎留言讨论。

项目地址

GitHub链接直达