基于ant design pro和spring boot、shi

对于java后端开发，写前端页面是非常痛苦的。技术全面点的能把东西做出来，但UI效果没法保证。技术不行的压根就搞不出来。支付宝开源的ant design简称antd虽然很好的解决了这个问题，但是更多的是被前端开发拿去提升效率。多数后端开发面对未知的学习成本，一般都懒得去了解。作为一名后端开发，我通过一周的学习，把之前做的一个java系统的ui全部用ant design pro重写。我想把这个过程总结一下，供更多的java后端开发人员学习。

在阅读下面的文章之前，推荐各位阅读一下ant design的官方文档，对基本的概念有所了解。
官方教程

登录页面文件位于：src\pages\User\Login.js

页面登录按钮点击事件代码：

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

通过dva调用login相关的model中的方法（文件路径src\models\login.js）

    *login({ payload }, { call, put }) {
      const response = yield call(trainingAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully

    },

通过第二行 yield call 异步调用trainingAccountLogin方法，

通过model文件中的import引入api.js文件中的与java后台通信的方法

import { trainingAccountLogin,  } from '@/services/api';

通过dva框架的封装，调用后端java方法变得异常简单。只需要下面几行代码就能完成一个ajax的异步请求，剩下的工作就是把传给后端的参数设置好。

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

这个过程中最重要的就是数据的流转，页面中用户输入的用户名和密码通过antd封装的组件传递到login页面的handleSubmit方法中，也就是values对象。values对象是ant design pro封装的Login组件控制的，点击submit后就把用户名和密码的输入框中的数据封装成一个json对象，格式如下：

{
  username: "admin",
  password: "123456"
}

这个json对象先被赋值给了values对象，通过handleSubmit方法放到payload对象中，然后调用dispatch方法、effect里的login方法，最后调用api中的trainingAccountLogin方法时，payload对象就通过参数传递变成了param对象。最后通过框架中的request方法发送到java后端处理。

传给后端的参数是param对象，这里可以是raw json，也可以是封装好的FromData。对应的后端代码有所不同，对于后端开发来收这不是问题，此处就不细讲。

    //接收FormData的后端代码
    @PostMapping("/login")
    @ResponseBody
    public ResponseBo login(String username, String password, String code, Boolean rememberMe)
    //接收raw json的后端代码
    @PostMapping("/login/account")
    @ResponseBody
    public ResponseBo login(@RequestBody User user)

数据发送到后端处理后，通过http的response返给前端处理。response的数据流跟request的正好相反，这些都是有dva控制，我们需要做的就是再model的代码里面处理返回的response。登录成功后，后端会返回如下的json结果

    {"msg":"操作成功","code":0,"currentAuthority":"admin"}

前端这里只处理了code字段，只要code是0，就认为登录成功了，然后就做页面跳转。由于后端shiro是用的session验证，response里会将sessionid设置到cookie中，后续所有的请求都会自动带上cookie，java后端就认为这些请求是合法的请求。

     //（文件路径template\src\models\login.js）
     // Login successfully
      if (response.code === 0) {
        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 || '/'));
      }