前言
这个项目是我自学react+redux的第一个项目,并结合自己之前所学的node+mongodb,来模仿开发微信客户端。利用每天下班时间边学习边写。由于本人技术水平有限,比较适合新手。目前还没有写完。喜欢的话可以帮忙给我github点个star ^_^
项目地址
https://github.com/zhouatie/w...
技术栈
react+redux+react-router4+socket.io+axios+node.js+mongodb
说明
本地启动mongodb服务
分别进入wechat跟server文件夹npm install
wechat里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 类型的表单数据。具体见 multer
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实战(第二版)》
文章都是学习过程中的总结,如果发现错误,欢迎留言指出
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。