如何在ant design中获取mock当中的数据

数据传参数

第一步:

书写路由及参数

'GET /api/userText' : [

  {phone:'13212341234',password:'123456'}

]

第二步:

获取路径及书写方法

services/userTest.js

import request from '../utils/request';

export async function getUser() {

    return request('/api/users');

}

export async function getLogin(){

  return request('/api/userText');

}

//get传输数据

export async function queryRule(params) {

  return request(`/api/rule?${stringify(params)}`);

}

//post传输数据

export async function fakeSubmitForm(params) {

  return request('/api/forms', {

    method: 'POST',

    body: params,

  });

}


第三部:

获取该方法,得到该值

models/userTest.js

import { getUser,getLogin } from '../services/usertest';

export default {

  namespace: 'usertest',

  state: {

  },

  effects: {

    *fetchUser(_, { call, put }) {

      console.log('usertest');

      const response = yield call(getUser);

      console.log(response);

      yield put({

        type: 'show',

        payload: response,

      });

    },

    *fetchLogin(_,{call,put}){

      console.log("login is finished");

      const response=yield call(getLogin);

      console.log(response);

      yield put({

        type:'isShow',

        payload:response,

      });

    },

  },

  reducers: {

    show(state, { payload }) {

      return {

        ...state,

        ...payload,

      };

    },

    isShow(state,{payload}){

      return {

        ...state,

        ...payload,

      }

    },

  },

};

第四部:

引入该参数的方法,并得到该值


import { connect } from 'dva';

@connect(({ usertest, loading }) => ({

  usertest,

  submmiting: loading.effects['usertest/fetchLogin'],

errorMessage: store.errorMessage,// 接受参数

}))


component中书写该方法

isShow = () => {

  console.log('handleSubmit');

  const { dispatch } = this.props;

  console.log(this.props);

  dispatch({

    type: 'usertest/fetchLogin',

  });

  console.log(this.state);

};

第五部

最后在src/index.js中生命该路径 必须


app.model(require('./models/usertest').default);



mock中书写数据

Const data=[];

Const couponColumns=[];

Const couponData=[];


export const guestsData = (req, res) => {

  res.json(data,couponColumns,couponData);

};

export default {

  guestsData,

};



猜你喜欢

转载自blog.csdn.net/qq_40372395/article/details/80696827
今日推荐