Ant Design Pro 整理

1. 目录结构

├── config # umi 配置，包含路由，构建等配置
└── config.js # 基础配置，包含路由配置
└── defaultSettings.js #项目的默认配置文件
└── plugin.config.js #
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.js # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json

2. 路由中添加新的页面

pro中使用的是UmiJS插件式路由，在使用的时候新建的配置路由必须设置在 / 默认路由之前，如下：

routes: [
    {
      path: '/user',
      component: '../layouts/UserLayout',
      routes: [
        {
          name: 'register',
          path: '/user/register',
          component: './user/register',
        },
        {
          name: 'login',
          path: '/user/login',
          component: './user/login',
        },
      ],
    },
    {
      path: '/custom',
      component: '../layouts/CustomLayout',
      routes: [
        {
          name: 'custom',
          path: '/custom/test',
          component: './custom/test',
        },
      ],
    },
    {
      path: '/blank',
      component: '../layouts/BlankLayout',
      routes: [
        {
          name: 'default',
          path: '/blank/default',
          component: './blank/default',
        },
      ],
    },
    {
      path: '/',
      component: '../layouts/SecurityLayout',
      routes: [
        {
          path: '/',
          component: '../layouts/BasicLayout',
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/',
              redirect: '/welcome',
            },
            {
              path: '/welcome',
              name: 'welcome',
              icon: 'smile',
              component: './Welcome',
            },
            {
              component: './404',
            },
          ],
        },
        {
          component: './404',
        },
      ],
    },
    {
      component: './404',
    },
  ],

3 less语法总结

4 dva 详解

如果你已经对 React 开发比较熟悉，就会知道子组件的 state 可以上提 (state hoisting)，由父组件来管理：

子组件间接回调到父组件的 setState 的方法来改变父组件的 state；

• 新的 state 通过 props 的形式把再次被子组件获悉。
• 而 dva 可以帮助我们把 state 上提到 所有 React 组件之上，过程是相似的：

页面通过调用 dispatch 函数来驱动 dva model state 的改变；

• 改变后的 dva model state通过 connect 方法注入页面。
• 所谓「注入」从本质上是 控制反转 的一种实现，这种思想在许多的语言框架中都有体现，最著名的莫过于基于 Java 语言的 Spring。组件不再负责管理数据，组件只是通过 connect 向 dva 声明所需数据

首先，注意 dva model 的定义。一个基本的 dva model 最少具备两个成员：namespace 和 state。namespace 来作为一个 model 的唯一标识，state 中就是该 model 管理的数据。

其次，看页面文件的变化：我们删除了组件本身的 state，同时添加了 @connect(mapStateToProps)。connect 是连接 dva 和 React 两个平行世界的关键，一定要理解。

connect 让组件获取到两样东西：1. model 中的数据；2. 驱动 model 改变的方法。

connect 本质上只是一个 javascript 函数，通过 @ 装饰器语法使用，放置在组件定义的上方；

connect 既然是函数，就可以接受入参，第一个入参是最常用的，它需要是一个函数，我们习惯给它命名叫做 mapStateToProps，顾名思义就是把 dva model 中的 state 通过组件的 props 注入给组件。通过实现这个函数，我们就能实现把 dva model 的 state 注入给组件。

mapStateToProps 这个函数的入参 state 其实是 dva 中所有 state 的总合。对于初学 js 的人可能会很疑惑：这个入参是谁给传入的呢？其实你不用关心，你只需知道 dva 框架会适时调用 mapStateToProps，并传入 dva model state 作为入参，我们再次提醒：传入的 state 是个 “完全体”，包含了 所有 namespace 下的 state！我们自己定义的 dva model state 就是以 namespace 为 key 的 state 成员。所以 const namespace = ‘puzzlecards’ 中的 puzzlecards 必须和 model 中的定义完全一致。dva 期待 mapStateToProps 函数返回一个 对象，这个对象会被 dva 并入到 props 中，在上面的例子中我们取到数据后，把它改名为 cardList 并返回（ 注意返回的不是 cardList 本身，而是一个包含了 cardList 的对象！ ），cardList 就可以在子组件中通过 props 被访问到了

/**
 *  解析@connect 的意思
 *  dva中的connect函数：
 *   1.connect 让组件获取到两样东西：1. model 中的数据；2. 驱动 model 改变的方法。
 *   2.connect 本质上只是一个 javascript 函数，通过 @ 装饰器语法使用，放置在组件定义的上方；
 *   3.connect 既然是函数，就可以接受入参，第一个入参是最常用的，它需要是一个函数，我们习惯给它命名叫做 mapStateToProps，顾名思义就是把 dva model 中的 state 通过组件的 props 注入给组件。通过实现这个函数，我们就能实现把 dva model 的 state 注入给组件
 * es5 语法：
 *   const mapStateToProps = (state) => {  // state 是dva model的整体对象，包含所有namespace的model对象
 *       const cardList = state[namespace]; // 根据当前定义的namespace获取我们需要的局部的state中保存的数据对象
 *       return { cardList }; // 把取出的数据对象返回，并且赋值给当前组件的props对象
 *   };
 *   @connect(mapStateToProps) // dva 框架会适时调用 mapStateToProps，并且把返回的数据对象赋值给当前组件的props对象
 * 
 * es6 语法：
 *   @connect((puzzlecards) => { //箭头函数
 *      console.log('所有对象 ==' + puzzlecards); // 这个获取的是所有的dva中model的state对象
 *      const param = puzzlecards.namespace; //获取当前对应的组件中的对象
 *   }
 * 
 *   @connect(({puzzlecards}) => ({ // {puzzlecards} 解构赋值
 *       ...puzzlecards // 属性展开赋值
 *   }))
 * 
 */

dva-loading插件

dva-loading 插件是对异步才作用的；该插件是对reducers新增state数据（loading对象），所以，在页面应该导入对应的数据（也就是loading数据），对其进行操作。

• 当引入dva-loading插件之后，reducers中的state新增了loading对象，如下图所示，在UI Component打印出结果；
• loading对象中有三个变量，effects、global、models。
  
  dva-loading插件详解