antdpro学习笔记（一）

在玩了一段时间antd后，又发现他还有个antdpro版，相比较而言后者功能更强大一些，对比一下在官网的演示demo就可以发现，后者的功能更偏向于实用方向以及对业务处理方面。而且在代码的实现方式上两者也有很大区别。本文不作比较，只是记录上手antdpro的过程及自己的理解。

1.项目的入口为src/index.js文件：

import './polyfill'; import dva from 'dva'; import createHistory from 'history/createHashHistory'; // user BrowserHistory // import createHistory from 'history/createBrowserHistory'; import createLoading from 'dva-loading'; import 'moment/locale/zh-cn'; import './rollbar'; import './index.less'; // 1. Initialize const app = dva({ history: createHistory(), }); // 2. Plugins app.use(createLoading()); // 3. Register global model app.model(require('./models/global').default); // 4. Router app.router(require('./router').default); // 5. Start app.start('#root'); export default app._store; // eslint-disable-line

2.左侧菜单的配置放在了src/common/menu.js:

import { isUrl } from '../utils/utils'; const menuData = [ { name: 'dashboard', icon: 'dashboard', path: 'dashboard', children: [ { name: '分析页', path: 'analysis', }, { name: '监控页', path: 'monitor', }, { name: '工作台', path: 'workplace', // hideInBreadcrumb: true, // hideInMenu: true, }, ], }, { name: '列表页', icon: 'table', path: 'list', children: [ { name: '查询表格', path: 'table-list', }, { name: '标准列表', path: 'basic-list', }, { name: '卡片列表', path: 'card-list', }, { name: '搜索列表', path: 'search', children: [ { name: '搜索列表（文章）', path: 'articles', }, { name: '搜索列表（项目）', path: 'projects', }, { name: '搜索列表（应用）', path: 'applications', }, ], }, ], }, { name: '结果页', icon: 'check-circle-o', path: 'result', children: [ { name: '成功', path: 'success', }, { name: '失败', path: 'fail', }, ], }, { name: '账户', icon: 'user', path: 'user', authority: 'guest', children: [ { name: '登录', path: 'login', }, { name: '注册', path: 'register', }, { name: '注册结果', path: 'register-result', }, ], }, ]; function formatter(data, parentPath = '/', parentAuthority) { return data.map(item => { let { path } = item; if (!isUrl(path)) { path = parentPath + item.path; } const result = { ...item, path, authority: item.authority || parentAuthority, }; if (item.children) { result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority); } return result; }); } export const getMenuData = () => formatter(menuData);

3.在/src/common/router.js中配置路由，其中第一个参数是一个DvaInstance的实例，是index.js文件中定义的（app）；第二个参数是该页面对应的model(model文件名)，即数据存储的地方；第三个参数是一个函数，返回对应的页面（在routes下面）。

'/': { component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')), }, '/dashboard/analysis': { component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')), },

4.数据操作在src/models/文件夹下新建一个js文件（对应routerConfig中的model），作为这个页面的model，用来定义该页面需要用到的数据，以及一些函数。在model中存在 namespace(命名空间，用来区分不同的页面之间的数据，一般命名空间与文件名相同)，state（该命名空间下的数据），effects（一些异步请求的api方法定义在这里），reducers（用来修改state的一些函数定义在reducers下）。

model类似于mvc结构中控制器的角色，其中主要有五个配置项。
namespace是model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间。

state：state的初始值，优先级低于传给 dva() 的 opts.initialState。

subscription:以 key/value 格式定义 subscription。subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、 history 路由变化等等。

reducers key/value 格式定义 reducer，用于处理同步操作，唯一可以修改 state 的地方。由 action 触发：
 reducers: { save(state, { payload }) { return { ...state, ...payload, }; }, }
effects：以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不直接修改 state哦。由 action 触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。model中调用来自src/services/….下的暴露出来的接口数据函数，从而实现与后端的数据交互。

小结：页面中整体的数据流程如下：