【记录】react+dva+umi+antd快速入门开发流程

使用 React+Dva+Umi+AntD 快速开发数据流程

##[使用ant design pro开源架构：ant-design-pro]

#####[学习记录]#####

流程：使用antd-> 定义路由-> 定义local（语言文字，用于先显示菜单栏）-> 编写UI Component-> （定义mock数据）-> 定义services -> 定义Model-> 在pages的页面中dispatch，connect起来-> 构建应用

完整流程参考示例步骤：  (自己写的自定义组件TreeCustom，改官方文件代码的数据流程也是一样的，只要几个文件夹找对就行，如components，pages，services等等 )

主要关联的js文件如下：

config/router.config.js

components/TreeCustom/index.js

pages/list/TableList.js

pages/list/models/rule.js

services/api.js

mock/customData.js

locales/zh-CN/menu.js

1.在config目录的config/router.config定义路由

[如图1]

img1

再根据router.config定义menu.js的配置。

还需要定义页面导航栏显示。（如果使用语言切换，需要对应配置每个语言，现在暂时只定义简体中文，即zh-CN文件中的menu.js，其它语言同理设置对应的menu.js，结构一样的，可以自己尝试）

注：同路由中配置的name参数一致，menu.xx.xxx的menu是固定路径地址，不用修改。

[如图2]

img2

2.定义路由跳转的页面（此例是定义公共的tree组件，然后在pages中的页面里引用）

[如图3，4]

img3

img4

3.如果需要引用公共的components组件，就写components组件。（并在pages页面中引入，如上图3，4的TreeGustom）

[如图5，6]

img5

img6

4.services中定义后端的接口地址 ，stringify参数string化。

[如图7，8]

img7

img8

并在mock中定义数据和导出的接口地址（tip：mock文件这是本地开发的模拟数据，联调的时候跳过这步）

Mock数据如下：

[如图9，10]

img9

img10

5.models定义：      然后引用在services中定义的接口。然后在pages/models中定义models；或者有使用全局的models，那么需要在models文件下，定义全局使用的model。并和接口连接起来使用。

[如图11]

img11

（state和type需对应下面的reducers）

[如图12，13，14]

img12

img13

img14

6.然后在pages的页面中dispatch定义的model。（这步定义好了，可以在第5步中，在*fetchList中的put后面，console.log(response);就能打印除模拟的数据了）。type：为models中的rule.js定义的*getTreeData方法。

[如图15]

img15

在dispatch之后，就能通过this.props获取到返回的数据在页面中使用了。（即第5步中定义的models的state）

[如图16，17]

img16

img17

键rule：是第5步中models的namespace的值，值value是models中定义的state值。

[如图18，19]

img18

img19