生活随笔
收集整理的這篇文章主要介紹了
React后台管理系统-首页Home组件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.Home組件要顯示用戶總數(shù)、商品總數(shù)和訂單總數(shù)，數(shù)據(jù)請(qǐng)求后端的 /manage/statistic/base_count.do接口，返回的是
this.state = { ???????????userCount : '-', ???????????productCount : '-', ???????????orderCount : '-' ???????} //頁面掛載之后請(qǐng)求數(shù)據(jù) componentDidMount(){ ???????this.loadCount(); ???} ???loadCount(){ ? ? ? ?//請(qǐng)求后端的接口 ???????_statistic.getHomeCount().then(res => { ???????????this.setState(res); ???????}, errMsg => { ???????????_mm.errorTips(errMsg); ???????}); ???}
2.把數(shù)據(jù)渲染到頁面上
<div id="page-wrapper"> ???????????????<PageTitle title="首頁" /> ???????????????<div className="row"> ???????????????????<div className="col-md-4"> ???????????????????????<Link to="/user" className="color-box brown"> ???????????????????????????<p className="count">{this.state.userCount}</p> ???????????????????????????<p className="desc"> ???????????????????????????????<i className="fa fa-user-o"></i> ???????????????????????????????<span>用戶總數(shù)</span> ???????????????????????????</p> ???????????????????????</Link> ???????????????????</div> ???????????????????<div className="col-md-4"> ???????????????????????<Link to="/product" className="color-box green"> ???????????????????????????<p className="count">{this.state.productCount}</p> ???????????????????????????<p className="desc"> ???????????????????????????????<i className="fa fa-list"></i> ???????????????????????????????<span>商品總數(shù)</span> ???????????????????????????</p> ???????????????????????</Link> ???????????????????</div> ???????????????????<div className="col-md-4"> ???????????????????????<Link to="/order" className="color-box blue"> ???????????????????????????<p className="count">{this.state.orderCount}</p> ???????????????????????????<p className="desc"> ???????????????????????????????<i className="fa fa-check-square-o"></i> ???????????????????????????????<span>訂單總數(shù)</span> ???????????????????????????</p> ???????????????????????</Link> ???????????????????</div> ???????????????</div> ???????????</div>
更多專業(yè)前端知識(shí)，請(qǐng)上
【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的React后台管理系统-首页Home组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
