Skip to content
基于 Ant Design React 的管理系统架构
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit 55bb5c9 Jun 2, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config config高阶组件,支持函数式组件调用 May 19, 2020
docs redux添加hooks和js环境下使用 May 29, 2020
nginx-conf 添加键盘事件 Apr 14, 2020
public 升级到 ant-design 4 Mar 30, 2020
scripts 🐳 代码生成工具,生成hooks形式代码 Jun 1, 2020
src 修改文案错误 Jun 2, 2020
.editorconfig 升级到 ant-design 4 Mar 30, 2020
.gitignore 升级到 ant-design 4 Mar 30, 2020
.nojekyll init Mar 30, 2020
README.md 📝 整理文档 Jun 1, 2020
package.json ajax May 26, 2020
yarn.lock hooks May 22, 2020

README.md

React Admin

基于ReactAnt Design的管理系统架构。让开发人员专注于业务,其他琐事,交给框架!

感谢开源社区,感谢Ant Design团队提供优秀的开源项目!

特性

  • 菜单配置:扁平化数据组织,方便编写、存库,页面菜单、标题、面包屑状态自动同步;
  • 页面配置:提供配置装饰器,页面功能配置化;
  • 系统路由:简化路由配置,一个变量搞定;
  • Ajax请求:restful规范,自动错误提示,提示可配置;自动打断未完成的请求;
  • Mock模拟数据:无需等待后端,自己提供数据,简化mock写法;
  • 样式&主题:Less简化css编写,CSS Module防冲突,用户可自定义主题颜色;
  • 导航布局:多种导航方式,一键切换;
  • Model(Redux):简化Redux写法,配置化同步LocalStorage;
  • 权限控制:菜单级别、功能级别权限控制;
  • 代码生成工具:CRUD基础一键生成,提高开发效率;
  • 内置组件:modal封装解决脏数据问题、可编辑表格、Form表单元素封装等等;
  • ......

系统提供了一些基础的页面:

  • 登录
  • 修改密码
  • 菜单编辑
  • 用户管理
  • 角色管理
  • ......

快速开始

Step 1:将此项目下载到本地

$ git clone https://github.com/sxfad/react-admin.git

Step 2:安装依赖

$ cd react-admin 
$ yarn 

注:如果由于网络原因,下载依赖比较慢,可以使用淘宝镜像:yarn --registry=https://registry.npm.taobao.org

Step 3:运行

$ yarn start

注:正常会自动打开浏览器,启动成功之后,如果浏览器白屏,手动刷新一下浏览器;

创建一个页面

Step 1:在src/pages目录下新建文件 MyTest.jsx,内容如下:

import React, {Component} from 'react';
import config from 'src/commons/config-hoc';
import PageContent from 'src/layouts/page-content';

@config({
    path: '/my-test'
})
export default class MyTest extends Component {
    state = {};

    componentDidMount() {

    }

    render() {
        return (
            <PageContent>
                我的第一个页面
            </PageContent>
        );
    }
}

函数式写法:

import React from 'react';
import config from 'src/commons/config-hoc';
import PageContent from 'src/layouts/page-content';

export default config({
    path: '/my-test',
})(() => {
    return (
        <PageContent>
            我的第一个页面
        </PageContent>
    );
});

浏览器访问 http://localhost:4000/my-test

此时tab页签应该是空的,配置菜单之后就能正常显示title了,或者在@config配置中添加title属性。

Step 2:添加菜单 在 src/menus.js文件中添加前端硬编码的菜单配置

export default function getMenus(userId) {
    return Promise.resolve([
        {key: 'my-key', text: '我的测试页面', icon: 'user', path: '/my-test'},

        {key: 'antDesign', text: 'Ant Design 官网', icon: 'ant-design', url: 'https://ant-design.gitee.io', target: '', order: 2000},
        {key: 'document', text: '文档', icon: 'book', url: 'http://shubin.wang/docs', target: '_blank', order: 1200},

    ]);
}

路由的配置、菜单的关联等等,系统会帮我们处理,新建一个文件,即创建了一个页面。更多丰富的功能请戳文档

文档地址

最新文档戳这里

项目预览

预览地址戳这里

注:用户名、密码随意输入

项目截图

这里只提供了部分页面截图,根据文档快速开始进行项目的搭建,浏览项目丰富功能!

登录 首页 用户 菜单&权限 角色管理 快速生成 单独生成 页面不存在

如果帮助到了您一点点,star 一下吧 🙂

License

React Admin is licensed under the Apache License

You can’t perform that action at this time.