分享一个React全家桶+express4+MongoDB的写的贴吧

#1
  • 前言

之前做项目都是用别人搭好的脚手架,最近有时间就自己用Reactjs全家桶写了一个带有贴吧功能的脚手架,传到github来和大家分享交流一下:grin::grin:https://github.com/kkltmoyu/NightPost
这是一个具有贴吧功能的Web工程,发帖、查询发帖信息、图表统计、发表用户评论、用户注册登陆注销等。 本工程使用React全家桶+NodeJS+MongoDB搭建。当然,如果你愿意,也可以使用此工程作为脚手架进行项目构建或者学习。

  • 关键技术
  1. 前端
    ReactJS-15.5 + React-router-4 + redux + react-redux + antd组件库 + recharts-1.0 + ES6 + webpack + sass + redux DEVTOOLS(默认关闭,需要请在index.js中取消注释)
    其中antd组件与recharts库均已配置为按需加载

  2. 后端
    NodeJS + express4 + MongoDB(MongoDB未集成在工程中请自行安装)
    前后端完全分离

  • 项目开发
    开发阶段采用nodeJS 7.9,前端调试使用chrom 51,后端nodeJS调试使用devtool,目录结构如下图:

  • 项目运行

  1. 开始
    根据db.sh中的说明修改db.sh路径为自己本机上的mongo路径

  2. 运行
    git clone https://github.com/kkltmoyu/NightPost.git
    npm install安装库
    启动mongo:./db.sh
    启动node服务器端:node server/index.js
    开发环境:
    npm run dev
    浏览器输入 localhost:7000
    生产环境:
    npm run dist

欢迎大家交流,提出宝贵的意见,如果对大家有帮助,欢迎github上赐予小星星哦:stuck_out_tongue_closed_eyes:

1 Like
#2

白天没时间写,在此分享一些项目搭建过程中的掉坑和爬坑经历:cry::cry:

  1. 客户端无法保存cookie信息
    在完成刷新页面保留用户登录状态这个功能的时候,由于要交用户cookie信息保存到mongo中,但发现用户提交的信息中心不包括cookie信息,一直以为是服务端的问题,后来通过浏览器抓取发送的数据包发现,一开始登录完成后,浏览器发送回来的session信息,客户端并没有保存,导致每次打开页面都会生成一个新的cookie,这个问题是由于 **fetch中没有设置credentials: ‘include’,**导致客户端不会接收服务器发送过来的cookie

  2. 使用antd的Layout控件,左侧的的Sider无法和右侧的Content并排显示
    Content始终显示在Sider低下一行,后来发现在react渲染生成的代码中缺少如下代码:className=‘ant-layout-has-sider’,该问题推测为由于redux将Sider与Content封装为容器组件,导致渲染过程中父控件Layout无法识别出子控件含有Sider,蚂蚁金服antd bug?

  3. 上传的图片无法打开或者模糊不清
    测试后发现问题出在客户端发送后,服务端接收时,原因为客户端 **发送时忘记使用encodeURIComponent()**函数进行编码,导致发送过程中将参数中的加号(+)全部替换成了空格(“ ”)

#3

mark一下

#5

多谢支持:grinning:,今后会继续更新,下版本优化打包文件大小,做好后上传,大概要过一两周,最近有点忙

#6

mark一下

#7

:laughing:

#8

有机会学习下,楼主真强大!

#9

楼主,nodejs6.5可以用吗?

#10

理论上来讲6+都可以

#11

楼主请问你做图片上传这项功能了吗?我想知道如果使用upload组件,node后台应该如何设置并接收呢?

#12

做了 ,我用的默认h5的input=file,和表单一起提交,后台当字符串解析req.body.image,你说的upload是antd的upload么?

#13

是的,用的upload但是自己不会配置node后台的接口

这个内容我也没怎么看懂

#14

你这个是浏览器里抓包的结果吧,那里面的信息基本都是你选择上传文件后自动生成的,https://github.com/aguidrevitch/jquery-file-upload-middleware 你看看这个例子吧

#15

支持开源, 已star,加油

#16

:blush:

#17

mark一下留着学习

#18

谢谢 欢迎大家提问与建议