React Antd Admin screenshot

React Antd Admin

Author Avatar Theme by Jiangxy
Updated: 30 Apr 2024
1596 Stars

用React和Ant Design搭建的一个通用管理后台

Categories

Overview

React通用后台是一个旨在简化后端人员的前端开发的工具。它通过提供一个可配置的框架,快速搭建一个通用的后台界面,包含了常见的功能如用户登录、菜单导航、数据操作等。该工具采用React和Ant Design技术栈,并通过写配置文件的方式来生成界面,减少了重复工作和不可复用的代码。

Features

  • 快速搭建后台界面:通过提供可配置的框架,快速搭建通用的后台界面
  • 可定制的侧边栏:可以通过配置文件自定义侧边栏的内容和菜单项
  • 支持CRUD操作:提供一个通用的CRUD组件(DBTable),可以快速实现对数据库表的增删改查操作
  • 与后端无缝对接:定义了后端接口格式,可以直接与后端对接,还提供了一个Java工具用于自动生成后端接口

Installation

  1. 确保你的机器上安装了Node.js和npm
  2. 克隆项目到本地
  3. 在项目根目录下运行npm install安装必要的依赖
  4. 修改src/menu.js文件,根据自己的需求配置侧边栏和顶部菜单
  5. 修改src/index.js文件,根据菜单配置调整路由表
  6. 如果需要使用DBTable组件,参考src/schema目录下的例子编写自己的querySchema和dataSchema文件
  7. 修改src/config.js文件,根据需要修改相关配置,如项目名、footer、单点登录等
  8. 运行npm run prod编译js文件
  9. dist目录下的所有生成的js/css/html文件拷贝到你的工程中
  10. 启动你的web服务,访问index.html查看效果

Summary

React通用后台是一个旨在简化后端人员的前端开发的工具。它通过提供一个可配置的框架,快速搭建一个通用的后台界面,并提供了一些常见功能如用户登录、菜单导航、数据操作等。通过写配置文件的方式,可以减少重复工作和不可复用的代码。使用者只需关注自己的业务逻辑和配置文件,无需关心界面的生成和与后端的对接。然而,该工具对安全和权限方面尚未考虑,需要通过后端进行校验。它适合项目初期做原型,或者对后台要求不高的情况。