React+antd+Redux+Express+MongoDB实现通用后台管理系统

关注

原创最新推荐文章于 2026-09-22 12:50:23 发布 865 阅读 AI 写同款· GEO 优化 ›

react+redux+antd+echarts+nodejs+mongodb项目搭建脚手架以create-react-app为基准，加上redux和sass(因为我一直用的less,这次换个口味),搭建一个简单的项目。安装依赖首先安装create-react-app npm i create-react-app 给项目起个名字 create-react-app my_react_cli(项目名) 啪嗒回车，开始安装项目，此过程会持续几分钟，可以去干点别的~ 运行一下看... 阅读详情

源码
 在线地址

你能学到

React全家桶
封装axios
前端鉴权
前端权限控制
Express基本使用
MongoDB增删改查
MongoDB查询优化
部署到阿里云
升级成HTTPS

技术栈

前端: 使用 React 全家桶 + Antd + Axios + ES6 + Webpack 等技术
后端: 使用 Node + Express + Mongodb 等技术

项目运行之前，请确保系统已经安装以下应用

node (6.0 及以上版本)
mongodb (开启状态) 安装参考
全局安装nodemon(为了node服务热启动)

yarn global add nodemon

可以参考这里安装

运行启动

# 克隆到本地
1. git clone 

# 进入后台应用目录
2. cd react-manage/server

# 安装后台应用依赖
3. yarn install 

# 启动后台应用
4. yarn start  

# 进人前端应用目录
5. cd react-manage/client

# 安装前端应用依赖
6. yarn install

# 启动前端应用
7. yarn start

# 启动浏览器
8. 访问: http://localhost:3000

应用基本结构

client/src

文件目录	含义
api	ajax相关
assets	公用资源
components	公共组件（非路由组件）
pages	路由组件
config	配置文件
utils	工具模块
App.js	应用根模块
index.js	应用入口

server/src

文件目录	含义
config	配置参数
db	数据库连接
logs	日志文件
modals	数据库表结构
public	可以放前端静态资源
router	路由
server.js	应用入口

功能

首页
- 登陆
  - node实现基于token的身份验证
- 登出
- 保持登录
商品
- 品类管理
  - 添加
  - 修改分类
  - 子分类
- 商品管理
  - 搜索商品
  - 添加商品
  - 上架/下架
  - 修改/详情
- 用户管理
  - 添加/删除
- 角色管理
  - 权限控制
- 订单管理
  - 进、入
- 数据可视化
  - 柱形、折线、饼图等
- GitHub
  - 其它项目展示