React后台管理系统-用户列表页面

React后台管理系统-用户列表页面

1.页面的结构

1. //遍历list, 返回数据
2.       let listBody= this.state.list.map((user,index)=> {
3.           return (
4.            <tr key={index}>
5.              <td>{user.id}</td>
6.              <td>{user.username}</td>
7.              <td>{user.email}</td>
8.              <td>{user.phone}</td>
9.              <td>{new Date(user.createTime).toLocaleString()}</td>
10.          </tr>
11.        )
12.       });
13.       //当this.state.list.length<=0,第一次加载的时候firstLoading=true，显示"正在加载数据"
14.       //当this.state.list.length<=0,第一次加载的时候firstLoading=false，显示"正在加载数据"
15.       let listError=(
16.           <tr>
17.               <td colSpan="5" className="text-center">
18.                 {this.state.firstLoading ?"正在加载数据....." : "没有找到相应的结果"}
19.               </td>
20.           </tr>
21.       )
22.       let tableBody=this.state.list.length > 0 ? listBody:listError;
23.      return (
24.         <div id="page-wrapper">
25.               <PageTitle title="用户列表"/>
26.               <div className="row">
27.                   <table className="table table-striped table-bordered">
28.                       <thead>
29.                           <tr>
30.                               <th>ID</th>
31.                               <th>用户名</th>
32.                               <th>邮箱</th>
33.                               <th>电话</th>
34.                               <th>注册时间</th>
35.                           </tr>
36.                       </thead>
37.                       <tbody>
38.                           {
39.                             tableBody
40.                           }
41.                       </tbody>
42.                   </table>
43.               </div>
44.               {/* 分页组件 */}
45.               <Pagination current={this.state.pageNum}
46.               total={this.state.total}
47.               onChange={(pageNum) => {this.onPageNumChange(pageNum)}}/>
48.         </div>
49.      );

2.用户列表接口/manage/user/list.do ，请求数据为，pageNum和pageSize, pageSize默认为10，所以只需要传入当前页pageNum就可以了

1. this.state={
2.            list:[],
3.            pageNum:1,
4.            //判断是不是第一次加载
5.            firstLoading:true
6.        }

  请求后台数据

1. //当页码挂载之后请求数据
2.     componentDidMount(){
3.        this.loadUserList();
4.     }

1. loadUserList(){
2.        _user.getUserList(this.state.pageNum).then(res => {
3.            //res替换了state
4.            this.setState(res,() => {
5.                //第一次加载的时候把firstLoading设置为false
6.                this.setState({
7.                   firstLoading:false
8.                })
9.            });
10.        },errMsg =>{
11.             this.setState({
12.                 list : []
13.             });
14.             _mm.errorTips(errMsg);
15.        })
16.     }

3.当页码改变的时候触发onChange事件，调用onPageNumChange函数，传入当前页pageNum,更新state里边的pageNum

1. //当页数变化的时候改变pageNum
2.  onPageNumChange(pageNum){
3.      //setSate是个异步函数
4.      this.setState({
5.          pageNum : pageNum
6.      },() => {
7.          //当页码更新了重新请求每页的记录，后台返回数据是根据页码返回的
8.          this.loadUserList();
9.      })
10.  }