home

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --dev --mode development --open",
+    "start": "webpack-dev-server --dev --mode development",
     "build": "webpack --pro --mode production"
   },
   "keywords": [],

src/api/statistic.jsx

@@ -0,0 +1,34 @@
+/*
+ * @Author: Johnhong9527
+ * @Date:   2019-05-26 17:21:24
+ * @Last Modified by:   Johnhong9527
+ * @Last Modified time: 2019-05-26 17:26:30
+ */
+import { post, get } from 'util/http.jsx';
+export default class Statistic {
+  // 首页数据统计
+  getHomeCount() {
+    return get('/manage/statistic/base_count.do');
+  }
+  // 检查登陆接口的数据是不是合法
+  checkLoginInfo(loginInfo) {
+    let username = `${loginInfo.username}`,
+      password = `${loginInfo.password}`;
+    if (typeof username !== 'string' || username.length === 0) {
+      return {
+        status: false,
+        msg: '用户名不能为空'
+      };
+    }
+    if (typeof password !== 'string' || password.length === 0) {
+      return {
+        status: false,
+        msg: '密码不能为空'
+      };
+    }
+    return {
+      status: true,
+      msg: '验证通过'
+    };
+  }
+}

src/component/layout/index.jsx

@@ -33,7 +33,6 @@ export default class HLayout extends React.Component {
             {/* <HBreadcrumb /> */}
             {this.props.children}
           </Content>
-          <Footer>Footer</Footer>
         </Layout>
       </Layout>
     );

src/component/side-nav/index.jsx

@@ -57,7 +57,7 @@ class SideNav extends React.Component {
 			if (this.state.userInfo === '') {
 				_mutil.doLogin();
 			}
-			console.log(this.props.location.pathname.split('-')[0]);
+			// console.log(this.props.location.pathname.split('-')[0]);
 			this.setState({
 				current: this.props.location.pathname
 			});

src/page/home/index.jsx

@@ -1,20 +1,37 @@
 import React from 'react';
-import { Button, PageHeader } from 'antd';
+import { Button, PageHeader, Icon, Row, Col } from 'antd';
 import PageTitle from 'component/page-title/index.jsx';
 import './index.scss';
-
+import Statistic from 'api/statistic.jsx';
+import MUtil from 'util/mutil.jsx';
+// import axios from 'axios';
+const _statistic = new Statistic();
+const _mutil = new MUtil();
 export default class Home extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userCount: '_',
+      productCount: '_',
+      orderCount: '_'
+    };
+  }
+  componentDidMount() {
+    _statistic.getHomeCount().then(
+      res => {
+        this.setState({
+          userCount: res.data.userCount,
+          productCount: res.data.productCount,
+          orderCount: res.data.orderCount
+        });
+      },
+      errMsg => {
+        _mutil.errorTips(errMsg);
+      }
+    );
+  }
   getUser() {
     console.log(7);
-    fetch('/api/statistic', {
-      method: 'GET'
-    })
-      .then(function(response) {
-        return response.json();
-      })
-      .then(function(myJson) {
-        console.log(myJson);
-      });
   }
   render() {
     return (
@@ -24,14 +41,35 @@ export default class Home extends React.Component {
         <PageHeader title="首页"/>
         */}
         <PageTitle title="首页" />
-        <Button
-          onClick={e => {
-            this.getUser(e);
-          }}
-          type="primary"
-        >
-          get
-        </Button>
+        <Row gutter={48}>
+          <Col span={8}>
+            <div className="color-box brown">
+              <div className="number">{this.state.userCount}</div>
+              <div className="desc">
+                <Icon type="user" />
+                &nbsp;用户总数
+              </div>
+            </div>
+          </Col>
+          <Col span={8}>
+            <div className="color-box green">
+              <div className="number">{this.state.productCount}</div>
+              <div className="desc">
+                <Icon type="unordered-list" />
+                &nbsp;商品总数
+              </div>
+            </div>
+          </Col>
+          <Col span={8}>
+            <div className="color-box blue">
+              <div className="number">{this.state.orderCount}</div>
+              <div className="desc">
+                <Icon type="appstore" />
+                &nbsp;订单总数
+              </div>
+            </div>
+          </Col>
+        </Row>
       </div>
     );
   }

src/page/home/index.scss

@@ -3,4 +3,30 @@
   padding: 10px 30px;
   // background-color: blue;
   font-size: 20px;
+  .color-box {
+    padding: 20px 0;
+    height: 160px;
+    text-align: center;
+    opacity: 0.9;
+    color: #fff;
+    transition: all 220ms ease-in-out;
+    &.brown {
+      background-color: #f0ad4e;
+    }
+    &.green {
+      background-color: #5cb85c;
+    }
+    &.blue {
+      background-color: #4cb1cf;
+    }
+    .number{
+      font-size: 50px;
+      line-height: 90px
+    }
+    &:hover {
+      transform: scale(1.075, 1.075);
+      color: #000;
+      opacity: 1;
+    }
+  }
 }