架构之——umi框架与dva的使用

首先申明：这是一个由 umi + antdesign + dva 构成的项目，本节内容主要讲述的是，搭建一个做到组件 + 请求接口数据 + 数据管理模型 + mock 数据的简洁、科学、有效的逻辑结构，以及怎么实现它，它有什么优点。

目录结构如下：
customer/list/index.jsx：
action/customer.js 文件：
models/customer.js
services/customer.js：
mock/user.js：
上文的顺序是按照数据活动的逻辑顺序排列的

用户到了 customer/list/index.js （图2）这个界面
钩子函数调用了 action/customer.js （图3）中的方法
触发了 models/customers.js （图4）中的异步函数 *fetchList
- 通过 call() 方法，触发 services/customer.js （图5）中的 request 请求获取到数据并在此返回给 response（注：此处可以是请求的mock 数据，也可以是请求的真实接口的数据）
- 然后通过 put() 方法触发同步函数 saveList() ，将该数据保存到 state 中
在 customer/list/index.js（图2）界面中，通过 connect 方法将 state 数据与组件关联了起来，使该组件可以获取 state 数据，形成了一个完整的数据流。

注意：上文中的 request 是 umi 框架自带的请求方法，已经封装好了，在 src/utils/request 中

注意事项及优点

一种数据活动所需要的各个流程节点的文件名最好是相同的，方便阅读和别人理解，如 customer.js 在 action、models、services、mock 文件夹下都是这个名字
action 中定义常量，如上文中的 CUSTOMER 常量，好处是在组建中调用时，在 models 下的命名空间中都是这个值，如果有修改，只要改变这处常量就好了，方便
上文中的 request 是 umi 框架自带的请求方法，已经封装好了，在 src/utils/request 中

缺点

目前我感觉最大的缺点是，dva 数据流的处理是使用的 generation 封装的，而目前主流思路是 Promise，偏离主流了，可能以后使用 generation 的前端开发者越来越少，后期维护成本高。这里有2篇讲述 generation 与 promise 的文章：generation 与 promise，Async、Promise 和 Generator

架构之——umi框架与dva的使用相关推荐

微服务架构的基础框架选择：Spring Cloud还是Dubbo？
最近一段时间不论互联网还是传统行业,凡是涉及信息技术范畴的圈子几乎都在讨论微服务架构.近期也看到各大技术社区开始组织一些沙龙和论坛来分享Spring Cloud的相关实施经验,这对于最近正在整理Spr ...
微服务架构的基础框架选择
最近一段时间不论互联网还是传统行业,凡是涉及信息技术范畴的圈子几乎都在讨论微服务架构 .近期也看到各大技术社区开始组织一些沙龙和论坛来分享Spring Cloud的相关实施经验,这对于最近正在整理S ...
软件工程课程设计·SOA架构搭建SSM框架的网上商城系统
软件工程课程设计·SOA架构搭建SSM框架的网上商城系统项目简介本系统利用SSM框架.Dubbo框架.Maven模块化开发等技术开发的一个网上商城项目,主要包括订单系统模块.购物车系统模块.搜索系 ...
使用umi快速搭建项目以及如何在umi中使用dva进行状态管理
一.创建umi应用 1.新建umi应用并启动 mkdir umi && cd umi yarn create @umijs/umi-app yarn yarn start 2.umi应 ...
MVC架构和SSM框架的个人理解
MVC架构和SSM框架的个人理解前言一.原生JavaWeb对应MVC架构二.SSM框架对应MVC架构第一块内容(MyBatis): 第二块内容(Spring): 第三块内容(SpringMVC ...
微服务架构的基础框架选择：Spring Cloud还是Dubbo？ - 推酷
微服务架构的基础框架选择:Spring Cloud还是Dubbo? - 推酷微服务架构的基础框架选择:Spring Cloud还是Dubbo? - 推酷 posted on 2016-07-30 2 ...
关于爬虫平台的架构实现和框架的选型(二)--scrapy的内部实现以及实时爬虫的实现...
我们接着关于爬虫平台的架构实现和框架的选型(一)继续来讲爬虫框架的架构实现和框架的选型. 前面介绍了scrapy的基本操作,下面介绍下scrapy爬虫的内部实现架构如下图 1.Spiders(爬虫): ...
怎么在本地运行umi框架的生产模式
怎么在本地运行umi框架的生产模式第一种先使用build进行编译构建, 在webstorm软件上可以在package.json文件上点击运行;或者直接在命令行上敲max build进行构建, 构建 ...
umi框架SSR 服务端获取cookie
umi框架SSR 服务端获取cookie 在项目核心文件server.js 中增加传入自定义参数到ctx中 app.use(async (ctx, next) => { const { html ...

架构之——umi框架与dva的使用

架构之——umi框架与dva的使用相关推荐

最新文章

热门文章