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

之後瀏覽器就會開啟 ，你會看到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的配置詳見  

四丶準備工作以及檔案之間的對應關係

首先在建立檔案之前（一般安裝的時候系統會自動生成一個預設的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

1. 在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
     });
}

1. 然後在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 (      

          

             
              
222
              
333
              
444
              
555
            
          
          
            
              
            
            
              
            
            
              
            
            
              
            
          
          
      
 
    );
};

IndexPage.propTypes = {
};export default connect(({News}) => ({...News}))(IndexPage);

總結：

整體看看我的方法和資料渲染方式不是太好，畢竟是目前還在學習狀態，所以react學習開發之路還很漫長，所以我覺得在這個前端發展迅速的年代中要不停地去汲取精華，去取糟粕。擴充自己前端主流框架的學習及運用。祝願前端的小夥伴們在未來有個好的發展方向，

作者：sidney_c
連結：