Blog-React

一个 React + node 的初/中级练习项目：可以多人共用的博客系统

在线预览

home

tags

manage

charts

左键拖拽， 双击删除， 单击选中， 改变样式（输入框enter）， 全屏

typewriting

customLayout

一个基于react-grid-layout和antd的栅格布局实现的自定义布局。

实现功能： 通过拖拽生成布局代码， 直接引到使用antd的项目中即可使用该拖拽生成的布局， 省去了自己慢慢配布局的麻烦

技术栈

react + antd + dva + node + koa + mongoose

麻雀虽小，五脏俱全

• 前台：主页 + 列表页 + 标签页 + 博客管理 + 写博客 + 草稿箱
• 后台：文章管理 + 用户管理
• 登录注册， 管理自己的个人博客，查看所有发布的博客
• Library: 一些有意思的东西， 已实现： canvas，画板， 自定义数据可视化大屏 ， 拖拽自定义布局

目录结构

.
│
├─config                // 构建配置
├─public                // html 入口
├─scripts               // 项目脚本
└─server                // 后端
    ├─config            // 项目配置 
    ├─db                // 连接数据库
    ├─middlewares       // 中间件
    ├─models            // 数据库模型
    ├─route            // 路由
    ├─  app.js          // 后端主入口文件
    └─...
│
└─src                   // 前端项目源码
   ├─assets             // 静态文件
   ├─components         // 公用组件
   ├─config             // 公共数据常量
   ├─models             // dva的models， 整合了state， reducer， redux-saga
   ├─route              // 路由
   ├─utils              // 工具包
   ├─views              // 视图层
   ├─  App.js           // 项目入口文件
   ├─  index.js         // 主入口文件，引入dva
   └─...

使用这个项目

git clone https://github.com/MasonEast/react-blog.git

## 安装依赖以及开启开发模式
cd blog-react
npm i 
npm start

## 启动node服务本地要先安装mongodb数据库，并启动
cd server
npm i 
node app

使用jenkins完成自动化打包， 部署

使用docker加快打包部署速度， 并确保一致性..