前言
这个项目是我自学react+redux的第一个项目，并结合自己之前所学的node+mongodb，来模仿开发微信客户端。利用每天下班时间边学习边写。由于本人技术水平有限，比较适合新手。目前还没有写完。喜欢的话可以帮忙给我github点个star ^_^
项目地址
技术栈
react+redux+react-router4+socket.io+axios+node.js+mongodb
说明
本地启动mongodb服务分别进入wechat跟server文件夹npm installwechat里npm run start server里node app.js 和 chat.js 这两个文件
开发环境：macbook pro 、vscode、Chrome、node如果npm install太慢导致有些npm依赖包下载失败 你可以看控制台的报错信息，再手动npm install 具体的开发包，推荐使用淘宝的注册源，直接运行
npm install -g cnpm --registry=https://registry.npm.taobao.org
目标功能
- [√] 注册
- [√] 登录
- [√] 添加好友
- [√] 支持私聊
- [√] 消息列表的展示
- [√] 未读消息数量的显示
- [√] axios数据跨域的设置
- [ ] 群聊
- [√] 上传头像
- [√] 个人信息的编辑
- [ ] 朋友圈
部分截图
总结
1.之前写vue项目的时候，在main.js文件中写express接口，就行了，就不存在跨域问题。在create-react-app启动的静态资源服务中，实在找不到哪里可以写接口，找了好久的node_modules ，都不知道在哪里下手。好在create-react-app中的package.json中加上：proxy:http://localhost:4000就能解决跨域问题了。
2.在app.js页面中，使用的是express框架，写socket.io不知道为什么会提醒跨域问题，而我前面的登录接口用axios跨域就没有问题，而且我在express的头部做了CORS处理，还是存在跨域问题。所以只能另启了一个node服务，采用原生node.js编写，跨域就成功了。但是我在新写的服务中，换成用express框架，结果也提示了存在跨域问题。目前个人猜测express可能有什么跨域机制。
3.在引入react-router4的时候遇到了很多疑难杂症，晚上大部分的react-router4一下的版本。按照网上来做，好多报错，到处找博客找文章。后来通过react-router英文文档的阅读解决了各种报错问题。
4.我是通过redux来更新消息列表，中间出现store数据更新了，组件却不渲染。后来求助好友后，原来是我强制修改了state导致页面无法即使刷新。
5.formdata上传文件，相当于表单上传，头部为Content-Type:multipart/form-data,这点要注意了！
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。具体见
var multer = require('multer');var upload = multer({ dest: '../wechat/public/logos' }); // dest 指的是图片存到哪个文件夹里// 上传头像app.post("/uploadLogo", upload.single("avatar"), (req, res) => { User.update({ _id: req.body.id }, { $set: { logo: './logos/' + req.file.filename } }, function () { res.send({ status: "success", url: './logos/' + req.file.filename }) })}) 参考资料
《深入浅出React和Redux》-- 程墨
《MongoDB实战（第二版）》
文章都是学习过程中的总结，如果发现错误，欢迎留言指出