Ant Design與Ant Design pro入門使用教程

更新時間：2023年12月15日 11:23:16 作者：童話世界€

Ant Design 是一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系,組件庫是它的 React 實現(xiàn),antd 被發(fā)布為一個 npm 包方便開發(fā)者安裝并使用,這篇文章主要介紹了Ant Design與Ant Design pro入門,需要的朋友可以參考下

一、Ant Design入門

1、什么是Ant Design？

Ant Design是阿里螞蟻金服團隊基于React開發(fā)的ui組件，主要用于中后臺系統(tǒng)的使用。
官網(wǎng)：https://ant.design/index-cn

特性：

提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。
開箱即用的高質(zhì)量 React 組件。
使用 TypeScript 構(gòu)建，提供完整的類型定義文件。
全鏈路開發(fā)和設(shè)計工具體系。

2、開始使用

2.1、引入Ant Desig

Ant Design 是一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系，組件庫是它的 React 實現(xiàn)，antd 被發(fā)布為一個 npm 包方便開發(fā)者安裝并使用。
在 umi 中，你可以通過在插件集 umi-plugin-react 中配置 antd 打開 antd 插件，antd 插件會幫你引入 antd 并實現(xiàn)按需編譯。
在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/
效果：

參考官方給出的示例，進行使用，創(chuàng)建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;

效果：

到此，我們已經(jīng)掌握了antd組件的基本使用。

3、布局

antd布局：https://ant.design/components/layout-cn/
在后臺系統(tǒng)頁面布局中，往往是經(jīng)典的三部分布局，像這樣：

下面，我們通過antd組件來完成這個布局。

3.1、組件概述

Layout：布局容器，其下可嵌套Header Sider Content Footer或Layout本身可以放在任何父容器中。
Header：頂部布局，自帶默認樣式，其下可嵌套任何元素，只能放在Layout本身中。
Sider：側(cè)邊欄，自帶默認樣式及基本功能，其下可嵌套任何元素，只能放在中。
Content ：內(nèi)容部分，自帶默認樣式，其下可嵌套任何元素，只能放在 Layout 中。
Footer：底部布局，自帶默認樣式，其下可嵌套任何元素，只能放在Layout 中。

3.2、搭建整體框架

在src目錄下創(chuàng)建layouts目錄，并且在layouts目錄下創(chuàng)建index.js文件，寫入內(nèi)容：

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中約定的目錄結(jié)構(gòu)中，layouts/index.js文件將被作為全局的布局文件。

效果:

可以看到，布局已經(jīng)生成。

3.3、子頁面使用布局

前面所定義的布局是全局布局，那么，在子頁面中如何使用這個全局布局呢？
首先，需要在布局文件中，將Content內(nèi)容替換成{this.props.children}，意思是引入傳遞的內(nèi)容。
接下來配置路由（注意，在布局路由下面進行配置）：

說明：下面的路由配置，是表明你需要通過手動配置的方式上進行訪問頁面，而不采用umi默認的路由方式。

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

效果:

可以看到，在MyTabs組件中已經(jīng)應(yīng)用了全局的布局。其他子頁面也就同理了。

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' }}>后臺系統(tǒng) ?2018 Created by 租房系統(tǒng)</Footer>
                </Layout>
            </Layout>
        );
    }
}
export default BasicLayout;

3.5、引入導(dǎo)航條

使用Menu組件作為導(dǎo)航條：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>
                        <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' }}>后臺系統(tǒng) ?2018 Created by 租房系統(tǒng)</Footer>
                </Layout>
            </Layout>
        );
    }
}
export default BasicLayout;

效果：

3.6、為導(dǎo)航添加鏈接

在src目錄下創(chuàng)建user目錄，并且在user目錄下創(chuàng)建UserAdd.js和UserList.js文件，用于模擬實現(xiàn)新增用戶和查詢用戶列表功能。
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'}}/>
                    <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/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' }}>后臺系統(tǒng) ?2018 Created by 租房系統(tǒng)</Footer>
                </Layout>
            </Layout>
        );
    }
}
export default BasicLayout;

注意：這里使用了umi的link標(biāo)簽，目的是出現(xiàn)記錄點擊的菜單。

效果：

4、表格

4.1、基本用法

參考官方文檔進行實現(xiàn)：https://ant.design/components/table-cn/

4.2、將數(shù)據(jù)分離到model中

model的實現(xiàn)：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 { //更新狀態(tài)值
                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="標(biāo)簽"
                            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:;" rel="external nofollow"  rel="external nofollow" >編輯</a>
                                <Divider type="vertical"/>
                                <a href="javascript:;" rel="external nofollow"  rel="external nofollow" >刪除</a>
                            </span>)}/>
                </Table>
            </div>);
    } }
export default UserList;

mock數(shù)據(jù)：MockListData.js

export default {
    'get /ds/list': function (req, res) { //模擬請求返回數(shù)據(jù)
        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: ['高富帥', '富二代'],
        }]);
    }
}

測試結(jié)果

二、Ant Design Pro入門

1、了解Ant Design Pro

Ant Design Pro 是基于Ant Design的一個開箱即用的，企業(yè)級中后臺前端/設(shè)計解決方案。效果：

源碼地址：https://github.com/ant-design/ant-design-pro
特性：

2、快速入門

2.1、部署安裝

下載地址：https://github.com/ant-design/ant-design-pro
我們使用資料中提供的，已經(jīng)下載好的文件：ant-design-pro-master.zip

第一步：將ant-design-pro-master.zip解壓到任意目錄，我的目錄是F:\code
第二步，導(dǎo)入項目到Idea中
第三步：進行初始化以及啟動：
tyarn install #安裝相關(guān)依賴
tyarn start #啟動服務(wù)

測試：

可以看到，系統(tǒng)已經(jīng)啟動完成。

2.2、菜單和路由

默認的菜單是不能直接投入到項目開發(fā)的，所以，我們需要搞清楚如何自定義菜單和路由。在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 監(jiān)控頁',
  'menu.new.workplace': 'New 工作臺',

效果：

發(fā)現(xiàn)，已經(jīng)正常顯示了。

2.3、新增頁面

上面我們添加了新的菜單，但是頁面依然使用的是模板中的頁面，那么如何新增頁面呢？所有的頁面依然是保存的src/pages中，在pages目錄下，以功能為單元創(chuàng)建目錄。
創(chuàng)建文件 NewAnalysis.js：

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

修改路由中的路徑：