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.  }