一丶 安裝

通過(guò) npm 安裝 dva-cli 并確保版本是0.8.1或以上。

$ npm install dva-cli -g $ dva -v 0.8.1

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

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

$ dva new dva-quickstart $ npm start

之后瀏覽器就會(huì)打開(kāi) http://localhost:8000，你會(huì)看到dva的歡迎界面。

三丶使用antd組件庫(kù)

通過(guò) npm 安裝 antd 和 babel-plugin-import。babel-plugin-import 是用來(lái)按需加載 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的配置詳見(jiàn) 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)目源碼目錄（我們開(kāi)發(fā)的主要工作區(qū)域） | |── /components/ # 項(xiàng)目組件（用于路由組件內(nèi)引用的可復(fù)用組件） | |── /routes/ # 路由組件（頁(yè)面維度） | | |── 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)頁(yè)面的ajax請(qǐng)求，轉(zhuǎn)發(fā)到后臺(tái)） | |── /utils/ # 工具函數(shù)（工具庫(kù)，存儲(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 (<div><div>{detail.length != 0?detail.map(item =>(<div className={styles.code}><div className={styles.one}><img src={item.Img} alt="" /></div><p>{item.Memo}</p><p className={styles.pade}>{item.Title}</p><p className={styles.sade}></p></div>)):""}</div></div>); };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;}; // 建議小伙伴不要這樣去渲染，最好是把它寫(xiě)成循環(huán)的方式去寫(xiě)，因?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 (<div className={styles.box}><div className={styles.slickslide}><Carousel autoplay className={styles.slickslide}><div>222</div><div>333</div><div>444</div><div>555</div></Carousel></div><Tabs defaultActiveKey="1" size="small" onChange={callback}><TabPane tab={T1} key={I1}><Example ></Example></TabPane><TabPane tab={T2} key={I2}><Example></Example></TabPane><TabPane tab={T3} key={I3}><Example></Example></TabPane><TabPane tab={T4} key={I4}><Example></Example></TabPane></Tabs></div> ); };IndexPage.propTypes = { };export default connect(({News}) => ({...News}))(IndexPage);

總結(jié)：

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

總結(jié)

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

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