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的数据流程:
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
: 全局类公共函数
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
自身只要基础够