Reactバックグラウンド管理システム-ホームホームコンポーネントReactバックグラウンド管理システム-ホームホームコンポーネント

Reactバックグラウンド管理システム-ホームコンポーネント

1. Homeコンポーネントは、ユーザーの総数、製品の総数、注文の総数を表示する必要があります。データリクエストバックエンドの/manage/statistic/base_count.doインターフェースは、

1. この .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 = " 行 ">
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.                        </リンク>
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.                        </リンク>
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.                        </リンク>
30.                    </ div>
31.                </ div>
32.            </ div>

ON。投稿2020年4月16日夜07時53分  六、HC   の読み取り（...）コメント（...）  編集  コレクション

1. Homeコンポーネントは、ユーザーの総数、製品の総数、注文の総数を表示する必要があります。データリクエストバックエンドの/manage/statistic/base_count.doインターフェースは、

1. この .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>