React04 - react ajax、axios、路由和antd UI

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>)}
}