使用 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, List
   
   app = FastAPI()
   
   # MongoDB 连接
   client = AsyncIOMotorClient("mongodb://localhost:27017")
   db = client["blogdb"]
   collection = db["blogs"]
   
   # 定义博客模型
   class Blog(BaseModel):
       title: str
       content: str
       author: str
       created_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 =