antd pro 新增模块的步骤

最新推荐文章于 2023-03-07 10:03:59 发布

SimminonGarcia

最新推荐文章于 2023-03-07 10:03:59 发布

阅读量1.7k

点赞数

文章标签： python 网络测试

原文链接：https://my.oschina.net/u/3672057/blog/1860993

版权

2019独角兽企业重金招聘Python工程师标准>>>

index.js是整个项目的入口文件。

// 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

找到/src/common/menu.js中进行菜单配置，

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

'/': {
      component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
    },

dynamicWrapper：

// wrapper of dynamic
const dynamicWrapper = (app, models, component) => {
  // register models
  models.forEach(model => {
    if (modelNotExisted(app, model)) {
      // eslint-disable-next-line
      app.model(require(`../models/${model}`).default);
    }
  });

  // () => require('module')
  // transformed by babel-plugin-dynamic-import-node-sync
  if (component.toString().indexOf('.then(') < 0) {
    return props => {
      if (!routerDataCache) {
        routerDataCache = getRouterData(app);
      }
      return createElement(component().default, {
        ...props,
        routerData: routerDataCache,
      });
    };
  }
  // () => import('module')
  return Loadable({
    loader: () => {
      if (!routerDataCache) {
        routerDataCache = getRouterData(app);
      }
      return component().then(raw => {
        const Component = raw.default || raw;
        return props =>
          createElement(Component, {
            ...props,
            routerData: routerDataCache,
          });
      });
    },
    loading: () => {
      return <Spin size="large" className="global-spin" />;
    },
  });
};

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

model类似于mvc结构中控制器的角色，其中主要有五个配置项。

namespace
model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间。
state
state的初始值，优先级低于传给 dva() 的 opts.initialState。
reducers key/value 格式定义 reducer，用于处理同步操作，唯一可以修改 state 的地方。由 action 触发
effects
以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不直接修改 state。由 action 触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。
subscrip
以 key/value 格式定义 subscription。subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、 history 路由变化等等。