Awesome Open Source
Awesome Open Source

React技术栈+Express+Mongodb实现个人博客

该项目暂停维护,欢迎关注后续开源的个人网站

说明

放到开头,这里重点说明下,很多哥们会发邮件群里艾特,但是好多邮件回复不了不知道什么情况,群里有时候不怎么关注就错过了,大家如果有啥问题咱就直接提issue吧,后面朋友遇到相同问题大家也可以参考

微信公众号

img

扫码关注微信公众号,获取第一手文章推送

功能描述

前端部分

  • [x] 文章列表展示
  • [x] 文章分类
  • [x] 登录管理
  • [x] 权限管理
  • [x] 文章详情页展示
  • [x] 管理员文章管理
  • [x] 管理员标签管理
  • [x] 发文(支持MarkDown语法)

后端部分

  • [x] mongoose数据库操作
  • [x] 路由管理
  • [x] 身份验证
  • [x] 基本的增删改查
  • [x] ...

技术栈

  • [x] react
  • [x] react-redux
  • [x] react-router
  • [x] redux-saga
  • [x] babel
  • [x] webpack
  • [x] Express
  • [x] Mongodb
  • [x] Mongoose

TODO

  • 文章评论

项目运行效果

  • 首页 index

  • 非管理员登录

nealyanglogined

  • 管理员登录

adminLogined

  • 标签管理

amdinTag

  • 查看文章详情 detail

  • 发表文章 newArticle

  • 修改文章 modifiedArticle

项目介绍

当然这是一个全栈的开源demo,在此之前写过一个模仿大众点评的Demo,有兄弟反应说应该加点注释。 因为实在不想回头再麻烦,就想在这个demo中再加。

这个demo就是一个简单的增删改查的博客demo。前端用react技术栈、后端是express+mongoose。

项目实现步骤系列博客

  • [x] [实战react技术栈+express前后端博客项目(0)-- 预热一波]
  • [x] [实战react技术栈+express前后端博客项目(1)-- 整体项目结构搭建、state状态树设计]
  • [x] [实战react技术栈+express前后端博客项目(2)-- 前端react-xxx、路由配置]
  • [x] [实战react技术栈+express前后端博客项目(3)-- 后端路由、代理以及静态资源托管等其他配置说明]
  • [x] [实战react技术栈+express前后端博客项目(4)-- 博客首页代码编写以及redux-saga组织]
  • [x] [实战react技术栈+express前后端博客项目(5)-- 前后端实现登录功能]
  • [x] [实战react技术栈+express前后端博客项目(6)-- 使用session实现免登陆+管理后台权限验证]
  • [x] [实战react技术栈+express前后端博客项目(7)-- 前端管理界面用户查看功能+后端对应接口开发]
  • [x] [实战react技术栈+express前后端博客项目(8)-- 前端管理界面标签管理功能+后端对应接口开发]
  • [x] [实战react技术栈+express前后端博客项目(9)-- 前端管理界面发表文章功能+后端对应接口]
  • [x] [开发实战react技术栈+express前后端博客项目(10)-- 前端文章列表、路由控制以及对应后端文章管理开发]
  • [x] [实战react技术栈+express前后端博客项目(11)-- 前端文章管理部分完善(修改、预览功能)]
  • [x] [实战react技术栈+express前后端博客项目(12)-- 博客添加评论功能以及对应后端实现]
  • [x] [实战react技术栈+express前后端博客项目(13)-- pm2的使用说明]
  • [x] [实战react技术栈+express前后端博客项目(14)-- 收工]

移步Nealyang/personalBlog

环境

node @7.9.0
db @3.4.0
...
别的就直接npm install 了

注意MongoDB初始化后需要初始化一个admin/admin账户,用于登录后台管理

运行

git clone [email protected]:Nealyang/React-Express-Blog-Demo.git

npm i

npm start

独立打包

npm run build

生产环境启动

npm run start-prod

开发数据库

链接: https://pan.baidu.com/s/1c3aedw8 密码: 5ii1

扫描上方二维码,回复【1】加我个人微信,入群

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,061,746
Reactjs (162,729
Express (30,261
Redux (27,930
Mongo (7,290
Mongoose (6,840
Saga (1,934
Redux Saga (1,338