React后台管理系统-首页Home组件

React后台管理系统-首页Home组件

1.Home组件要显示用户总数、商品总数和订单总数，数据请求后端的 /manage/statistic/base_count.do接口，返回的是

1. this.state = {
2.            userCount : '-',
3.            productCount : '-',
4.            orderCount : '-'
5.        }
6.  //页面挂载之后请求数据
7. componentDidMount(){
8.        this.loadCount();
9.    }
10.    loadCount(){
11.        //请求后端的接口
12.        _statistic.getHomeCount().then(res => {
13.            this.setState(res);
14.        }, errMsg => {
15.            _mm.errorTips(errMsg);
16.        });
17.    }

2.把数据渲染到页面上

1. <div id="page-wrapper">
2.                <PageTitle title="首页" />
3.                <div className="row">
4.                    <div className="col-md-4">
5.                        <Link to="/user" className="color-box brown">
6.                            <p className="count">{this.state.userCount}</p>
7.                            <p className="desc">
8.                                <i className="fa fa-user-o"></i>
9.                                <span>用户总数</span>
10.                            </p>
11.                        </Link>
12.                    </div>
13.                    <div className="col-md-4">
14.                        <Link to="/product" className="color-box green">
15.                            <p className="count">{this.state.productCount}</p>
16.                            <p className="desc">
17.                                <i className="fa fa-list"></i>
18.                                <span>商品总数</span>
19.                            </p>
20.                        </Link>
21.                    </div>
22.                    <div className="col-md-4">
23.                        <Link to="/order" className="color-box blue">
24.                            <p className="count">{this.state.orderCount}</p>
25.                            <p className="desc">
26.                                <i className="fa fa-check-square-o"></i>
27.                                <span>订单总数</span>
28.                            </p>
29.                        </Link>
30.                    </div>
31.                </div>
32.            </div>