ant-design 简单学习，记录一下。

ant design4.0官网

语雀教程：附带github源码

umi脚手架官网教程

ant-design-pro官网v4 附带开发手册 效果预览

umi脚手架

因为umi是阿里工具，所以使用tyarn安装。

  1. # 安装
  2. $ yarn global add umi
  4. # 更新umi
  5. yarn global upgrade umi

项目初始化

  1. # 新建应用
  2. yarn create umi project_name
  4. 选择 antd 、 dva 、js、npm

新建页面

  1. export default () => {
  2.   return <div>hello world</div>;
  3. }

外部可以引用

  1. import React from 'react';
  3. class ShoppingList extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     this.state = {
  8.       value: null,
  9.     };
  10.   }
  12.   componentDidMount() {
  14.   }
  16.   componentWillUnmount() {
  18.   }
  20.   componentDidUpdate() {
  22.   }
  24.   render() {
  26.     const picture = {
  27.         src: 'https://cdn.nlark.com/yuque/0/2018/jpeg/84141/1536207007004-59352a41-4ad8-409b-a416-a4f324eb6d0b.jpeg',
  28.       };
  30.     return (
  31.       <div className="shopping-list">
  32.         <h1>Shopping List for {this.props.name}</h1>
  33.         <ul>
  34.           <li>Instagram</li>
  35.           <li>WhatsApp</li>
  36.           <li>Oculus</li>
  37.         </ul>
  38.       </div>
  39.     );
  40.   }
  41. }
  43. export default ShoppingList;

路由

  1. routes: [
  2.     {
  3.       path: '/user',
  4.       component: '../layouts/UserLayout',
  5.       routes: [
  6.         {
  7.           name: 'login',
  8.           path: '/user/login',
  9.           component: './user/login',
  10.         },
  11.         {
  12.           name: 'UserDashboard',
  13.           icon: 'smile',
  14.           path: '/user-dashboard',
  15.           component: './user-dashboard',
  16.         },
  17.       ],
  18.     },
  19.     {
  20.       path: '/',
  21.       component: '../layouts/SecurityLayout',
  22.       routes: [
  23.         {
  24.           path: '/',
  25.           component: '../layouts/BasicLayout',
  26.           authority: ['admin', 'user'],
  27.           routes: [
  28.             {
  29.               path: '/',
  30.               redirect: '/welcome',
  31.             },
  32.             {
  33.               path: '/welcome',
  34.               name: 'welcome',
  35.               icon: 'smile',
  36.               component: './Welcome',
  37.             },
  38.             {
  39.               name: '监控页',
  40.               icon: 'smile',
  41.               path: '/dashboardmonitor1',
  42.               component: './DashboardMonitor',
  43.             },
  44.             {
  45.               component: './404',
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           component: './404',
  51.         },
  52.       ],
  53.     },
  54.     {
  55.       component: './404',
  56.     },
  57.   ],

布局

布局

  1. import { Layout } from 'antd';
  3. const { Header, Footer, Sider, Content } = Layout;
  5. ReactDOM.render(
  6.   <div>
  7.     <Layout>
  8.       <Header>Header</Header>
  9.       <Content>Content</Content>
  10.       <Footer>Footer</Footer>
  11.     </Layout>
  13.     <Layout>
  14.       <Sider>Sider</Sider>
  15.       <Layout>
  16.         <Header>Header</Header>
  17.         <Content>Content</Content>
  18.         <Footer>Footer</Footer>
  19.       </Layout>
  20.     </Layout>
  21.   </div>,
  22.   mountNode,
  23. );

栅格

栅格

  1. import { Row, Col } from 'antd';
  3. ReactDOM.render(
  4.   <div>
  5.     <Row>
  6.       <Col span={12}>col-12</Col>
  7.       <Col span={12}>col-12</Col>
  8.     </Row>
  9.     <Row>
  10.       <Col span={8}>col-8</Col>
  11.       <Col span={8}>col-8</Col>
  12.       <Col span={8}>col-8</Col>
  13.     </Row>
  14.   </div>,
  15.   mountNode,
  16. );

示例

效果：

测试.gif

结构：

image.png

index.jsx

页面元素

  1. import React from 'react';
  2. import { connect } from 'dva';
  3. import { Table, Modal, Button, Form, Input } from 'antd';
  4. import SampleChart from '../../components/SampleChart';
  7. const FormItem = Form.Item;
  9. class List extends React.Component {
  10.   state = {
  11.     visible: false,
  12.     statisticVisible: false,
  13.     id: null,
  14.   };
  16.   columns = [
  17.     {
  18.       title: '名称',
  19.       dataIndex: 'name',
  20.     },
  21.     {
  22.       title: '描述',
  23.       dataIndex: 'desc',
  24.     },
  25.     {
  26.       title: '链接',
  27.       dataIndex: 'url',
  28.       render: value => <a href={value}>{value}</a>,
  29.     },
  30.     {
  31.       title: '',
  32.       dataIndex: 'statistic',
  33.       render: (_, { id }) => {
  34.         return (
  35.           <Button onClick={() => { this.showStatistic(id); }}>图表</Button>
  36.         );
  37.       },
  38.     },
  39.   ];
  41.   showModel = () => {
  42.     this.setState({ visible: true })
  43.   };
  45.   handleCancel = () => {
  46.     this.setState({
  47.       visible: false,
  48.     });
  49.   };
  51.   handleStatisticCancel = () => {
  52.     this.setState({
  53.       statisticVisible: false,
  54.     });
  55.   };
  57.   showStatistic = (id) => {
  58.     this.props.dispatch({
  59.       type: 'cards/getStatistic',
  60.       payload: id,
  61.     });
  62.     this.setState({ id, statisticVisible: true });
  63.   };
  65.   handleOk = () => {
  66.     const { dispatch, form: { validateFields } } = this.props;
  68.     validateFields((err, values) => {
  69.       if (!err) {
  70.         dispatch({
  71.           type: 'cards/addOne',
  72.           payload: values,
  73.         });
  74.         // 重置 `visible` 属性为 false 以关闭对话框
  75.         this.setState({ visible: false });
  76.       }
  77.     });
  78.   };
  81.   componentDidMount() {
  82.     this.props.dispatch({
  83.       type: 'cards/queryList',
  84.     });
  85.   }
  87.   render() {
  88.     const { visible, statisticVisible, id } = this.state;
  89.     const { cardsList, cardsLoading, form: { getFieldDecorator }, statistic } = this.props;
  91.     return (
  92.       <div>
  93.         <Table columns={this.columns} dataSource={cardsList} loading={cardsLoading} rowKey="id"/>
  94.         <Button onClick={this.showModel}>新建</Button>
  95.         <Modal title="新建记录"
  96.                visible={visible}
  97.                onOk={this.handleOk}
  98.                onCancel={this.handleCancel}
  99.         >
  100.           <Form>
  101.             <FormItem label="名称">
  102.               {getFieldDecorator('name', {
  103.                 rules: [{ required: true }],
  104.               })(
  105.                 <Input/>
  106.               )}
  107.             </FormItem>
  108.             <FormItem label="描述">
  109.               {getFieldDecorator('desc')(
  110.                 <Input/>
  111.               )}
  112.             </FormItem>
  113.             <FormItem label="链接">
  114.               {getFieldDecorator('url', {
  115.                 rules: [{ type: 'url' }],
  116.               })(
  117.                 <Input/>
  118.               )}
  119.             </FormItem>
  120.           </Form>
  122.         </Modal>
  123.         <Modal visible={statisticVisible} footer={null} onCancel={this.handleStatisticCancel}>
  124.           <SampleChart data={statistic[id]} />
  125.         </Modal>
  126.       </div>
  127.     );
  128.   }
  129. }
  131. function mapStateToProps(state) {
  132.   return {
  133.     cardsList: state.cards.cardsList,
  134.     cardsLoading: state.loading.effects['cards/queryList'],
  135.     statistic: state.cards.statistic,
  136.   };
  137. }
  139. export default connect(mapStateToProps)(Form.create()(List));

model.js

页面所有方法

  1. import * as service from './service';
  3. export default {
  4.   namespace: 'cards',
  5.   state: {
  6.     cardsList: [],
  7.     statistic: {},
  8.   },
  9.   effects: {
  10.     * queryList({ payload }, { call, put }) {
  12.       const rsp = yield call(service.queryList, payload);
  14.       yield put({
  15.         type: 'initList',
  16.         payload: { cardsList: rsp.result }
  17.       });
  18.     },
  20.     *deleteOne({ payload }, { call, put }) {
  21.       const rsp = yield call(service.deleteOne, payload);
  22.       return rsp;
  23.     },
  24.     *addOne({ payload }, { call, put }) {
  25.       const rsp = yield call(service.addOne, payload);
  26.       yield put({ type: 'queryList' });
  27.       return rsp;
  28.     },
  29.     *getStatistic({ payload }, { call, put }) {
  30.       const rsp = yield call(service.getStatistic, payload);
  31.       yield put({
  32.         type: 'saveStatistic',
  33.         payload: {
  34.           id: payload,
  35.           data: rsp.result,
  36.         },
  37.       });
  38.       return rsp;
  39.     },
  41.   },
  42.   reducers: {
  43.     initList(state, { payload: { cardsList } }) {
  44.       return {
  45.         ...state,
  46.         cardsList
  47.       };
  48.     },
  49.     saveStatistic(state, { payload: { id, data } }) {
  50.       return {
  51.         ...state,
  52.         statistic: {
  53.           ...state.statistic,
  54.           [id]: data,
  55.         },
  56.       }
  57.     },
  58.   }
  59. };

service.js

所有异步请求

  1. import request from '@/utils/request';
  4. export function queryList() {
  5.   return request('/api/cards');
  6. }
  8. export function deleteOne(id) {
  9.   return request(`/api/cards/${id}`, {
  10.     method: 'DELETE'
  11.   });
  12. }
  14. export function addOne(data) {
  15.   return request('/api/cards/add', {
  16.     headers: {
  17.       'content-type': 'application/json',
  18.     },
  19.     method: 'POST',
  20.     body: JSON.stringify(data),
  21.   });
  22. }
  24. export function getStatistic(id) {
  25.   return request(`/api/cards/${id}/statistic`);
  26. }

_mock.js

模拟数据

  1. let data = [
  2.   {
  3.     id: 1,
  4.     name: 'umi',
  5.     desc: '极快的类 Next.js 的 React 应用框架。',
  6.     url: 'https://umijs.org'
  7.   },
  8.   {
  9.     id: 2,
  10.     name: 'antd',
  11.     desc: '一个服务于企业级产品的设计体系。',
  12.     url: 'https://ant.design/index-cn'
  13.   },
  14.   {
  15.     id: 3,
  16.     name: 'antd-pro',
  17.     desc: '一个服务于企业级产品的设计体系。',
  18.     url: 'https://ant.design/index-cn'
  19.   }
  20. ];
  22. export default {
  23.   'get /api/cards': function (req, res, next) {
  24.     setTimeout(() => {
  25.       res.json({
  26.         result: data,
  27.       })
  28.     }, 250)
  29.   },
  30.   'delete /api/cards/:id': function (req, res, next) {
  31.     data = data.filter(v => v.id !== parseInt(req.params.id));
  32.     console.log(req.params.id);
  33.     console.log(data);
  34.     setTimeout(() => {
  35.       res.json({
  36.         success: true,
  37.       })
  38.     }, 250)
  39.   },
  40.   'post /api/cards/add': function (req, res, next) {
  41.     data = [...data, {
  42.       ...req.body,
  43.       id: data[data.length - 1].id + 1,
  44.     }];
  46.     res.json({
  47.       success: true,
  48.     });
  49.   },
  50.   'get /api/cards/:id/statistic': function (req, res, next) {
  51.     res.json({
  52.       result: [
  53.         { genre: 'Sports', sold: 275 },
  54.         { genre: 'Strategy', sold: 1150 },
  55.         { genre: 'Action', sold: 120 },
  56.         { genre: 'Shooter', sold: 350 },
  57.         { genre: 'Other', sold: 150 },
  58.       ]
  59.     });
  60.   },
  61. }

附带一个 SampleChart

  1. import React from 'react';
  2. import G2 from '@antv/g2';
  4. class SampleChart extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     this.containerRef = React.createRef();
  8.   }
  10.   componentDidMount() {
  11.     this.chart = new G2.Chart({
  12.       container: this.containerRef.current,
  13.       width: 450,
  14.       height: 300
  15.     });
  16.     this.refreshChart();
  17.   }
  19.   componentDidUpdate(prevProps) {
  20.     if (prevProps.data !== this.props.data) {
  21.       this.refreshChart();
  22.     }
  23.   }
  25.   componentWillUnmount() {
  26.     if (this.chart) {
  27.       this.chart.destroy();
  28.     }
  29.   }
  31.   refreshChart = () => {
  32.     this.chart.source(this.props.data);
  33.     this.chart.interval().position('genre*sold').color('genre');
  34.     this.chart.render();
  35.   };
  37.   render() {
  38.     return (
  39.       <div ref={this.containerRef} />
  40.     );
  41.   }
  42. }
  44. export default SampleChart;

表单操作

数据绑定：

  1. const [noteForm] = Form.useForm();
  3. <Form
  4.   {...layout}
  5.   name="basic"
  6.   initialValues={{}}
  7.   onFinish={updatePushUrl}
  8.   form={noteForm}
  9.   // onFinishFailed={onFinishFailed}
  10. >
  11.   <Form.Item
  12.     label="提醒地址"
  13.     name="noteUrl"
  14.   >
  15.     <Input/>
  16.   </Form.Item>
  17.   <Form.Item {...tailLayout}>
  18.     <Button type="primary" htmlType="submit">
  19.       提交
  20.     </Button>
  21.   </Form.Item>
  22. </Form>

赋值

  1. noteForm.setFieldsValue({"noteUrl": res.data});

提交

  1. const updatePushUrl = (values: PushChange) => {
  2.     service.updatePushUrl(values);
  3.   }