一丶 安裝

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

$ npm install dva-cli -g

$ dva -v

0.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配置

五丶創建接口文件products.js

在services文件下創建products.js, .yield call方法里面的usersService.fetch方法如下(PAGESIZE目前是常量) products.js代碼如下：

import request from 'requesturl';

// 新聞輪播圖顯示

export function NewsCarousel(start, limit ){

const body = JSON.stringify({ start: 0, limit: 1000 });

return request("menu/query", {

method: "POST", body,

headers: {'Content-Type': 'application/json'}

});

}

//新聞列表

export function NewsList(start, limit, type){

const body = JSON.stringify({ start, limit, type});

return request("new/query", {

method: "POST", body,

headers: {'Content-Type': 'application/json'}

});

}

然后在models中創建對應的products.js， 因為services下的products.js 和models下的products.js 兩者是react 調入接口和接收接口參數 密不可分的文件。

import * as services from '../services/products';

export default {

namespace: 'products',

state: {

newinfo: [],

newdetail: []

},

reducers: {

update(state, action) {

return { ...state, ...action.payload };

},

},

effects: {

* NewsInfo({ payload},{ call, put }){

const list = yield call(services.NewsCarousel);

let menu= [], arr = list.data.data;

arr.forEach(items => {menu.push({ title: items.Text, id: items.Id }) });

yield put({ type: "update", payload: { newinfo: menu }});

},

* NewsDetail({ payload:{start, limit, type}}, { call, put }){

const detail = yield call(services.NewsList, start, limit, type);

yield put({ type: "update", payload: { newdetail: detail.data.data}});

}

},

subscriptions: {

setup({ dispatch, history }) {

return history.listen(({ pathname, query }) => {

if(pathname === "/"){

dispatch({ type: 'NewsInfo'});

dispatch({ type: 'NewsDetail', payload:{

start: 0,

limit: 1000,

type: "7ad2c8db-ff04-4736-81c9-1b7c6fb276b3"

}});

}

})

},

},

};

六丶在components文件下ListPage文件夾下

NewsCarousel.js

import React from 'react';

import { connect } from 'dva';

import styles from './styles.less';

import { Carousel } from 'antd-mobile';

const NewsCarousel = ({ dispatch, newdetail, ...rest }) =>{

return(

autoplay={false}

infinite

selectedIndex={0}

swipeSpeed={35}>

{newdetail && newdetail.length!== 0?

newdetail.map(val =>(

key={val.Id}

href={val.Link}

className={styles.banner}>

style={{

width: '100%',

height: '180px'

}}

src={val.Img}

alt=""/>

{val.Title}

)): ""}

)

}

export default connect(({ products }) => ({ ...products }))(NewsCarousel);

NewsCrad.js

import React from 'react';

import { connect } from 'dva';

import styles from './styles.less';

import { Tabs, WhiteSpace, Card, WingBlank } from 'antd-mobile';

const DTabBar = Tabs.DefaultTabBar;

const NewsCrad = ({ dispatch, newinfo, newdetail, ...rest }) =>{

const changeKey = (key) =>{

dispatch({

type: 'products/NewsDetail',

payload:{ type: key.id, start: 0, limit: 1000 }

})

}

const renderContent = (tab, i) => {

return(

{newdetail && newdetail.length!== 0?

newdetail.map((val, i) =>

{val.Title}

{val.Memo}

): ""}

)

}

return(

tabs={newinfo}

onChange={changeKey}

renderTabBar={props => }>

{renderContent}

)

}

export default connect(({ products }) => ({ ...products }))(NewsCrad);

七丶在 routes文件下 ListView.js進行數據渲染

import React from 'react';

import { NewsCarousel, NewsCrad } from 'components';

export default function ListView(){

return (

);

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。