React background management system-Home Home component React background management system-Home Home component

React background management system-Home component

1. The Home component needs to display the total number of users, the total number of products and the total number of orders. The data request backend's /manage/statistic/base_count.do interface returns the

1. this.state = {
2.            userCount : '-',
3.            productCount : '-',
4.            orderCount : '-'
5.        }
6.  // Request data after the page is mounted
7. componentDidMount(){
8.        this.loadCount();
9.    }
10.    loadCount(){
11.        // Request the backend interface
12.        _statistic.getHomeCount().then(res => {
13.            this.setState(res);
14.        }, errMsg => {
15.            _mm.errorTips(errMsg);
16.        });
17.    }

2. Render the data to the page

1. <div id="page-wrapper">
2.                <PageTitle title = " Home " />
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> Total users </ 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> Total items </ 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> Total orders </ span>
28.                            </p>
29.                        </Link>
30.                    </div>
31.                </div>
32.            </div>

ON. Posted 2020-04-16 19:53   Six, hc   read ( ... ) Comments ( ... )  edit   collections

1. The Home component needs to display the total number of users, the total number of products and the total number of orders. The data request backend's /manage/statistic/base_count.do interface returns the

1. this.state = {
2.            userCount : '-',
3.            productCount : '-',
4.            orderCount : '-'
5.        }
6.  // Request data after the page is mounted
7. componentDidMount(){
8.        this.loadCount();
9.    }
10.    loadCount(){
11.        // Request the backend interface
12.        _statistic.getHomeCount().then(res => {
13.            this.setState(res);
14.        }, errMsg => {
15.            _mm.errorTips(errMsg);
16.        });
17.    }

2. Render the data to the page

1. <div id="page-wrapper">
2.                <PageTitle title = " Home " />
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>