ant design pro中添加一个基本的页面 并调用model service

哎！我太笨了 学习ant design真的很费力气，文档写的很深奥，不花大力气看不懂

index.jsx

import { Table } from 'antd';
import React, { Component } from 'react';
import { connect } from 'dva';
// 链接数据userList是model中的namespace名称
@connect(({ userList, loading }) => ({
  userList,
  loading: loading.models.userList,
}))


class TableList extends Component {
  // 定义表格的colum
  columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'userList/fetch',
    });
  }

  render() {
    const {
      userList: { list }, // {list}对应model中state中的list
      loading,
    } = this.props;
    return (
      <Table loading={loading} dataSource={list} columns={this.columns} />
    );
  }
}
export default TableList;

 

 model

import { queryUserList } from './service';

const Model = {
  namespace: 'userList',
  state: {
    list: [],
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryUserList, payload);
      yield put({
        type: 'queryList',
        payload: Array.isArray(response) ? response : [],
      });
    },
  },
  reducers: {
    queryList(state, action) {
      console.log(action.payload);
      return { ...state, list: action.payload };
    },
  },
};
export default Model;

service

import request from '@/utils/request';

export async function queryUserList() {
  return request('/api/user_list', {
  });
}

mock

const getUserList = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '3',
    name: '胡彦祖1',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '4',
    name: '胡彦祖2',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '5',
    name: '胡彦祖3',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '6',
    name: '胡彦祖4',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '7',
    name: '胡彦祖5',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '8',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '9',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '10',
    name: '胡彦祖1',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '11',
    name: '胡彦祖2',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '12',
    name: '胡彦祖3',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '13',
    name: '胡彦祖4',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '14',
    name: '胡彦祖5',
    age: 42,
    address: '西湖区湖底公园1号',
  },{
    key: '15',
    name: '胡彦祖2',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '16',
    name: '胡彦祖3',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '17',
    name: '胡彦祖4',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '18',
    name: '胡彦祖5',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

export default {
  'GET  /api/user_list': getUserList,
};