使用 FastAPI 和 MongoDB 实现分页查询功能，并在 React 中进行分页展示

第一部分：FastAPI 和 MongoDB 后端

1. 安装必要的库
   安装 FastAPI、Uvicorn、Motor（用于 MongoDB 的异步驱动）和 Pydantic（用于数据验证）。

   pip install fastapi uvicorn motor pydantic
   

2. 创建 FastAPI 应用
   创建一个文件 main.py，并在其中定义分页查询接口。

   # main.py
   from fastapi import FastAPI, HTTPException, Query
   from motor.motor_asyncio import AsyncIOMotorClient
   from pydantic import BaseModel
   from bson import ObjectId
   from typing import Optional, Listapp = FastAPI()# MongoDB 连接
   client = AsyncIOMotorClient("mongodb://localhost:27017")
   db = client["blogdb"]
   collection = db["blogs"]# 定义博客模型
   class Blog(BaseModel):title: strcontent: strauthor: strcreated_at: str# 写入100条测试数据
   async def create_test_data():for i in range(100):blog = Blog(title=f"测试博客 {i+1}",content=f"这是第 {i+1} 篇博客的内容",author=f"作者 {i+1}",created_at="2025-05-10 12:33:33")await collection.insert_one(blog.dict())# 初始化时创建测试数据
   @app.on_event("startup")
   async def startup_event():await create_test_data()# 分页查询博客
   @app.get("/blogs/")
   async def get_blogs(page: int = Query(1, ge=1),page_size: int = Query(10, ge=1, le=100)
   ):skip =