ant-design-pro 学习01

本文主要是介绍ant-design-pro 学习01，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、开始学习ant-design-pro，安装啥的自动忽略，参考文档：https://pro.ant.design/docs/getting-started-cn

根据文档学习，添加页面，新增组件都没问题，可以跟着做，但是到了和服务器交互时就有点蒙了，因为ant-design-pro采用了dva框架实现，前段使用react技术，对于只有后台开发经验的我还停留在springmvc 的工作模式上，对于ant-design-pro的数据流向，工作流程确实很难看懂。

好吧，先学习下基本的技术咯，主要还是react,dva,这两个框架不熟，建议参考这篇文章：

https://juejin.im/entry/5852184b128fe1006b5454c6

了解了react，dva自然数据流向就很好理解了，下面以数据流图的方式来分析ant-design-pro的数据流程：

2、在解释上图之前，先看下项目的目录：（目录太大了直接截图）

当有url请求时，首先从common文件夹下的router.js处理请求，然后到具体的路由组件router component中，把消息传到model中做处理，model再把消息传到server中，server调用api，api根据调用的方式获得数据，然后返还给server、、、ok,初步的流程就是这样。

mock: 模拟数据，相当于从数据库中操纵数据，额其他的文字太多，直接复制别人的了

├── assets
│   └── yay.jpg
├── components
│   └── Example.js
├── index.css
├── index.html
├── index.js
├── models
│   └── example.js
├── router.js
├── routes
│   ├── IndexPage.css
│   └── IndexPage.js
├── services
│   └── example.js
├── tests
│   └── models
│       └── example-test.js
└── utils└── request.js

assets: 我们可以把项目 assets 资源丢在这边
components: 纯组件，在 dva 应用中 components 目录中应该是一些 logicless 的 component, logic 部分均由对应的 route-component 来承载。在安装完 dva-cli 工具后，我们可以通过 dva g component componentName 的方式来创建一个 component。
index.css: 首页样式
index.html: 首页
index.js: dva 应用启动 五部曲，这点稍后再展开
models: 该目录结构用以存放 model，在通常情况下，一个 model 对应着一个 route-component，而 route-component 则对应着多个 component，当然这取决于你如何拆分，个人偏向于尽可能细粒度的拆分。在安装完 dva-cli 工具后，我们可以通过 dva g model modelName 的方式来创建一个 model。该 model 会在 index.js 中自动注册。
router.js: 页面相关的路由配置，相应的 route-component 的引入
routes: route-component 存在的地方，在安装完 dva-cli 工具后，我们可以通过 dva g route route-name 的方式去创建一个 route-component，该路由配置会被自动更新到 route.js 中。route-component 是一个重逻辑区，一般业务逻辑全部都在此处理，通过 connect 方法，实现 model 与 component 的联动。
services: 全局服务，如发送异步请求
tests: 测试相关
utils: 全局类公共函数

3、

它里面用到了阿里自己封装的一个库dva，这个库我没有用过，它大概的作用是帮我们把react-router封装了，结合了它自己的redux，因为我不太喜欢，所以其实你用react-router和redux是能实现它相同的效果的。

大概给你屡一下流程入口文件index.js，里面创建了dva的实例，挂在了redux类的状态管理，在dva中取名为model的概念，以权限机制动态渲染路由。

目录结构在来屡一下，其他都不管，看src：

assets: 你应该也看到了，静态文件，放了他的logo
common: 里面有两个文件，一个menu.js放主页面左侧菜单栏，一个router.js用来动态渲染路由
components: 组件，不说了
e2e: 测试相关，你估计暂时用不到
layouts: 这个比较重点，他主要分为 basiclayout 和 userlayout 两种，前面是需要登录之后，后面是用户登录注册相关的布局，路由渲染也是基于布局的
models：状态存储相关
routes：这个就是所有的真实展现的目录
services：数据请求相关的
utils: 一些工具函数，包括权限验证，持久化存储之类的。
index.ejs：服务端渲染
index.js: 入口文件
index.less: 根样式
rollbar.js: 一个外部插件
router.js: 这个比较重要，路由的配置，和渲染主要是这个
theme.js: 主题？