Ant Design与Ant Design pro入门

一、Ant Design入门

1、什么是Ant Design？
Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。
官网：https://ant.design/index-cn

特性：

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 React 组件。
使用 TypeScript 构建，提供完整的类型定义文件。
全链路开发和设计工具体系。

2、开始使用
2.1、引入Ant Desig
Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。
在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。
在conﬁg.js文件中进行配置：

export default {plugins: [['umi-plugin-react', {dva: true, // 开启dva功能antd: true // 开启Ant Design功能}]]
};

2.2、小试牛刀
接下来，我们开始使用antd的组件，以tabs组件为例，地址：https://ant.design/components/tabs-cn/
效果：

参考官方给出的示例，进行使用，创建MyTabs.js文件：

import React from 'react'
import {Tabs} from 'antd'const TabPane = Tabs.TabPane;
const callback = (key) => { console.log(key);
}class MyTabs extends React.Component {render() {return (<Tabs defaultActiveKey="1" onChange={callback}><TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane><TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane><TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane></Tabs>)}
}
export default MyTabs;

效果：

到此，我们已经掌握了antd组件的基本使用。

3、布局
antd布局：https://ant.design/components/layout-cn/
在后台系统页面布局中，往往是经典的三部分布局，像这样：

下面，我们通过antd组件来完成这个布局。
3.1、组件概述

Layout：布局容器，其下可嵌套Header Sider Content Footer或Layout本身可以放在任何父容器中。
Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout本身中。
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在中。
Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout 中。

3.2、搭建整体框架
在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：

import React from 'react'
import { Layout } from 'antd';const { Header, Footer, Sider, Content } = Layout;class BasicLayout extends React.Component{render(){return (<Layout><Sider>Sider</Sider><Layout><Header>Header</Header><Content>Content</Content><Footer>Footer</Footer></Layout></Layout>);}
}
export default BasicLayout;

需要特别说明的是，在umi中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件。

效果:
可以看到，布局已经生成。

3.3、子页面使用布局
前面所定义的布局是全局布局，那么，在子页面中如何使用这个全局布局呢？
首先，需要在布局文件中，将Content内容替换成{this.props.children}，意思是引入传递的内容。
接下来配置路由（注意，在布局路由下面进行配置）：

说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不采用umi默认的路由方式。

export default {plugins: [['umi-plugin-react', {dva: true ,// 开启dva功能antd: true // 开启Ant Design功能}]],routes: [{path: '/',component: '../layouts', //配置布局路由routes: [    //在这里进行配置子页面{path: '/myTabs',component: './myTabs'}]}]
};

效果:

可以看到，在MyTabs组件中已经应用了全局的布局。其他子页面也就同理了。

3.4、美化页面
接下来，对页面做一些美化的工作：

import React from 'react'
import { Layout } from 'antd';const { Header, Footer, Sider, Content } = Layout;class BasicLayout extends React.Component{render(){return (<Layout><Sider width={256} style={{ minHeight: '100vh', color: 'white' }}> Sider</Sider><Layout><Header style={{ background: '#fff', textAlign: 'center', padding:0 }}>Header</Header><Content style={{ margin: '24px 16px 0' }}><div style={{ padding: 24, background: '#fff', minHeight: 360}}>{this.props.children}</div></Content><Footer style={{ textAlign: 'center' }}>后台系统 ©2018 Created by 租房系统</Footer></Layout></Layout>);}
}
export default BasicLayout;

3.5、引入导航条
使用Menu组件作为导航条：https://ant.design/components/menu-cn/

import React from 'react'
import {Layout, Menu, Icon} from 'antd';const { Header, Footer, Sider, Content } = Layout;
const SubMenu = Menu.SubMenu;class BasicLayout extends React.Component{constructor(props){super(props);this.state = {collapsed: false,}}render(){return (<Layout><Sider width={256} style={{minHeight: '100vh', color: 'white'}}><div style={{ height: '32px', background: 'rgba(255,255,255,.2)',margin: '16px'}}/><MenudefaultSelectedKeys={['2']} defaultOpenKeys={['sub1']} mode="inline"theme="dark" inlineCollapsed={this.state.collapsed}><Menu.Item key="1"><Icon type="pie-chart"/><span>Option 1</span></Menu.Item><SubMenu key="sub1" title={<span><Icon type="mail"/><span>Navigation One</span></span>}><Menu.Item key="5">Option 5</Menu.Item><Menu.Item key="6">Option 6</Menu.Item><Menu.Item key="7">Option 7</Menu.Item><Menu.Item key="8">Option 8</Menu.Item></SubMenu></Menu></Sider><Layout><Header style={{ background: '#fff', textAlign: 'center', padding:0 }}>Header</Header><Content style={{ margin: '24px 16px 0' }}><div style={{ padding: 24, background: '#fff', minHeight: 360}}>{this.props.children}</div></Content><Footer style={{ textAlign: 'center' }}>后台系统 ©2018 Created by 租房系统</Footer></Layout></Layout>);}
}
export default BasicLayout;

效果：

3.6、为导航添加链接
在src目录下创建user目录，并且在user目录下创建UserAdd.js和UserList.js文件，用于模拟实现新增用户和查询用户列表功能。
UserAdd.js：

import React from 'react'class UserAdd extends React.Component{render(){return (<div>新增用户</div>);}
}
export default UserAdd;

UserList.js

import React from 'react'class UserList extends React.Component{render(){return (<div>用户列表</div>);}
}
export default UserList;

为菜单添加链接，在layouts中index.js中：

import React from 'react'
import {Layout, Menu, Icon} from 'antd';
import Link from 'umi/link';const { Header, Footer, Sider, Content } = Layout;
const SubMenu = Menu.SubMenu;class BasicLayout extends React.Component{constructor(props){super(props);this.state = {collapsed: false,}}render(){return (<Layout><Sider width={256} style={{minHeight: '100vh', color: 'white'}}><div style={{ height: '32px', background: 'rgba(255,255,255,.2)', margin: '16px'}}/><MenudefaultSelectedKeys={['1']}defaultOpenKeys={['sub1']}mode="inline"theme="dark"inlineCollapsed={this.state.collapsed}><SubMenu key="sub1" title={<span><Icon type="user"/><span>用户管理</span></span>}><Menu.Item key="1"><Link to="/user/UserAdd">新增用户</Link></Menu.Item><Menu.Item key="2"><Link to="/user/UserList">用户列表</Link></Menu.Item></SubMenu></Menu></Sider><Layout><Header style={{ background: '#fff', textAlign: 'center', padding:0 }}>Header</Header><Content style={{ margin: '24px 16px 0' }}><div style={{ padding: 24, background: '#fff', minHeight: 360}}>{this.props.children}</div></Content><Footer style={{ textAlign: 'center' }}>后台系统 ©2018 Created by 租房系统</Footer></Layout></Layout>);}
}
export default BasicLayout;

注意：这里使用了umi的link标签，目的是出现记录点击的菜单。

效果：
4、表格
4.1、基本用法
参考官方文档进行实现：https://ant.design/components/table-cn/

4.2、将数据分离到model中
model的实现：UserListData.js

import request from "../util/request";export default { namespace: 'userList', state: {list: []},effects: {*initData(params, sagaEffects) { const {call, put} = sagaEffects; const url = "/ds/user/list";let data = yield call(request, url); yield put({type : "queryList", data : data});}},reducers: {queryList(state, result) {let data = [...result.data]; return { //更新状态值list: data}}}}

修改UserList.js中的逻辑：

import React from 'react'
import { connect } from 'dva';
import {Table, Divider, Tag, Pagination } from 'antd';const {Column} = Table;
const namespace = 'userList';@connect((state)=>{ return {data : state[namespace].list
}
}, (dispatch) => { return {initData : () => { dispatch({type: namespace + "/initData"});}
}
})
class UserList extends React.Component{componentDidMount(){this.props.initData();}render() {return (<div><Table dataSource={this.props.data} pagination={{position: "bottom", total: 500, pageSize: 10, defaultCurrent: 3}}><Column title="姓名" dataIndex="name" key="name"/><Column title="年龄" dataIndex="age" key="age"/><Column title="地址" dataIndex="address" key="address"/><Column title="标签"dataIndex="tags"key="tags"render={tags => (<span>{tags.map(tag => <Tag color="blue" key={tag}>{tag} </Tag>)}</span>)}/><Columntitle="操作"key="action"render={(text, record) => (<span><a href="javascript:;">编辑</a><Divider type="vertical"/><a href="javascript:;">删除</a></span>)}/></Table></div>);} }
export default UserList;

mock数据：MockListData.js

export default {'get /ds/list': function (req, res) { //模拟请求返回数据res.json({data: [1, 2, 3, 4,5,6],maxNum: 6});},'get /ds/user/list': function (req, res) {res.json([{key: '1',name: ' 张 三 1',age: 32,address: '上海市',tags: ['程序员', '帅气'],}, {key: '2',name: ' 李 四 ',age: 42,address: '北京市',tags: ['屌丝'],}, {key: '3',name: '王五',age: 32,address: '杭州市',tags: ['高富帅', '富二代'],}]);}
}

测试结果

二、Ant Design Pro入门

1、了解Ant Design Pro
Ant Design Pro 是基于Ant Design的一个开箱即用的，企业级中后台前端/设计解决方案。效果：

源码地址：https://github.com/ant-design/ant-design-pro
特性：
2、快速入门
2.1、部署安装
下载地址：https://github.com/ant-design/ant-design-pro
我们使用资料中提供的，已经下载好的文件：ant-design-pro-master.zip

第一步：将ant-design-pro-master.zip解压到任意目录，我的目录是F:\code
第二步，导入项目到Idea中
第三步：进行初始化以及启动：
tyarn install #安装相关依赖
tyarn start #启动服务

测试：

可以看到，系统已经启动完成。

2.2、菜单和路由
默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路由。在pro中，菜单和路由，在router.conﬁg.js配置文件中进行管理：
打开router.conﬁg.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/

接下来进行实验，新增一个路由：

 // new --start{path: '/new',name: 'new',icon: 'user', routes: [{path: '/new/analysis', name: 'analysis',component: './Dashboard/Analysis',},{path: '/new/monitor', name: 'monitor',component: './Dashboard/Monitor',},{path: '/new/workplace', name: 'workplace',component: './Dashboard/Workplace',},],},

效果：

在这里可以修改文字：
新增配置如下：

  'menu.new': '新加的栏','menu.new.analysis': 'New 分析页','menu.new.monitor': 'New 监控页','menu.new.workplace': 'New 工作台',

效果：

发现，已经正常显示了。

2.3、新增页面
上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？所有的页面依然是保存的src/pages中，在pages目录下，以功能为单元创建目录。
创建文件 NewAnalysis.js：

import React from 'react';class NewAnalysis extends React.Component {render() {return (<div>NewAnalysis</div>);}}export default NewAnalysis;

修改路由中的路径：

效果：

2.4、pro中的model执行流程

在pro系统中，model是如何执行的，下面我们以表格为例，探究下在Pro中的执行流程。

进入TableList.js代码进行查看：
生成表格的主要逻辑在这里：

在StandardTable中，使用Table组件生成表格，其中数据源是data：

TableList.js中，data数据从构造方法中获取到：

this.props中的rule数据，是通过@connect()修饰器获取：需要注意的是：{ rule, loading }是解构表达式，从props中获取数据

数据从model中获取，在models下的rule.js中：

在TableList.js中，组件加载完成后进行加载数据:

在rule.js中，进行加载数据：

queryRule是在/services/api中进行了定义：

数据的mock是在mock/rule.js中完成。

这就是整个数据的加载、更新流程，至此，Ant Design与Ant Design pro入门结束。