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进行改变,页面自动进行渲染

 

你可能感兴趣的:(antd,React)