@abegalinov/backoffice-skeleton 中文文档教程

Question

Backoffice skeleton

简单的后台前端应用程序框架。

Getting Started

该框架基于react、redux和material-ui。 一种允许您构建管理界面并在从头开始时避免额外样板的框架。

它的灵感来自于 react-admin 和 admin-on-rest 框架。 然而，其动机是使其更具可定制性，并实际使用 React 和 Redux 构建应用程序，而不是配置一些东西来达到预期的结果。

它支持授权，导航菜单，基本上没有别的。

为了开始构建应用程序，您只需要将组件、redux reducer 和服务注入应用程序，从那时起您就可以专注于应用程序开发。 此外，它还支持服务注册中心，这是一种自排序的依赖注入机制，可以在其中注入服务以及覆盖现有服务。

Installing

只需简单地安装 npm 包就可以开始了：

npm install @abegalinov/backoffice-skeleton

Usage

import BackOfficeSkeleton from '@abegalinov/backoffice-skeleton';
import { AUTH_SERVICE } from '@abegalinov/services';

const app = new BackOfficeSkeleton();

app.addResource({ path: "/", component: YourComponent, icon: MaterialUIIconComponent, name: "Menu item", title: "Component title" });
app.getServiceRegistry().registerService(AUTH_SERVICE, new YourAuthService());
app.injectReducers({yourReducerNamespace: yourReducer});

const App = app.createComponent();

ReactDOM.render(<App />, document.getElementById('root'));

上面的简单设置使一个组件显示在导航菜单中，并将该组件安装在 / 路由上。 此外，它还注入了一个自定义授权服务，默认情况下是模拟的。 您可以查看模拟在 src/services/MockAuthService.js 中的工作原理，以了解概念以便编写真实的模拟。

同样在上面的示例中，它显示了如何将 reducer 注入到应用程序中，您可以为您的应用程序编写一个会影响存储状态的 reducer（实际上它是命名空间的一部分，因为 combineReducers() 是用过的）。

还有一件小事要提：在调度的动作（函数，因为 thunk 被使用）你可以访问 ServiceRegistry，它作为第三个参数传递给函数使用 dispatch，getState。

更新：添加了一小部分功能，以便在应用程序主实例之外的不同服务中使用授权令牌，您现在可以简单地调用：

const app = new BackOfficeSkeleton();
const getToken = app.getAuthTokenCallback();

// and then in order to make an authorized request call the callback to get the authorization token:

const authToken = getToken();

License

该项目已根据 MIT 许可证获得许可 - 请参阅 LICENSE< /a> 详细信息文件