Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
发布于 3 个月前 作者 lensh 2937 次浏览 来自 分享

Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本

预览 在线预览地址:https://qq.lenshen.com (为了体验到最佳的效果,提供了3个测试账号,需要账号才能登陆哦,具体账号和密码下面有讲) 目前项目已开源,源码地址:https://github.com/lensh/vue-qq 技术栈 Vue2.0:实现前端页面构建 Vuex:实现不同组件间的状态共享 Vue-router:页面路由切换,实现单页的核心 vueg:页面复杂场景切换效果 Socket.io:实现实时消息推送 axios:一个基于 Promise 的 HTTP 库,向后端发起请求 Express、Koa2:开发环境使用Express,生产环境使用Koa2 ES6、ES7、ES8:服务端和客户端均使用ES6语法,promise/async/await 处理异步 localStorage:本地保存用户信息 Webpack:模块打包,前端项目构建工具首选 SASS(SCSS):CSS预处理语言 Flex:flex弹性布局,简单适配手机、PC端 CSS3:CSS3过渡动画及样式 IScroll:模拟原生app的列表滚动效果(ListView) MySQL:MySQL关系型数据库持久化数据(考虑到表与表之间关系复杂,需要多表查询,最复杂的时候是六张表联查,用MySQL会比Mongodb好得多) jsonp:跨域请求数据 pm2:服务端使用pm2部署,常驻进程,比forever好用得多(https://github.com/Unitech/pm2) nginx:服务端使用nginx代理端口转发

使用方式 先将根目录下的qq.sql导入到你的MySQL数据库里(可以使用Navicat),用户名为root,登录密码为空。启动MySQL服务。然后使用cnpm install 安装所有依赖(最好用cnpm安装,因为项目依赖很多,npm用的是国外的镜像,在网络不稳定的情况下很有可能会导致安装失败,而且下载速度远远慢于国内的cnpm),最后运行npm run dev。服务器部署运行项目只需要npm run pm2,这样就可以常驻进程,不过前提是得先全局安装pm2。 尽量使用Chrome浏览器体验最佳效果。另外提供了三个测试账号,默认用户的密码都是6个1: qq:986992484 密码:111111 qq:986992483 密码:111111 qq:986992482 密码:111111 目前已经实现了QQ的核心功能,如消息列表、好友列表、新朋友、好友申请、实时群聊、实时私聊、聊天设置、屏蔽对方聊天、特别关心、会员等级、个性名片、添加好友、删除好友、好友分组、查找用户、登录、注销、切换用户、右滑显示侧栏等等。后期会考虑增加更多功能。 如果你想体验实时聊天的酷炫效果,那么你可以打开两个浏览器,用上面不同的账号登录即可。

截图 消息页面 消息页面.png 好友页面 好友页面2.png

最后 源码地址:https://github.com/lensh/vue-qq 在线预览地址:https://qq.lenshen.com 如果觉得不错,就毫不吝啬地给个star吧。后期项目还会继续更新和完善。

18 回复

连号的QQ是怎么申请的?

@ken90242 觉得还不错的话可以给个star啊~~

@superewe 没有申请啊

这个账号就是他自己mysql里加的,是他的数据库跟腾讯没毛线关系,

千万别弄自己的QQ去测试,小心被留下记录

开源值得鼓励,点个赞

@ouyang90 数据库那边没有存储用户自己输入的QQ号和密码,我也不会这样做,你们不必担心。

网站加载一万年啊 <br><br>来自<a href=“https://lzxb.github.io/react-cnode/” target="_blank">react-cnode手机版</a>

你的前端界面是怎么做的?

来自酷炫的 CNodeMD

牛逼啊,赞一个

大神,你花了多长时间?

你花了多久?

发验证码我手机接受不了呢

回到顶部