react 使用express实现简单的分页接口

前言

本文基于 react (“react”: “^16.13.1”) ,express（“express”: “~4.16.1”,）;
有一定的express了解，并能写简单的接口。

1.定义一个接口

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  let itemArr = [
    { username: 'Keely'},
    { username: '敖丙' },
    { username: '晨曦时梦见兮' },
    { username: '神三元' },
    { username: '冴羽' },
    { username: 'jsonchao' },
    { username: '夜幕降临耶'},
    { username: '给我点阳光就灿烂' },
    { username: '沉默王二' },
    { username: '_yuanhao' },
    { username: '芦半山' }
  ];
  // 数据处理
  let data = [];
  let page = req.query.page; // 页数
  let pageSize = req.query.pageSize; // 条数
  let len = (1000 - pageSize * (page - 1)) < pageSize ? (1000 - pageSize * (page - 1)) : pageSize; // 返回条数
  for (i = 0; i < len; i++) {
    // 随机返回数组一项
    let n = Math.floor(Math.random() * itemArr.length + 1) - 1;
    itemArr[n].id = (page - 1) * pageSize + (i + 1);
    data.push(itemArr[n]);
  }
  // 模拟延迟返回数据
  setTimeout(() => {
    res.json({
      data
    });
  }, 500);
});

module.exports = router;

2.使用

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  componentDidMount() {
    axios.get('/api/users', {
      params: {
        page: 1,
        pageSize: 10
      }
    })
      .then(res => {
        console.log(res);
      })
    // 在3秒钟后模拟分页再次被请求
    setTimeout(() => {
      axios.get('/api/users', {
        params: {
          page: 1,
          pageSize: 6
        }
      })
        .then(res => {
          console.log(res);
        })
    }, 3000);
  }
}

export default App;

3.效果