FastAPI+React全栈开发10 MongoDB聚合查询

在FastAPI和React全栈开发中，我们可以使用MongoDB的聚合查询来处理复杂的数据操作。以下是一个简化的例子，展示了如何在FastAPI后端使用Motor（一个异步的MongoDB驱动）进行聚合查询，并在React前端展示结果。

FastAPI后端代码示例（main.py）:

from fastapi import FastAPI, HTTPException
from motor.motor_asyncio import AsyncIOMotorClient
from bson import ObjectId
from typing import Optional
 
app = FastAPI()
 
# 连接到MongoDB
client = AsyncIOMotorClient("mongodb://localhost:27017")
database = client.test_database
collection = database.get_collection("test_collection")
 
# 聚合查询的路由
@app.get("/aggregate/{id}")
async def aggregate_query(id: str):
    pipeline = [
        {"$match": {"$or": [{"field1": id}, {"field2": id}]}},
        {"$group": {"_id": "$field3", "count": {"$sum": 1}}},
        {"$sort": {"count": -1}}
    ]
    result = await collection.aggregate(pipeline).to_list(None)
    return result
 
# 其他路由和服务...

React前端代码示例（App.js）:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
const App = () => {
  const [aggregateResult, setAggregateResult] = useState([]);
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`http://localhost:8000/aggregate/some_id`);
        setAggregateResult(response.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
 
  return (
    <div>
      <h1>MongoDB Aggregate Query Result</h1>
      <ul>
        {aggregateResult.map((item) => (
          <li key={item._id}>
            {item._id}: {item.count}
          </li>
        ))}
      </ul>
    </div>
  );
};
 
export default App;

在这个例子中，我们定义了一个简单的聚合查询，它会在MongoDB中查找field1或field2包含特定ID的文档，然后按field3字段分组，并计算每组的文档数量，并按计数降序排序。我们在FastAPI后端定义了一个路由来执行这个查询，并在React前端使用axios来发起GET请求，获取并展示结果。