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
- 在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});
}
- 然后在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 (<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接口调用方式相关推荐
- antd 怎么用ajax,react+dva+antd接口调用方式
一丶 安装 通过 npm 安装 dva-cli 并确保版本是0.8.1或以上.$ npm install dva-cli -g $ dva -v0.8.1 二丶创建新应用 安装完dva-cli之后,就 ...
- antd 进行ajax请求,react+dva+antd接口调用方式
一丶 安装 通过 npm 安装 dva-cli 并确保版本是0.8.1或以上. $ npm install dva-cli -g $ dva -v 0.8.1 二丶创建新应用 安装完dva-cli之后 ...
- react里面的接口调用方法
react接口调用 我们通过npm create-react-app my-app创建react项目,在项目里都是要进行接口调用来获取数据,进行增删改查各种操作的,所以掌握接口调用方式是非常必要的,话 ...
- react+dva+antd的骚操作
文章目录 前言: 第一步: 第二步, 第三步, 第四步, 第五步, 第六步, 第七步, 第八步, 第九步, 第10步, 个人博客 前言: 原谅我直接跳过react的基础,直接就讲react+dva的实 ...
- 飞信免费发短信API接口调用方式
飞信免费发短信API接口调用方式(通过HTTP访问以下网址.支持GET和POST): http://sms.api.bz/fetion.php?username=您的移动飞信登录手机号&pas ...
- 几种常用接口调用方式
个人总结下几种常用的接口调用方式,具体看对方提供的是什么样的webService接口,如有错误,欢迎指正: 1.以前玩微信公众帐号开发的时候,调用过百度翻译的接口,就是这种形式的接口: /** * 翻 ...
- React+dva+antd的运用
前言 技术资料 react + dva + redux + react-router + redux-sage + antd + antd动画 总的来说dva是一个很简单的项目 一步步跟大家来说一下把 ...
- 第三方服务接口调用方式记录
1.普通Http请求 /*** POST请求** @param url 请求地址* @param obj 请求参数* @return 返回数据*/public static String doPost ...
- 接口(服务)之间的调用方式有哪些?/软件系统之间接口的几种通讯方式?
常见的接口调用方式有三种(设计接口的时候要考虑选用哪种接口) 1.http接口:http是一种网络传输协议,基于TCP.(等价于:http+json) 现在浏览器客户端与服务器端通信基本都是采用htt ...
最新文章
- 度量快速开发平台端口映射的介绍
- 将数组A中的内容和数组B中的内容进行交换(数组一样大)
- 2021年斯坦福AI指数报告重磅出炉!中国AI期刊影响力首超美国,视频处理是新风口...
- 我的Go+语言初体验——【三、spx案例测试_许式伟先生推荐补充(附-视频)】
- 改logback logstash-logback-encoder 框架本身的日志级别
- 高斯拉普拉斯算子(Laplace of Gaussian)
- C++传入任意的函数类型作为参数
- HackerOne 发布《2021年黑客报告》:黑客的动力、发展和未来
- 基于MATLAB的夜间车牌识别处理
- python课程-Python课程学习总结
- redis/memcache监控管理工具——treeNMS
- ThinkPad R400 T400 详细拆机图解超精华
- django实现证件照换底色后端和小程序(第三周学习记录)
- 读书笔记:《关于上班这件事--自序·朱德庸》
- Android Studio设置http proxy加速下载(亲测有效)
- Backtrader(十六)- Order订单 - order_target_xxx
- Google 出的 Guava 是个什么鬼?
- html有序无序标签,HTML标签有序标签和无序标签
- 大数据---旅游业的新挑战
- 财付通开放平台 android,腾讯开放财付通对接平台
热门文章
- php5.6 开二级域名,PHP二级域名session共享方案
- linux远程白名单,Linux的Iptables命令实战2—设置白名单
- asm java 反编译_dex-tools-2.1-SNAPSHOT 反编译Java class文件和Android dex文件到Java源码的利器 - 下载 - 搜珍网...
- java求数列的最大子段和_天下无双的公考必考题 数量关系: 最值问题②(构造数列)...
- 动态规划——入门(1)
- 计算机组装维护的概念,实用计算机组装与维护库及概念.doc
- python爬音乐评论生成词云图_python爬虫+词云图,爬取网易云音乐评论
- java socket nio 阻塞_Java NIO实现非阻塞式socket通信
- laravel 图片流_laravel实现上传图片的两种方式小结
- ios设备new Date('2019-07-26 11:00:00')报错