react+react-router+mobx+element打造管理后台系統---react-amdin-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給我們，我們定會在第一時間幫助您解決在使用中出現的問題... 感謝閱讀~