Ant Design Pro 运用点滴 [2]

Ant Design Pro 运用点滴

好像好长一段时间，都在ant design pro上来回折腾（z turn），原因就是对react不熟。估计还要很长一段时间不熟下去，再记下几点使用后的谈不上技巧的心得。

---

Table远程数据与thinkphp5的paginate

今天几乎都在弄这个了，幸好弄出来的大概。从运用点滴一，我知道了model的运用，我下手还是从model开始。

新建articlemodel

import { queryList } from '../services/api';
export default {
  namespace: 'article',
  state: {
    results: {
      total: '',
      per_page:'',
      current_page:'',
      last_page:'',
      data: [],
    },
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryList, payload);
      yield put({
        type: 'save',
        payload: response,
      });
    },
  },
  reducers: {
    save(state, action) {
      //将服务器的数据刷新到页面中
      return {
        ...state,
        results: action.payload,
      };
    },
  },
};

再到api里加上queryList

export async function queryList(params) {
  return request(`/api/article/getlist?${stringify(params)}`);
}

注意了，因为我要传后台传入参数，一定要加上（params）

再来看展示页面代码

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Tooltip,
  Table,
  Popconfirm,
  Divider
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './style.less';



@connect(({ article,loading }) => ({
  article,
  lo