對于java后端開發(fā)，寫前端頁面是非常痛苦的。技術(shù)全面點的能把東西做出來，但UI效果沒法保證。技術(shù)不行的壓根就搞不出來。支付寶開源的ant design簡稱antd雖然很好的解決了這個問題，但是更多的是被前端開發(fā)拿去提升效率。多數(shù)后端開發(fā)面對未知的學習成本，一般都懶得去了解。作為一名后端開發(fā)，我通過一周的學習，把之前做的一個java系統(tǒng)的ui全部用ant design pro重寫。我想把這個過程總結(jié)一下，供更多的java后端開發(fā)人員學習。

在閱讀下面的文章之前，推薦各位閱讀一下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調(diào)用login相關(guān)的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 異步調(diào)用trainingAccountLogin方法，

通過model文件中的import引入api.js文件中的與java后臺通信的方法

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

通過dva框架的封裝，調(diào)用后端java方法變得異常簡單。只需要下面幾行代碼就能完成一個ajax的異步請求，剩下的工作就是把傳給后端的參數(shù)設(shè)置好。

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

這個過程中最重要的就是數(shù)據(jù)的流轉(zhuǎn)，頁面中用戶輸入的用戶名和密碼通過antd封裝的組件傳遞到login頁面的handleSubmit方法中，也就是values對象。values對象是ant design pro封裝的Login組件控制的，點擊submit后就把用戶名和密碼的輸入框中的數(shù)據(jù)封裝成一個json對象，格式如下：

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

這個json對象先被賦值給了values對象，通過handleSubmit方法放到payload對象中，然后調(diào)用dispatch方法、effect里的login方法，最后調(diào)用api中的trainingAccountLogin方法時，payload對象就通過參數(shù)傳遞變成了param對象。最后通過框架中的request方法發(fā)送到j(luò)ava后端處理。

傳給后端的參數(shù)是param對象，這里可以是raw json，也可以是封裝好的FromData。對應的后端代碼有所不同，對于后端開發(fā)來收這不是問題，此處就不細講。

    //接收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)

數(shù)據(jù)發(fā)送到后端處理后，通過http的response返給前端處理。response的數(shù)據(jù)流跟request的正好相反，這些都是有dva控制，我們需要做的就是再model的代碼里面處理返回的response。登錄成功后，后端會返回如下的json結(jié)果

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

前端這里只處理了code字段，只要code是0，就認為登錄成功了，然后就做頁面跳轉(zhuǎn)。由于后端shiro是用的session驗證，response里會將sessionid設(shè)置到cookie中，后續(xù)所有的請求都會自動帶上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 || '/'));
      }