Ant Design與Ant Design pro入門(mén)使用教程
一、Ant Design入門(mén)
1、什么是Ant Design？
Ant Design是阿里螞蟻金服團(tuán)隊(duì)基于React開(kāi)發(fā)的ui組件，主要用于中后臺(tái)系統(tǒng)的使用。
官網(wǎng)：https://ant.design/index-cn
特性：
- 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。
- 開(kāi)箱即用的高質(zhì)量 React 組件。
- 使用 TypeScript 構(gòu)建，提供完整的類(lèi)型定義文件。
- 全鏈路開(kāi)發(fā)和設(shè)計(jì)工具體系。
2、開(kāi)始使用
2.1、引入Ant Desig
Ant Design 是一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系，組件庫(kù)是它的 React 實(shí)現(xiàn)，antd 被發(fā)布為一個(gè) npm 包方便開(kāi)發(fā)者安裝并使用。
在 umi 中，你可以通過(guò)在插件集 umi-plugin-react 中配置 antd 打開(kāi) antd 插件，antd 插件會(huì)幫你引入 antd 并實(shí)現(xiàn)按需編譯。
在con?g.js文件中進(jìn)行配置：
export default {
plugins: [
['umi-plugin-react', {
dva: true, // 開(kāi)啟dva功能
antd: true // 開(kāi)啟Ant Design功能
}]
]
};2.2、小試牛刀
接下來(lái)，我們開(kāi)始使用antd的組件，以tabs組件為例，地址：https://ant.design/components/tabs-cn/
效果：
參考官方給出的示例，進(jìn)行使用，創(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ái)系統(tǒng)頁(yè)面布局中，往往是經(jīng)典的三部分布局，像這樣：
下面，我們通過(guò)antd組件來(lái)完成這個(gè)布局。
3.1、組件概述
- Layout：布局容器，其下可嵌套Header Sider Content Footer或Layout本身可以放在任何父容器中。
- Header：頂部布局，自帶默認(rèn)樣式，其下可嵌套任何元素，只能放在Layout本身中。
- Sider：側(cè)邊欄，自帶默認(rèn)樣式及基本功能，其下可嵌套任何元素，只能放在 中。
- Content ：內(nèi)容部分，自帶默認(rèn)樣式，其下可嵌套任何元素，只能放在 Layout 中。
- Footer：底部布局，自帶默認(rèn)樣式，其下可嵌套任何元素，只能放在Layout 中。
3.2、搭建整體框架
在src目錄下創(chuàng)建layouts目錄，并且在layouts目錄下創(chuàng)建index.js文件，寫(xiě)入內(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;需要特別說(shuō)明的是，在umi中約定的目錄結(jié)構(gòu)中，layouts/index.js文件將被作為全局的布局文件。
效果:
可以看到，布局已經(jīng)生成。
3.3、子頁(yè)面使用布局
前面所定義的布局是全局布局，那么，在子頁(yè)面中如何使用這個(gè)全局布局呢？
首先，需要在布局文件中，將Content內(nèi)容替換成{this.props.children}，意思是引入傳遞的內(nèi)容。
接下來(lái)配置路由（注意，在布局路由下面進(jìn)行配置）：
說(shuō)明：下面的路由配置，是表明你需要通過(guò)手動(dòng)配置的方式上進(jìn)行訪問(wèn)頁(yè)面，而不采用umi默認(rèn)的路由方式。
export default {
plugins: [
['umi-plugin-react', {
dva: true ,// 開(kāi)啟dva功能
antd: true // 開(kāi)啟Ant Design功能
}]
],
routes: [{
path: '/',
component: '../layouts', //配置布局路由
routes: [ //在這里進(jìn)行配置子頁(yè)面
{
path: '/myTabs',
component: './myTabs'
}]
}]
};效果:
可以看到，在MyTabs組件中已經(jīng)應(yīng)用了全局的布局。其他子頁(yè)面也就同理了。
3.4、美化頁(yè)面
接下來(lái)，對(duì)頁(yè)面做一些美化的工作：
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ái)系統(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ái)系統(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文件，用于模擬實(shí)現(xiàn)新增用戶和查詢(xú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ái)系統(tǒng) ?2018 Created by 租房系統(tǒng)</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;注意：這里使用了umi的link標(biāo)簽，目的是出現(xiàn)記錄點(diǎn)擊的菜單。
效果：
4、表格
4.1、基本用法
參考官方文檔進(jìn)行實(shí)現(xiàn)：https://ant.design/components/table-cn/
4.2、將數(shù)據(jù)分離到model中
model的實(shí)現(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īng)顟B(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) { //模擬請(qǐng)求返回?cái)?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: ['高富帥', '富二代'],
}]);
}
}測(cè)試結(jié)果
二、Ant Design Pro入門(mén)
1、了解Ant Design Pro
Ant Design Pro 是基于Ant Design的一個(gè)開(kāi)箱即用的，企業(yè)級(jí)中后臺(tái)前端/設(shè)計(jì)解決方案。效果：
源碼地址：https://github.com/ant-design/ant-design-pro
特性：
2、快速入門(mén)
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)入項(xiàng)目到Idea中
第三步：進(jìn)行初始化以及啟動(dòng)：
tyarn install #安裝相關(guān)依賴(lài)
tyarn start #啟動(dòng)服務(wù)
測(cè)試：
可以看到，系統(tǒng)已經(jīng)啟動(dòng)完成。
2.2、菜單和路由
默認(rèn)的菜單是不能直接投入到項(xiàng)目開(kāi)發(fā)的，所以，我們需要搞清楚如何自定義菜單和路由。 在pro中，菜單和路由，在router.con?g.js配置文件中進(jìn)行管理：
打開(kāi)router.con?g.js后，可以看出，pro提供了有2套路由（布局），分別是/user和/
接下來(lái)進(jìn)行實(shí)驗(yàn)，新增一個(gè)路由：
// 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 分析頁(yè)', 'menu.new.monitor': 'New 監(jiān)控頁(yè)', 'menu.new.workplace': 'New 工作臺(tái)',
效果：
發(fā)現(xiàn)，已經(jīng)正常顯示了。
2.3、新增頁(yè)面
上面我們添加了新的菜單，但是頁(yè)面依然使用的是模板中的頁(yè)面，那么如何新增頁(yè)面呢？ 所有的頁(yè)面依然是保存的src/pages中，在pages目錄下，以功能為單元?jiǎng)?chuàng)建目錄。
創(chuàng)建文件 NewAnalysis.js：
import React from 'react';
class NewAnalysis extends React.Component {
render() {
return (
<div>NewAnalysis</div>
);
}
}
export default NewAnalysis;修改路由中的路徑：
效果：
2.4、pro中的model執(zhí)行流程
在pro系統(tǒng)中，model是如何執(zhí)行的，下面我們以表格為例，探究下在Pro中的執(zhí)行流程。
進(jìn)入TableList.js代碼進(jìn)行查看：
生成表格的主要邏輯在這里：
在StandardTable中，使用Table組件生成表格，其中數(shù)據(jù)源是data：
TableList.js中，data數(shù)據(jù)從構(gòu)造方法中獲取到：
this.props中的rule數(shù)據(jù)，是通過(guò)@connect()修飾器獲?。?需要注意的是：{ rule, loading }是解構(gòu)表達(dá)式，從props中獲取數(shù)據(jù)
數(shù)據(jù)從model中獲取，在models下的rule.js中：
在TableList.js中，組件加載完成后進(jìn)行加載數(shù)據(jù):
在rule.js中，進(jìn)行加載數(shù)據(jù)：
queryRule是在/services/api中進(jìn)行了定義：
數(shù)據(jù)的mock是在mock/rule.js中完成。
這就是整個(gè)數(shù)據(jù)的加載、更新流程，至此，Ant Design與Ant Design pro入門(mén)結(jié)束。
到此這篇關(guān)于Ant Design與Ant Design pro入門(mén)的文章就介紹到這了,更多相關(guān)Ant Design與Ant Design pro內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- ant-design-pro?的EditableProTable表格驗(yàn)證調(diào)用的實(shí)現(xiàn)代碼
- 在Ant Design Pro登錄功能中集成圖形驗(yàn)證碼組件的方法步驟
- 淺談Ant Design Pro 菜單自定義 icon
- ant design pro中可控的篩選和排序?qū)嵗?/a>
- Ant Design Pro 之 ProTable使用操作
- 解決ant Design中this.props.form.validateFields未執(zhí)行的問(wèn)題
- Ant Design Pro 下實(shí)現(xiàn)文件下載的實(shí)現(xiàn)代碼
相關(guān)文章
react路由跳轉(zhuǎn)傳參刷新頁(yè)面后參數(shù)丟失的解決
這篇文章主要介紹了react路由跳轉(zhuǎn)傳參刷新頁(yè)面后參數(shù)丟失的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了react中使用usestate踩坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
MobX 是一個(gè)簡(jiǎn)潔的狀態(tài)管理庫(kù),它通過(guò)透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡(jiǎn)單和可擴(kuò)展,下面就跟隨小編一起來(lái)了解一下如何在React函數(shù)式組件中使用MobX吧2024-01-01
React實(shí)現(xiàn)點(diǎn)擊刪除列表中對(duì)應(yīng)項(xiàng)
本文主要介紹了React 點(diǎn)擊刪除列表中對(duì)應(yīng)項(xiàng)的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了React中的useContext使用,使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過(guò)自己逐級(jí)查找對(duì)比改變的數(shù)據(jù)然后渲染，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
本篇文章主要介紹了ReactJs設(shè)置css樣式的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
React 如何使用時(shí)間戳計(jì)算得到開(kāi)始和結(jié)束時(shí)間戳
這篇文章主要介紹了React 如何拿時(shí)間戳計(jì)算得到開(kāi)始和結(jié)束時(shí)間戳,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了在react中使用mockjs的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
React在組件中如何監(jiān)聽(tīng)redux中state狀態(tài)的改變
這篇文章主要介紹了React在組件中如何監(jiān)聽(tīng)redux中state狀態(tài)的改變，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08