Ant Desing Pro与服务端交互

参考资料：

https://segmentfault.com/a/1190000018422882
https://www.yuque.com/ant-design/course/ig6mzb

 

/services/ant-design-pro/register.js

import { CONFIG } from '@/consts/config';
import { request } from 'umi';

export async function register() {
  return request(`${CONFIG.URL}/HTRegister`, {
    method: 'POST',
  });
}

export async function register_select() {
  return request(`${CONFIG.URL}/HTRegister_select`, {
    method: 'POST',
  });
}

 

/models/register.js

import { register } from '@/services/ant-design-pro/register';
import { register_select } from '@/services/ant-design-pro/register';

export default {
  namespace: 'register',

  state: {
    data: [],
  },

  effects: {
    *queryInitCards(_, sagaEffects) {
      const { call, put } = sagaEffects;

      const respose = yield call(register);
      console.log('请求的返回值test：' + JSON.stringify(respose.info));
      yield put({ type: 'save', payload: respose.info });
    },

    *queryInitCards_s(_, sagaEffects) {
      const { call, put } = sagaEffects;

      const respose = yield call(register_select);
      console.log('请求的返回值test：' + JSON.stringify(respose.info));
      yield put({ type: 'save', payload: respose.info });
    },
  },

  reducers: {
    save(state, action) {
      console.log('处理后的test：' + action.payload);
      return {
        ...state, // es6三点运算符合，有点模糊解释不清楚
        data: action.payload, // 上面与服务器交互完的数据赋值给data,这里的data 对应最上面 state 里面的data
      };
    },
  },
};

• 添加了一个 effect queryInitCards
• const respose = yield call(register);获取服务端数据。
• yield put({ type: 'save', payload: respose.info });添加一个卡片数据。这个会触发 reducer 的执行。于是会看到视图上添加了一个新卡片。

 

pages/register.jsx

import { Button } from 'antd';
import { Divider, List, Typography } from 'antd';
import { Card } from 'antd';
import { Space, Table, Tag } from 'antd';
import React from 'react';
import { render } from 'react-dom';
import { connect } from 'dva';
import { register } from '@/services/ant-design-pro/register';

const namespace = 'register';

const mapStateToProps = (state) => {
  const userList = state[namespace].data;
  // const userListtoJson = JSON.stringify(userList);
  console.log('给page页的数据test' + JSON.stringify(userList));
  //console.log('给page页的数据' + userListtoJson['data']['email']);
  return {
    userList,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onDidMount: () => {
      dispatch({
        type: `${namespace}/queryInitCards`,
      });
    },

    onDidMount_select: () => {
      dispatch({
        type: `${namespace}/queryInitCards_s`,
      });
    },
  };
};

const columns = [
  {
    title: 'Email',
    dataIndex: 'email',
    key: 'email',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'user_id',
    dataIndex: 'user_id',
    key: 'user_id',
  },
  {
    title: '国籍',
    dataIndex: '国籍',
    key: '国籍',
  },

  {
    title: '学习语言',
    dataIndex: '学习语言',
    key: '学习语言',
  },

  {
    title: '性别',
    dataIndex: '性别',
    key: '性别',
  },

  {
    title: '母语',
    dataIndex: '母语',
    key: '母语',
  },

];

@connect(mapStateToProps, mapDispatchToProps)
class ShoppingList extends React.Component {
  render() {
    console.log('展示的数据test' + JSON.stringify(this.props.userList));
    return (
      <>
        <Card>
          <Button type="primary" onClick={this.props.onDidMount}>
            注册
          </Button>
          <Button type="primary" onClick={this.props.onDidMount_select}>
            查询
          </Button>
        </Card>

        <Table columns={columns} dataSource={this.props.userList} />
      </>
    );
  }
}

export default ShoppingList;

• 通过 mapDispatchToProps 给页面注入方法 onDidMount。页面在 mount 完毕后调用该方法。它发送一个 puzzlecards/queryInitCards 的 action