美文网首页
react+antd+dva+umi入门

react+antd+dva+umi入门

作者: 子涵_520 | 来源:发表于2019-08-11 15:32 被阅读0次

    首先创建一个项目,官网地址 https://ant.design/docs/react/practical-projects-cn
    安装yarn,在命令行中输入 'yarn create umi',生成文件中的.umirc即为配置文件,但我们会把这个文件删了,然后新增一个config文件夹里面的config的文件作为配置文件,在src中新建models和service两个文件夹,公共的组件可以放在components文件夹里面,如下图:

    image

    service#层:发送请求,获取数据

    import request from '@/utils/request';

    export async function ×××××(param) {
    return request(${url}sys/dic?${stringify(param,{arrayFormat: 'repeat'})}, {
    method: 'GET',
    });
    }

    models#层:

    引入对应的service文件夹中的文件
    import { ×××,×××,××× } from '@/service/×××';

    image

    定义的namespace是唯一,不可重复,effects:定义的方法是通过调用service里面的方法请求后台接口
    reducers:里面定义的方法是对models层中的state里面的数据进行的操作。

    page#页面

    image

    在每个子页面中,通过connect连接models层的方法,子页面发送请求时
    this.props.dispatch({
    type:"namespace名称/models定义的方法名称",
    payload:{}//带的参数
    })

    相关文章

      网友评论

          本文标题:react+antd+dva+umi入门

          本文链接:https://www.haomeiwen.com/subject/jkksjctx.html