ant design pro入門(2)
ant design pro入門(2)
遲遲沒有更新,很大一部分原因是我目前沒有深入研究裡面用到的dva, redux,webpack等技術。僅停留在用元件堆積頁面的程度,怕誤人子弟,想到自己遇到問題在網上尋找答案,太多的複製貼上,主要你複製貼上也就罷了,關鍵是不起作用的內容。
上節說了假資料,這次想寫一下真實的伺服器請求,獲得資料,渲染頁面等。 (例子來源於工作,有些問題沒有解決,我也會說明。希望有解決方案的人告知,多謝多謝)
傳送請求
上次講到在api.js中傳送請求,模擬了假資料,這次講一下呼叫真實介面進行請求並渲染頁面。
先完整的過一遍請求吧
首先view層傳送請求例如下面的程式碼:
componentDidMount() {
this.fetchListCallback();
}
fetchListCallback = () => {
const { limit, offset } = this.state;
const { dispatch } = this.props;
dispatch({
type: 'brandDiscountManage/fetchList',
payload: {
limit,
offset,
},
callback: (response)=>{
this.setState({
tableData: common(response.data.rows, 'discountId'),
})
},
})
};
這裡呼叫了'brandDiscountManage'名稱空間下的 fetchList 方法。
另外需要在路由層配置一下,引用的檔案。
'/brandDiscountManage': {
component: dynamicWrapper(app, ['brandDiscountManage'], () => import('../routes/brand/DiscountManage/index')),
},
如上程式碼顯示,這裡用到了brandDiscountManage.js。其中的檔案內容如下
(effects裡面就是用到的一些處理請求方法)
import { responseErrorMsg } from '../assets/common'
import { getDiscountList } from '../services/api';
export default {
namespace:'brandDiscountManage',
state:{
},
effects: {
*fetchList({payload, callback}, {call}) {
const response = yield call(getDiscountList, payload)
if(responseErrorMsg(response) && callback ){
callback(response);
}
},
},
reducers: {
},
}
這樣在看上面的程式碼就知道,頁面一進來就呼叫了fetchList方法。這個方法裡面呼叫了yield call (函式名, payload引數)這個方法(暫時不太懂實現原理,一筆帶過),並把響應值response 返回。然後判斷有沒有錯誤,有的話 responseErrorMsg 這個函式裡面做了處理,沒有錯誤的話並且存在callback就會呼叫callback,並把response作為引數傳送。
接著看getDiscountList這個函式函式裡面做了什麼,這個函式存在於'../services/api.js'資料夾裡面
看程式碼
export async function getDiscountList(params) {
return request('/jiuyue/discount/discountList', {
method: 'POST',
body: {
sort: 'create_dts',
order: 'DESC',
...params,
},
});
}
這裡呼叫的是真實藉口,話說真實的藉口應該是域名+地址,這裡面只有地址,別急,這裡面用到了代理。實際上,在剛開始做的時候我直接把網址放到這個request後面,發現上個公司的測試環境的請求地址http:....是可以訪問的,然後當我把現在公司的開發環境的全部地址放上去時候報錯了,找不到這個藉口,我不知道怎麼回事。最終解決方案是用到了上面說的代理。ant design pro用到了webpack環境可以配置代理。
具體是在 .webpackrc.js 檔案中,
具體程式碼如下
const path = require('path');
export default {
entry: 'src/index.js',
extraBabelPlugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
],
env: {
//開發環境
development: {
extraBabelPlugins: ['dva-hmr'],
},
// build 時的生產環境
production: {
'extraBabelPlugins': [
'transform-runtime',
'transform-decorators-legacy',
['import', { 'libraryName': 'antd', 'style': true }],
],
},
},
//設定代理請求
proxy: {
'/jiuyue': {
"target": "http://jiuyue.raykoon.com",
"changeOrigin": true,
"pathRewrite": { "^/jiuyue" : "" }
}
},
alias: {
components: path.resolve(__dirname, 'src/components/'),
},
ignoreMomentLocale: true,
theme: './src/theme.js',
html: {
template: './src/index.ejs',
},
//
disableDynamicImport: true,
//如果你的靜態資源域名和應用域名不同(例如獨立的 cdn 地址),你需要在 .webpackrc 檔案裡用 publicPath 對生產環境的靜態路徑進行配置。
publicPath: '/',
hash: true,
};
上面就是我的原始檔,相信也沒有什麼值得遮蔽的,代理主要用的 proxy 這個屬性的配置。
如果你剛才細心的話就會發現我剛才request後面的藉口前面有一個 /jiueyu 這個字首,在這個代理這裡做了處理,它的大致意思就是說遇到帶有 /jiuyue的網址,就作處理,域名重定向到 http://jiuyue.raykoon.com 這個域名下,並且把 /jiuyue前面全部替換成""
具體一點就是,你本地開啟的是 http://localhost:8000 域名,訪問的時候控制檯傳送的請求是
你會看到請求地址是 http://localhost:8000/jiuyue/discount/discountList,
然而實際上呼叫的介面全地址是:
http://jiuyue.raykoon.com/discount/discountList
這樣就是實現的介面的代理請求,資料的獲取,頁面的渲染。
fetchListCallback = () => {
const { limit, offset } = this.state;
const { dispatch } = this.props;
dispatch({
type: 'brandDiscountManage/fetchList',
payload: {
limit,
offset,
},
callback: (response)=>{
this.setState({
tableData: common(response.data.rows, 'discountId'),
})
},
})
};
最初的那個callback就取到了資料進行setState相關資料,處理頁面。。。
相關文章
- 阿里雲 ANT DESIGN PRO 搭建筆記阿里筆記
- ant design pro 腳手架使用總結
- Ant Design Pro 框架使用篇(持續更新)框架
- ant-design按需載入
- ant-design-pro IE9下報錯集合IE9
- 使用ant design Pro開發專案的小結
- Ant Design 官方《Ant Design 實戰教程》釋出
- Ant Design VueVue
- Ant Design Pro 腳手架+umiJS 實踐總結JS
- 阿里雲 ANT DESIGN PRO 開發筆記 - 元件篇阿里筆記元件
- 漂亮的實力派 Ant Design Pro 2.0 正式釋出
- (二)React Ant Design Pro + .Net5 WebApi:前端環境搭建ReactWebAPI前端
- ant-design-vueVue
- 阿里雲 ANT DESIGN PRO 開發筆記 - 疑難雜症阿里筆記
- ant-ivy入門使用
- FullStack 基於 Laravel + Ant-design-pro 介面美觀漂亮的後臺Laravel
- 我花了 24 小時,“重新"實現了一版ant design pro
- Ant Design Pro & Laravel 開發的漂亮的後臺,歡迎各位使用!Laravel
- (八)React Ant Design Pro + .Net5 WebApi:後端環境搭建-AopReactWebAPI後端
- Ant Design Amiya 釋出啦~???
- 【譯】Ant Design 3.0 駕到
- Ant Design Pro V5 從伺服器請求選單(typescript版)伺服器TypeScript
- (六)React Ant Design Pro + .Net5 WebApi:後端環境搭建-EF CoreReactWebAPI後端
- [react-control-center 番外篇1] ant-design-pro powered by C_CReact
- Ant Design 4.0 正式版初探
- Ant design的Notification原始碼分析原始碼
- Ant Design Vue專案解析-前言Vue
- Ant Design的爬坑之路(一)
- Ant Design 元件 —— Form表單(一)元件ORM
- Vue+Ant Design實現CRUDVue
- Ant Design Pro v4 基於角色的許可權訪問控制實戰教程 #2 初始化專案
- React降級配置及Ant Design配置React
- Ant-design dropdown 原始碼學習原始碼
- 閱讀ant-design原始碼_Button原始碼
- Ant Design 3.X 主題修改
- (五)React Ant Design Pro + .Net5 WebApi:後端環境搭建-Autofac注入+ 泛型倉儲ReactWebAPI後端泛型
- (七)React Ant Design Pro + .Net5 WebApi:後端環境搭建-日誌、異常處理ReactWebAPI後端
- Ant Design UI元件之Select踩坑UI元件