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

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

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

先看效果图:

微信截图_20181101174324.png

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

如果想学习如何新建页面可以看: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 (
            <div>
                <h2>HELLO WORD!</h2>
                <h2>用户名:{user_name}</h2>
                <h2>用户名:{code}</h2>
                <a href={ url } target="_blank">博客链接:{ url }</a>
            </div>
        )
    }
}
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,
//  });
//}

最终会请求道 https://www.liangjucai.com/api/getUserName接口中

接口数据如下:

{"user_name":"梁巨才博客","code":200,"url":"https:\/\/www.liangjucai.com"}

如果还不会切换域名接口的可以看上篇文章Ant Design Pro代理接口配置,接口域名更改

ok都搞定了,看看效果!

微信截图_20181101174324.png

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

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

喜欢(0)

评论 抢沙发

表情