學習 Antd Pro 前後端分離

最近學習reactjs ，前些年用rn開發過移動端，入門還算輕鬆。現在打算使用 antd pro 實現前後端分離。要使用antd pro這個腳手架，必須熟悉 umi、dva、redux-saga 等相關知識。

基礎知識及目錄結構可以先看官方文件：

官方介紹：

ant design pro 是乙個企業級中後台前端/設計解決方案，我們秉承 [ant design]( 的設計價值觀，致力於在設計規範和基礎元件的基礎上，繼續向上構建，提煉出典型模板/業務元件/配套設計資源，進一步提公升企業級中後台產品設計研發過程中的『使用者』和『設計者』的體驗。

2. 網路請求庫新增鉤子

鉤子的目的主要是對請求頭設定（如：新增 token，api服務端通過token鑑權，當然您的token格式也可以是jwt，我這裡是自己加密後的字串）和對請求返回的資料實現攔截過濾特殊處理。

antd pro 使用的是 umi-request.js 這個庫，其實也是基於 fetch 封裝。一開始用axios替換了request.js裡面。後來發現umi-request 也很容新增鉤子，這裡在umi-request上新增。

新增攔截鉤子：

src\utils\request.js 調整後**

/*
* * request 網路請求工具 */
import from 'umi-request';
import from 'antd';
import router from 'umi/router';
const codemessage =;/**
* 異常處理程式 */
const errorhandler = error => } =error;
const errortext = codemessage[response.status] ||response.statustext;
const =response;
if (status === 401) );
//@hack
/*eslint-disable no-underscore-dangle 
*/ type: 'login/logout',
});return
; }
notification.error(: $`,
description: errortext,
});//
environment should not be used
if (status === 403) 
if (status <= 504 && status >= 500) 
if (status >= 404 && status < 422) 
};/*
* * 配置request請求時的預設引數 */
const request =extend();
request.interceptors.request.use(async (url, options) =>;
if(token) 
return
( ,});
})request.interceptors.response.use((response, options) =>
return
response;
});export 
default request;

3. 許可權及登入調整前後臺整理中，後在寫。。。。。

學習 Antd Pro 前後端分離

前後端分離

前後端分離

前後端分離

相關推薦