完成用户列表页面功能

package.json

@@ -28,6 +28,7 @@
     "webpack-dev-server": "2.9.7"
   },
   "dependencies": {
+    "rc-pagination": "1.15.1",
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-router-dom": "^4.2.2"

src/app.jsx

@@ -7,23 +7,32 @@ import Layout from 'component/layout/index.jsx';
 // 页面
 import Home from 'page/home/index.jsx';
 import Login from 'page/login/index.jsx';
+import UserList from 'page/user/index.jsx';
+import ErrorPage from 'page/error/index.jsx';
 
 class App extends React.Component {
+
     render() {
+
         return (
             <Router>
                 <Switch>
                     {/* 登录页 */}
                     <Route path="/login" component={Login}></Route>
                     {/* 一般页面 */}
-                    <Route path="/" render={(props) => {
+                    <Route path="/" render={props => {
                         return (
                             <Layout>{/* 布局 */}
                                 {/* 布局中引用的内容板块 */}
                                 <Switch>
                                     <Route exact path="/" component={Home}></Route>
-                                    <Route exact path="/product" component={Home}></Route>
-                                    <Route exact path="/product-category" component={Home}></Route>
+                                    <Route path="/product" component={Home}></Route>
+                                    <Route path="/product-category" component={Home}></Route>
+                                    <Route path="/user/index" component={UserList}></Route>
+                                    <Redirect exact from="/user" to="/user/index"></Redirect>
+
+                                    {/* 错误页面 */}
+                                    <Route component={ErrorPage}></Route>
                                 </Switch>
                             </Layout>
                         );

src/component/layout/theme.css

@@ -50,7 +50,6 @@ h4 {
 p {
     font-size: 16px;
     line-height: 25px;
-    padding-top: 20px;
 }
 
 .panel {

src/component/nav-side/index.jsx

@@ -20,7 +20,7 @@ class SideNav extends React.Component {
 
                         <li className="active">
                             <Link to="/product">
-                                <i className="fa fa-sitemap"></i>
+                                <i className="fa fa-list"></i>
                                 <span>商品</span>
                                 <span className="fa arrow"></span>
                             </Link>
@@ -36,7 +36,7 @@ class SideNav extends React.Component {
 
                         <li className="active">
                             <Link to="/order">
-                                <i className="fa fa-sitemap"></i>
+                                <i className="fa fa-check-square-o"></i>
                                 <span>订单</span>
                                 <span className="fa arrow"></span>
                             </Link>
@@ -49,7 +49,7 @@ class SideNav extends React.Component {
 
                         <li className="active">
                             <Link to="/user">
-                                <i className="fa fa-sitemap"></i>
+                                <i className="fa fa-user-o"></i>
                                 <span>用户</span>
                                 <span className="fa arrow"></span>
                             </Link>

src/page/error/index.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import {Link} from 'react-router-dom';
+
+import PageTitle from 'component/page-title/index.jsx';
+
+class Error extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+
+    render() {
+        return (
+            <div id="page-wrapper">
+                <PageTitle title="出错了！"></PageTitle>
+                <div className="row">
+                    <div className="col-md-12">
+                        找不到该路径，
+                        <Link to="/">点击返回首页</Link>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+
+export default Error;

src/page/home/index.jsx

@@ -1,15 +1,72 @@
 import React from "react";
+
+import {Link} from 'react-router-dom';
+
+import CommerceUtil from 'util/commerce.jsx';
+import StatisticService from "service/statistic-service.jsx";
+
+const _commerce = new CommerceUtil();
+const _statisticService = new StatisticService();
+
 import PageTitle from 'component/page-title/index.jsx';
-import './index.css'
+import './index.scss'
 
 class Home extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            userCount: '-',
+            productCount: '-',
+            orderCount: '-'
+        };
+
+    }
+
+    componentDidMount() {
+        this.loadCount();
+    }
+
+    loadCount() {
+        _statisticService.getHomeCount().then(res => {
+            this.setState(res);
+        }, errMsg => {
+            // _commerce.errorTips(errMsg);
+            console.log("statistic:", errMsg);
+        });
+    }
+
     render() {
         return (
             <div id="page-wrapper">
                 <PageTitle title="首页"></PageTitle>
                 <div className="row">
-                    <div className="col-md-12">
-                        body
+                    <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>

src/page/home/index.scss

@@ -0,0 +1,28 @@
+.color-box {
+  display: block;
+  height: 160px;
+  text-align: center;
+  padding: 20px 0;
+  opacity: .9;/* 透明度: 1为完全不透明 */
+  transition: all .3s;/* 所有动画效果0.3秒 */
+  &:hover {
+    text-decoration: none;
+    color: #555;
+    opacity: 1;
+    transform: scale(1.08);/* 放大1.08倍 */
+  }
+  &:focus {
+    text-decoration: none;
+  }
+  .count {
+    font-size: 50px;
+    height: 80px;
+    line-height: 80px;
+  }
+  .desc {
+    font-size: 18px;
+    .fa {
+      margin-right: 5px;
+    }
+  }
+}

src/page/user/index.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import PageTitle from 'component/page-title/index.jsx';
+import Pagination from 'util/pagination/index.jsx';
+import CommerceUtil from 'util/commerce.jsx';
+import UserService from "service/user-service.jsx";
+
+const _commerce = new CommerceUtil();
+const _userService = new UserService();
+
+class UserList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            list: [], /* list必须初始化, 否则是undefined, 没法map */
+            pageNum: 1,
+            firstLoading: true/* 优化用户体验, 首次加载前, 显示正在加载, 加载成功后显示列表数据或错误提示数据 */
+        };
+    }
+
+    componentDidMount() {
+        this.loadUserList();
+    }
+
+    loadUserList() {
+        _userService.listUsers(this.state.pageNum).then(res => {
+            this.setState(res,
+                // 将firstLoading置为false
+                () => {
+                    this.setState({
+                        firstLoading: false
+                    })
+                });
+        }, errMsg => {
+            this.setState({
+                list: []
+            });
+            _commerce.errorTips(errMsg);
+        });
+    }
+
+    // 当页数变化时
+    onPageNumChange(pageNum) {
+        // 设置完页号后, 再load一次userList
+        // setState是一个异步方法, 第二个参数是成功后的回调
+        this.setState({
+            pageNum: pageNum
+        }, () => {
+            this.loadUserList();
+        });
+    }
+
+    render() {
+        let listBody = this.state.list.map((user, index) => {
+            return (<tr key={index}>
+                <td>{user.id}</td>
+                <td>{user.username}</td>
+                <td>{user.email}</td>
+                <td>{user.phone}</td>
+                <td>{new Date(user.createTime).toLocaleString()}</td>
+            </tr>);
+        });
+        let listError = (
+            <tr>
+                <td colSpan="5" className="text-center">
+                    {this.state.firstLoading ? "正在加载数据..." : "没有查询到数据"}
+                </td>
+            </tr>
+        );
+
+        let tableBody = this.state.list.length > 0 ? listBody : listError;
+
+        return (
+            <div id="page-wrapper">
+                <PageTitle title="用户列表"></PageTitle>
+                <div className="row">
+                    <div className="col-md-12">
+                        <table className="table table-striped table-bordered">
+                            <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>用户名</th>
+                                <th>邮箱</th>
+                                <th>电话</th>
+                                <th>注册时间</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {tableBody}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <Pagination
+                    current={this.state.pageNum}
+                    total={this.state.total}
+                    onChange={(pageNum) => {
+                        this.onPageNumChange(pageNum);
+                    }}/>
+            </div>
+        );
+    }
+}
+
+
+export default UserList;

src/service/statistic-service.jsx

@@ -0,0 +1,17 @@
+import CommerceUtil from 'util/commerce.jsx';
+
+const _commerce = new CommerceUtil();
+
+class StatisticService {
+    // 获取首页统计数据
+    getHomeCount(loginInfo) {
+        // 直接返回Promise对象, 使调用者可以链式调用
+        return _commerce.request({
+            type: "post",
+            url: '/manage/statistic/base_count.do',
+        });
+    }
+
+}
+
+export default StatisticService;

src/service/user-service.jsx

@@ -43,6 +43,17 @@ class UserService {
             url: '/user/logout.do'
         });
     }
+
+    // 用户列表
+    listUsers(pageNum) {
+        return _commerce.request({
+            type: "post",
+            url: '/manage/user/list.do',
+            data: {
+                pageNum: pageNum
+            }
+        });
+    }
 }
 
 export default UserService;

src/util/commerce.jsx

@@ -8,7 +8,7 @@ class CommerceUtil {
                 url: param.url || "",
                 dataType: param.dataType || "json",
                 data: param.data || null,
-                success(res) {
+                success: res => {
                     if (0 === res.status) {
                         typeof resolve === 'function' && resolve(res.data, res.msg);
                     } else if (10 === res.status) {
@@ -18,7 +18,7 @@ class CommerceUtil {
                         typeof reject === 'function' && reject(res.msg || res.data);
                     }
                 },
-                error(err) {
+                error: err => {
                     // statusText是http请求对象中的信息
                     typeof reject === 'function' && reject(err.statusText);
                 }