React 全栈体系（七）

news2024/11/15 8:17:53

第四章 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:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为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" />
    <meta
      name="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">
            <img
              alt="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">
            <img
              alt="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">
            <img
              alt="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">
            <img
              alt="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">
            <img
              alt="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.coloradmin.cn/o/1013239.html

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

相关文章

AI无法提振台积电股价

AI无法提振台积电股价

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 总结&#xff1a; &#xff08;1&#xff09;台积电的股价已经从最高点下跌了18%&#xff0c;很多期权交易员正在押注台积电的股价会进一步下跌。 &#xff08;2&#xff09;华尔街分析师目前也下调了台积电的收入和盈利预期…
阅读更多...
EasyUI combobox 实现搜索（模糊匹配）功能

EasyUI combobox 实现搜索（模糊匹配）功能

很简单的一个下拉框搜索模糊匹配功能&#xff0c;在此记录&#xff1a; 1&#xff1a;页面实现&#xff1a; <select class"easyui-combobox" name"combobox" id"combobox" style"width:135px;height:25px;" headerValue"请选…
阅读更多...
9.19-21，openEuler与您相约2023欧洲开源峰会

9.19-21，openEuler与您相约2023欧洲开源峰会

2023年9月19日-21日&#xff0c;openEuler将参加在西班牙毕尔巴鄂举办的 OSSUMMIT 2023&#xff08;Open Source Summit Europe 2023&#xff09;&#xff0c;这是openEuler继去年正式亮相后的第二次全面参加该峰会。 Open Source Summit Europe是由Linux基金会主办&#xff0…
阅读更多...
来喽!!炒鸡详细的“数据在内存中的存储”真的来喽!

来喽!!炒鸡详细的“数据在内存中的存储”真的来喽!

目录​​​​​​​ 1. 整数在内存中的存储 1.1 ⼆进制介绍 1.1.1 2进制转10进制 1.1.2 10进制转2进制 1.1.3 2进制转8进制 1.1.4 2进制转16进制 1.2 原码、反码、补码 2. ⼤⼩端字节序和字节序判断 2.1 什么是⼤⼩端&#xff1f; 2.2 为什么有⼤⼩端? 2.3 练习 …
阅读更多...
01目标检测-问题引入

01目标检测-问题引入

目录 一、目标检测问题定义 二、目标检测过程中的常见的问题 三、目标检测VS图像分类区别 目标检测&#xff1a; 图像分类&#xff1a; 总结&#xff1a; 四、目标检测VS目标分割 目标分割&#xff1a; 目标检测是计算机视觉领域的一个重要任务&#xff0c;旨在从图像或…
阅读更多...
[管理与领导-93]：IT基层管理者 - 扩展技能 - 5 - 职场丛林法则 -7- 复杂问题分析能力与复杂问题的解决能力：系统化思维

[管理与领导-93]：IT基层管理者 - 扩展技能 - 5 - 职场丛林法则 -7- 复杂问题分析能力与复杂问题的解决能力：系统化思维

目录 前言&#xff1a; 一、系统化思维 VS 分解思维 1.1 系统化思维 1.2 分解思维 二、中医与西医思维模式的区别 三、正向闭环/正反馈 VS 负向闭环/负反馈 VS 开环 3.1 开环与管理 3.2 闭环与管理 3.3 生态系统是闭环系统 3.4 团队是一个闭环系统 3.5 正向闭环/正反…
阅读更多...
有趣的设计模式——适配器模式让两脚插头也能使用三孔插板

有趣的设计模式——适配器模式让两脚插头也能使用三孔插板

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 场景与问题 众所周知&#xff0c;我们国家的生活用电的电压是220V而笔记本电脑、手机等电子设备的工作压没有这么高。为了使笔记本、手机等设备可以使用220V的生活用电就需…
阅读更多...
API(九)基于协程的并发编程SDK

API(九)基于协程的并发编程SDK

一 基于协程的并发编程SDK 场景&#xff1a; 收到一个请求会并发发起多个请求,使用openresty提供的协程说明&#xff1a; 这个是高级课程,如果不理解可以先跳过遗留&#xff1a; APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…
阅读更多...
国内外交通数据集介绍（附参数说明）

国内外交通数据集介绍（附参数说明）

国外数据集 NGSIM数据集 NGSIM数据集采集自美国&#xff0c;数据集中包含两条高速公路&#xff08;US-101&#xff0c;I-80&#xff09;及两条城市道路&#xff08;lankershim&#xff0c;peachtree&#xff09;的数据&#xff0c;每条道路的采集时间为45min。数据集中包含包含…
阅读更多...
荣耀亲选耳机Wingcloud X5s Pro新品上市：9月15日首次亮相

荣耀亲选耳机Wingcloud X5s Pro新品上市：9月15日首次亮相

荣耀亲选耳机Wingcloud X5s Pro以其46dB自适应主动降噪、Hi-Res高保真音质和40小时超长续航的特点而备受期待。首次亮相的新品外观圆润流畅&#xff0c;充满了现代感和时尚气息&#xff0c;无论是冰岛白的典雅大方&#xff0c;还是钛银色的成熟经典&#xff0c;每一个细节显示着…
阅读更多...
记录crack某IDE插件过程

记录crack某IDE插件过程

声明&#xff1a;本文仅记录学习过程&#xff0c;已对关键位置脱敏处理&#xff0c;未提供任何工具&#xff0c;请支持正版。 反编译jar包 使用cfr进行对插件核心jar包MyBxxxxxx-obfuss.jar进行反编译&#xff0c;在本地生成a.txt。 java -jar cfr-0.152.jar MyBxxxx-obfuss.…
阅读更多...
车云一体化数字孪生再跨步！数据「精准反哺」整车定制化开发

车云一体化数字孪生再跨步！数据「精准反哺」整车定制化开发

汽车智能化竞争焦点&#xff0c;已经从单车智能延伸至云端。 尤其是在软件定义汽车的驱动下&#xff0c;汽车软件开发贯穿整个汽车生命周期。而基于SOA的车云一体化软件开发能力&#xff0c;通过跨车云的服务化架构、数据闭环等&#xff0c;支撑着传统V型瀑布式开发&#xff0…
阅读更多...
苹果的市场份额下滑了，事实证明国内能与苹果竞争的只有它

苹果的市场份额下滑了，事实证明国内能与苹果竞争的只有它

分析机构给出二季度国内600美元以上手机市场的报告&#xff0c;报告指出苹果的市场份额已显著下滑&#xff0c;国产手机品牌占有的市场份额则已取得较大的提升&#xff0c;让人意外的是成功抢走苹果市场份额的仍然是之前的那家国产手机品牌。 据分析机构的数据显示&#xff0c;…
阅读更多...
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整个监控平台监控数据、配置信息、方便对整个…
阅读更多...
医学图像分割：Self-supervised Semantic Segmentation: Consistency over Transformation

医学图像分割：Self-supervised Semantic Segmentation: Consistency over Transformation

论文作者&#xff1a;Sanaz Karimijafarbigloo,Reza Azad,Amirhossein Kazerouni,Yury Velichko,Ulas Bagci,Dorit Merhof 作者单位&#xff1a;University of Regensburg;RWTH Aachen University;Iran University of Science and Technology;Northwestern University;Fraunho…
阅读更多...
unity UDP 通信

unity UDP 通信

客户端 接收端 &#xff1a; using System; using System.IO; using System.Collections; using System.Collections.Generic; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading; using UnityEngine; using UnityEngine.UI;public cla…
阅读更多...
轻松剪辑大量视频，批量AI智剪让你省时又省力

轻松剪辑大量视频，批量AI智剪让你省时又省力

在今天的数字时代&#xff0c;视频已经成为了信息传播的主要方式之一。无论是个人用户还是专业人士&#xff0c;都需要对视频进行剪辑以满足各种需求。但是&#xff0c;对于一些需要处理大量视频的情况&#xff0c;传统的剪辑方式往往费时费力。幸运的是&#xff0c;有一种名为…
阅读更多...
利用芯片74hc165为单片机增加输入扩展端口proteus仿真arduino

利用芯片74hc165为单片机增加输入扩展端口proteus仿真arduino

我们前面的博文《输入端口少如何扩展&#xff1f;74hc148或74ls148级联在arduino中实现16转4的应用》介绍了148,148输入后可以立即输出到数码管&#xff0c;可以说它是自带编BCD编码器的。而今天这里我们主要介绍的74hc165是没有编码器&#xff0c;这里我们以proteus为仿真环境…
阅读更多...
sqlserver存储过程报错：当前事务无法提交，而且无法支持写入日志文件的操作。请回滚该事务。

sqlserver存储过程报错：当前事务无法提交，而且无法支持写入日志文件的操作。请回滚该事务。

现象&#xff1a; 系统出现异常&#xff0c;手动执行过程提示如上。 问题排查&#xff1a; 1.直接执行的过程事务挂起&#xff08;排除&#xff09; 2.重启数据库实例&#xff08;重启后无效&#xff09; 3.过程中套用过程&#xff0c;套用的过程中使用事务&#xff0c;因为…
阅读更多...
计算机丢失mfc140u.dll怎么办，mfc140u.dll丢失的解决方法分享

计算机丢失mfc140u.dll怎么办，mfc140u.dll丢失的解决方法分享

随着科技的飞速发展&#xff0c;计算机已经成为了人们日常生活和工作中不可或缺的工具。然而&#xff0c;在使用计算机的过程中&#xff0c;用户可能会遇到各种问题&#xff0c;其中计算机丢失 mfc140u.dll 无法运行的问题就是一个比较常见的困扰。小编将从以下几个方面对这个问…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023