目录结构
├── config # umi 配置，包含路由，构建等配置├── mock # 本地模拟数据├── public│ └── favicon.png # Favicon├── src│ ├── assets # 本地静态资源│ ├── components # 业务通用组件│ ├── e2e # 集成测试用例│ ├── layouts # 通用布局│ ├── models # 全局 dva model│ ├── pages # 业务页面入口和常用模板│ ├── services # 后台接口服务│ ├── utils # 工具库│ ├── locales # 国际化资源│ ├── global.less # 全局样式│ └── global.js # 全局 JS├── tests # 测试工具├── README.md└── package.json
具体流程
dva版
1、定义路由routes/～，添加路由信息到路由表(src/router.js)
2、编写UI Component
3、定义Modal，src/index.js载入记录
4、connent连接 (route/~连接)
5、增加初始数据(src/index.js)
ant design-pro进阶版
1、定义路由pages/～，添加路由信息到路由表()
2、编写UI Component
3、定义Modal/~，src/global.js载入记录
4、connent连接 (pages/~连接)
5、增加初始数据(src/global.js)
前端请求流程/交互服务端
1、UI组件交互操作
2、调用modal的 effect
3、调用统一管理的service 请求函数
4、使用封装的utils/request.js 发送请求
5、获取服务端返回
6、调用(src/pages或modal)reducers 改变 state
7、更新 modal
ant-design-pro基于react、redux、saga、dva、umi等
models/menus.js
dva精简流程：
1、定义路由 routes或pages，添加路由信息到route.config路由表
2、编辑组件component
3、定义modal
4、路由pages连接connent组件和数据层modal
主要涉及的模块/功能：
- 路由。路由管理通过约定的语法根据在 router.config.js 中配置路由。 目前脚手架中所有的路由都通过 router.config.js 来统一管理，在 umi 的配置中我们增加了一些参数， 如 name，icon，hideChildrenInMenu，authority，来辅助生成菜单。其中：name 和 icon分别 代表生成菜单项的文本和图标。hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查 看 分步表单 的配置。hideInMenu 可以在菜单中不展示这个路由，包括子路由。效果可以查看 exception/trigger页面。authority 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示。
- 菜单。菜单生成 根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。菜单根据 router.config.js 生成，具体逻辑在 src/models/menu.js 中的 formatter 方法实现。
- 面包屑。面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。面包屑由 PageHeaderWrapper 实现，MenuContext 将 根据 MenuData 生成的 breadcrumbNameMap 通过 props 传递给了 PageHeader，如果你要做自定义的面包屑，可以通过修改传入的 breadcrumbNameMap 来解决。src/component/PageHeader/breadcrumb.js
dva架构
#图解一: React 表示法
按照 React 官方指导意见, 如果多个 Component 之间要发生交互, 那么状态(即: 数据)就维护在这些 Component 的最小公约父节点上, 也即是<App/><TodoList/> <Todo/>以及<AddTodoBtn/>本身不维持任何 state, 完全由父节点<App/>传入 props 以决定其展现, 是一个纯函数的存在形式, 即:Pure Component#图解二: Redux 表示法
React 只负责页面渲染, 而不负责页面逻辑, 页面逻辑可以从中单独抽取出来, 变成 store
与图一相比, 几个明显的改进点:
- 状态及页面逻辑从
<App/>里面抽取出来, 成为独立的 store, 页面逻辑就是 reducer <TodoList/>及<AddTodoBtn/>都是 Pure Component, 通过 connect 方法可以很方便地给它俩加一层 wrapper 从而建立起与 store 的联系: 可以通过 dispatch 向 store 注入 action, 促使 store 的状态进行变化, 同时又订阅了 store 的状态变化, 一旦状态有变, 被 connect 的组件也随之刷新- 使用 dispatch 往 store 发送 action 的这个过程是可以被拦截的, 自然而然地就可以在这里增加各种 Middleware, 实现各种自定义功能, eg: logging
这样一来, 各个部分各司其职, 耦合度更低, 复用度更高, 扩展性更好
#图解三: 加入 Saga
上面说了, 可以使用 Middleware 拦截 action, 这样一来异步的网络操作也就很方便了, 做成一个 Middleware 就行了, 这里使用 redux-saga 这个类库, 举个栗子:
- 点击创建 Todo 的按钮, 发起一个 type == addTodo 的 action
saga 拦截这个 action, 发起 http 请求, 如果请求成功, 则继续向 reducer 发一个 type == addTodoSucc 的 action, 提示创建成功, 反之则发送 type == addTodoFail 的 action 即可
#图解四: Dva 表示法
有了前面的三步铺垫, Dva 的出现也就水到渠成了, 正如 Dva 官网所言, Dva 是基于 React + Redux + Saga 的最佳实践沉淀, 做了 3 件很重要的事情, 大大提升了编码体验:把 store 及 saga 统一为一个 model 的概念, 写在一个 js 文件里面
- 增加了一个 Subscriptions, 用于收集其他来源的 action, eg: 键盘操作
- model 写法很简约, 类似于 DSL 或者 RoR, coding 快得飞起✈️
环境搭建
安装#
从 GitHub 仓库中直接安装最新的脚手架代码。$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project$ cd my-project
目录结构#
完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。├── config # umi 配置，包含路由，构建等配置├── mock # 本地模拟数据├── public│ └── favicon.png # Favicon├── src│ ├── assets # 本地静态资源│ ├── components # 业务通用组件│ ├── e2e # 集成测试用例│ ├── layouts # 通用布局│ ├── models # 全局 dva model│ ├── pages # 业务页面入口和常用模板│ ├── services # 后台接口服务│ ├── utils # 工具库│ ├── locales # 国际化资源│ ├── global.less # 全局样式│ └── global.js # 全局 JS├── tests # 测试工具├── README.md└── package.json
本地开发#
安装依赖。$ npm install
如果网络状况不佳，可以使用 cnpm 进行加速。
$ npm start
启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。
低版本迁移
构建-发布
构建和发布
若有收获，就点个赞吧
0 人点赞
