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"/>&nbsp;<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" />&nbsp;<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>);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/79585.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue 使用canvas 详细教程

vue 使用canvas 详细教程

Vue.js 中使用 Canvas Vue.js 是一个流行的 JavaScript 框架&#xff0c;用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据&#xff0c;同时也支持与其他库和工具的集成。要在 Vue.js 中使用 Canvas&#xff0c;您可以按照以下步骤进行操作&#xff1a; 在 Vue.js …
阅读更多...
vueshowpdf 移动端pdf文件预览

vueshowpdf 移动端pdf文件预览

1、安装 npm install vueshowpdf -S2、参数 属性说明类型默认值v-model是否显示pdf--pdfurlpdf的文件地址String- scale 默认放大倍数 Number1.2 minscale 最小放大倍数 Number0.8 maxscale 最大放大倍数 Number2 3、事件 名称说明回调参数closepdf pdf关闭事件-pdferr文…
阅读更多...
.netcore对传输类设置区分大小

.netcore对传输类设置区分大小

.Net Core中内置了对Json的转化与解析 可将PropertyNameCaseInsensitive false 设置为区分大小写。
阅读更多...
竞赛选题 基于机器视觉的行人口罩佩戴检测

竞赛选题 基于机器视觉的行人口罩佩戴检测

简介 2020新冠爆发以来&#xff0c;疫情牵动着全国人民的心&#xff0c;一线医护工作者在最前线抗击疫情的同时&#xff0c;我们也可以看到很多科技行业和人工智能领域的从业者&#xff0c;也在贡献着他们的力量。近些天来&#xff0c;旷视、商汤、海康、百度都多家科技公司研…
阅读更多...
国家网络安全周 | 保障智能网联汽车产业，护航汽车数据安全

国家网络安全周 | 保障智能网联汽车产业，护航汽车数据安全

9月13日上午&#xff0c;2023年国家网络安全宣传周汽车数据安全分论坛在福州海峡国际会展中心正式举办。本次分论坛主题是“护航汽车数据安全&#xff0c;共促产业健康发展”&#xff0c;聚焦汽车数据安全、个人信息保护、密码安全、车联网安全保险等主题。 与此同时&#xff…
阅读更多...
辊轧机液压系统泵站比例阀放大器

辊轧机液压系统泵站比例阀放大器

液压系统主要由液压泵、电机、液压缸、油箱、高压软管等组成。 液压泵将机油从油箱吸入&#xff0c;通过高压软管送至液压缸中&#xff0c;完成动力转换。液压泵的驱动由电机通过皮带或轮齿传动完成。 液压折弯机的液压油流动路线主要分为液压油箱、吸油过滤器、液压泵、主控…
阅读更多...
《C和指针》笔记23: 指针的指针

《C和指针》笔记23: 指针的指针

int a 12; int *b &a;现在有了第三个变量c c &b;c的类型是什么&#xff1f;显然它是一个指针&#xff0c;但它所指向的是什么&#xff1f;变量b是一个“指向整型的指针”&#xff0c;所以任何指向b的类型必须是指向“指向整型的指针”的指针&#xff0c;更通俗地说…
阅读更多...
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 七）

HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 七）

PersistentStorage&#xff1a;持久化存储UI状态 前两个小节介绍的LocalStorage和AppStorage都是运行时的内存&#xff0c;但是在应用退出再次启动后&#xff0c;依然能保存选定的结果&#xff0c;是应用开发中十分常见的现象&#xff0c;这就需要用到PersistentStorage。 Pe…
阅读更多...
ESP32-BOX的组件配置添加核心部分详细介绍

ESP32-BOX的组件配置添加核心部分详细介绍

前言 &#xff08;1&#xff09;为了方便开发&#xff0c;ESP32提供了组件库方便用户进行二次开发。 github仓库&#xff1b;gitee仓库 &#xff08;2&#xff09;在学习本章之前最好有CMake或者Makefile的基础&#xff0c;如果没有也不要慌&#xff0c;有的话最好。 &#xff…
阅读更多...
def和class的区别

def和class的区别

fed浅谈Python内 def 与 class 的区别--知识点整理&#xff08;B站 - BV11g411w73x&#xff09;_pythonclass和def的区别_奋进的小咸鱼的博客-CSDN博客def 是用于函数的封装代码如下&#xff1a;def jianfa(a,b): print(a-b) jianfa(100,9)输出结果&#xff1a;91class可用于多…
阅读更多...
驱动开发，udev机制创建设备节点的过程分析

驱动开发，udev机制创建设备节点的过程分析

1.创建设备文件的机制种类 mknod命令&#xff1a;手动创建设备节点的命令 devfs:可以用于创建设备节点&#xff0c;创建设备节点的逻辑在内核空间&#xff08;内核2.4版本之前使用&#xff09; udev:自动创建设备节点的机制&#xff0c;创建设备节点的逻辑在用户空间&#xf…
阅读更多...
虚拟机Ubuntu操作系统常用终端命令（1）（详细解释+详细演示）

虚拟机Ubuntu操作系统常用终端命令（1）（详细解释+详细演示）

虚拟机Ubuntu操作系统常用终端命令 本篇讲述了Ubuntu操作系统常用的三个功能&#xff0c;即归档&#xff0c;软链接和用户管理方面的相关知识。希望能够得到大家的支持。 文章目录 虚拟机Ubuntu操作系统常用终端命令二、使用步骤1.归档1.1创建档案包1.2还原档案包1.3归档并压缩…
阅读更多...
【Flowable】FlowableUI使用以及在IDEA使用flowable插件（二）

【Flowable】FlowableUI使用以及在IDEA使用flowable插件（二）

前言 之前有需要使用到Flowable&#xff0c;鉴于网上的资料不是很多也不是很全也是捣鼓了半天&#xff0c;因此争取能在这里简单分享一下经验&#xff0c;帮助有需要的朋友&#xff0c;也非常欢迎大家指出不足的地方。 一、部署FlowableUI 1.准备war包 在这里提供了&#xf…
阅读更多...
026-从零搭建微服务-文件服务（二）

026-从零搭建微服务-文件服务（二）

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;https://gitee.com/csps/mingyue 源码地址&#xff08;前端&#xff09;&#xff1a;https://gitee.com/csps…
阅读更多...
关于运行PR提示vcruntime140.dll无法继续执行代码的4个解决方法分享

关于运行PR提示vcruntime140.dll无法继续执行代码的4个解决方法分享

关于运行安 PR提示vcruntime140.dll无法继续执行代码的困扰&#xff0c;小编将为您提供详细的解决方法。在此之前&#xff0c;我们需要了解一下vcruntime140.dll文件的作用。 vcruntime140.dll 是 Visual C Redistributable 的动态链接库文件&#xff0c;它包含了 C运行时库的一…
阅读更多...
GeoSOS-FLUS未来土地利用变化情景模拟模型

GeoSOS-FLUS未来土地利用变化情景模拟模型

软件简介 适用场景 GeoSOS-FLUS软件能较好的应用于土地利用变化模拟与未来土地利用情景 的预测和分析中&#xff0c;是进行地理空间模拟、参与空间优化、辅助决策制定的有效工 具。FLUS 模型可直接用于&#xff1a; 城市发展模拟及城市增长边界划定&#xff1b;城市内 部高分…
阅读更多...
Zabbix监控组件及流程

Zabbix监控组件及流程

Zabbix 由5大组件构成 Zabbix Web、Zabbix Server、Zabbix Proxy、Zabbix Database、Zabbix Agent Zabbix监控系统具体监控系统流程如图&#xff1a; Zabbix Web Zabbix Web是基于PHP语言编写的WEB UI界面&#xff0c;展示Zabbix整个监控平台监控数据、配置信息、方便对整个…
阅读更多...
SQL Server 2012下载和安装配置详细教程手册

SQL Server 2012下载和安装配置详细教程手册

SQL Server 2012 下载和安装详细教程 目录 SQL Server 2012 下载和安装详细教程1、软件下载2、软件安装3、软件验证 1、软件下载 &#xff08;1&#xff09;官网地址 https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads &#xff08;可能不太行&#xff09; &a…
阅读更多...
家庭安全不容小觑！青犀AI智能分析算法+摄像头助力家庭安全

家庭安全不容小觑！青犀AI智能分析算法+摄像头助力家庭安全

你知道吗&#xff1f;高层家庭更需要人工摄像头&#xff01;虽然现在社会治安十分稳定&#xff0c;高层建筑更是安全&#xff0c;但高层盗窃、陌生人入室这些新闻还是层出不穷&#xff0c;为了解决这些安全隐患&#xff0c;给广大人民一个安心的生活环境&#xff0c;旭帆科技将…
阅读更多...
Android MeidiaCodec之OMXPluginBase与QComOMXPlugin实现本质(四十)

Android MeidiaCodec之OMXPluginBase与QComOMXPlugin实现本质(四十)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言： 人生从来没有捷径，只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注：Android…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023