AntD Pro登录页面，调用接口实现与服务器的交互

实现的功能

1. 登录界面样式
2. 判断登录信息是否正确，并给于提示
3. 将填写的用户名和密码传给后台，调用后台接口
4. 后台返回结果，对结果进行判断
5. 正确则进入首页，错误则给于相应的提示

登录界面样式部分

1.登录界面样式部分（src ->pages->user->login.js）

  render() {
    const { login, submitting } = this.props;
    const { type} = this.state;
    
    return (
      

         { this.loginForm = form;}}
        >
          

          
          //点击登录后，判断错误时返回相应的提示
           {login.status === 'error' &&
              login.type === 'account' &&
              !submitting &&
              this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}
              
              //用户名
            
            //密码
             this.loginForm.validateFields(this.handleSubmit)}
            />
          

    //登录提交
          
            
          

        
        
      
    );
  }
}

使用 rules={[{required: true,message: formatMessage({ id: ‘validation.password.required’ }), },]}进行输入框为空判断

注：pro 通过 umi 插件 umi-plugin-locale 来实现全球化的功能，并且默认开启。 umi-plugin-locale 约定 在src/locales 中引入 相应的 js，例如 en-US.js 和 zh-CN.js， 并且在 config/config.js 中进行了相关的配置。
因此，在zh-CN.js中进行文字内容的编写设置。

点击提交，发送请求

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

      dispatch({
        type: 'login/login',
        payload: {
          ...values,
          type,
        },
      }); 
      }
  };

server层接收请求，发送请求，调用后端接口

export async function fakeAccountLogin(params) {
//params为前端发送的数据
  console.log(params);
  return request('/api/login/account', {
    method: 'POST',
    body: params,
  });
}

前端发送的数据为params，发送的post请求，携带的内容为params。

model层接收服务器返回的数据，并对数据进行处理

 *login({ payload }, { call, put }) {
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully
      if (response.status === 'ok') {
        reloadAuthorized();
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params;
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = redirect;
            return;
          }
        }
        yield put(routerRedux.replace(redirect || '/'));
      }
    },

此时后台应发送的数据有：
1，登录信息校验成功，返回status为ok
2.用户权限currentAuthority

注意：该框架中把权限设置单独创建了组建，为utils->authority.js，在这个js中设置了权限判断，没有权限则会进行重定向。因此需要有用户权限，对后端发送的请求进行相应的解析。

前端页面返回结果，渲染界面

**1.**如果校验失败，后端返回失败，前端则进行错误信息提示

 {login.status === 'error' &&
              login.type === 'account' &&
              !submitting &&
              this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}

  renderMessage = content => (
    
  );

2.成功则页面跳转到首页。

总结

1.需要对前端请求后端数据的过程有一定的了解
2.对发送的请求数据以及接收的数据进行相应的处理，数据解析成为自己前端想要渲染的数据。
3.yield call() 来调用（数据接口方法 和 请求参数），yield表示同步调用，这个是generator提供的功能。
4.server里面定义自己的request的请求
5.Fetch发送数据