本文主要是介绍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: 主题？
这个算我比较长的答案了，要看明白这些，掌不掌握dva不是重点，你的react-router和redux还有react自身只要基础够
这篇关于ant-design-pro 学习01的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
