antd 怎么用ajax,react+dva+antd接口调用方式
一丶 安裝
通過 npm 安裝 dva-cli 并確保版本是0.8.1或以上。$?npm?install?dva-cli?-g
$?dva?-v0.8.1
二丶創建新應用
安裝完dva-cli之后，就可以在命令行里訪問到dva命令(不能訪問？)。現在，你可以通過dva new創建新應用。$?dva?new?dva-quickstart
$?npm?start
之后瀏覽器就會打開 http://localhost:8000，你會看到dva的歡迎界面。
三丶使用antd組件庫
通過 npm 安裝 antd 和 babel-plugin-import。babel-plugin-import 是用來按需加載 antd 的腳本和樣式的$??npm??install?antd?babel-plugin-import?--save
編輯.roadhogrc，使 ?babel-plugin-import ?插件生效。"extraBabelPlugins":?[
-????"transform-runtime"+????"transform-runtime",
+????["import",?{?"libraryName":?"antd",?"style":?"css"?}]
],
注：dva-cli 基于 roadhog 實現 build 和 server，更多.roadhogrc的配置詳見 ?roadhog#配置
四丶準備工作以及文件之間的對應關系
首先在創建文件之前(一般安裝的時候系統會自動生成一個默認的services文件下 Example.js 和 model文件下 example.js，兩者都是一一對應)
react項目的推薦目錄結構(如果使用dva腳手架創建，則自動生成如下)|──?/mock/?????????????#?數據mock的接口文件
|──?/src/??????????????#?項目源碼目錄(我們開發的主要工作區域)???|???|──?/components/???#?項目組件(用于路由組件內引用的可復用組件)???|???|──?/routes/???????#?路由組件(頁面維度)?|???|??|──?route1.js
|???|??|──?route2.js???#?根據router.js中的映射，在不同的url下，掛載不同的路由組件|???|??└──?route3.js
|???|──?/models/???????#?數據模型(可以理解為store，用于存儲數據與方法)??|???|??|──?model1.js
|???|??|──?model2.js???#?選擇分離為多個model模型，是根據業務實體進行劃分|???|??└──?model3.js
|???|──?/services/?????#?數據接口(處理前臺頁面的ajax請求，轉發到后臺)???|???|──?/utils/????????#?工具函數(工具庫，存儲通用函數與配置參數)?????|???|──?router.js???????#?路由配置(定義路由與對應的路由組件)??|???|──?index.js???????#?入口文件??|???|──?index.less
|???└──?index.html
|──?package.json???????#?項目信息??└──?proxy.config.js????#?數據mock配置
五丶創建接口文件New.js在services文件下創建New.js, .yield call方法里面的usersService.fetch方法如下(PAGESIZE目前是常量) ? ?New.js代碼如下：import?request?from?'../utils/request';
//?data:?[{Id,?Text,?CreateTime,?UpdateTime,?IsActive?}]export?function?queryScaleMenu(start,?limit)?{????let?body?=?{
start,
limit
}
body?=?JSON.stringify(body);????return?request('http://192.168.10.45/GYHL.News/api/news/menu/query',?{
method:?'POST',????????headers:?{??????????'Content-Type':?'application/json',
},????????body:?body
});
}
export?function?queryScaleNews(start,?limit,?type)?{????let?body?=?{
start,
limit,
type
}
body?=?JSON.stringify(body);????return?request('http://192.168.10.45/GYHL.News/api/news/new/query',?{
method:?'POST',????????headers:?{????????????'Content-Type':?'application/json',
},????????body:?body
});
}然后在models中創建對應的New.js， 因為services下的New.js 和models下的New.js 兩者是react 調入接口和接收接口參數 密不可分的文件。import?*?as?services?from?'./../services/News';export?default?{????namespace:?'News',????state:?{????????detail:[],????????data:?[],
},????subscriptions:?{
steup({dispatch,?history})?{????????????return?history.listen((location)?=>?{????????????????//?console.log(location);
let?start?=?0;????????????????let?limit?=?1000;????????????????let?type?=?"7ad2c8db-ff04-4736-81c9-1b7c6fb276b3";
dispatch({type:?"fetchMenu",payload:{start,limit}});
dispatch({type:?"fetchNews",payload:{start,limit,type}});
})
}
},????effects:?{
*?fetchMenu({?payload:?{?start,?limit,?...rest?}?},{?call,?put?}){????????????var?nextMenu?=?yield?call(services.queryScaleMenu,?start,?limit?);
//?console.log(nextMenu);
var?startNews?=?nextMenu.data.data;????????????yield?put({?type:?"save",?payload:?{?detail:startNews}});
},
*?fetchNews({?payload:?{?start,?limit,?type,?...rest?}},?{?call,?put?}){????????????var?nextNews?=?yield?call(services.queryScaleNews,?start,?limit,?type);????????????//?console.log(nextNews);
var?lastNews??=?nextNews.data.data;????????????yield?put({?type:?"save",?payload:?{?data:lastNews?}});
}
},????reducers:?{
save(state,?action){????????????return?{?...state,?...action.payload}
}
},
};
六丶把components文件下Example.js組件修改一下import?React?from?'react';import?styles?from?'./style.css';import?{?connect?}?from?'dva';function?Example({?dispatch,?data})?{????//?console.log(data);
let?detail?=?[];????if?(data.length?!=?0)?{
detail?=?data;
}??return?(?????
{
detail.length?!=?0?
detail.map(item?=>(??????????????
????????????????????
{item.Memo}
{item.Title}
)):""}????????
);
};
Example.propTypes?=?{
};
export?default?connect(({News})?=>?({...News}))(Example);
七丶在 routes文件下 IndexPage.js進行數據渲染import?React?from?'react';import?Example?from?'../components/Example';import?{?connect?}?from?'dva';import?styles?from?'./IndexPage.css';import?Button?from?'antd/lib/button';import?'antd/lib/button/style';import?Carousel?from?'antd/lib/carousel';import?'antd/lib/carousel/style';import?Tabs?from?'antd/lib/tabs';import?'antd/lib/tabs/style';const?TabPane?=?Tabs.TabPane;function?IndexPage({?dispatch,?detail,?data})?{????let?T1,T2,T3,T4,?I1,I2,I3,I4?=?"";?????if?(detail.length?!=?0)?{
T1?=?detail[0].Text;
T2?=?detail[1].Text;
T3?=?detail[2].Text;
T4?=?detail[3].Text;
I1?=?detail[0].Id;
I2?=?detail[1].Id;
I3?=?detail[2].Id;
I4?=?detail[3].Id;
};//?建議小伙伴不要這樣去渲染，最好是把它寫成循環的方式去寫，因為我的方法是最笨訂的方法(數據多了還是循環實用些)
function?callback(key){????????//?console.log("--------------s")
//?console.log(key);
let?type?=?key;
let?start?=?0;????????let?limit?=?1000;
dispatch({type:?"News/fetchNews",payload:{start,limit,type}});
};????return?(??????
222333444555);
};
IndexPage.propTypes?=?{
};export?default?connect(({News})?=>?({...News}))(IndexPage);
總結：
整體看看我的方法和數據渲染方式不是太好，畢竟是目前還在學習狀態，所以react學習開發之路還很漫長，所以我覺得在這個前端發展迅速的年代中要不停地去汲取精華，去取糟粕。擴充自己前端主流框架的學習及運用。祝愿前端的小伙伴們在未來有個好的發展方向，
作者：sidney_c
鏈接：https://www.jianshu.com/p/55702d52593b
總結
以上是生活随笔為你收集整理的antd 怎么用ajax,react+dva+antd接口调用方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js aes加密_某高考咨询网js逆向分
- 下一篇： nginx 在阿里云怎么安装mysql_