Ant Design Pro 运用点滴 [1]

前些天，尝试了一下vue以及element样式。现在要尝试一下阿里的Ant Design Pro。可能是官方文档写得过于简洁，OR本人在前端上不太精通的缘故。费劲不少，成果不大。暂将学习的一些体会记录一下。

做为前端的大部份数据都要从后端调取，因为我一上来的学习就向这个方面倾斜。

新建菜单项

这个在/src/common/menu.js里进行添加。

/**省略*/
  {
    name: '列表页',
    icon: 'table',
    path: 'list',
    children: [
      {
        name: '查询表格',
        path: 'table-list',
      },//以下为本次添加的菜单项
      {
        name: '我的',
        path: 'mine'
      },//添加菜单项结束
      {
        name: '标准列表',
        path: 'basic-list',
      },
      /**省略*/

根据官方文档，在添加菜单项之后，要添加路由项，在/src/common/router.js进行修改。

/**省略*/
'/list/table-list': {
      component: dynamicWrapper(app, ['rule'], () => import('../routes/List/TableList')),
    },//以下为本次添加的路由项
    '/list/mine': {
      component: dynamicWrapper(app, ['mine'], () => import('../routes/List/Mine')),
    },//添加路由项结束
    '/list/basic-list': {
      component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')),
    },
    /**省略*/

在此要说明一下

 component: dynamicWrapper(app, ['mine'], () => import('../routes/List/Mine')), 

//mine为model，要在routes/List目录下，新建一个Mine.js文件
//这里调用了同文件内的动态加载函数 dynamicWrapper，有 3 个参数，app 为全局 dva 实例，models 为一个带有相关 dva Model 的 Array，component 即为该路由记录对应的实际组件。

dynamicWrapper函数代码

const dynamicWrapper = (app, models, component) => {
  // register models
  models.forEach(model => {
    if (modelNotExisted(app, model)) {
      // eslint-disable-next-line
      app.model(require(`../models/${model}`).default);
    }
  });

  // () => require('module')
  // transformed by babel-plugin-dynamic-import-node-sync
  if (component.toString().indexOf('.then(') < 0) {
    return props => {
      if (!routerDataCache) {
        routerDataCache = getRouterData(app);
      }
      return createElement(component().default, {
        ...props,
        routerData: routerDataCache,
      });
    };
  }
  // () => import('module')
  return Loadable({
    loader: () => {
      if (!routerDataCache) {
        routerDataCache = getRouterData(app);
      }
      return component().then(raw => {
        const Component = raw.default || raw;
        return props =>
          createElement(Component, {
            ...props,
            routerData: routerDataCache,
          });
      });
    },
    loading: () => {
      return <Spin size="large" className="global-spin" />;
    },
  });
};

新建Mine.js文件
关于交互官方文档

import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Table
} from 'antd';

import styles from './BasicList.less';



@connect(({ mine, loading }) => ({
  mine,
  loading: loading.effects['mine/getMineData'],
}))

export default class Mine extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'mine/getMineData',
      payload: {
        count: 5,
      },
    });
  }

  render() {
    const {
      mine: { data },
      loading,
    } = this.props;
    const {list}=data;
    const columns = [{title:'name',dataIndex:'name'},{title:'value',dataIndex:'value'},{title:'type',dataIndex:'type'}]



    return (
      <div>
        <Table  dataSource = {list} columns={columns} />
      </div>    
    );
  }
}

组件写法中调用了 dva 所封装的 react-redux 的 @connect 装饰器，用来接收绑定的mine这个 model 对应的 redux store。注意到这里的装饰器实际除了 app.state.list 以外还实际接收 app.state.loading 作为参数，这个 loading 的来源是 src/index.js 中调用的 dva-loading这个插件。

我对以上语句没看懂。
在这我使用console.log()查看了this.props。我推测，@connect装饰器，就是将mine这个model的数据写入this.props中。

在render()中
再使用{}对象解构，将mine中state中的data提取。
根据我mock的数据格式，再使用{}对象解构，将list提取出来。

新建modelMine.js

import {getMineData} from '../services/mine';

export default {
    namespace: 'mine',
    state: {
    data: {
      list: [],
      pagination: {},
    },
  },

  effects: {
    *getMineData(_, { call, put }) {
      const response = yield call(getMineData);
      yield put({
        type: 'myget',
        payload:response,
      });
    },
  },

  reducers: {
    myget(state, action) {
      return {
        ...state,
        data: action.payload,
      };
    },
  },

}

新建 serives mine.js

import request from '../utils/request';

export async function getMineData() {
  return request('/api/getminedata');
}

mock数据
修改.roadhogrc.mock.js

  'GET /api/401': (req, res) => {
    res.status(401).send({
      timestamp: 1513932555104,
      status: 401,
      error: 'Unauthorized',
      message: 'Unauthorized',
      path: '/base/category/list',
    });
  },
  //本次用到的
  'GET /api/getminedata': mockjs.mock({
    'list|100': [{ 'key|+1':1,name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
    'pagination|1':[{'current':1,pageSize:10,'total':100}]
  }),