文章目录
react与ajax
react不包含发送ajax请求的代码，需要集成第三方ajax库或者自己封装。
常用的ajax请求库：jQuery、axios。对比axios，jQuery会更多的直接操作DOM，不适用react框架，更倾向于选择axios作为react的ajax请求库。
react与axios
axios是一个轻量级的ajax请求库，有promise风格，可以用在浏览器和node服务器两个端口。
react中跨域解决方法
在项目目录终端中输入npm add axios，引入第三方库。
// App.js
import React,{Component} from 'react'
import axios from 'axios'
export default class App extends Component{
getStudentData = ()=>{
axios.get('http://localhost:5000/student').then(
response => {console.log('success',response.data)},
error =>{console.log('fail',error)}
)
}
render(){
return (
<div>
<button onClick={this.getStudentData}>点击获取数据</button>
</div>
)
}
}
使用nodejs创建一个服务器，向端口5000发送请求。
const express = require('express')
const app = express()
app.use((req,res,next)=>{
console.log('请求服务器了')
next()
})
app.get('/student',(req,res)=>{
const students = [
{id:'001',name:'tom',age:18}.
{id:'002',name:'jery',age:18}.
{id:'003',name:'tony',age:18}.
]
res.send(students)
})
app.listen(5000,err => {
if(!err) console.log('服务器启动成功，请求地址http://localhost:5000/students')
})
前端项目运行在3000端口，点击按钮，会发生跨域问题，无法返回数据。
解决跨域配置代理方法一，在package.json文件内加入proxy属性，规定跨域地址。
"proxy":http://localhost:5000
在组件请求方法中修改请求路径：
getStudentData = ()=>{
axios.get('http://localhost:3000/student').then(
response => {console.log('success',response.data)},
error =>{console.log('fail',error)}
)
}
这样当3000端口发送请求时，先查看当前端口是否有请求资源，若有，直接返回数据，若没有，会向5000端口请求资源，然后返回。
解决跨域配置代理方法二，在src文件夹下新建一个名为setupProxy.js的文件，react在编译的时候会把他交给webpack，然后转为node去做处理。在这个文件里，要使用commonjs编写，commonjs是前端模块化的一种规范，node使用的也是commonjs编写的。该方法适用于要从多个服务器获取资源。
// setupProxy.js
const proxy = require('http-proxy-middleware')
moudle.exports = function(app){
app.use(
proxy('/api1',{ // 请求前缀，请求路径中有该前缀则触发此代理配置
target:'http://localhost:5000', // 请求转发路径
changeOrigin:true, // 控制服务器收到的请求头中Host值，相当于欺骗服务器，该请求来自本服务器。前端请求为localhost:3000,但当前端发起请求时，5000端口的服务器会知道是请求头localhost:5000的请求。不写这一行代码时，5000端口的服务器会知道是请求头localhost:3000的请求。
pathRewrite:{'^/api1':''} // 重写请求路径，将请求路径中的/api1字段替换为空字符串，避免服务器收到/api1开头的路径，导致请求返回404
}),
proxy('/api2',{
target:'http://localhost:5001',
changeOrigin:true,
pathRewrite:{'^/api2':''}
}),
)
}
以上代码中规定了不同服务器请求路径的前缀（api1/api2），组件中的请求方法也要对应修改。
getStudentData = ()=>{
axios.get('http://localhost:3000/api1/student').then(
response => {console.log('success',response.data)},
error =>{console.log('fail',error)}
)
}
使用axios携带参数发送请求
const value = 10;
axios.get('http://localhost:3000/search/users?q=${value}')
.then(
res => {console.log('success',res.data);},
err => {console.log('fail',err)}
)
父子组件间的传值（props）
案例：App包含Search和List两个子组件，在Search组件中输入数据，点击按钮请求数据，将请求返回的数据给List组件，用于展示列表。
// 父组件中
export default class App extends Component{
state = {users:[]}
// 获取子组件Search返回的数据，保存在state中
saveUsers = users => {
this.setState({users})
}
render(){
return (
<div>
<Searrch saveUsers={this.saveUsers}/>
<List list={this.state.users}/>
</div>
) // 使用props传递函数和值给子组件
}
}
// 子组件Search中
export default class Search extends Component{
search = () => {
// 使用ref获取输入框的值
const value = this.inputValue.value;
axios.get('http://localhost:3000/search/users?q=${value}').then(
res => {
// 将接口返回的数据通过props传递给父组件
this.props.saveUsers(res.data)
},
err => {console.log('ereoe',err)}
)
}
render(){
return (
<div>
<input ref={c => this.inputValue = c} type="text" />
<button onClick={this.search}>点击获取数据</button>
</div>
)
}
}
// 子组件Lisr中
export default class List ectends Component{
render(){
return (
<div>
this.props.list.map(item => {
return (
<li key={item.id}>{item.name}</li>
)
})
</div>
) // 使用props获取父组件传递的数据
}
}
根据请求结果展示不同的页面效果
发送请求前的页面，发送请求时的页面，请求成功的页面，请求失败的页面。
// jsx使用嵌套三元表达式
beforeSend ? <h1>Welcome</h1> :
loading ? <h1>wait loading</h1> :
err ? <h1>something wrong</h1> :
<h1>response data</h1>
兄弟组件间通信（消息订阅与发布）
消息发布：把消息给别的兄弟组件，
消息订阅：可以接收别的兄弟组件发布的消息，
注意要在组件的componentWillUnmount中取消订阅
import PubSub from 'pubsub-js'
// 订阅,在接收消息的组件中使用
this.token = PubSub.subscribe('MY TOPIC',(msg,data)=>{
console.log(msg,data); // msg是消息订阅名称，data是发布传送的数据
});
// 取消订阅，在接收消息的组件中适用
componentWillUnmount(){
PubSub.unsubscribe(this.token)
}
// 发布，在发送消息的组件中使用
PubSub.publish('MY TOPIC','hello');
fetch发送请求
原生xhr对象=>jQuery（回调地狱）=>axios（promise）
fetch是windows对象自带的方法，也能发送请求，也有promise风格，适用IE8+浏览器。
// 原生xhr对象发送请求
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.resonseType = 'json';
xhr.onload = function(){
console.log(xhr.response);
}
xhr.onerror = function(){
console.log('error');
}
xhr.send();
// fetch发送请求
fetch(url).then( //进行服务器连接
response => {
console.log('联系服务器成功');
return response.json(); // 返回成功，值是一个promise对象
},
error => {
console.log('联系服务器失败',error);
return new Promise(()=>{}); // 设置空promise对象，以防联系服务器失败依旧走下面的then，显示获取数据成功，undefined
}
).then( // 前一个then中成功的回调返回的promise对象，继续操作
response => {console.log('获取数据成功',response)}, // response是数据
error =>{console.log('获取数据失败',error)}
)
// 优化写法
fetch(url).then(
response => {
console.log('联系服务器成功');
return response.json();
}
).then(
response => {console.log('获取数据成功',response)}
).catch(
error => {console.log('请求出错',error)}
)
// 优化写法 await跟promise对象搭配使用,await适用外部要包含async函数
async()=>{
try{
const response = await fetch(url);
const data = await response.json();
console.log(data)
}catch(error){
console.log('请求出错',error)
}
}
路由
单页面web应用（SPA）整个应用只有一个完整页面，点击页面中的链接不会刷新整个页面，只会局部更新页面，数据都需要通过ajax请求获取，并在前端异步展现。
前端路由和后端路由
一个路由是一个映射关系（key: value），key是路径，value可以是function（后端路由）或component（前端路由）。
// node后端路由，根据请求路径调用函数来请求处理返回数据
router.get("/search/users",function(req,res){
axios.get(url).then(
res => {},
err=>{}
)
}
// 前端路由，根据请求路径返回组件更新页面内容
<Route path="/users" component={User}>
路由原理与基本使用
前端路由是基于浏览器的History工作的，在BOM中的History对象管理页面的访问路径历史记录等。
history对象使用栈存储页面路径，更改路径但是不跳转页面。
锚点跳转也可以更新路径，但不跳转页面。
// 引用history.js
let history = History.createBrowserHistory() // 方法一，直接使用H5推出的history对象的API
// let history = History.createHashHistory() // 方法一，hash值（锚点）
history.push(path)
history.replace(path)
history.goBack()
history.goForward()
react-router包含三个方面的库：web、native（native）、anywhere（能适用任何地方）。
主要学习react-router-dom库（web应用）。
react-router-dom@5
npm add react-router-dom@5 // 下载版本5的路由库
分析页面，找页面的导航区，展示区，不同的展示区就是不同的页面。要实现点击导航区链接改变路径，被路由器检测到路径改变，进行匹配组件，进而更新页面。导航区写路由组件链接，展示区注册路由。
<body>
<!--原生结构 -->
<div>
<span>
<a href="./about.html">About</a>
</span>
<span>
AboutPage
</span>
</div>
</body>
// App.jsx中，使用Link路由组件，类似原生中的a标签 <a href="./about.html">About</a>
import {Link,BrowserRouter} from 'react-router-dom'
import About from './pages/About'
<div>
<BrowserRouter>
<span>
<Link to="/about">About</Link> // （导航区使用路由链接）在react中使用路由链接实现组件切换，Link组件外必须有Router标签
</span>
<span>
<Route path="/about" component={About}> // （内容展示区注册路由）注册路由
</span>
</BrowserRouter>
</div>
// 路由组件About.jsx
export default class About extends Component{
render(){
return <span>AboutPage</span>
}
}
BrowserRouter和HashRouter
Router包含BrowserRouter和HashRouter，BrowserRouter适用于请求服务器的情况，路径中没有#，HashRouter适用于不请求服务器的情况，路径中带有#。
BrowserRouter使用的是H5的history API，不兼容IE9以下版本，HashRouter使用的是URL的哈希值。
页面刷新后，BrowserRouter没有任何影响，因为state会保存在history对象中，HashRouter会发生路由state参数丢失。
在使用路由组件时，必须用Router将路由组件包含起来，注册路由也需要使用同一个Router，因此需要包含在同一个Router里。
// App组件的index.js里，将整个App组件使用同一个Router包裹，所有的组件都使用一个Router管理
ReactDom.render(
<BrowserRouter>
<App/>
</BrowserRouter>
,document.getElementById('root'))
// 在App.jsx中只需要写Link和Route
<Link to="/about">About</Link>
<Route path="/about" component={About}>
路由组件和一般组件的最大区别在于，自带了props属性：history, location, match。
NavLink
使用NavLink可以实现路由链接的高亮，通过activeClassName指定自定义样式名。
<NavLink activeClassName="active" to="/abput">About</NavLink>
Switch
Switch组件，避免多个相同路径的路由一直匹配渲染。
// 多个路径相同的组件会一直匹配，About和Detail两个组件的内容都会显示在页面上
<Route path="/about" component={About}>
<Route path="/about" component={Detail}>
// 引入Switch组件后匹配到第一个就停止匹配
import {Switch} from 'react-router-dom'
<Switch> // 使用<Switch>包裹所有路由
<Route path="/about" component={About}> // 匹配到About组件就停止，页面只显示About组件的内容
<Route path="/about" component={Detail}>
</Switch>
路由的模糊匹配和严格匹配
// 无法显示页面
<Link to="/home">Home</Link>
<Route path="/home/a/b" component={Home}/>
// 可以显示页面，模糊匹配，最左逐个匹配home a b，匹配到了home
<link to="/home/a/b">Home</Link>
<Route path="/home" component={Home}/>
// 无法显示页面，严格匹配
<Link to="/home/a/b">Home</Link>
<Route exact={true} path="/home" component={Home}/>
Redirect重定向
当Redirect前面的路由都匹配不上时，走Redirect指定的路径。
import {Redirect} from 'react-router-dom'
<Switch>
<Route path="/home" component={Home}/>
<Route path="/about" component={About}/>
<Redirect to="/home"/> // 当没有点击导航，页面访问根路径“/”的时候，默认到home页面
</Switch>
嵌套路由（二级路由）
路由按照注册的顺序进行匹配，严格匹配会导致无法匹配二级路由
<div>
<div>
<Switch>
<NavLink to="/home">Home</NavLink> // 当开启严格匹配，点击Home组件中的二级路由链接，会跳转到about组件，展示不了Home组件
<NavLink to="/about">About</NavLink>
<Redirect to="/about"/>
</Switch>
</div>
<div>
<Route path="/home" component={Home}/>
<Route path="/about" component={About}/>
</div>
</div>
// Home组件
<div>
<div>
<NavLink to="/home/a">Home</NavLink>
<NavLink to="/home/b">About</NavLink>
</div>
<div>
<Route path="/home/a" component={HomeA}/> // 先匹配/home路由，来到Home页面，才继续匹配/a
<Route path="/home/b" component={HomeB}/>
</div>
</div>
向路由组件传递参数
params参数
<Link to="/details/apple/18">详情</Link>
<Route path="details/:name/:price" component={Details} />
this.props.match.params // 获取参数
search参数
import qs from 'querystring'
<Link to="/details?name=apple&price=18">详情</Link>
<Route path="/details" component={Details}/>
qs.parse(this.props.location.search) // 接收参数，获取到的是urlencode编码字符串，需要借助querystring解析
state参数
<Link to={{path:'/details',state:{name:'apple',price:18}}}>详情</Link>
<Route path="/details" component={Details}/>
this.props.location.state
编程式路由导航
路由跳转有replace和push两种方式，默认是push，push方式可以返回，在浏览器路径可以看到，replace是替换之前的路径，不可返回前面的路径。
// 编程式路由导航，使用方法改变路由
const {id,name} = this.props.match.params
// const {search} = this.props.location
// const {id,name} = qs.parse(search.slice(1))
// const {is,name} = this.props.location.state || {}
replaceShow = (id,name)=>{
this.props.history.replace('/users/${id}/${name}')
// this.props.history.replace('/users?id=${id}&name=${name}')
// this.props.history.replace('/users',{id:id,name:name})
}
pushShow = (id,name)=>{
this.props.history.push('/users/${id}/${name}')
// this.props.history.push('/users?id=${id}&name=${name}')
// this.props.history.push('/users',{id:id,name:name})
}
back = ()=>{
this.props.history.goBack()
}
forward = ()=>{
this.props.history.goForward()
}
go = ()=>{
this.props.history.go(2) // 前进两页，正数为前进，负数为后退
}
<button onClick={()=>{this.replaceShow(obj.id,obj.name)}}>replace查看</button>
<button onClick={()=>{this.pushShow(obj.id,obj.name)}}>push查看</button>
<button onClick={this.back}>回退</button>
<button onClick={this.forward}>前进</button>
<button onClick={this.go}>跳转</button>
// params
<Link to={'/users/${obj.id}/${obj.name}'}>{obj.name}</Link>
<Route path="/users/:id/:name" component={User}/>
// search
<Link to={'/users/?id=${id}&name=${name}'}>{obj.name}</Link>
<Route path="/users" component={User}/>
// state
<Link to={{pathname:'/users',state:{id:obj.id,name:obj.name}}}>{obj.name}</Link>
<Route path="/users" component={User}/>
withRouter
withRouter可以加工一般组件，让一般组件带有路由组件有的API（history,location,match），返回值是一个新组件。
// Header组件
import {withRouter} from 'react-router-dom'
class Header extends Component{
back = ()=>{
this.props.history.goBack()
}
render(){
return (
<button onClick={this.back}>回退</button>
)
}
}
export default withRouter(Header)
//User组件
export default class User extends Component{
render(){
return (
<div>
<Link to={'/users/${obj.id}/${obj.name}'}>{obj.name}</Link>
<Route path="/users/:id/:name" component={User}/>
</div>
)
}
}
antd UI
参考ant-Design官网文档
add antd // 终端引入库
import {Button} from 'antd' // 引入Button组件样式
import 'antd/dist/antd.css' // 新版可不引入
export default class App extends Component{
render(){
return (
<Button type="primary">按钮</Button>
)
}
}
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » React04 - react ajax、axios、路由和antd UI
发表评论 取消回复