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组件相关推荐

React后台管理系统-品类选择器二级联动组件
React后台管理系统-品类选择器二级联动组件品类选择器二级联动 posted on 2018-06-26 22:21 gisery 阅读( ...) 评论( ...) 编辑收藏
【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
P6-Vue3后台管理系统-构建业务组件连通公共组件
P6-Vue3后台管理系统-构建业务组件连通公共组件 1.概述这篇文章我们将创建业务模块,并且与公共组件进行连通. 2.构建业务模块 2.1.构建Home 2.2.构建VideoManage 2.3 ...
从头开始react后台管理系统-安装ant-Design
从头开始react后台管理系统-安装ant-Design introduce 在做微信小程序, 想着顺便做一个管理系统的随便扯扯我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer.心情很 ...
react后台管理系统项目总结
React后台管理项目 1.创建一个项目 2.配置一个ui插件库开始实现跳转快速获取路由地址将路由和组件映射 axios请求实现登录模块隐藏二级路由按照价格排序或者按照销量等排序管理员 ...
后台管理系统--首页及登录认证
我们首先要学习UI组件的布局: 当你仔细阅读过后你会看明白以下代码! Container 布局容器 | Element Plus <template><el-container> ...
《React后台管理系统实战：十一》可视图表及首页图表
一.简介及环境安装 les135- 1.常用数据可视化图表库 1) echarts a. https://echarts.baidu.com/ b. 百度开源, 如果要在 react 项目中使用, 需 ...
React后台管理系统-file-uploader组件
1.React文件上传组件github地址: https://github.com/SoAanyip/React-FileUpload 2.Util里边新建file-uploader文件夹,里边新建i ...
React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...

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

React后台管理系统-首页Home组件相关推荐

最新文章

热门文章