React快速入门 - Ant Design入门(3)

「爱情、让人受尽委屈。」 2023-10-12 14:15 47阅读 0赞

# 1.什么是Ant Design？ #

Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。  
[官网][Link 1]：https://ant.design/index-cn  
![在这里插入图片描述][142a54a4569c4293bcb847dd838a1485.png]

> 设计语言：  
> 随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目  
> 标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体  
> 系 Ant Design。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让  
> 设计者专注于更好的用户体验。

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

# 2. 使用介绍 #

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

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

## 1）简单案列 ##

接下来，我们开始使用antd的组件，以tabs组件为例，[地址][Link 2]：https://ant.design/components/tabs-cn/  
![在这里插入图片描述][a736602ad6314f669b771eb5c5e7cd06.png]  
看下官方给出的使用示例：

import {
         Tabs } from 'antd';
    const TabPane = Tabs.TabPane;
    function callback(key) {
        
    	console.log(key);
    }
    ReactDOM.render(
    	<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>,
    	mountNode);

下面我们参考官方给出的示例，进行使用：  
创建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;

![在这里插入图片描述][6dd926878a3049bead84ed88ad43df5d.png]  
到此，我们已经掌握了antd组件的基本使用

# 3.布局 #

[antd布局：][antd]https://ant.design/components/layout-cn/  
在后台系统页面布局中，往往是经典的三部分布局，像这样：  
![在这里插入图片描述][a704370be6db427cb16b426c21651e11.png]

## 1）组件 ##

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

## 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文件将被作为全局的布局文件。

config.js文件：

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

![在这里插入图片描述][d91b70b765dc428fbf3b2293e4d2f8a9.png]

## 3）子页面使用布局 ##

前面所定义的布局是全局布局，那么，在子页面中如何使用这个全局布局呢？  
首先，需要在布局文件中，将Content内容替换成\{this.props.children\}，意思是引入传递的内容。

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>{
        this.props.children}</Content>
    				<Footer>Footer</Footer>
    			</Layout>
    		</Layout>
    		);
    	}
    }
    export default BasicLayout;

接下来配置路由（注意，在布局路由下面进行配置）：

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

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

![在这里插入图片描述][cdc993eb87bb405fa4bfe93fac13d421.png]

## 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;

![在这里插入图片描述][53a58d68907642dab1be4cb3c8cd59b1.png]

## 5）引入导航条 ##

[使用Menu组件作为导航条][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'}}/>
    		<Menu
    		defaultSelectedKeys={
        ['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>
    		<Menu.Item key="2">
    		<Icon type="desktop"/>
    		<span>Option 2</span>
    		</Menu.Item>
    		<Menu.Item key="3">
    		<Icon type="inbox"/>
    		<span>Option 3</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>
    		<SubMenu key="sub2" title={
        <span><Icon type="appstore"/>
    		<span>Navigation Two</span></span>}>
    		<Menu.Item key="9">Option 9</Menu.Item>
    		<Menu.Item key="10">Option 10</Menu.Item>
    		<SubMenu key="sub3" title="Submenu">
    		<Menu.Item key="11">Option 11</Menu.Item>
    		<Menu.Item key="12">Option 12</Menu.Item>
    		</SubMenu>
    		</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;

![在这里插入图片描述][a33f886a905f44f1b4f71d66a3d69f33.png]

## 6）为导航添加链接 ##

下面，我们对左侧的导航条添加链接，点击相应的链接在右侧进行相应页面的显示。  
在src目录下创建user目录，并且在user目录下创建UserAdd.js和UserList.js文件，用于模拟实现新增用户和查询用  
户列表功能。  
![在这里插入图片描述][41d097e0eba8421eba2bf6552a7d3da7.png]  
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;

接下来，配置路由：

export default {
        
    	plugins: [
    	['umi-plugin-react', {
        
    	dva: true, // 开启dva功能
    	antd: true // 开启Ant Design功能
    	}]
    	],
    	routes: [{
        
    	path: '/',
    	component: '../layouts', //配置布局路由
    	routes: [
    	{
        
    	path: '/myTabs',
    	component: './myTabs'
    	},
    	{
        
    	path: '/user',
    	routes: [
    	{
        
    	path: '/user/list',
    	component: './user/UserList'
    	},
    	{
        
    	path: '/user/add',
    	component: './user/UserAdd'
    	}
    	]
    	}
    	]
    	}]
    };

为菜单添加链接：

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'}}/>
    			<Menu
    			defaultSelectedKeys={
        ['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/list">用户列表</Link>
    			</Menu.Item>
    			<Menu.Item key="2">
    			<Link to="/user/add">新增用户</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;

![在这里插入图片描述][f0326813c32b406295578eb54ff6deee.png]  
![在这里插入图片描述][225959271454457f8d6e602c11b85970.png]

# 4.表格 #

[参考官方文档进行实现][Link 3]：https://ant.design/components/table-cn/

改造UserList.js页面：

import React from 'react'
    import {
        Table, Divider, Tag, Pagination } from 'antd';
    const {
        Column} = Table;
    const data = [{
        
    	key: '1',
    	name: '张三',
    	age: 32,
    	address: '上海市',
    	tags: ['程序员', '帅气'],
    	}, {
        
    	key: '2',
    	name: '李四',
    	age: 42,
    	address: '北京市',
    	tags: ['屌丝'],
    	}, {
        
    	key: '3',
    	name: '王五',
    	age: 32,
    	address: '杭州市',
    	tags: ['高富帅', '富二代'],
    	}];
    	class UserList extends React.Component {
        
    		render() {
        
    		return (
    		<div>
    		<Table dataSource={
        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>
    		)}
    		/>
    		<Column
    		title="操作"
    		key="action"
    		render={
        (text, record) => (
    		<span>
    		<a href="javascript:;">编辑</a>
    		<Divider type="vertical"/>
    		<a href="javascript:;">删除</a>
    		</span>
    		)}
    		/>
    		</Table>
    		</div>
    		);
    	}
    }
    export default UserList;

![在这里插入图片描述][8afafff398224a63895cbb1c9f15dfcc.png]

## 1）将数据分离到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>
    	)}
    	/>
    	<Column
    	title="操作"
    	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],
    	maxNum: 4
    	});
    	},
    	'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: ['高富帅', '富二代'],
    	}]);
    	}
    }

![在这里插入图片描述][732380bdfc3f49f09d00e893d9e94fc0.png]

[Link 1]: https://ant.design/index-cn
[142a54a4569c4293bcb847dd838a1485.png]: https://img-blog.csdnimg.cn/142a54a4569c4293bcb847dd838a1485.png
[Link 2]: https://ant.design/components/tabs-cn/
[a736602ad6314f669b771eb5c5e7cd06.png]: https://img-blog.csdnimg.cn/a736602ad6314f669b771eb5c5e7cd06.png
[6dd926878a3049bead84ed88ad43df5d.png]: https://img-blog.csdnimg.cn/6dd926878a3049bead84ed88ad43df5d.png
[antd]: https://ant.design/components/layout-cn/
[a704370be6db427cb16b426c21651e11.png]: https://img-blog.csdnimg.cn/a704370be6db427cb16b426c21651e11.png
[d91b70b765dc428fbf3b2293e4d2f8a9.png]: https://img-blog.csdnimg.cn/d91b70b765dc428fbf3b2293e4d2f8a9.png
[cdc993eb87bb405fa4bfe93fac13d421.png]: https://img-blog.csdnimg.cn/cdc993eb87bb405fa4bfe93fac13d421.png
[53a58d68907642dab1be4cb3c8cd59b1.png]: https://img-blog.csdnimg.cn/53a58d68907642dab1be4cb3c8cd59b1.png
[Menu]: https://ant.design/components/menu-cn/
[a33f886a905f44f1b4f71d66a3d69f33.png]: https://img-blog.csdnimg.cn/a33f886a905f44f1b4f71d66a3d69f33.png
[41d097e0eba8421eba2bf6552a7d3da7.png]: https://img-blog.csdnimg.cn/41d097e0eba8421eba2bf6552a7d3da7.png
[f0326813c32b406295578eb54ff6deee.png]: https://img-blog.csdnimg.cn/f0326813c32b406295578eb54ff6deee.png
[225959271454457f8d6e602c11b85970.png]: https://img-blog.csdnimg.cn/225959271454457f8d6e602c11b85970.png
[Link 3]: https://ant.design/components/table-cn/
[8afafff398224a63895cbb1c9f15dfcc.png]: https://img-blog.csdnimg.cn/8afafff398224a63895cbb1c9f15dfcc.png
[732380bdfc3f49f09d00e893d9e94fc0.png]: https://img-blog.csdnimg.cn/732380bdfc3f49f09d00e893d9e94fc0.png