输入框双向绑定
onChange={(e)=>{
userInfo['phone'] = e.target.value;
setUserInfo({...userInfo})
}}
数据请求 fetch
// POST
let data = {
userInfo:JSON.stringify(userInfo),
goodList:JSON.stringify(goodList)
}
fetch('http://127.0.0.1:7979/api/v1/orders',{
method:"post",
headers:{
'content-type': 'application/json'
},
body:JSON.stringify(data)
})
.then((res) => res.json())
.then((data)=>{
if(data.code === 200){
message.success(data.msg)
}else {
message.error(data.msg)
}
})
//GET
fetch('http://127.0.0.1:7979/api/v1/goods')
.then((res) => res.json()) //先转换为json
.then((redJson) => {
console.log(redJson);
});
发送请求 Axios
index.js 配置
import axios from 'axios'
axios.defaults.baseURL ='http://127.0.0.1:8765';
// 这里是拦截器
axios.interceptors.request.use(function(config){
let token = localStorage.getItem('token')
if(token !== null) {
config.headers.Authorization = 'Bearer ' + token
}
return config
})
单页面使用
import Axios from 'axios'
Axios.post("/front/sms", values).then(res => { })
音频 -- 提示音频
import ReactAudioPlayer from 'react-audio-player';
<ReactAudioPlayer
src={audioUrl}
autoPlay
// controls
onEnded={()=>{ //播放结束
setAudioCan(false)
}}
/>
## 通过一个变量开控制是否播放这段音乐---一般做提示音使用
路由
import { BrowserRouter, Route } from 'react-router-dom'
import Room from './page/room'
import Index from './page/index';
<BrowserRouter>
<div className="index">
<Route exact path="/" component={Index}/>
<Route path='/room' component={Room} />
</div>
</BrowserRouter>
BrowserRouter需要包含著整体网页,Route就是每一个路由页面。