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給咱們，咱們定會在第一時間幫助您解決在使用中出現的問題... 感謝閱讀~