React 全栈体系（七）
第四章 React ajax
一、理解
1. 前置说明
- React本身只关注于界面, 并不包含发送ajax请求的代码
- 前端应用需要通过ajax请求与后台进行交互(json数据)
- react应用中需要集成第三方ajax库(或自己封装)
2. 常用的ajax请求库
- jQuery: 比较重, 如果需要另外引入不建议使用
- axios: 轻量级, 建议使用
- 封装XmlHttpRequest对象的ajax
- promise风格
- 可以用在浏览器端和node服务器端
二、axios
1. 文档
- https://github.com/axios/axios
2. 相关API
2.1 GET请求
axios.get('/user?ID=12345').then(function (response) {console.log(response.data);}).catch(function (error) {console.log(error);});axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
2.2 POST请求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3. 代码（配置代理）
/* src/App.jsx */
import React, { Component } from 'react'
import axios from 'axios'export default class App extends Component {getStudentData = ()=>{axios.get('http://localhost:3000/api1/students').then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);})}getCarData = ()=>{axios.get('http://localhost:3000/api2/cars').then(response => {console.log('成功了',response.data);},error => {console.log('失败了',error);})}render() {return (<div><button onClick={this.getStudentData}>点我获取学生数据</button><button onClick={this.getCarData}>点我获取汽车数据</button></div>)}
}
/* src/index.js */
//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//引入App
import App from './App'ReactDOM.render(<App/>,document.getElementById('root'))
/* src/setupProxy.js */
const proxy = require('http-proxy-middleware')module.exports = function(app){app.use(proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置target:'http://localhost:5000', //请求转发给谁changeOrigin:true,//控制服务器收到的请求头中Host的值pathRewrite:{'^/api1':''} //重写请求路径(必须)}),proxy('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}),)
}
3.1 方法一
在package.json中追加如下配置
"proxy":"http://localhost:5000"
- 说明：
- 优点：配置简单，前端请求资源时可以不加任何前缀。
- 缺点：不能配置多个代理。
- 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
3.2 方法二
- 第一步：创建代理配置文件
在src下创建配置文件：src/setupProxy.js
- 编写setupProxy.js配置具体代理规则：
const proxy = require('http-proxy-middleware')module.exports = function(app) {app.use(proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000changeOrigin默认值为false，但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/api2', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/api2': ''}}))
}
- 说明：
- 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
- 缺点：配置繁琐，前端请求资源时必须加前缀。
三、案例 – github用户搜索
1. 效果
- 请求地址: https://api.github.com/search/users?q=xxxxxx
2. 代码实现
2.1 静态页面
/* public/css/bootstrap.css */
...
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><link rel="stylesheet" href="./css/bootstrap.css"><title>React App</title></head><body><div id="root"></div></body>
</html>
/* src/App.css */
.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
/* src/App.jsx */
import React, { Component } from 'react'
import './App.css'export default class App extends Component {render() {return (<div className="container"><section className="jumbotron"><h3 className="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search"/> <button>Search</button></div></section><div className="row"><div className="card"><a href="https://github.com/reactjs" target="_blank"><img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width:'100px'}}/></a><p className="card-text">reactjs</p></div><div className="card"><a href="https://github.com/reactjs" target="_blank"><img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width:'100px'}}/></a><p className="card-text">reactjs</p></div><div className="card"><a href="https://github.com/reactjs" target="_blank"><img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width:'100px'}}/></a><p className="card-text">reactjs</p></div><div className="card"><a href="https://github.com/reactjs" target="_blank"><img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width:'100px'}}/></a><p className="card-text">reactjs</p></div><div className="card"><a href="https://github.com/reactjs" target="_blank"><img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width:'100px'}}/></a><p className="card-text">reactjs</p></div></div></div>)}
}
/* src/index.js */
//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//引入App组件
import App from './App'//渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'))
2.2 静态组件
2.2.1 List
/* src/components/List/index.jsx */
import React, { Component } from "react";
import "./index.css";export default class List extends Component {render() {return (<div className="row"><div className="card"><a rel="noreferrer" href="https://github.com/reactjs" target="_blank"><imgalt="head_portrait"src="https://avatars.githubusercontent.com/u/6412038?v=3"style={{ width: "100px" }}/></a><p className="card-text">reactjs</p></div><div className="card"><a rel="noreferrer" href="https://github.com/reactjs" target="_blank"><imgalt="head_portrait"src="https://avatars.githubusercontent.com/u/6412038?v=3"style={{ width: "100px" }}/></a><p className="card-text">reactjs</p></div><div className="card"><a rel="noreferrer" href="https://github.com/reactjs" target="_blank"><imgalt="head_portrait"src="https://avatars.githubusercontent.com/u/6412038?v=3"style={{ width: "100px" }}/></a><p className="card-text">reactjs</p></div><div className="card"><a rel="noreferrer" href="https://github.com/reactjs" target="_blank"><imgalt="head_portrait"src="https://avatars.githubusercontent.com/u/6412038?v=3"style={{ width: "100px" }}/></a><p className="card-text">reactjs</p></div><div className="card"><a rel="noreferrer" href="https://github.com/reactjs" target="_blank"><imgalt="head_portrait"src="https://avatars.githubusercontent.com/u/6412038?v=3"style={{ width: "100px" }}/></a><p className="card-text">reactjs</p></div></div>);}
}
/* src/components/List/index.css */
.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.card {float: left;width: 33.333%;padding: 0.75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card > img {margin-bottom: 0.75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}
2.2.2 Search
/* src/components/Search/index.jsx */
import React, { Component } from "react";export default class Search extends Component {render() {return (<section className="jumbotron"><h3 className="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" /> <button>Search</button></div></section>);}
}
2.2.3 App
/* src/App.jsx */
import React, { Component } from "react";
import Search from "./components/Search";
import List from "./components/List";export default class App extends Component {render() {return (<div className="container"><Search /><List /></div>);}
}
相关文章：
React 全栈体系（七）
第四章 React ajax 一、理解 1. 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装) 2. 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻…...
NVIDIA 显卡硬件支持的精度模式
很多炼丹师不知道自己英伟达显卡支持哪些精度模式，本文整理了NVIDIA官网的数据，为你解开疑惑。 1. 首先了解CUDA计算能力及其支持的精度模式； 2. 查看自己显卡（或其它NVIDIA硬件）的计算能力值为多少。 表1 CUDA计算…...
【Java|golang】210. 课程表 II---拓扑排序
一、拓扑排序的定义： 先引用一段百度百科上对于拓扑排序的定义： 对一个有向无环图 ( Directed Acyclic Graph 简称 DAG ) G 进行拓扑排序，是将 G 中所有顶点排成一个线性序列，使得图中任意一对顶点 u 和 v ，若边 <…...
STM32CubeMX systick bug?
发觉用新版（V6.9.1）的它生成代码，会有问题。可能是 BUG。具体如下： 一个简单的点灯程序，用 Keil MDK 5.38a（compiler version 6）编译。 如果在变量前，不加上关键字“volatile”&am…...
徐亦达机器学习：Kalman Filter 卡尔曼滤波笔记 (一)
P ( x t P(x_t P(xt| x t − 1 ) x_{t-1}) xt−1) P ( y t P(y_t P(yt| x t ) x_t) xt) P ( x 1 ) P(x_1) P(x1)Discrete State DM A X t − 1 , X t A_{X_{t-1},X_t} AXt−1,XtAny π \pi πLinear Gassian Kalman DM N ( A X t − 1 B , Q ) N(AX_{t-1}B,Q)…...
Java和vue的包含数组组件contains、includes
List<String> tempList Arrays.asList("10018","1007","10017","1012"); if(tempList.contains(initMap.get("asset_type_id").toString())){// todo 计算运营终点桩号-起点桩号BigDecimal diffSum collectNum(col…...
OpenCV_CUDA_VS编译安装
一、OpenCV 我这里是下载的OpenCV4.5.4，但是不知道到在vs里面build时一直报错，后面换了4.7.0的版本测试，安装成功。 Release OpenCV 4.5.4 opencv/opencv GitHub 这个里面有官方预编译好的OpenCV库，可以直接食用。 扩展包&am…...
基于减法优化SABO优化ELM(SABO-ELM)负荷预测（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
记录第一个启动代码的诞生
核使用R52，参考汇编模板，一步一步来实现。 首先是ld文件，这个没啥好说的，主要是关注给vector_table划一块地址、stack地址，如下： .text.intvec :{_vectors_start .;KEEP(*(.text.intvec))_vectors_end .;…...
基于STM32的简化版智能手表
一、前言 本文的OLED多级菜单UI为一个综合性的STM32小项目，使用多传感器与OLED显示屏实现智能终端的效果。项目中的多级菜单UI使用了较为常见的结构体索引法去实现功能与功能之间的来回切换，搭配DHT11，RTC，LED，KEY等器…...
揭秘弹幕游戏制作
最近好多人问弹幕游戏，甚至是招人的也要DOTS做弹幕游戏... 实际上目前的弹幕游戏绝大多数应该和DOTS没有半点关系，别忘了DOTS这项技术渲染问题还没能够被合理解决呢 所以目前用的全都是GPU Instance这项技术，于是乎我决定下场写这篇帖子&am…...
2327. 知道秘密的人数；1722. 执行交换操作后的最小汉明距离；2537. 统计好子数组的数目
2327. 知道秘密的人数 核心思想：动态规划，每天的人可以分为三种，可分享秘密的人，不可分享秘密的人，忘记秘密的人。定义f[i]为第i天可分享秘密的人，那么第(idelay ,iforget)天，会增加f[i]个可分…...
【TCPDF】使用TCPDF导出PDF文件
目录 一、安装TCPDF类库 二、安装字体 三、使用TCPDF导出PDF文件 目的：PHP通过TCPDF类库导出文件为PDF。 开发语言及类库：ThinkPHP、TCPDF 效果图如下 一、安装TCPDF类库 在项目根目录使用composer安装TCPDF，安装完成后会在vendor目录下…...
MacBook苹果电脑重装、降级系统
1、下载balenaEtcher镜像启动盘制作工具 https://tails.net/etcher/balenaEtcher-portable.exe 2、选择从文件烧录选择下载好的Mac 镜像文件 百度网盘 请输入提取码（Mac OS 10.10-12版本镜像文件） 第二步选择目标磁盘，这里需要准备一块1…...
Java 解决long类型数据在前后端传递失真问题
问题：雪花算法的id长度为19位，前端能够接收的数字最多只能是16位的，因此就会造成精度丢失，得到的ID不是真正的ID。 解决： 在拦截器中加入Long类型转换，返回给前端string package io.global.iot.common.c…...
IDEA的快捷键大全
快捷键 说明 IntelliJ IDEA 的便捷操作性，快捷键的功劳占了一大半，对于各个快捷键组合请认真对待。IntelliJ IDEA 本身的设计思维是提倡键盘优先于鼠标的，所以各种快捷键组合层出不穷，对于快捷键设置也有各种支持，对…...
简单记一下Vue router 路由中使用 vue-i18n 进行标题国际化
引入状态管理和国际化文件 import store from ../store import i18n from /configs/i18n使用状态管理设置路由当前国际化选项 // 使用状态管理 i18n.locale store.state.setStore.i18n??zh路由中使用i18n { path: /login, name: login, component: LoginPage, meta: { ti…...
【Gitea】 Post “http://localhost:3000/api/internal/hook/pre-receive/aa/bbb“ 异常
引 使用 JGit 做了一个发布代码到 Gitea 的接口，使用该接口发布代码到 http://xxx-local/{name}/{project} ，报了 Post "http://localhost:3000/api/internal/hook/pre-receive/{name}/{project} 相关的异常。具体内容如下： Gitea: In…...
如何使用element-ui相关组件如：el-select,el-table，el-switch,el-pagination,el-dialog
element-ui 官方链接： 组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation el-select <!-- 用户类型选择框<template> 看情况使用value选择框绑定的值 命名必须是value不能改v-for"item in Options" options数据源来自于…...
微信小程序+echart实现点亮旅游地图
背景 最近看抖音有个很火的特效就是点亮地图，去过哪些地方，于是乎自己也想做一个，结合自己之前做的以家庭为单位的小程序，可以考虑做一个家庭一起点亮地图的功能。 效果图 过程 1，首先就是得去下微信小程序适配的ec…...
Git（8）——Git命令总结
一、简介 本篇文章将基于Git（4）——Git命令小总结，补充后续的Git使用命令 二、总结 # 添加远程连接 git remote add origin 远端地址# 推送本地代码 git push origin 分支名称# 拉取远端代码(第一次) git clone 远端克隆地址# 更新远端代码…...
9.15 滴滴笔试
T1（二分） #include <bits/stdc.h>#define endl \nusing namespace std;typedef long long LL;const int N 1e5 10;int n, k; int a[N];bool check(int mid) {int rec 1e9, cnt 1;for(int i 0; i < n; i ) {int j i;while(j < n &…...
有趣的设计模式——适配器模式让两脚插头也能使用三孔插板
版权声明 本文原创作者：谷哥的小弟作者博客地址：http://blog.csdn.net/lfdfhl 场景与问题 众所周知，我们国家的生活用电的电压是220V而笔记本电脑、手机等电子设备的工作压没有这么高。为了使笔记本、手机等设备可以使用220V的生活用电就需…...
2.10 PE结构：重建重定位表结构
Relocation（重定位）是一种将程序中的一些地址修正为运行时可用的实际地址的机制。在程序编译过程中，由于程序中使用了各种全局变量和函数，这些变量和函数的地址还没有确定，因此它们的地址只能暂时使用一个相对地址。当…...
关于content-type的理解
一.content-type的结论 告诉后端传过去的数据是什么类型的数据 二.没有请求体 (1)没有请求体的情况下content-type没有意义。 (2):图示 里面是没有请求体的 (3)有请求体的情况 二.常见的三种方式 (1)application/x-www-form-urlencoded(默认) 参数的表现形式: 传递之前可以…...
＜图像处理＞ 空间滤波基础二
空间滤波基础二：锐化 锐化的作用的突出灰度中的过渡。图像锐化通过空间微分来实现，微分将增强边缘和其他不连续（噪声），不强化灰度变化缓慢的区域。图像锐化也叫做高通滤波，通过高频，抑制低频。…...
Java中的队列Queue
Queue（队列）是一种在计算机科学中常见的数据结构，它基于先进先出（FIFO）的原则，即最先进入队列的元素最先出队。在Java中，Queue是一个接口，定义了一组操作队列的方法，而具体的实现类可以选择性地实现这些方法。 以下是Queue的一些常见用途和操作： 添加元素： 使用off…...
机器学习技术（十）——决策树算法实操，基于运营商过往数据对用户离网情况进行预测
机器学习技术（十）——决策树算法实操 文章目录 机器学习技术（十）——决策树算法实操一、引言二、数据集介绍三、导入相关依赖库四、读取并查看数据1、读取数据2、查看数据 五、数据预处理1、选择数据2、数据转码 六、建模与参数优…...
大数据之-kafka学习笔记
Kafka Kafka 是一个分布式的基于发布/订阅模式的消息队列（Message Queue），主要应用于大数据实时处理领域。 Kafka可以用作Flink应用程序的数据源。Flink可以轻松地从一个或多个Kafka主题中消费数据流。这意味着您可以使用Kafka来捕获和传输…...
虚幻动画系统概述
本文主要整理一下高层次的概述，方便后续查阅 1.动画流程 DCC产出动画文件 -> UE动画导入 -> 动画蓝图驱动（类似unity的动画状态机） ->动画后处理蓝图驱动（例如修型骨，骨骼矫正等后期处理） 2.动…...
厦门外贸网站建设哪家公司大/app推广一手单
主要内容1.编码问题2.File类的使用3.RandomAccessFile的使用4.I/O 输入输出流编码问题：1 importjava.io.UnsupportedEncodingException;23 public class编码问题 {4 public static voidmain(String[] args) {5 //我们项目的默认编码是GBK6 String s "测试 ABC…...
手机购物网站模版/免费的自媒体一键发布平台
最近在开发的过程当中，对于已有的代码，想将相关类绘制成UML类图，虽然现在有很多UML类图的优秀软件，比如ProcessOn(可视化编辑)、draw.io(可视化编辑)、PlantUML(代码生成)，其实看到这里我就想IDEA中有没有像PlantUML一…...
好网站建设公司哪家好?/每日舆情信息报送
作者:姚远 Oracle ACE “ 今天是个值得纪念的日子，我成了第一个2022-2023年度login的中国的Oracle ACE。” 因为新app的原因，所有的ACE都要重新登记。我因故没有参加2022年8月18日Oracle ACE新app上线的zoom meeting，感谢赵兄的通知&#x…...
优化网站建设公司/今日热点新闻事件2021
一颗柠檬红茶：浅谈Elasticsearch 5.6.10搬砖历程_1zhuanlan.zhihu.com写在前面：原文再续，书接上一回。上一篇主要介绍Elasticsearch的特点与应用，也分享了分布式集群的特性，以及数据读取、写入、更新、删除的原理&am…...
律师网站建设/电脑优化软件推荐
2004年2月28日，在浙江大学软件学院和CSDN网站的大力支持下，ERPTAO组织在浙大成功地举办了第一次软件技术讲座。有上百名专业软件开发者及爱好者到场参加，两位主讲人熊节（也就是我本人）和石一楹为大家送上了关于重构思想…...
建网站的公司哪里有/百度推广关键词
我正在使用Python绑定到通过以下instructions安装的OpenCV 2.4。我的问题类似于this one，但是我需要Windows计算机解决方案。问题:当我尝试使用时cap cv2.VideoCapture(0)print cap.grab()它工作正常，但是以下代码cap cv2.VideoCapture(filename)print…...