生活随笔
收集整理的這篇文章主要介紹了
React后台管理系统-首页Home组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.Home組件要顯示用戶總數、商品總數和訂單總數，數據請求后端的 /manage/statistic/base_count.do接口，返回的是
this.state = { ???????????userCount : '-', ???????????productCount : '-', ???????????orderCount : '-' ???????} //頁面掛載之后請求數據 componentDidMount(){ ???????this.loadCount(); ???} ???loadCount(){ ? ? ? ?//請求后端的接口 ???????_statistic.getHomeCount().then(res => { ???????????this.setState(res); ???????}, errMsg => { ???????????_mm.errorTips(errMsg); ???????}); ???}
2.把數據渲染到頁面上
<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>用戶總數</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>商品總數</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>訂單總數</span> ???????????????????????????</p> ???????????????????????</Link> ???????????????????</div> ???????????????</div> ???????????</div>
更多專業前端知識，請上
【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的React后台管理系统-首页Home组件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
