Rect

输入框双向绑定

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就是每一个路由页面。

发表评论

电子邮件地址不会被公开。 必填项已用*标注