React + Antd Pro如何利用Mock进行本地数据模拟？附上demo片段

先上效果图

1. 在Mock文件夹 api.js 中新建本地模拟数据

import mockjs from 'mockjs';

const tempList = [];
const getTempList = () => {
  tempList.push({
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  });
  tempList.push({
    key: '2',
    name: 'Jim Green',
    age: 32,
    address: 'London No. 1 Lake Park',
  });
  tempList.push({
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  });
  for (let step = 1; step < 10; step++) {
    tempList.push({
      key: step + 3,
      name: 'name' + step,
      age: 18 + step,
      address: 'address' + step,
    });
  }
  return tempList;
}
const testTable = {
  success: true,
  persons: getTempList(),
  pagination: {
    current: 1,
    pageSize: 10
  },
};

export default {
  // 测试模拟
  'GET /api/getTable': testTable,
};

2. pages/sevices文件夹 api.js 中加入本地模拟需要的api接口

import { stringify } from 'qs';//这里是固定的。JSON.stringify()，将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
import request from '@/utils/request';//这里也是固定的。

// 测试模拟
export async function getTable() {
  return request('/api/getTable');
}

// 如果需要将参数传给后台，则可以这么写。像查询的时候就需要有入参
export async function getTable(params) {
  const { id } = params;
  return request(`/api/getTable?${stringify(params)}`, { // 注意此处用``而不是''
    method: 'POST', // 也可以为 'GET'，但一般为'POST'
    body: params
  });
}

3. pages/models文件夹，新建 mockTable.jsx 文件

import { getTable } from "@/services/api"; // 引入对应api接口

export default {
  namespace: 'mockTable',// namespace:是model的命名空间，用于区分model
  //  如果只在reducers里变更，未在state里申明，则不会通过@connect注解传到props中去
  state: {// state:当前model状态的初始值，表示当前状态
    list: [],
    pagination: {
      current: 1,
      pageSize: 10,
    },
    total: 0
  },

  // 用于处理异步操作和业务逻辑，由action触发，但不能修改state
  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(getTable, payload); // 调用getTable接口
      const { success } = response;
      if (success) {
        yield put({
          type: 'show', // 调用reducers中的show方法
          payload: response,
        });
      }
    },
  },

  // reducers:用于处理同步操作，由action触发,可修改state
  reducers: {
    // action:是reducers及effects的触发器，一般是一个对象，如：{type:'add',payload:todo}
    show(state, action) {
      const { persons, pagination: { current, pageSize } } = action.payload;
      const total = !!persons && persons.length || 0;
      const pagination = { current, pageSize, total };
      return {
        ...state,
        list: persons,
        pagination: pagination,
        total: total
        // return的内容需要在state里定义，如果不定义，则在pages中获取不到值
      };
    },
  },
};

4. pages下某文件： index.jsx

// 如何使用mock模拟本地数据
import React, { Component } from 'react';
import { Table } from 'antd';
import { connect } from 'dva';

// 利用@connect注解连接models文件夹下的【mockTable.js】
@connect(({ mockTable, loading }) => ({
  // mockTable.js 文件中【命名空间】为【mockTable】的
  mockTable,
  loading: loading.models.mockTable,
}))

class NewPage2 extends Component {

  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({type: 'mockTable/fetch'});
    // 遍历models文件夹下所有文件，并找到命名空间为【mockTable】的方法。
    // action的类型，由该方法及其fetch方法构成。派发这个action就会调用mockTable中的fetch函数，然后就会请求数据
  }

  render() {
    //  通过@connect注解，连接mockTable，并通过this.props取得其state里面的值
    const { mockTable: { list, pagination: { current, pageSize }, total } } = this.props;
    const pagination2 = { current, pageSize, total };
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    }];

    const dataSource = [...list];

    return (
      <div>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          //  Table组件中的pagination接口必须这么写，单独将其中的API写在table组件中会导致分页组件部分设定无效
          pagination={{
            ...pagination2,
            showTotal: () => `总共 ${total} 条`,
            showSizeChanger: true,
            showQuickJumper: true,
            onChange: () => {},
            onShowSizeChange: () => {},
          }}
          size="small" />
      </div>
    );
  }
}

export default NewPage2;