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

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部