重庆忠县网站建设报价,凡科轻站小程序制作平台,重庆市建设银行网站首页,个人网站的制作方法第四章 React ajax
一、理解
1. 前置说明
React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)
2. 常用的ajax请求库
jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻…第四章 React ajax
一、理解
1. 前置说明
React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)
2. 常用的ajax请求库
jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用 封装XmlHttpRequest对象的ajaxpromise风格可以用在浏览器端和node服务器端
二、axios
1. 文档
https://github.com/axios/axios
2. 相关API
2.1 GET请求
axios.get(/user?ID12345).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 axiosexport 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 (divbutton onClick{this.getStudentData}点我获取学生数据/buttonbutton onClick{this.getCarData}点我获取汽车数据/button/div)}
}/* src/index.js */
//引入react核心库
import React from react
//引入ReactDOM
import ReactDOM from react-dom
//引入App
import App from ./AppReactDOM.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?qxxxxxx
2. 代码实现 2.1 静态页面
/* public/css/bootstrap.css */
...!-- public/index.html --
!DOCTYPE html
html langenheadmeta charsetutf-8 /link relicon href%PUBLIC_URL%/favicon.ico /meta nameviewport contentwidthdevice-width, initial-scale1 /meta nametheme-color content#000000 /metanamedescriptioncontentWeb site created using create-react-app/link relapple-touch-icon href%PUBLIC_URL%/logo192.png /link relmanifest href%PUBLIC_URL%/manifest.json /link relstylesheet href./css/bootstrap.csstitleReact App/title/headbodydiv idroot/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.cssexport default class App extends Component {render() {return (div classNamecontainersection classNamejumbotronh3 classNamejumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search/nbsp;buttonSearch/button/div/sectiondiv classNamerowdiv classNamecarda hrefhttps://github.com/reactjs target_blankimg srchttps://avatars.githubusercontent.com/u/6412038?v3 style{{width:100px}}//ap classNamecard-textreactjs/p/divdiv classNamecarda hrefhttps://github.com/reactjs target_blankimg srchttps://avatars.githubusercontent.com/u/6412038?v3 style{{width:100px}}//ap classNamecard-textreactjs/p/divdiv classNamecarda hrefhttps://github.com/reactjs target_blankimg srchttps://avatars.githubusercontent.com/u/6412038?v3 style{{width:100px}}//ap classNamecard-textreactjs/p/divdiv classNamecarda hrefhttps://github.com/reactjs target_blankimg srchttps://avatars.githubusercontent.com/u/6412038?v3 style{{width:100px}}//ap classNamecard-textreactjs/p/divdiv classNamecarda hrefhttps://github.com/reactjs target_blankimg srchttps://avatars.githubusercontent.com/u/6412038?v3 style{{width:100px}}//ap classNamecard-textreactjs/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 classNamerowdiv classNamecarda relnoreferrer hrefhttps://github.com/reactjs target_blankimgalthead_portraitsrchttps://avatars.githubusercontent.com/u/6412038?v3style{{ width: 100px }}//ap classNamecard-textreactjs/p/divdiv classNamecarda relnoreferrer hrefhttps://github.com/reactjs target_blankimgalthead_portraitsrchttps://avatars.githubusercontent.com/u/6412038?v3style{{ width: 100px }}//ap classNamecard-textreactjs/p/divdiv classNamecarda relnoreferrer hrefhttps://github.com/reactjs target_blankimgalthead_portraitsrchttps://avatars.githubusercontent.com/u/6412038?v3style{{ width: 100px }}//ap classNamecard-textreactjs/p/divdiv classNamecarda relnoreferrer hrefhttps://github.com/reactjs target_blankimgalthead_portraitsrchttps://avatars.githubusercontent.com/u/6412038?v3style{{ width: 100px }}//ap classNamecard-textreactjs/p/divdiv classNamecarda relnoreferrer hrefhttps://github.com/reactjs target_blankimgalthead_portraitsrchttps://avatars.githubusercontent.com/u/6412038?v3style{{ width: 100px }}//ap classNamecard-textreactjs/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 classNamejumbotronh3 classNamejumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search /nbsp;buttonSearch/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 classNamecontainerSearch /List //div);}
}
