一丶 安裝

通過 npm 安裝 dva-cli 并確保版本是0.8.1或以上。$?npm?install?dva-cli?-g

$?dva?-v0.8.1

二丶創(chuàng)建新應(yīng)用

安裝完dva-cli之后，就可以在命令行里訪問到dva命令(不能訪問？)。現(xiàn)在，你可以通過dva new創(chuàng)建新應(yīng)用。$?dva?new?dva-quickstart

$?npm?start

之后瀏覽器就會(huì)打開 http://localhost:8000，你會(huì)看到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 實(shí)現(xiàn) build 和 server，更多.roadhogrc的配置詳見 ?roadhog#配置

四丶準(zhǔn)備工作以及文件之間的對(duì)應(yīng)關(guān)系

首先在創(chuàng)建文件之前(一般安裝的時(shí)候系統(tǒng)會(huì)自動(dòng)生成一個(gè)默認(rèn)的services文件下 Example.js 和 model文件下 example.js，兩者都是一一對(duì)應(yīng))

react項(xiàng)目的推薦目錄結(jié)構(gòu)(如果使用dva腳手架創(chuàng)建，則自動(dòng)生成如下)|──?/mock/?????????????#?數(shù)據(jù)mock的接口文件

|──?/src/??????????????#?項(xiàng)目源碼目錄(我們開發(fā)的主要工作區(qū)域)???|???|──?/components/???#?項(xiàng)目組件(用于路由組件內(nèi)引用的可復(fù)用組件)???|???|──?/routes/???????#?路由組件(頁面維度)?|???|??|──?route1.js

|???|??|──?route2.js???#?根據(jù)router.js中的映射，在不同的url下，掛載不同的路由組件|???|??└──?route3.js

|???|──?/models/???????#?數(shù)據(jù)模型(可以理解為store，用于存儲(chǔ)數(shù)據(jù)與方法)??|???|??|──?model1.js

|???|??|──?model2.js???#?選擇分離為多個(gè)model模型，是根據(jù)業(yè)務(wù)實(shí)體進(jìn)行劃分|???|??└──?model3.js

|???|──?/services/?????#?數(shù)據(jù)接口(處理前臺(tái)頁面的ajax請(qǐng)求，轉(zhuǎn)發(fā)到后臺(tái))???|???|──?/utils/????????#?工具函數(shù)(工具庫，存儲(chǔ)通用函數(shù)與配置參數(shù))?????|???|──?router.js???????#?路由配置(定義路由與對(duì)應(yīng)的路由組件)??|???|──?index.js???????#?入口文件??|???|──?index.less

|???└──?index.html

|──?package.json???????#?項(xiàng)目信息??└──?proxy.config.js????#?數(shù)據(jù)mock配置

五丶創(chuàng)建接口文件New.js在services文件下創(chuàng)建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中創(chuàng)建對(duì)應(yīng)的New.js， 因?yàn)閟ervices下的New.js 和models下的New.js 兩者是react 調(diào)入接口和接收接口參數(shù) 密不可分的文件。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進(jìn)行數(shù)據(jù)渲染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;

};//?建議小伙伴不要這樣去渲染，最好是把它寫成循環(huán)的方式去寫，因?yàn)槲业姆椒ㄊ亲畋坑喌姆椒?數(shù)據(jù)多了還是循環(huán)實(shí)用些)

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);

總結(jié)：

整體看看我的方法和數(shù)據(jù)渲染方式不是太好，畢竟是目前還在學(xué)習(xí)狀態(tài)，所以react學(xué)習(xí)開發(fā)之路還很漫長，所以我覺得在這個(gè)前端發(fā)展迅速的年代中要不停地去汲取精華，去取糟粕。擴(kuò)充自己前端主流框架的學(xué)習(xí)及運(yùn)用。祝愿前端的小伙伴們?cè)谖磥碛袀€(gè)好的發(fā)展方向，

作者：sidney_c

鏈接：https://www.jianshu.com/p/55702d52593b

總結(jié)

以上是生活随笔為你收集整理的antd 怎么用ajax,react+dva+antd接口调用方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。