內(nèi)容:網(wǎng)絡(luò)請(qǐng)求、UI庫(kù)
一空猜、網(wǎng)絡(luò)請(qǐng)求
配置代理
在項(xiàng)目根目錄的package.json的第一層配置選項(xiàng)中增加一行
"proxy":"目標(biāo)域名地址[:端口號(hào)]"
在頁(yè)面中發(fā)起網(wǎng)絡(luò)請(qǐng)求時(shí)末盔,不需要寫(xiě)要請(qǐng)求的接口域名,直接寫(xiě)請(qǐng)求地址即可盆佣。
注意:一定要重啟react項(xiàng)目
1.jquery
(1)安裝
npm install jquery --save
(2)引用
import $ from 'jquery'
(3)使用
$.ajax({
url:'要請(qǐng)求的地址(不包含域名和端口號(hào))',
success:function(){
}
})
2.axios
(1)安裝
npm i axios --save
(2)引用
import axios from 'axios'
(3)使用
axios({
url:'/api/userlist'
}).then(res=>{
this.setState({
users:res.data.data
})
})
3.fetch
fetch它不需要安裝
fetch('請(qǐng)求地址',[配置選項(xiàng)]).then(獲取響應(yīng)往堡,要對(duì)響應(yīng)進(jìn)行JSON處理).then(獲取JSON處理之后的數(shù)據(jù))
get請(qǐng)求:
fetch('請(qǐng)求地址').then(res=>res.json()).then(resJson=>{...})
post請(qǐng)求:
fetch('請(qǐng)求地址',{
method:'post',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({key:value})
})
二械荷、UI庫(kù)
ant-design
1.安裝
npm install antd --save
2.引入樣式
src/App.js
import 'antd/dist/antd.css';
三、作業(yè)
使用antd進(jìn)行后臺(tái)頁(yè)面布局虑灰,做管理員管理吨瞎、輪播圖管理功能。