react+react-router+mobx+element打造管理後台系統

react-admin-element，一款基於react的後台管理系統。

那麼我們和其他的後台管理系統有什麼區別呢？

• demo地址：點我進入demo演示
• github地址：點我進入github

1. cli工具

為了方便下載使用，我們提供了cli工具

npm install create-react-admin-cli -g
create-react-admin

這裡我們會為您提供兩種版本

1. react-admin-demo

這個版本里是我們推薦里版本，裡面包括了我們為您提供的一些封裝好的簡單功能，以及一些常用的插件

2. react-admin-simple

這個版本主要是為了幫助一些只想要基礎功能，卻對代碼無從下手清除的情況下產生的。 此版本里只擁有路由，麵包屑，登錄，404功能，其餘的多餘代碼我們已經幫您剔除掉了...

2. 精簡的路由配置

不知道大家有沒有在使用react-router時候發現，雖然同樣是router，可是在使用起來的時候實在是沒有vue-router在編寫router文件時方便，於是我們做了一層簡單的封裝，讓您能夠像使用vue-router一樣使用react-router

import Home from "@/containers/Home";
const router = [
{
name: "首頁",
path: "/",
component: Home,
type: "admin-icon-liebiao"
}
]
export default router

當您是二級or多級路由時只需要增加children即可

import Part from "@/containers/Part";
import Part1 from "@/containers/Part1";
const router = [
{
name: "多級菜單",
path: "/part",
component: Part,
children:
[
{
name: "多級菜單1",
path: "/part1",
component: Part1,
}
]
}
]
export default router

裡面還有一些常用的配置

* @param {boolean} [hideChildren] - 左側菜單該條目下所有均不顯示
* @param {boolean} [hideInMenu] - 左側菜單中單條不顯示
* @param {boolean} [single] - 是否不使用公共組件

hideChildren - 當設置為true時，該菜單下的所有children都不會在左側菜單欄顯示
hideInMenu - 當設置為true時，僅該菜單條目不會在左側菜單欄顯示
single - 當設置為true時，左側菜單和頂部都會隱去，一般我們用於登錄頁，500等頁面

404頁面需要單獨處理，您只需在項目目錄contaniners中的NotFound中編寫您的404頁面即可

3. 狀態管理

在狀態管理中，我們沒有使用「名氣」更大的react-redux，而是使用了更加輕便，更易上手的mobx

在store中創建demo.js

import {
observable,
computed
} from "mobx";
class Router {
@observable txt = 1;
}
export default new Router()
複製代碼

在任意jsx文件中引用

@inject("demo")
@observer
class DemoPage extends Component {
constructor(props) {
super(props);
}
componentDidUpdate() {
console.log(this.props.demo.txt)
}
}
export default(DemoPage)

更加詳細的使用方法這裡就不細講了...

當然，因為是第一版，裡面也不乏有缺點與不足，如果您在使用中發現任何影響您的開發或給您帶來不便體驗的地方，請您提交issues給我們，我們定會在第一時間幫助您解決在使用中出現的問題... 感謝閱讀~

作者：bling_bling

原文：https://www.cnblogs.com/bbbiu/p/10237419.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！