antdpro 寫后台管理系統的坑


1.antd-pro 配置請求代理

新項目中使用antd-pro框架,所以接下來會寫一些關於antd-pro的踩坑

antd-pro中用的是fetch來實現http請求,封裝成功一個request方法,在本地聯調的時候需要該代理,通過本地服務器來請求后端服務,在部署到線上時需要使用nginx做反向代理

需要在config/config.js 添加下面代碼

proxy: {
'/api/': { //匹配所有以/api/為開頭的接口
target: 'http://xxxx/', //后端服務器地址
changeOrigin: true,
pathRewrite: { '^/api/': '' }, //因為我們項目的接口前面並沒有api 所以直接去掉
},
},
關於changeOrigin這個選項:

如果后端服務托管在虛擬主機的時候,也就是一個IP對應多個域名,需要通過域名區分服務,那么參數changeOrigin必須為true(默認為false),這樣才會傳遞給后端正確的Host頭,虛擬主機才能正確回應。否則http-proxy-middleware會原封不動將本地HTTP請求發往后端,包括Host: localhost而不是Host: httpbin.org,只有正確的Host才能使用虛擬主機,不然會返回404 Not Found。

一般情況下直接設置為true就可以了

可能會遇到掛設代理還是無法請求真實接口的情況,可以用 npm run start:no-mock 試試看

2.打包配置(配置二級目錄路由)

hash

history

3.使用overflow:scroll;(windows系統會有問題)

::-webkit-scrollbar {
/*隱藏滾輪*/
display: none;
}
4.登陸實現驗證碼局部刷新

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM