ant-design-pro 从入门到使用

1、学习经历

        用了两周的时间学习nodejs，nodejs是一个脚本语言，有过js基础，所以上手很简单。首先看nodejs开发文档，基本的语法自己也都实现了一遍。然后，第二周用websocket 和串口通信，实现了点击屏幕监控信号灯的功能。第三周开始看ant design pro ,好吧，开始确实无从下手，这里就简单分享下看懂ant-design-pro 并使用的过程。

2、从数据流开始，分析antd

       最直接的办法就是看代码了，首先分析一下登录过程的数据流向，登录界面对应的js文件在  src/routes/User/Login.js,

自动忽略所有代码是啥意思，找到下面的代码：

handleSubmit = (err, values) => {
  const { type } = this.state;
  const { dispatch } = this.props;
  if (!err) {
    dispatch({
      type: 'login/login',
      payload: {
        ...values,
        type,
      },
    });
  }
};

嗯，重点看到 login/login , 这是react-router组件跳转的方式，payload是参数，这里的login/login跳转到哪里？前边的login代表着model，也就是src/models目录下的models。具体是怎么关联的呢？在src/common目录下的router.js文件中设置：

'/user/login': {
 component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),

嗯，['login'] , 就表示models 目录下对应的那个js文件（文件中的namespace='login')。然后就找到models文件夹下的对应login.js

找到：

    *login({ payload }, { call, put }) {//fakeAccountLogin
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully
      if (response.status === 'ok') {
        reloadAuthorized();
        yield put(routerRedux.push('/'));
      }
    },

这样的话，组件间数据的流向就跟清楚了，要想明白具体是怎么实现的请先学习 react,react-router ,redux

学完这些，上边的流程自然就能明白是啥意思了。

剩下的就是怎么获取后台数据了，

const response = yield call(fakeAccountLogin, payload);  使用call（function，param）和获取后台数据，fakeAccountLogin是方法，定义在service文件夹下

export async function fakeAccountLogin(params) {
  return request('/api/login/account', {
    method: 'POST',
    body: params,
  });
}

ant design pro 采用dva框架进行管理，所有你要到根目录找到.roadhogrc.mock.js 文件 ，看到

POST /api/login/account': (req, res) => {
   //
  }

在这里获取后台数据。以上就是完整的数据交互的流程 ，下面是学习三周后做的一个例子：

3、demo

主要的功能：用ant design 提供的组件完成对数据库的曾删改查的操作：