文档章节

antd pro 新增模块的步骤

灯下草虫鸣_
 灯下草虫鸣_
发布于 07/22 17:12
字数 778
阅读 99
收藏 0

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 路由变化等等。

在model中不直接书写发起请求的代码,而是将请求统一放在 /src/services/下,新建一个js文件,存储各种请求的函数,将这些函数暴露出去,在model中引用。

整体的一个运行流程如下:

  • 进入页面,在页面的componentDidMount钩子函数中调用model的effect中的方法

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

  • 获取到服务器返回值,在model的effect中拿到,并且调用model下的reducer

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

© 著作权归作者所有

共有 人打赏支持
灯下草虫鸣_
粉丝 1
博文 123
码字总数 25372
作品 0
杭州
程序员
加载中

评论(1)

南猿
找了好久bug直到看了这篇才想起疏漏,感谢Thanks♪(・ω・)ノ
【译】Ant Design 3.0 驾到

原文地址:Announcing Ant Design 3.0 原文作者:Meck 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:木羽zwwill 校对者:Usey95、 swants Ant Design 3.0 驾到 An...

木羽zwwill
2017/12/07
0
0
ng-alain 发布正式版!

ng-alain是一个基于ng-zorro-antd的企业后台脚手架,目标也非常简单,希望在Angular上面开发企业后台更简单、更快速。github地址是:cipchk/ng-alain。 一直以来对Ant Desig的理念非常喜欢,...

黑魔法
07/26
0
0
喜大普奔,Ant Design of Vue 1.0版本发布🎉🎉🎉

vue-antd-ui是一个站在巨人(antd)肩膀上的UI组件库,有着其它组件库没有的优势,几乎继承了antd所有的功能特点,自带antd各种buff。 vue-antd-ui诞生于17年9月份,18年3月份正式开源,800多次...

zeka
07/24
0
0
搭建Typescript+React项目模板(3) --- 整理项目和杂项

相关文章和阅读顺序 1.项目初始化 2.提升开发体验 3.整理项目和杂项 4.项目打包 5.团队规范 项目地址 前言 在上一篇提升开发体验中,我们一下子集成了一堆插件和功能进去,导致项目结构比教混...

YDJFE
09/27
0
0
Ant Design Pro —— 开箱即用的中后台解决方案

Ant Design Pro 是阿里巴巴开源的一套开箱即用的中台前端/设计解决方案。基于 Ant Design 体系精心设计,提炼自中后台应用的典型页面和场景,使用 React/dva/antd 等前端前沿技术开发。...

王练
2017/11/02
5
0

没有更多内容

加载失败,请刷新页面

加载更多

Java日期和时间获取问题

获取年月日时分秒 Calendar cal = Calendar.getInstance();//获取年int year = cal.get(Calendar.YEAR);//获取月,范围是0-11,最后使用需+1int month = cal.get(Cal...

lanyu96
25分钟前
7
0
Ceph学习笔记2-在Kolla-Ansible中使用Ceph后端存储

环境说明 使用Kolla-Ansible请参考《使用Kolla-Ansible在CentOS 7单节点上部署OpenStack Pike》; 部署Ceph服务请参考《Ceph学习笔记1-Mimic版本多节点部署》。 配置Ceph 以osdev用户登录: ...

LastRitter
28分钟前
6
0
OSChina 周二乱弹 —— 老司机表示右手无处安放

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @花间小酌 :分享李宗盛的单曲《鬼迷心窍》--春风再美也比不上你的笑 《鬼迷心窍》 - 李宗盛 手机党少年们想听歌,请使劲儿戳(这里) 每天早...

小小编辑
40分钟前
225
5
复习2

10月22日任务 awk 中使用外部shell变量 awk 合并一个文件 把一个文件多行连接成一行 awk中gsub函数的使用 awk 截取指定多个域为一行 过滤两个或多个关键词 用awk生成以下结构文件 awk用print...

hhpuppy
48分钟前
5
0
原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
62
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部