react+dva+antd接口调用方式
生活随笔
收集整理的這篇文章主要介紹了
react+dva+antd接口调用方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一丶 安裝
通過 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配置五丶創建接口文件New.js
六丶把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進行數據渲染
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 (<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);總結：
整體看看我的方法和數據渲染方式不是太好，畢竟是目前還在學習狀態，所以react學習開發之路還很漫長，所以我覺得在這個前端發展迅速的年代中要不停地去汲取精華，去取糟粕。擴充自己前端主流框架的學習及運用。祝愿前端的小伙伴們在未來有個好的發展方向，
總結
以上是生活随笔為你收集整理的react+dva+antd接口调用方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mongo忘记密码并删除用户
- 下一篇： Spark- Checkpoint原理剖