Reaccionar el sistema de gestión de fondo-componente Home Home Reaccionar el sistema de gestión de fondo-componente Home Home

Reaccionar el sistema de gestión de fondo-Componente de inicio

1. El componente Inicio debe mostrar el número total de usuarios, el número total de productos y el número total de pedidos. La interfaz /manage/statistic/base_count.do del backend de solicitud de datos devuelve el

1. this .state = {
2.            userCount: '-',
3.            productCount: '-',
4.            orderCount: '-'
5.        }
6.  // Solicitar datos después de montar la página
7. componentDidMount () {
8.        este .loadCount ();
9.    }
10.    loadCount () {
11.        // Solicitar la interfaz de fondo
12.        _statistic.getHomeCount (). then (res => {
13.            este .setState (res);
14.        }, errMsg => {
15.            _mm.errorTips (errMsg);
16.        });
17.    }

2. Renderice los datos a la página.

1. <div id = " envoltorio de página ">
2.                <PageTitle title = " Inicio " />
3.                <div className = " row ">
4.                    <div className = " col-md-4 ">
5.                        <Enlace a = " / usuario " 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> Usuarios totales </ span>
10.                            </p>
11.                        </Link>
12.                    </div>
13.                    <div className = " col-md-4 ">
14.                        <Enlace a = " / producto " className = " cuadro de color verde ">
15.                            <p className = " count "> { this .state.productCount} </p>
16.                            <p className = " desc ">
17.                                <i className = " fa fa-list "> </i>
18.                                <span> Total de artículos </ span>
19.                            </p>
20.                        </Link>
21.                    </div>
22.                    <div className = " col-md-4 ">
23.                        <Enlace a = " / 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 de pedidos </ span>
28.                            </p>
29.                        </Link>
30.                    </div>
31.                </div>
32.            </div>

EN. Publicado 04/16/2020 19:53   Seis, hc   lectura ( ... ) comentarios ( ... )  editar   colecciones

1. El componente Inicio debe mostrar el número total de usuarios, el número total de productos y el número total de pedidos. La interfaz /manage/statistic/base_count.do del backend de solicitud de datos devuelve el

1. this .state = {
2.            userCount: '-',
3.            productCount: '-',
4.            orderCount: '-'
5.        }
6.  // Solicitar datos después de montar la página
7. componentDidMount () {
8.        este .loadCount ();
9.    }
10.    loadCount () {
11.        // Solicitar la interfaz de fondo
12.        _statistic.getHomeCount (). then (res => {
13.            este .setState (res);
14.        }, errMsg => {
15.            _mm.errorTips (errMsg);
16.        });
17.    }

2. Renderice los datos a la página.

1. <div id = " envoltorio de página ">
2.                <PageTitle title = " Inicio " />
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>