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

本文介绍了一种通过前端实现数据交互的具体方法,包括定义API路由、使用请求库进行GET和POST操作、通过DVA框架管理状态流程等步骤。此外,还详细展示了如何在组件中调用这些方法并获取数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数据传参数

第一步:

书写路由及参数

'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,

};



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值