antd pro的底層基礎框架使用的是dva,dva採用effect的方式來管理同步化非同步
在dva中主要分為3層 services models components
models層用於存放資料以及對資料進行操作,services層呼叫請求後台介面的方法,components層用於書寫頁面邏輯**
services層
import request from '@/utils/request';
export async function doit(payload) = payload;
let url = `/api/v2/.../$`;
return request(url,)
.then(res => )
.catch(err => console.log(err));
}models層中的effects是與後台互動、處理資料邏輯的地方
import from '../../'
export default ,) })}
}reducers: }) }}
}components層
頁面如果需要使用models層的資料,要用connect進行連線,即在頁面在引入import from 'dva';@connect(state => ()) 通過this.props獲取資料
this.props.dispatch(
})使用mock資料主要包括以下幾步:
1、新增mock介面
2、新增service檔案
3、新增model(需引入service函式)
4、頁面鏈結model
5、頁面呼叫model中的effect函式
6、model中的effects通過reducer中的函式將資料返回到頁面
7、頁面通過this.props獲取資料
具體操作就是在專案根目錄下,mock資料夾中新建record.js檔案,用於存放mock資料
export default, ,]}}
然後在src目錄下的services資料夾中新建乙個record.js檔案,用來建立請求資料的函式,框架已經為我們封裝好了request函式(可能需要我們對request.js檔案進行補充),我們可以直接進行使用
import request from '../utils/request';export async
function
getrecord (payload) )
.then(res =>
.catch(err =>console.log(err))
}
src目錄下的models資料夾是store資料夾,用來定義state
新建record.js檔案
引入我們在services資料夾中建立的請求資料的函式
import from '../services/record';export
default
, effects: )
});}
},reducers: ) }}}
最後在page頁面中,通過this.props就可以得到我們想要的資料
import from 'dva';@connect(state=>()
componentdidmount() = this
.props;
dispatch()
}console.log(
this
.props)就可以得到結果
const = this.props
我的request.js檔案
import fetch from 'dva/fetch';import from 'antd';
import from '@/utils/error';
const checkstatus = response =>
const errortext = error[response.status] ||response.statustext;
let islogin = response.url.search('/unsecure/login') != -1;
if (response.status === 401) : $`);
} else
} else
: $`);
}}
return
response;
};export
default
function
request(url, option) ,
};const newoptions = ;
if( newoptions.method === 'post' ||newoptions.method === 'put' ||newoptions.method === 'delete') ;
if (newoptions.datatype != 'string')
} else
; }
} return
( fetch(url, newoptions)
.then(checkstatus)
.then(response =>
let type = typeof
response;
switch
(type)
return
response.json();
}).then(res =>)
.catch(e =>)
);}error.js檔案
export
default
qt中moc的作用
qt 將源 交給標準 c 編譯器,如 gcc 之前,需要事先將這些擴充套件的語法去除掉。完成這一操作的就是 moc。moc 全稱是 meta object compiler,也就是 元物件編譯器 qt 程式在交由標準編譯器編譯之前,先要使用 moc 分析 c 原始檔。如果它發現在乙個標頭檔案中包含了...
qt中moc的作用
2012 06 08 14 29 qt 將源 交給標準 c 編譯器,如 gcc 之前,需要事先將這些擴充套件的語法去除掉。完成這一操作的就是 moc。moc 全稱是 meta object compiler,也就是 元物件編譯器 qt 程式在交由標準編譯器編譯之前,先要使用 moc 分析 c 原始檔...
qt中moc的作用
qt 將源 交給標準 c 編譯器,如 gcc 之前,需要事先將這些擴充套件的語法去除掉。完成這一操作的就是 moc。moc 全稱是 meta object compiler,也就是 元物件編譯器 qt 程式在交由標準編譯器編譯之前,先要使用 moc 分析 c 原始檔。如果它發現在乙個標頭檔案中包含了...