前言本项目是我自学react+redux的第一个项目，结合之前学习的node+mongodb，仿微信客户端开发。每天利用下班后的时间学习和写作。由于本人技术水平有限，比较适合新手。它还没有完成。喜欢的话可以在github上给我一个star^_^项目地址https://github.com/zhouatie/w...技术栈react+redux+react-router4+socket.io+axios+node。js+mongodb注意在本地启动mongodb服务，进入wechat和server文件夹。npminstall在微信中，nodeapp.js和chat.js在npmrunstartserver中。开发环境：macbookpro、vscode、chrome、node。如果npm依赖包下载失败，可以在控制台查看错误信息，然后手动npminstall具体的开发包。推荐使用淘宝注册源，直接运行npminstall-gcnpm--registry=https://registry.npm.taobao.org目标函数[√]注册[√]登录[√]添加好友[√]支持私聊[√]消息列表显示[√]未读消息数显示[√]axios数据跨域设置[]群聊[√]上传头像[√]编辑个人信息[]部分截图汇总朋友圈1.之前写vue项目的时候，把express接口写在main.js文件里，不会出现跨域问题。在create-react-app启动的静态资源服务中，实在找不到写接口的地方。我一直在寻找node_modules很长时间，但我不知道从哪里开始。还好在create-react-app中的package.json中加入：proxy:http://localhost:4000可以解决跨域问题。2.在app.js页面中，使用了express框架。写socket.io的时候，不知道为什么会想起跨域的问题。但是我之前的登录界面axios跨域是没有问题的，我是在express的head里面做的。经过CORS处理，仍然存在跨域问题。于是只能再启动一个node服务，用原生的node.js写的，跨域就成功了。但是在新写的服务中，我换成了express框架，结果也提示存在跨域问题。目前个人猜测Express可能有什么跨域机制。3、在引入react-router4的时候遇到了很多疑难杂症，react-router4以下的版本大多是晚上。按照网上的说法，报了很多错误，到处找博客找文章。后来通过阅读react-router英文文档解决了各种报错问题。4.我通过redux更新消息列表，中间更新了store数据，但是组件没有渲染。后来求助朋友后，原来是我强行修改状态，导致页面无法刷新。5、formdata上传文件，相当于表单上传，header为Content-Type:multipart/form-data。注意这一点！注意：Multer不会处理任何非多部分/表单数据类型的表单数据。详见multervarmulter=require('multer');varupload=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})})})References《深入浅出React和Redux》--程墨《MongoDB实战（第二版）》react-routerreactredux中文文档mongoose基于Vue、Nodejs、Socket.io的聊天应用multer文章学习总结过程。如发现错误请留言指出
