Ant-Design-Pro小试：react开发步骤(mock数据)

1、router.config.js

{
        path: '/train',
        name: 'train',
        icon: 'profile',
        routes: [
          // profile
          {
            path: '/train/list',
            name: 'list',
            component: './Train/List',
          }
        ],
      },

 2、menu.js

 'menu.train': "火车业务",
  'menu.train.list': "火车查询列表",

3、pages增加

list.js

import React, { Component,Fragment } from 'react';
import { connect } from 'dva';
import { Table,Button,Modal,message,Divider, Input } from "antd";


@connect(({ train, loading }) => ({
  planData:train.planData,
  loading: loading.effects['train/fetchList'],
}))
export default class BoatList extends Component {
  state = {
  }

  componentDidMount(){
    
    let payload={};
    this.props.dispatch({
      type: 'train/fetchList',
      payload
    });
  }


  render(){
    const { loading,planData} = this.props;
    console.log(111);
    console.log(planData);
    
    let columns = [
      {title:"序号",dataIndex:"id"},
      {title:"船名",dataIndex:"name"},
      {title:"入港时间",dataIndex:"inTime"},
      {title:"更新时间",dataIndex:"updateTime"},
    ]
    return(  
        <Table 
          dataSource={planData} 
          columns={columns}
          rowKey="id" 
          loading={loading} /> 
    );
  }
}

models/train.js 

import { getFakeTrainData } from '@/services/api';

export default {
  namespace: 'train',

  state: {
    planData: [],
  },

  effects: {
    /**
     * 计划列表
     * @param payload {Objact} 参数 
     * @param callback {Function} 回调函数 
     */
    *fetchList({payload,callback}, { call, put }) {
      const response = yield call(getFakeTrainData,payload);
      console.log(222);
      console.log(response);
      yield put({
        type: 'savePlan',
        payload: response,
      });
    },
   
    
  },

  reducers: {
    savePlan(state, { payload }) {
      return {...state,planData:payload};
    },
  }
}

4、service/api.js

export async function getFakeTrainData() {
  return request('/api/trainList');
}

5、mock/api.js

  'GET /api/trainList': [
    {id:"1",name:"中华荣耀",inTime:"2019-01-24 17:21:00",updateTime:"2019-01-24 17:21:00"},
    {id:"2",name:"雅典娜",inTime:"2019-01-24 17:21:00",updateTime:"2019-01-24 17:21:20"}
  ]