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 >

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