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给我们,我们定会在第一时间帮助您解决在使用中出现的问题... 感谢阅读~
react+react-router+mobx+element打造管理后台系统---react-amdin-element的更多相关文章
- 《暗黑世界GM管理后台系统》部署+功能说明文档
http://www.9miao.com/product-10-1073.html <暗黑世界GM管理后台系统>部署+功能说明文档 <暗黑世界GM管理后台系统>部署+功能说明文 ...
- 《暗黑世界GM管理后台系统》部署+功能说明
原地址:http://blog.csdn.net/uxqclm/article/details/11969761 欢迎来到9秒:www.9miao.com 暗黑三国管理后台说明文档 (一)功能描述该后 ...
- 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)
背景 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
- [Web 前端] mobx教程(三)-在React中使用Mobx
copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...
- React Native中Mobx的使用
从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思 ...
- 使用Redux管理你的React应用
因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...
- Redux管理你的React应用
使用Redux管理你的React应用 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...
- Nginx支持 React browser router
修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...
随机推荐
- Oracle TIMESTAMP的处理
public class Test { private static final SimpleDateFormat FORMAT = new SimpleDateFormat("yyyy-M ...
- uvalive 6669 hidden tree(好壮压dp)
题目见option=com_onlinejudge&Itemid=8&page=show_problem&problem=4681">here 题意:给一个序列 ...
- Java编程手冊-Collection框架(下)
建议先看Java编程手冊-Collection框架(上) 5. Set<E>接口与实现 Set<E>接口表示一个数学的集合,它不同意元素的反复,仅仅能包括一个null元素. ...
- IDEA创建maven项目之后无法编写java类
在创建Maven web项目之后无法再java文件夹下面创建java类,这里我可以教一下大家 选择你的文件夹,鼠标点击右键,出现下图所显示的,你可以按照下图所显示的步骤进行操作
- Activity的launchMode和任务栈小结
对Activity的launchMode的理解一直没有好好总结下,这两天系统总结下launchMode的使用方法: Activity的launchMode属性决定了Activity和应用程序当前任务栈 ...
- POJ 3256 DFS水题
枚举点 每次都搜一遍 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...
- url传递中文的解决方案总结
File文件控件,选中文件(图片,flash,视频)即立即预览显示 .Net刷新页面的几种方式 Attributes.Add用途与用法(C#) url传递中文的解决方案总结 byte[] bytes ...
- Linux 桌面玩家指南:18. 我对 Docker 的使用的学习心得
原文:Linux 桌面玩家指南:18. 我对 Docker 的使用的学习心得 特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记 ...
- AngularJS实现cookie跨域
前后端分离被越来越多的公司重视利用.然后带来的最棘手的问题就是.用户信息应怎样保存. 一.场景描写叙述 以Java为后台,AngluarJS做前端为例进行描写叙述:当用户在界面登录时.需把用户信息(如 ...
- NYOJ 203 三国志(Dijkstra+贪心)
三国志 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描写叙述 <三国志>是一款非常经典的经营策略类游戏.我们的小白同学是这款游戏的忠实玩家.如今他把游戏简化一下 ...