design php 如何使用ant_Ant Design Pro如何调用接口 | Ant Design Pro渲染数据绑定数据...

Ant Design Pro如何调用接口 | Ant Design Pro渲染数据绑定数据

Ant Design Pro我发现网上的资料好少，而且版本基本都是1.0的，我现在是2.0版本，好多地方都不一样，今天我把调用接口和渲染研究了下，分享给大家！

先看效果图：

再看下目录结构,下边代码文件的位置可以在这里看到：

如果想学习如何新建页面可以看：Ant Design Pro初探—新建页面，开始码代码：

首先新建页面Test.js 位置src/pages/Test/Test.js 内容如下：import React, { PureComponent } from 'react';

//这里connect如果请求接口必须要！

import { connect } from 'dva';

//import styles from './User.less'; 暂时用不到

//这块是使用connt获取数据的应该不知道理解对不对

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

//这行是把返回的数据test.data给了test

test : test.data,

loading: loading.models.list,

}))

class Test extends PureComponent {

//componentWillMount 在渲染前调用,在客户端也在服务端。

componentWillMount(){

console.log('渲染前调用');

alert("渲染前调用");

}

//componentDidMount在第一次渲染后调用，只在客户端。

componentDidMount() {

const { dispatch } = this.props;

//要传递的参数

const params = {

aa:1,

};

//分发

dispatch({

//test是命名空间 fetch是其中的方法

type: 'test/fetch',

//这里就是上边的参数

payload: params,

});

}

render() {

//获取接口数据

const { user_name , code , url } = this.props.user;

console.log(this.props.user);

return (

HELLO WORD!

用户名：{user_name}

用户名：{code}

博客链接：{ url }

)

}

export default Test;

页面就ok了！下边开始建立models具体什么位置随你放，这个是根据命名空间来使用的！位置看自己需求了，我的是在 src/models/test.js

内容如下：//这块的queryTest是下边的方法的实现，有几个写几个用，分割哦！

import { queryTest } from '@/services/api';

export default {

namespace: 'test',

state: {

//用来保存数据

data : [],

effects: {

//方法实现

//payload 请求的参数

*fetch({ payload }, { call, put }) {

const response = yield call(queryTest, payload);

yield put({

//回调的方法 save

type: 'save',

payload: response,

});

reducers: {

//这块应该是回调

save(state, action) {

return {

...state,

data: action.payload,

};

models ok下边开始建立真实请求，这个文件我就不新建了，我直接用自带的src/pages/service/api.js的文件了

直接在最后一行添加如下内容：//get请求

export async function queryTest(params) {

//接口地址和参数应该可以一目了然了吧！

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

}

//post请求

//export async function queryTest1(params) {

// return request('/server/api/getUserName', {

// method: 'POST',

// body: params,

// });

//}

接口数据如下：{"user_name":"梁巨才博客","code":200,"url":"https:\/\/www.liangjucai.com"}

ok都搞定了，看看效果！

你学会了吗？如果理解有错误！可以给我留言哦！！

Ant Design Pro如何调用接口 | Ant Design Pro渲染数据绑定数据