Ant Design Pro 报表 ant design pro教程

转载

mob64ca1404baa2 2024-04-29 11:05:26

文章标签 Ant Design Pro 报表 css 数据路由配置 文章分类 架构后端开发

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

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

好吧，先学习下基本的技术咯，主要还是react,dva,这两个框架不熟

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

Ant Design Pro 报表 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
│   └── 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: 全局类公共函数

Ant Design Pro 报表 ant design pro教程_css_02

3、

它里面用到了阿里自己封装的一个库dva，这个库我没有用过，它大概的作用是帮我们把react-router封装了，结合了它自己的redux，因为我不太喜欢，所以其实你用react-router和redux是能实现它相同的效果的。大概给你屡一下流程入口文件index.js，里面创建了dva的实例，挂在了redux类的状态管理，在dva中取名为model的概念，以权限机制动态渲染路由。目录结构在来屡一下，其他都不管，看src：

assets: 你应该也看到了，静态文件，放了他的logo
common: 里面有两个文件，一个

menu.js