ant design pro 脚手架使用总结

一，目录简介

二，重点介绍下这几个文件夹

（1）modal文件夹下的index文件夹，require.context方法是遍历其父文件夹下面的所有字子文件，导出对象

（2）工具包下面的request.js文件夹，有些地方需要特别的设置下，注意消息头要按照自己的需求修改，导出形式可以使用stringify，但是在头部需要import { stringify } from 'qs';

三，新建页面

这个直接在common下面的router里面添加即可，如下：

四，组件的传值使用和传统的react一样，这里省略了，

五，接口封装

六，接口调用和传值，页面的渲染

//  这是modal层代码
import { message } from 'antd/lib/index';
import { createnotice, findbycondition, updatenotice, deletenotice } from '../services/api';
import { replaceUrl } from '../utils/utils';

export default {
  namespace: 'notice',

  state: {  // 请求的数据放到state里面
    noticeList: {
      // 公告信息
      list: [],
      pagination: {},
    },
    noticeObj: {},
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      // 查询公告
      const response = yield call(findbycondition, payload);
      let data = {};
      if (response && response.code === '0') {
        if (response.data) {
          data = {
            list: response.data.items,
            pagination: {
              current: response.data.currentPage,
              pageSize: response.data.pageSize,
              total: response.data.totalCount,
              totalPage: response.data.totalPage,
            },
          };
          yield put({ 
            type: 'save',
            payload: data,
          });
        }
      } }
      }
    },
    *add({ payload, callback }, { call }) {
      // 添加公告
      const response = yield call(createnotice, payload);
      if (response && response.code === '0') {
        message.success(response.msg);
        if (callback) callback();
      }
    }，
  },

  reducers: {
    save(state, action) {
      return {
        ...state,
        noticeList: action.payload,
      };
    },
  },
};
//  下面是页面 ，页面拿到值之后如何渲染
//  高阶方法 将需要的modal链接起来
@connect(({ notice, loading }) => ({
  notice,
  loading: loading.models.notice,
}))
...
// 接口调用
 componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'notice/fetch',
      payload: this.params,
    });
  }
//  在删除和增加成功之后需要重新刷新数据可以这样做，使用callback方法回调
  handleAdd = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'notice/add',
      payload: fields,
      callback: () => {
        dispatch({
          type: 'notice/fetch',
        });
      },});};

// 页面是这样拿到数据并且渲染的
  render() {
   const {
      notice: { noticeList },
      loading,
    } = this.props;
     return (
          <StandardTable
              loading={loading}
              data={noticeList}
              ...
            />）
}
复制代码

七，在使用脚手架的时候需要的基础

（1）ant design,使用到组件的时候，下面的api很重要，坑也是比较多的

（2）Dva基础知识,如果这些不知道 估计modal传值那块会比较迷茫

（3）React官网,生命周期，组件的使用，传值，等等