官方項目里的版本為1.0.0夸盟，實際上習慣稱這個版本為 v4，相對之前的版本像捶，改動比較大上陕。請參考：Ant Design Pro v4 is Here
Ant Design Pro 相關(guān)文檔
下載區(qū)塊
在 windows 10 下 npm run fetch:blocks桩砰，總是非常慢，還經(jīng)呈筒荆卡住不動亚隅，而且即使顯示執(zhí)行成功，實際上有好多文件沒有下載完庶溶，導(dǎo)致啟動（npm start）時會報錯煮纵，我遇到的錯誤提示：
ERROR Failed to compile with 1 errors 21:35:10
This relative module was not found:
* ../list/search in ./src/pages/.umi/router.js
ERROR CODE ERR_WEBPACK_MODULE_NOT_FOUND
# ...
原因就是有文件沒有下載下來。修復(fù)這個錯偏螺，找到下面三行行疏，并注釋掉兩行，如下：
//path: '/list/search',
name: 'search-list',
//component: './list/search',
如此修改之后套像，可以運行起來了酿联，但還是有好些頁面找不到。
umi development 404 page
There's not a page yet at /dashboard/analysis.
Create a React.js component in your pages directory at src/pages/dashboard/analysis.js and configure the route in config file then this page will automatically refresh to show the new page component you created.
最佳實踐來了
- 在 CentOS 7 下執(zhí)行同樣的操作夺巩，發(fā)現(xiàn)非常順利贞让。
- 下載好后，把文件復(fù)制到 windows 下再做開發(fā)和研究柳譬。
與后端 api 交互
第一步震桶，設(shè)置代理
找到 config/config.ts 文件的以下內(nèi)容
/*
proxy: {
'/server/api/': {
target: 'https://preview.pro.ant.design/',
changeOrigin: true,
pathRewrite: { '^/server': '' },
},
},
*/
改為
proxy: {
'/api/': {
target: 'http://localhost:89',
changeOrigin: true,
// pathRewrite: { '^/server': '' },
},
},
其中 http://localhost:89 為后端 api 地址，/api/ 為請求 api 的前綴征绎，可根據(jù)自己的項目情況靈活修改蹲姐。
第二步宠能，前端修改
參考官方文檔：和服務(wù)端進行交互
前端請求流程
在 Ant Design Pro 中腐晾，一個完整的前端 UI 交互到服務(wù)端處理流程是這樣的：
- UI 組件交互操作；
- 調(diào)用 model 的 effect翩概；
- 調(diào)用統(tǒng)一管理的 service 請求函數(shù)凫岖；
- 使用封裝的 request.ts 發(fā)送請求江咳；
- 獲取服務(wù)端返回；
- 然后調(diào)用 reducer 改變 state哥放；
- 更新 model歼指。
以登錄為例
- 修改文件 package.json 的啟動參數(shù)：
"start": "set port=96 && umi dev",，執(zhí)行npm start之后甥雕，登錄頁面的地址為：http://localhost:96/user/login踩身，對應(yīng)的頁面文件：src\pages\user\login\index.tsx - 登錄用到的 model 文件:
src\models\login.ts - 登錄觸發(fā)的函數(shù)是：handleSubmit，提交登錄請求 dispatch 代碼為：
dispatch({
type: 'login/login',
payload: {
...values,
type,
},
});
- 其中第一個 login 為 module
src\models\login.ts的 namespace社露。 - 第二個 login 為
src\models\login.ts定義的 effect 下的具體的方法挟阻。
*login({ payload }, { call, put }) {
const response = yield call(fakeAccountLogin, payload);
// ...
- fakeAccountLogin 為調(diào)用的 api，也就是統(tǒng)一管理的 service 請求函數(shù)。在文件：
src\services\login.ts中定義附鸽，代碼如下：
export async function fakeAccountLogin(params: LoginParamsType) {
return request('/api/auth/login', {
method: 'POST',
data: params,
});
}
- 其中
/api/auth/login為后端 api 真正的地址脱拼，訪問的時候會自動拼接成：http://localhost:89/api/auth/login - 登錄的時候，在后端打一個斷點坷备，就可以看到請求參數(shù)了熄浓，不過，參數(shù)格式以及提交方式還需要根據(jù)自己的后端項目做相應(yīng)修改省撑，下面會以 spring boot 項目為例進行講解玉组。
第三步，前后端參數(shù)進行匹配
后端是 spring boot 項目丁侄，提供 restful api惯雳，Controller 定義如下：
/**
* 登錄授權(quán)
*/
@RequestMapping("/api/auth/login")
public ApiResponse login(@RequestBody AuthorizationUserRequest authorizationUserRequest) {
return SysUserService.userLogin(authorizationUserRequest);
}
其中，AuthorizationUserRequest 為接收前臺傳過去的參數(shù)的 POJO鸿摇，定義如下：
@Data
public class AuthorizationUserRequest {
@NotBlank
private String username;
@NotBlank
private String password;
private String type; // 前端需要
}
POJO 的成員名與前臺提交的參數(shù)名和類型一一對應(yīng)即可石景。
前端對請求參數(shù)做統(tǒng)一加工（封裝）
參考：https://github.com/umijs/umi-request/blob/master/README_zh-CN.md
對請求參數(shù)做處理，適配后端 api 對參數(shù)的需要
- 重要：
src\services\login.ts文件中拙吉，將import request from 'umi-request';改為import request from '@/utils/request';潮孽。 - 以下代碼，添加到
src\utils\request.ts文件中筷黔，export default request;之前往史。
// request攔截器, 改變 options.
request.interceptors.request.use((url, options) => {
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
return (
{
options: { ...options },
}
);
});
如此修改之后，后端報錯：
error: "Unsupported Media Type"
message: "Content type 'text/plain;charset=UTF-8' not supported"
path: "/api/auth/login"
status: 415
timestamp: "2019-08-28T17:11:55.511+0800"
trace: "org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain;charset=UTF-8' not supported
...
解決佛舱，增加對 headers 參數(shù)的修改椎例。增加：
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
增加請求頭參數(shù)
request.interceptors.request.use((url, options) => {
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
options.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
...options.headers,
};
return (
{
options: { ...options },
}
);
});
對 token 進行判斷，把 token 添加到請求頭 headers
如果 token 沒有值请祖，同時不是登錄頁面订歪，則直接跳轉(zhuǎn)到登錄頁面。
// request攔截器, 改變 options.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
request.interceptors.request.use((url, options) => {
let tokenSessionStorage: string | null = sessionStorage.getItem('token');
if ((tokenSessionStorage === null || tokenSessionStorage.length === 0) && url !== '/api/auth/login') {
window.location.href = '/user/login';
return;
}
if (tokenSessionStorage === null) {
tokenSessionStorage = '';
}
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
options.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
Authorization: tokenSessionStorage,
...options.headers,
};
// eslint-disable-next-line consistent-return
return {
options: { ...options },
};
});
前端對調(diào)用 api 返回的結(jié)果做統(tǒng)一處理
經(jīng)過測試肆捕，官方文檔中介紹的 response 攔截器刷晋，其中的 response 并不是后端返回來的數(shù)據(jù)，代碼如下：
// response攔截器, 處理response
request.interceptors.response.use((response, options) => {
response.headers.append('interceptors', 'yes yo');
return response;
});
image
不過慎陵，官方文檔中介紹的中間件 request.use眼虱，得到的 res（response） 是后端返回的數(shù)據(jù)，代碼如下（根據(jù)自己的業(yè)務(wù)有修改）：
// 中間件席纽，對請求前捏悬、響應(yīng)后做處理
request.use(async (ctx, next) => {
await next();
const { res } = ctx;
let { token } = res;
if (token !== undefined && token !== null && token.length > 0) {
token = `Bearer ${token}`;
sessionStorage.setItem('token', token);
}
});
image
把 request 攔截器的邏輯寫到 request.use 中間件，讓中間件把請求前和響應(yīng)后的處理邏輯都做了
- 請求前：
- 修改請求參數(shù) options 以適配后端 api胆筒。
- 添加 headers 參數(shù)以適配后端 api邮破。
- 非登錄頁面，需要有 token仆救，如果沒有直接跳轉(zhuǎn)到登錄頁面抒和。
- 非登錄頁面，需要把 token 添加到請求頭彤蔽，后端 api 需要鑒權(quán)摧莽。
- 響應(yīng)后，把后端返回的最新 token 寫到 sessionStorage顿痪。
- 后端 api 在每次請求后镊辕，如果不是 excel 文件下載這類請求，都會把更新后的 token 返回調(diào)用端蚁袭。
- 當然征懈，也可以全局性的對返回結(jié)果進行判斷，如 api 返回錯誤揩悄，要如何提示以及如何處理等卖哎。
// 中間件，對請求前删性、響應(yīng)后做處理
request.use(async (ctx, next) => {
const { req } = ctx;
const { url, options } = req;
let tokenSessionStorage: string | null = sessionStorage.getItem('token');
// eslint-disable-next-line max-len
if ((tokenSessionStorage === null || tokenSessionStorage.length === 0) && url !== '/api/auth/login') {
window.location.href = '/user/login';
return;
}
if (tokenSessionStorage === null) {
tokenSessionStorage = '';
}
options.data = JSON.stringify({
method: url,
jsonStringParameter: JSON.stringify(options.data),
});
options.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
Authorization: tokenSessionStorage,
...options.headers,
};
await next();
const { res } = ctx;
let { token } = res;
if (token !== undefined && token !== null && token.length > 0) {
token = `Bearer ${token}`;
sessionStorage.setItem('token', token);
}
});
登錄驗證
針對后端返回的數(shù)據(jù)亏娜，做相應(yīng)調(diào)整即可。后端返回數(shù)據(jù)類似：
{
"code": 1,
"message": "",
"errMessage": "",
"token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU2NzA3NDQ0NCwiaWF0IjoxNTY3MDQ1NjQ0fQ.Q9LnO-ibBYuBibuo_C7hIIklsK4k1gC-NE6G5yS6AjVJHCZikiSjmCPmcLaBZVUP_TtL5Q2zuw4w69-0IyR7-A",
"responseBody": {
"type": "account",
"status": "ok",
"currentAuthority": [
"admin"
]
}
}
先定義后端返回的代碼：
export const responseCode = {
success: 1,
notLogin: -90,
mustUpdateDefaultPassword: -67,
};
src\models\login.ts 文件修改兩處：
- 修改登錄狀態(tài)的代碼
改為yield put({ type: 'changeLoginStatus', payload: response, });yield put({ type: 'changeLoginStatus', payload: response.responseBody, }); -
if (response.status === 'ok') {改為if (response.code === responseCode.success) {
至此蹬挺，一個完整的登錄過程就介紹完了维贺。后續(xù)就可以專注于業(yè)務(wù)邏輯開發(fā)了。
