ant-design-pro使用总结

ant-design-pro的整个框架结构

├── mock                     # 本地模拟数据
├── public                   # 存放公共资源
├── src
│   ├── assets               # 本地静态资源
│   ├── common               # 导航信息和路由的配置
│   ├── components           # 通用组件的封装，如表格、表单
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局，整个网站的共用导航栏，页脚和主体部分
│   ├── models               # dva model
│   ├── routes               # 浏览器中所看到的页面
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── g2.js                # 可视化图形配置
│   ├── theme.js             # 主题配置
│   ├── index.ejs            # HTML 入口模板，相当于index.html
│   ├── index.js             # 应用入口
│   ├── index.less           # 全局样式
│   └── router.js            # 路由入口
├── tests                    # 测试工具
├── README.md
└── package.json

在以上的目录中，所独立出来的模块，对于第一次使用这个架构的同学来说，比较新奇的就是mock模块，以及src中的分层结构：models、service、routes这三部分和common了，下面的内容就重点介绍这三部分的关系，以及每部分的职责。

commom

目前毕设项目所使用的是v1.3.0这个版本，每个版本可能都会有些不同之处，这个版本中目前将导航和路由分开，分别在menu.js和router.js这两个文件中。

• menu.js

主要设置导航栏的信息，如跳转链接和所显示的文字和图标。如下所示：

{
    name: '题库',  //导航栏上显示的文字
    icon: 'table',  //显示的图标
    path: 'problem',  //跳转的链接
}

• router.js

这个文件很重要，里面涉及了路由，数据还有页面，主要将路由和页面关联，以及将数据和页面关联。如下所示：

'/problem': {
    component: dynamicWrapper(app, ['problemList'], () => import('../routes/ProblemList')
),
},
'/problem/detail/:id': {
    component: dynamicWrapper(app, ['problem', 'user'], () => import('../routes/Problem')),
},

从上面代码可以看出，一个页面可以关联多个数据，这个根据页面的需求来决定，只要是关联的数据都可以在页面中拿到。dynamicWrapper 函数所做的工作就是将页面与model关联起来，其中第二个参数就是model的文件名。

models

在第二部分框架的基本结构中就说了models是属于dva的，所以如果你之前就使用过dva的话，那这个框架就用起来非常得心应手，model是dva的核心部分，ant-design-pro就是针对dva的一次最佳实践。下面看下model文件的主要结构：

import { getProblemInfo } from '../services/api';

export default {
  namespace: 'problem',

  state: {
    problemInfo: {}, // 题目详情
    loading: true,
  },

  effects: {
    *fetchProblemInfo({ payload }, { call, put }) {
      yield put({  //开启页面加载动画
        type: 'changeLoading',
        payload: true,
      });
      const response = yield call(getProblemInfo, payload); // 获取页面数据
      if (response.code === 0) {
            yield put({ //将数据交给reducer处理
              type: 'saveProblemInfo',
              payload: response.data,
            });
          }
        }
      }
      yield put({ //结束页面加载动画
        type: 'changeLoading',
        payload: false,
      });
    },
  },
  
  reducers: {
    saveProblemInfo(state, action) {
      return {
        ...state,
        problemInfo: action.payload, //将数据返回给页面
      };
    },
    changeLoading(state, action) {
      return {
        ...state,
        loading: action.payload,
      };
    },
  },
};

• namespace：该字段就相当于model的索引，根据该命名空间就可以找到页面对应的model;
• effects： 处理所有的异步逻辑，将返回结果以Action的形式交给reducer处理；
• reducers：处理所有的同步逻辑，将数据返回给页面；

补充：在effects中调用了service中所封装的后台接口，该调用方式是ES6中的generator函数，该函数使得异步操作如同同步操作一样。call就相当于一个执行器，在call内部对generator函数进行了处理。

routes

在routes中主要涉及两个操作，第一个就是如何拿到数据，第二个就是如何发送同步或异步请求来更新页面数据。

• 如何拿到数据

在该模块中，就是每个路由所对应的页面，下面主要了解数据是如何在页面中取到的：

import { connect } from 'dva';

@connect(state => ({
  problem: state.problem,
  user: state.user,
}))
export default class Problem extends PureComponent {
  render() {
    const { problem, user } = this.props;
    return (
      <div title="题目">{problem.title}</div>
    );
  }
}

从上面的代码可以看到在页面中导入了dva框架，用dva的connect方法可以拿到所有的state，我们只需要在页面中获取需要的state即可。拿到之后所有的数据都是以props的形式嵌入页面的，也就是我们就像操作props来对待这些数据即可。

• 如何更新页面数据

在和model关联的页面中，都会给页面传入dispatch() 这个方法，该方法就是分发的意思，可以发出一个Action，Action是Redux中的概念，发出这个Action后就会找到页面所对应的model，然后做出相应的处理。如下：

componentDidMount() {
   const { dispatch } = this.props;
   dispatch({
     type: 'problem/fetchProblemInfo',
     payload: {
       id: this.props.match.params.id,
     }，
   });
 }

dispatch中的参数就是一个Action。第一个type字段由两部分组成，前半部分是model的namespace（命名空间），后半部分是该Action的处理位置，对应model中的effects（处理异步逻辑）,或reducers（处理同步逻辑）。

services

这个模块中的逻辑相对比较简单，就是模仿一下后台接口的实现，对请求进行了进一步的封装。

// 获得题目信息
export async function getProblemInfo(params) {
  return request(`/apiv1/problem/get?${stringify(params)}`);
}

// 普通提交
export async function commonSubmit (params) {
  return request('/authv1/submit/common', {
    method: 'POST',
    body: params,
  })
}

在该层将request的结果返回给model层，放在async内部的函数都是同步的。

Mock

Mock的功能就是可以在本地模拟后台的行为，在框架中主要涉及到.roadhogrc.mock.js文件。如果开启代理的话，当发起请求时就会被代理到本地来处理，根据请求方式和URL就可以返回不同的数据。

作者：简心豆
链接：https://www.jianshu.com/p/8a3d311233c3
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。