tips：接下去会在github写博客，简书不再更新和修改文章，欢迎大家逛逛我的新博客点击查看 ，我会尽量用更容易理解的方式写好每一篇博客,大家一起学习交流😄。
介绍
产品功能和页面参照qq，微信，TIM，不完全一样，有些是自己的想法。前后端都自己写。
感觉是一个挺不错的全栈入门项目，各种交互各种业务逻辑，不花哨，但实用。
对node（koa）和vue学习会挺有帮助，现在开源出来，接下去将继续不断完善😄欢迎star
技术栈：
前端vue，vue-router,vuex ，vue-cli和axios，scss,用rem做了移动端适配，没有用第三方组件。
后端用koa2，用gulp构建工具实现自动刷新后端代码运行。
数据库用mysql，基于Token的jwt鉴权机制，用socket.io做双向通信；
github地址
线上地址
欢迎大家注册登录，加这个群聊天😄 搜群名称： 项目交流群
群聊
也可以加我为好友，用户名： hxvin
也可以注册两个账号在两个不同浏览器自己尬聊啦 😂
项目展示 (部分)
github貌似没展示完全gif图
可直接戳链接查看
airchat1
airchat2
airchat3
image
WechatIMG215.jpeg
进度
开始 -----------------2018.01.13
- [x] 登录
- [x] 注册
- [x] 登出
- [x] 弹窗，提示等组件
- [x] 机器人智能聊天回复
- [x] 私聊
- [x] 群聊
-----------------2018.02.01
- [x] 用户资料卡
- [x] 加好友及验证好友请求
- [x] 好友请求通知
- [x] 删除好友
- [x] 未读消息提示
-----------------2018.02.10
- [x] 搜索用户，群组
- [x] 创建群
- [x] 群资料卡
- [x] 加群
- [x] 退群
- [x] 修改备注
-----------------2018.02.11
- [x] 发布到线上
- [x] 修改个人信息
-----------------2018.03.02
- [x] 收到添加好友请求底部tab红点提醒
-----------------2018.03.20 收拾掉不少bug :-)
迁移成Electron桌面版本的，支持mac和win环境。 （Electron版本将于六月份答辩完开源）
-----------------2018.03.25
- [ ] 通讯录展示
- [ ] 聊天发表情
- [ ] 聊天发图片
- [ ] 支持聊天代码美化，md语法
- [ ] 用户上传头像
- [ ] 性能优化，redis做缓存
下载到本地开发环境跑
本次开发我用了三个git分支，分别是主分支master ，开发分支dev ， 线上分支online，如果你要fork到你的本地跑，请fork master分支 。
（注意下到本地后如果要体验soket.io通信互聊，用两个浏览器各打开一个账号，不能用同一个浏览器，因为我用localstorage缓存账户信息）
Fork 或者 下载本项目
然后进入本项目的文件夹，把airchat/server/init/sql 的 airchat.sql文件 拉到你的msyql客户端(我使用的是mac下的 Sequel Pro 挺好用的)
npm i
npm run dev
cd server
npm i
接着下面两条命令执行一条就行，看着选；（如果想要修改后端代码即时保存刷新，用第一条；如果像想用chrome进行debug调试，用第二条)
npm run start
npm run dev
打包上线，让所有人都能用到你的产品(非必须)
打包上线前需要对master分支的代码做一些修改。具体怎么修改以及后续如何打包上线，请看我单独写的一篇文章airchat 打包上线小记，希望对你有帮助。
老习惯，代码注释比较详细，需要注释而没有注释的我也尽快补上;
后面也会写几篇博客来详细介绍本项目，希望更好的帮助到入门的小伙伴(大神请略过，或者给些指导建议😄)
如果对您有帮助，希望给个start，鼓励我继续更新^ ^
材料
自己总结的
文章都在我的博客上，欢迎star我的博客😄
网友评论