前些天，嘗試了一下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" />;
    },
  });
};

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}]
  }),