当前位置：首页 > React

react flask 实现分页

2026-01-27 03:23:37React

实现 React + Flask 分页功能

前端 React 部分

安装 axios 用于发送请求：

npm install axios

创建分页组件 Pagination.js：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Pagination() {
  const [items, setItems] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);
  const [totalItems, setTotalItems] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(`/api/items?page=${currentPage}&per_page=${itemsPerPage}`);
      setItems(res.data.items);
      setTotalItems(res.data.total);
    };
    fetchData();
  }, [currentPage, itemsPerPage]);

  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <div>
        {Array.from({length: Math.ceil(totalItems / itemsPerPage)}).map((_, index) => (
          <button key={index} onClick={() => paginate(index + 1)}>
            {index + 1}
          </button>
        ))}
      </div>
    </div>
  );
}

export default Pagination;

后端 Flask 部分

安装必要的 Flask 扩展：

pip install flask flask-sqlalchemy

创建 Flask 应用 app.py：

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)

class Item(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))

@app.route('/api/items', methods=['GET'])
def get_items():
    page = request.args.get('page', 1, type=int)
    per_page = request.args.get('per_page', 10, type=int)

    items = Item.query.paginate(page=page, per_page=per_page, error_out=False)

    return jsonify({
        'items': [{'id': item.id, 'name': item.name} for item in items.items],
        'total': items.total
    })

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=True)

前后端连接

确保 React 开发服务器代理 Flask 后端请求。在 React 项目的 package.json 中添加：

"proxy": "http://localhost:5000"

数据库初始化

运行 Flask 应用前创建数据库并添加测试数据：

with app.app_context():
    db.create_all()
    # 添加测试数据
    if not Item.query.first():
        for i in range(1, 101):
            db.session.add(Item(name=f'Item {i}'))
        db.session.commit()

样式优化

为分页按钮添加基本样式：

button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}

button.active {
  background-color: #007bff;
  color: white;
}

错误处理

添加基本错误处理：

const fetchData = async () => {
  try {
    const res = await axios.get(`/api/items?page=${currentPage}&per_page=${itemsPerPage}`);
    setItems(res.data.items);
    setTotalItems(res.data.total);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

性能优化

实现防抖减少频繁请求：

react flask 实现分页

useEffect(() => {
  const debounceTimer = setTimeout(() => {
    fetchData();
  }, 300);

  return () => clearTimeout(debounceTimer);
}, [currentPage, itemsPerPage]);