antd pro2.0 記錄二:登陸/註冊頁面邏輯,調用後臺

1. 從數據流開始,分析 antdhtml

       最直接的辦法就是看代碼了,首先分析一下登陸過程的數據流向,登陸界面對應的 js 文件在  src/pages/User/Login.js,react

自動忽略全部代碼是啥意思,找到下面的代碼:數據庫

// 登陸提交
handleSubmit = (err, values) => {
  const { type } = this.state;
  const { dispatch } = this.props;
  if (!err) {
    dispatch({
      // dispath 用於派發請求,調用的 model 的 effects
      type: 'login/login',  //調用統一管理的 service 請求函數: 模塊命名空間爲login/下的 login effects請求
      payload: {  //payload: 傳遞過去的參數
        ...values,
        type,
      },
    });
  }
};

嗯,重點看到 login/login  , 這是 react-router 組件跳轉的方式,payload 是參數,這裏的 login/login 跳轉到哪裏?前邊的 login 表明着 model,也就是 src/models 目錄下的文件。具體是怎麼關聯的呢?redux

說明:在 src/.umi (該目錄是 umi 自動生成的) 目錄下的 initDva.js 文件中具備 model 設置:
app.model({ namespace: 'login', ...(require('.../ant-design-pro2.0/src/models/login.js').default) });  //'login', 就表示 src/models 目錄下對應的那個 js 文件(文件中的 namespace='login')  或者 pages/本身目錄下/models 目錄下對應的 js 文件

找到 src/models/login.js 文件,找到:後端

*login({ payload }, { call, put }) {
      // 此處的 payload 對應上面 handleSubmit 中 dispath() 傳過來的參數 payload
      // 請求後臺數據接口
      const response = yield call(fakeAccountLogin, payload);  // yield call(調用後臺接口的方法,傳過去的參數):來調用(數據接口方法 和 請求參數),yield表示同步調用,這個是generator提供的功能
      // 存儲後端接口返回的數據
      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 || '/'));
      }
    },

這樣的話,組件間數據的流向就跟清楚了,要想明白具體是怎麼實現的請先學習 react, react-router, redux api

學完這些,上邊的流程天然就能明白是啥意思了。antd

剩下的就是怎麼獲取後臺數據了,react-router

const response = yield call(fakeAccountLogin, payload);  // 使用call(function,param)獲取後臺數據,後臺返回結果存儲在 response 裏,fakeAccountLogin 是方法,定義在 services 文件夾下的某個文件裏, 該版本在 @/services/api.js 文件中

找到方法的位置,此版本在 services/api.js 文件裏,找到方法:app

export async function fakeAccountLogin(params) {
  return request('/api/login/account', {  // 發送後臺請求:具體的後臺接口,此處接口是 mock 模擬的,查找後 mock/user.js/ "POST /api/login/account"
    method: 'POST',
    body: params,
  });
}

接着,使用 yield put 存儲返回數據:框架

// 調用後臺數據接口
const response = yield call(fakeAccountLogin, payload);  // 調用後端數據服務 fakeAccountLogin
// 獲取服務端返回,存儲數據
yield put({
    type: 'changeLoginStatus',  // reducer處理:調用該文件本身的方法
    payload: response,
});

其中, reducer 處理方法 changeLoginStatus,在 models 下的 reducer 處理處,此處在 src/models/login.js 文件。

reducers: {
    changeLoginStatus(state, { payload }) {
      setAuthority(payload.currentAuthority);  // 本地登陸權限認證
      return {  // 本地 state 數據狀態更新
        ...state,
        status: payload.status,
        type: payload.type,
      };
    },
  },

其中, setAuthority 設置權限認證,utils/authority.js/ function
export function setAuthority(authority) {
  const proAuthority = typeof authority === 'string' ? [authority] : authority;
  return localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));
}

 

接着,登陸成功處理:

// 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 {
          redirect = null;
        }
    }
    yield put(routerRedux.replace(redirect || '/'));  // 路由跳轉
}

其中,reloadAuthorized() , 更新認證, utils/Authorizedd.js/ const func

// Reload the rights component
const reloadAuthorized = () => {
  Authorized = RenderAuthorize(getAuthority());
};

至此,登陸結束。

 

ant design pro 採用 dva 框架 進行管理,全部你要找到 後臺接口,該版本在 mock/user.js 文件中 ,看到

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

在這裏獲取後臺數據。以上就是完整的數據交互的流程 ,下面是學習三週後作的一個例子:

二、demo

主要的功能:用ant design 提供的組件完成對數據庫的曾刪改查的操做:

 

 

參考:http://www.javashuo.com/article/p-wnzbzbim-kw.html

上篇:antd pro2.0 使用記錄一:登陸/註冊/底部版權等設置

下篇:antd pro2.0 使用記錄三:多個接口調用問題

相關文章
相關標籤/搜索