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/....下的暴露出来的接口数据函数，从而实现与后端的数据交互。

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

• 进入页面后匹配相应的路径，在页面的componentDidMount钩子函数中调用model的effect中的方法（dispatch）

• 该方法调用service文件夹下的统一管理的请求函数

• 获取到服务器返回值，在model的effect中拿到数据data，并且通过type--调用model下的reducer

• 调用model的reducers对请求的数据进行处理，将model的state进行改变，页面自动进行渲染