基于umi搭建React快速开发框架 01
2018-09-06 15:50
2026 查看
介绍
基于umi搭建一个快速开发框架,react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。我们会在基于umi的基础上,开发出一个框架通用功能和业务功能
框架功能列表
全局layout
权限管理
封装列表增删改查
国际化
集成 g2 chart图表
集成 socket.io
....(后续补充)
业务功能
用户管理
....(后续补充)
创建项目
umi 提供了脚手架供我们快速创建项目。参考umi脚手架创建项目包管理器我们推荐用yarn来替换npm,yarn在包安装速度上确实提升不少
1.在你的空目录下执行,
yarn create umi 我们需要选择 antd,code splitting, dll, hard source
2.安装依赖
yarn
3.启动本地开发
yarn start
构建全局layout和菜单
umi规定src/layouts目录下存放我们全局layout组件, 在index.js中加入代码如下
class BaseLayout extends React.Component { state = { collapsed: false, }; onCollapse = (collapsed) => { console.log(collapsed); this.setState({ collapsed }); } render() { return ( <Layout style={{ minHeight: '100vh' }}> <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} > <div className={styles.logo} /> <MenuComponent /> </Sider> <Layout> <Header style={{ background: '#fff', padding: 0 }} /> <Content style={{ margin: '0 16px' }}> <Breadcrumb style={{ margin: '16px 0' }}> <Breadcrumb.Item>User</Breadcrumb.Item> <Breadcrumb.Item>Bill</Breadcrumb.Item> </Breadcrumb> <div style={{ padding: 24, background: '#fff', minHeight: 360 }}> {this.props.children} </div> </Content> <Footer style={{ textAlign: 'center' }}> Ant Design ©2018 Created by Ant UED </Footer> </Layout> </Layout> ); } } export default BaseLayout;
layout 组件需要
MenuComponent,
在构建组件之前我们需要先mock菜单数据,umi支持mock,我们在mock文件下添加 auth.js
const menu = [ { id: 1, name: '概览', icon: 'dashboard', url: '/dashboard', }, { id: 2, name: '系统管理', icon: 'setting', url: '/system', children: [ { id: 21, name: '用户管理', icon: 'user', url: '/system/user', } ] }, ];
menu数据是树形结构,在项目当中,可以构造放到前台,也可以让后台小伙伴们返回。比较灵活,我们基于数据去做渲染就行。
还有一个很重要的概念,umi也集成了dva,我们的
src/models路径下添加auth.js的如下。
import { getMenu } from '../services/auth'; export default { namespace: 'auth', state: { menu: [] }, effects: { *getMenu(_, { put, select, call }) { const menu = yield call(getMenu); yield put({ type: 'setMenu', payload: menu, }); }, }, reducers: { setMenu(state, { payload }) { return { ...state, menu: payload, }; }, }, };
基础工作已经完成。就可以来构建MenuComponent组件。
@connect(({auth}) => { return { menu: auth.menu, } }) class MenuComponent extends React.Component { componentDidMount() { // 获取 menu 数据 this.props.dispatch({ type: 'auth/getMenu', }) } link = (url) => { router.push(url); } renderMenu = (data) => { return data && data.map(d => { if (d.children && d.children.length > 0) { return <SubMenu key={d.id} title={<span><Icon type={d.icon} /><span>{d.name}</span></span>} > {this.renderMenu(d.children)} </SubMenu> } return ( <Menu.Item key={d.id} onClick={() => {this.link(d.url)}} > <Icon type={d.icon} /> <span>{d.name}</span> </Menu.Item> ) }); } render() { const { menu } = this.props; return ( <Menu theme='dark' defaultSelectedKeys={['1']} mode='inline'> { this.renderMenu(menu) } </Menu> ); } } export default MenuComponent;
总的来说,menu组件会访问会调用saga effect,发出异步请求获取数据,然后通过dva connect获取menu数据做渲染。
我们刷新浏览器看到菜单已经正确渲染了。
结束语
这是开始的第一步,也欢迎大家监督,接下来会逐步把上面提到的功能完善起来。代码已放到github上,大家可以自行查看umi-react。我建了一个QQ群,大家加进来,可以一起交流。群号 787846148
对上面有些内容不理解的同学参考如下内容
umi 官网
dva 官网
相关文章推荐
- 基于springmvc+mybatis搭建的J2EE快速开发框架
- 基于 Jenkins 快速搭建自动化部署框架
- 基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式
- 基于多框架的J2EE快速开发方法
- 基于MINA框架快速开发网络应用程序
- 在myEclipse上快速开发基于Axis框架的webservice服务
- [置顶] 基于.NET的快速信息化系统开发框架 — RDIFramework.NET — 系统目录
- 搭建一个C#开源快速开发框架(fastCSharp)
- 基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)
- 快速开发轻量级App 基于地理位置定位(LBS)React Native+Node.js
- 基于express框架快速搭建web项目
- 使用yeoman快速搭建react-webpack开发环境
- 基于MINA框架快速开发网络应用程序
- 基于MINA框架快速开发网络应用程序
- 基于MINA 框架快速开发网络应用程序
- android 快速开发框架,基于组件化的MVP结构
- JEECG - 基于代码生成器的J2EE智能开发框架 续一:开发环境搭建步骤
- 基于libuv封装的快速开发框架