Awesome Open Source
Awesome Open Source

blog

react+react router+node(express)+mongodb+webpack 栈

简介
  • 该项目是一个简单的博客系统
  • 实现了浏览文章,发布新文章,文章下留言等功能
  • 使用react组建前端组件(view)
  • 使用react-router管理路由(单页应用)
  • node(express4.X)搭建后台和接口
  • mongodb(mongoose)管理数据存取
  • 构建工具使用webpack
部署
  • 根据webpack.config.js和package.json,npm install 所有的依赖项
  • 在mongodb的文件目录下运行mongodb
  • webpack 命令编译所需的bundle.js文件
  • node app.js 运行服务,访问localhost:3000
  • 该项目在开发环境下可以使用webpack提供的服务器,使用其热加载功能,正常情况使用nodejs服务
  • 使用cssModules引入样式避免全局污染
tips&other
  • 所有的路由在app.js中定义
  • 增删改查的操作在文件blog.js
  • 关于数据库的Schema定义在model文件夹下(评论和文章),model层在blog.js中定义
  • 关于view层的组件在public/asset/js/component
  • 此项目链接两个数据库,评论的数据根据文章的_id存取(不同的文章拥有自己的评论)
  • 评论列表利用react状态机的原理进行实时更新(setState)
  • 由于时间原因该网站样式比较粗糙
  • react组件之间的通信使用了嵌套关系,未使用redux,以后可以改进
  • 感想:需要整个栈才能做出比较完整的东西,另外就是前端越来越好玩吸引力越来越大


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,059,387
Reactjs (162,343
Mongodb (29,765
Blog (28,318
Webpack (23,627
Router (13,790
Mongoose (6,820