使用react-amanda快速搭建管理类型的系统

管理类型的系统是开发者经常会遇到的，例如电商平台的后台管理系统、博客的发布系统、ERP、OA、MES、等等，这些系统在技术开发和用户体验上都是基本一致的。

使用 react-amanda/admin 能快速搭建此类系统的基础架构，并且使用Ta有以下优势（或者说好处）：

• 只需简单的配置即可拥有一个基本的UI布局和基础架构。
• 开箱即用，使用起来非常简单。开发人员只需编写自己的页面组件和业务逻辑，其它的基础性的东西 react-amanda/admin 已经帮你完成了。
• 能极大地减少开发人员的工作量。我厂曾经有一个小项目，预期是5个月完工，在使用了 react-amanda/admin 之后，只用了三个月多一点就完工了。
• 近乎极致的性能优化。因为是在架构层做的优化，所以即便你自己编写的页面组件中有一些性能方面的坑，对整个系统的影响也是不大的。

接下来演示一下使用 react-amanda/admin 是多么地简单。

第1步，当然是创建项目啦 ^_~

npx create-react-app APP_NAME
1

第2步，安装 react-amanda

npm install react-amanda
1

第3步，将 /src/index.js 修改成以下这个样子：

import React from 'react';
import ReactDOM from 'react-dom/client';

import Admin from 'react-amanda/admin';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Admin config={{
        checkAuth: (callbackFun) => {
        	callbackFun(true);
    	},
    	mainNavs: [
    		{
        		title: '首页',
        		url: 'Index',
        		icon: React.lazy(() => import('@mui/icons-material/Stars'))
    		},
    		{
        		title: '用户',
        		url: 'Users',
        		icon: React.lazy(() => import('@mui/icons-material/Anchor'))
    		}
   		]
    }}/>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

以上示例做了两项配置，

其中，checkAuth 是用来检测用户是否处于登录状态的。通常，一个管理类型的系统是需要登录后才可访问的。你需要在这里写你自己的检测代码。如果你的系统不需要登录就可访问，那么像上面的示例一样直接 callbackFun(true) 就可以了。

有意思的是，你甚至可以连登录页都不用写，因为 react-amanda/admin 有一个默认的登录页。

另一个配置 mainNavs 是在配置主导航菜单。可以为菜单配置图标。上面的示例中，为菜单配置了 material 图标。但你可能已经注意到了，我并没有在项目中安装 material ，这是因为 react-amanda/admin 已经默认包含了 material UI —— 目前世界上最优秀、最受欢迎的 UI 库之一。

现在，运行项目后你将看到类似以下的界面：

看，我没有做任何布局，就有了一个基本的布局。

但页面中显示了 “没有找到 Index” 的提示。这是因为我还没有添加任何页面。

所有的页面都应该放在 /src/pages 目录下。

在上面的示例中，主导航菜单中有两个项，分别是“首页”和“用户”。配置中的 url 是它的访问路径，同时也是它对应的页面的文件名。因此，需要创建以下两个文件：

/src/pages/Index.js

const Index = () => {
    return <div>This is Index</div>
};

export default Index;
1
2
3
4
5

/src/pages/Users.js

const Users = () => {
    return <div>This is Users</div>
};

export default Users;
1
2
3
4
5

看，我们只需专注于写页面组件和业务逻辑，其它的都由 react-amanda/admin 为我们处理了。

react-amanda/admin 规范了用户体验，可以让开发者不用过多地考虑用户体验的部分。在 react-amanda/admin 中，页面有多种打开方式，可以在主选项卡中打开，也可以在右侧打开，还可以以弹窗的形式打开。通常来说，在一个主页面中进行操作需要打开的页面，应该在右侧或弹窗打开，这样可以避免用户来回地切换页面，以给用户一个良好的体验。

更多文档可参考：https://amanda.code-push.cn/