基于 Ant Design React 的管理系统架构
基于React、Ant Design的管理系统架构。让开发人员专注于业务,其他琐事,交给框架!
感谢开源社区,感谢Ant Design团队提供优秀的开源项目!
如果帮助到了您一点点,star 一下吧 🙂
系统提供了一些基础的页面:
Step 1:将此项目下载到本地
bash $ git clone https://github.com/sxfad/react-admin.git
Step 2:安装依赖
bash $ cd react-admin $ yarn注:如果由于网络原因,下载依赖比较慢,可以使用淘宝镜像:
yarn --registry=https://registry.npm.taobao.org;
Step 3:运行
bash $ yarn start
Step 1:在
src/pages目录下新建文件
MyTest.jsx,内容如下: ```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 ( 我的第一个页面 ); }
}
函数式写法:jsx 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 ( 我的第一个页面 ); }); ```
浏览器访问
http://localhost:4000/my-test
此时tab页签应该是空的,配置菜单之后就能正常显示title了,或者在
@config配置中添加
title属性。
Step 2:添加菜单 在
src/menus.js文件中添加前端硬编码的菜单配置 ```javascript 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: 'https://sxfad.github.io/react-admin/#/', target: '_blank', order: 1200},]);
} ```
路由的配置、菜单的关联等等,系统会帮我们处理,新建一个文件,即创建了一个页面。更多丰富的功能请戳文档
最新文档戳这里
预览地址戳这里
注:用户名、密码随意输入
这里只提供了部分页面截图,根据文档快速开始进行项目的搭建,浏览项目丰富功能!
如果帮助到了您一点点,star 一下吧 🙂
React Admin is licensed under the Apache License