在讲这个问题之前,有一个问题应当讲一下:

Ant Design Pro / umi / dva 是什么关系?

首先是 umi / dva 的关系。

  • umi 是一个基于路由的 react 开发框架。
  • dva 是一个基于 redux 和 redux-saga 的数据流方案。

理论上说,他们是平级不重合的。

但是。

  • umi 作为开发框架,在作者设想的 react 依赖体系中是核心地位(类似于电脑中的主板),而且以后会有更多更全的功能。
  • umi 是在 dva 之后开发的,而且作者是同一个人。

所以在这个体系中,umi 才是核心。

包括 Ant Design Pro ,这个用 react 开发后台管理系统的全家桶方案,也是用 umi 构建项目时的一个选项。

 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.

以下才是正文:Ant Design Pro 的数据流向。

0 路由

首先,一个项目要先看路由。

路由和菜单是组织起一个应用的关键骨架,pro 中的路由为了方便管理,使用了中心化的方式,在 config.ts 统一配置和管理。

在 umi 中,路由可以用文件关系约定,也可以显式编写。

在 Ant Design Pro 中,路由强制显式编写,可能是因为方便维护。

知道了路由,就知道有哪些页面了。

1 pages -> models

a.

import { connect } from 'dva'

b. @connect 传送数据。

参数对象中的值是 model.namespace。

返回对象:

  • key 是 page.props.key
  • value 是 model.states.value

c. 发起请求用 dispatch:

  • type 是 model.effects.type
  • payload 是可能需要的参数对象。

2 models -> service

a. 从 service 引入接口方法

import {/* and more */} from "..." 

b. effects:

  • call 发起请求
  • put 存入数据
  • yield 异步变同步
  • payload 组件 dispatch 时带的参数

c. states: put 时存数据的地方

d. reducers : 整合之前累计的数据和从接口取到的数据,返回新的数据

如果你在开发的时候后端还没有写好,需要前端模拟数据...

3  service -> mock

mock 中的接口名与 service 中的接口名相同即可

需要

import request from '@untils/request.js'

以上。

Ant Design Pro 学习笔记:数据流向的更多相关文章

  1. Ant Design Pro 学习一 安装

    安装: 直接 clone git 仓库 $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-projec ...

  2. Ant Design Pro 学习三 新建组件

    在 src/components 下新建一个以组件名命名的文件夹,注意首字母大写 在使用组件时,默认会在 index.js 中寻找 export 的对象,如果你的组件比较复杂,可以分为多个文件,最后在 ...

  3. Ant Design Pro 学习二 新建菜单-布局

    新建布局,注意格式: src/common/nav.js 中增加 { component: dynamicWrapper(app, [], () => import('/path/to/NewL ...

  4. 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)

    前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...

  5. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  6. ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  7. Ant Design Pro 脚手架+umiJS 实践总结

    一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是 ...

  8. ant design pro 当中改变ant design 组件的样式和 数据管理

    ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...

  9. Ant Design Pro V5 与 IdentityServer 实现 Password 模式的登录

    最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速 ...

随机推荐

  1. JSON类库Jackson优雅序列化Java枚举类

    1. 前言 在Java开发中我们为了避免过多的魔法值,使用枚举类来封装一些静态的状态代码.但是在将这些枚举的意思正确而全面的返回给前端却并不是那么顺利,我们通常会使用Jackson类库序列化对象为JS ...

  2. 07.Easymock的实际应用

    第一步下载对应的java包添加到工程中 并静态导入所需要的j类 import static org.easymock.EasyMock.*; 这里有的注意点 package com.fjnu.serv ...

  3. 为Linux主机安装图形化桌面环境

    本文主要介绍在Linux实例中,centos 7 以及ubutun 14如何安装图形化桌面环境. CentOS 7 此处以安装MATE桌面环境为例,步骤如下. 说明:在安装重启后,如果卡在启动页面,需 ...

  4. 【转】HBase的MapReduce调用

    参考: https://blog.csdn.net/u012848709/article/details/83744699 自己照着搭建了下,顺便把坑也踩了下,项目见云盘: 链接:https://pa ...

  5. SpringMVC和Spring

    SpringMVC和Spring汇总 转载:https://www.cnblogs.com/doudouxiaoye/p/5693399.html 1. 为什么使用Spring ? 1). 方便解耦, ...

  6. 教你如何开发一个完败Miracast的投屏新功能

      手机与电视,是陪伴在我们生活最常见,陪伴最长久的智能设备.迅猛发展的移动终端与通信技术,赋予了手机更广阔多元的应用生态,大屏电视则以大视野和震撼影音,弥补了手里方寸带来的视觉局限.而今,手机的延伸 ...

  7. API(List、Map)

    day 07 API List接口 特点: 有序,带索引,内容可以重复 Arraylist: 创建对象一般使用多态的格式: List<E> li = new ArrayList<E& ...

  8. 在 Spring Boot 中,如何干掉 if else!

    需求 传统实现 策略模式实现 ClassScanner:扫描工具类源码 总结 需求 这里虚拟一个业务需求,让大家容易理解.假设有一个订单系统,里面的一个功能是根据订单的不同类型作出不同的处理. 订单实 ...

  9. 猿灯塔-Phaser 使用介绍

    原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 本文将介绍 java.util.concurrent.Phaser,一个常常被大家忽略的并发工具.它和 CyclicBarrier 以及 Co ...

  10. css transparent属性_css 透明颜色transparent的使用

    在css中 transparent到底是什么意思呢? transparent 它代表着全透明黑色,即一个类似rgba(0,0,0,0)这样的值. 例如在css属性中定义:background:tran ...