Ant Design Pro 学习笔记:数据流向
在讲这个问题之前,有一个问题应当讲一下:
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 学习笔记:数据流向的更多相关文章
- Ant Design Pro 学习一 安装
安装: 直接 clone git 仓库 $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-projec ...
- Ant Design Pro 学习三 新建组件
在 src/components 下新建一个以组件名命名的文件夹,注意首字母大写 在使用组件时,默认会在 index.js 中寻找 export 的对象,如果你的组件比较复杂,可以分为多个文件,最后在 ...
- Ant Design Pro 学习二 新建菜单-布局
新建布局,注意格式: src/common/nav.js 中增加 { component: dynamicWrapper(app, [], () => import('/path/to/NewL ...
- 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)
前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
- Ant Design Pro 脚手架+umiJS 实践总结
一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是 ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- Ant Design Pro V5 与 IdentityServer 实现 Password 模式的登录
最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速 ...
随机推荐
- SQLserver 的分页存储过程
-- 1.建立修改学生数据的存储过程 -- 2.建立根据班级Id和学生姓名模糊查询的分页存储过程,要求正确输出总记录数,总页数-- (输入班学生姓名 计算总记录数 计算总页数) -- @name ...
- JDBC——使用JDBC连接MySQL数据库
在JDBC--什么是JDBC一文中我们已经介绍了JDBC的基本原理. 这篇文章我们聊聊如何使用JDBC连接MySQL数据库. 一.基本操作 首先我们需要一个数据库和一张表: CREATE DATABA ...
- v-model指令的学习(双向绑定)
v-bind 只能实现数据的单项绑定,从data到view,无法实现双向绑定 v-model可以实现表单元素和model中数据的双向绑定 注意:model只能运用到表单元素中 如:input sele ...
- Python爬虫实战,完整的思路和步骤(附源码)
前言 小的时候心中总有十万个为什么类似的问题,今天带大家爬取一个问答类的网站. 本堂课使用正则表达式对文本类的数据进行提取,正则表达式是数据提取的通用方法. 环境介绍: python 3.6 pych ...
- 恕我直言你可能真的不会java第5篇:Stream的状态与并行操作
一.回顾Stream管道流操作 通过前面章节的学习,我们应该明白了Stream管道流的基本操作.我们来回顾一下: 源操作:可以将数组.集合类.行文本文件转换成管道流Stream进行数据处理 中间操作: ...
- 慕课网--docker走进第一个javaweb应用
zh docker镜像就是一系列文件的集合 docker 容器就是一个进程.将docker镜像运行起来就是一个docker容器 docker仓库就是存储docker镜像的 1.docker的安装 do ...
- 基于托管的C++来使用WPF - Using WPF with Managed C++
基于托管的C++来使用WPF - Using WPF with Managed C++ Posted by Zeeshan Amjad This article was originally publ ...
- CImage显示位图与CDC双缓冲冲突,使用路径层解决.
2010年04月29日 星期四 20:35 位图闪的问题困扰我很久了,因为程序的需要,我显示位图的方式是CImage类. 如果从CImage转到CBitmap,之后使用Attach到是可以,但我发现这 ...
- Java 从入门到进阶之路(二十六)
在之前的文章我们介绍了一下 Java 中的 集合框架中的Collection 的子接口 List,本章我们来看一下 Java 集合框架中的Collection 的子接口 Queue. 在之前我们讲 ...
- 廖雪峰Python教学课后作业---datetime
# -*- coding: utf-8 -*- import re from datetime import datetime, timezone, timedelta def to_timestam ...