当前位置: 首页>移动开发>正文

Ant Design Pro 报表 ant design pro教程

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教程,Ant Design Pro 报表 ant design pro教程_Ant Design Pro 报表,第1张

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教程,Ant Design Pro 报表 ant design pro教程_Ant Design Pro 报表_02,第2张

3、

它里面用到了阿里自己封装的一个库dva,这个库我没有用过,它大概的作用是帮我们把react-router封装了,结合了它自己的redux,因为我不太喜欢,所以其实你用react-routerredux是能实现它相同的效果的。大概给你屡一下流程 入口文件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-routerredux还有react自身只要基础够


https://www.xamrdz.com/mobile/47b1938619.html

相关文章: