FastAPI、MongoDB与Flutter构建的CRUD应用开发指南

引言

本报告旨在提供一个全面的指南，介绍如何使用FastAPI作为后端框架、MongoDB作为数据库、以及Flutter作为前端框架，构建一个完整的CRUD（创建、读取、更新、删除）应用程序。我们将通过构建一个图书管理系统来展示整个开发流程，从后端API的创建到前端UI的实现，以及两者之间的集成。

FastAPI概述

什么是FastAPI？

FastAPI是一个现代、快速（高性能）的Web框架，用于构建API，基于标准的Python类型提示。它具有以下特点：

• 高性能：可与NodeJS和Go并肩的极高性能（归功于Starlette）
• 自动交互式API文档：默认内置两个交互式API文档，包括可交互式操作的Swagger UI
• 自动验证请求：基于Python类型提示的自动数据验证
• 支持异步编程：允许构建高并发的应用程序

FastAPI已经广泛应用于生产环境，测试覆盖率保持在100%，并且仍在快速开发中，新功能经常被添加，错误经常被修复[1]。

FastAPI环境设置

使用FastAPI的第一步是安装必要的依赖。我们可以使用以下命令安装FastAPI和Uvicorn（用于运行FastAPI应用）：

bash

复制

pip install fastapi uvicorn

为了创建一个虚拟环境，可以使用Python自带的venv模块：

bash

复制

python -m venv myenv
source myenv/bin/activate  # 在Unix/Linux/MacOS上

然后在虚拟环境中安装FastAPI和相关依赖。

创建一个简单的FastAPI应用

创建一个名为main.py的文件，添加以下代码：

python

复制

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Hello World"}

然后使用Uvicorn运行应用：

bash

复制

uvicorn main:app --reload

这将启动一个开发服务器，监听在http://localhost:8000，并且启用了自动重新加载功能。

MongoDB概述

MongoDB是一个流行的NoSQL数据库，以其灵活性和可扩展性而闻名。以下是MongoDB的一些关键特性：

• 文档存储：使用类似JSON的文档存储数据，结构灵活
• 高可用性：支持复制和自动故障转移
• 水平扩展：通过分片支持数据集的水平扩展
• 丰富的查询语言：支持复杂的查询操作

最新的MongoDB版本提供了许多新特性，包括改进的性能、新的操作符和更好的安全性[5、6]。

连接到MongoDB

要在Python中连接到MongoDB，我们可以使用Motor库，这是一个异步的MongoDB驱动程序，特别适合与FastAPI这样的异步框架一起使用。

安装Motor：

bash

复制

pip install motor

然后在FastAPI应用中连接到MongoDB：

python

复制

from motor import motor_asyncio
import asyncio

async def main():
    client = motor_asyncio.AsyncIOMotorClient('mongodb://localhost:27017')
    db = client['mydatabase']
    print("Connected to MongoDB!")
    
asyncio.run(main())

Flutter概述

Flutter是一个开源的UI工具包，由Google开发，允许开发人员使用一套代码库构建原生应用，适用于iOS和Android平台。Flutter的关键特性包括：

• 热重载：快速迭代和开发
• 丰富的widget库：提供各种UI组件
• 高性能：使用自己的渲染引擎
• 可定制性：可以创建自定义的UI组件

Flutter在2025年将继续发展，包括对Web和桌面应用的支持[10]。

创建一个简单的Flutter应用

使用Flutter创建一个新的项目：

bash

复制

flutter create myapp
cd myapp
flutter run

这将在iOS和Android模拟器（或实际设备）上运行一个简单的"Hello World"应用。

使用FastAPI和MongoDB构建后端API

现在，我们将使用FastAPI和MongoDB构建一个图书管理系统的后端API。

安装必要的依赖

除了FastAPI和Motor外，我们还需要安装Pydantic用于数据验证：

bash

复制

pip install fastapi motor pydantic

定义数据模型

使用Pydantic定义图书的数据模型：

python

复制

from pydantic import BaseModel
from typing import Optional

class Book(BaseModel):
    id: Optional[str] = None
    title: str
    author: str
    description: str

创建FastAPI应用

在main.py文件中，添加以下代码：

python

复制

from fastapi import FastAPI
from motor import motor_asyncio
from typing import Optional, List
from pydantic import BaseModel

class Book(BaseModel):
    id: Optional[str] = None
    title: str
    author: str
    description: str

app = FastAPI()
client = motor_asyncio.AsyncIOMotorClient('mongodb://localhost:27017')
db = client['bookstore']

@app.get("/books", response_model=List[Book])
async def get_books():
    books = []
    async for book in db.books.find():
        book["id"] = str(book["_id"])
        del book["_id"]
        books.append(book)
    return books

@app.post("/books")
async def create_book(book: Book):
    book_dict = book.dict()
    del book_dict["id"]
    result = await db.books.insert_one(book_dict)
    book.id = str(result.inserted_id)
    return book

@app.get("/books/{book_id}")
async def get_book(book_id: str):
    book = await db.books.find_one({"_id": ObjectId(book_id)})
    if book:
        book["id"] = str(book["_id"])
        del book["_id"]
        return book
    return {"error": "Book not found"}, 404

@app.put("/books/{book_id}")
async def update_book(book_id: str, book: Book):
    book_dict = book.dict()
    del book_dict["id"]
    await db.books.update_one({"_id": ObjectId(book_id)}, {"$set": book_dict})
    return {"message": "Book updated successfully"}

@app.delete("/books/{book_id}")
async def delete_book(book_id: str):
    await db.books.delete_one({"_id": ObjectId(book_id)})
    return {"message": "Book deleted successfully"}

运行后端服务

使用Uvicorn运行FastAPI应用：

bash

复制

uvicorn main:app --reload

使用Flutter构建前端应用

现在，我们将使用Flutter构建图书管理系统的前端应用。

安装必要的依赖

在Flutter项目中，我们需要使用http包与后端API进行通信。在pubspec.yaml文件中添加：

yaml

复制

dependencies:
  http: ^0.15.0

创建图书数据模型

在Flutter项目中创建一个图书数据模型：

dart

复制

class Book {
  final String id;
  final String title;
  final String author;
  final String description;

  Book({
    required this.id,
    required this.title,
    required this.author,
    required this.description,
  });

  factory Book.fromJson(Map<String, dynamic> json) {
    return Book(
      id: json['_id']['\$oid'],
      title: json['title'],
      author: json['author'],
      description: json['description'],
    );
  }
}

创建网络服务类

创建一个网络服务类，用于与FastAPI后端进行通信：

dart

复制

import 'package:http/http.dart' as http;
import 'dart:convert';

class ApiService {
  final String baseUrl = 'http://localhost:8000';

  Future<List<Book>> getBooks() async {
    final response = await http.get(Uri.parse('$baseUrl/books'));
    if (response.statusCode == 200) {
      final List<dynamic> data = json.decode(response.body);
      return data.map((json) => Book.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load books');
    }
  }

  Future<Book> createBook(Book book) async {
    final response = await http.post(
      Uri.parse('$baseUrl/books'),
      headers: {'Content-Type': 'application/json'},
      body: json.encode({
        'title': book.title,
        'author': book.author,
        'description': book.description,
      }),
    );
    if (response.statusCode == 200) {
      return Book.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to create book');
    }
  }

  Future<Book> getBook(String id) async {
    final response = await http.get(Uri.parse('$baseUrl/books/$id'));
    if (response.statusCode == 200) {
      return Book.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to load book');
    }
  }

  Future<void> updateBook(String id, Book book) async {
    final response = await http.put(
      Uri.parse('$baseUrl/books/$id'),
      headers: {'Content-Type': 'application/json'},
      body: json.encode({
        'title': book.title,
        'author': book.author,
        'description': book.description,
      }),
    );
    if (response.statusCode == 200) {
      return;
    } else {
      throw Exception('Failed to update book');
    }
  }

  Future<void> deleteBook(String id) async {
    final response = await http.delete(Uri.parse('$baseUrl/books/$id'));
    if (response.statusCode == 200) {
      return;
    } else {
      throw Exception('Failed to delete book');
    }
  }
}

创建UI组件

主页面（图书列表）

dart

复制

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'book_model.dart';
import 'api_service.dart';

class BookListScreen extends StatefulWidget {
  @override
  _BookListScreenState createState() => _BookListScreenState();
}

class _BookListScreenState extends State<BookListScreen> {
  late Future<List<Book>> books;
  final apiService = ApiService();

  @override
  void initState() {
    super.initState();
    refreshBooks();
  }

  Future<void> refreshBooks() async {
    try {
      books = apiService.getBooks();
      setState(() {});
    } catch (e) {
      print(e.toString());
    }
  }

  Future<void> _showAddBookDialog() async {
    TextEditingController titleController = TextEditingController();
    TextEditingController authorController = TextEditingController();
    TextEditingController descriptionController = TextEditingController();

    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Add New Book'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: titleController,
                decoration: const InputDecoration(hintText: 'Title'),
              ),
              TextField(
                controller: authorController,
                decoration: const InputDecoration(hintText: 'Author'),
              ),
              TextField(
                controller: descriptionController,
                decoration: const InputDecoration(hintText: 'Description'),
              ),
            ],
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('Cancel'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: const Text('Add'),
              onPressed: () async {
                try {
                  Book newBook = Book(
                    id: '',
                    title: titleController.text,
                    author: authorController.text,
                    description: descriptionController.text,
                  );
                  await apiService.createBook(newBook);
                  Navigator.of(context).pop();
                  refreshBooks();
                } catch (e) {
                  print(e.toString());
                }
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Book Management'),
        actions: [
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: _showAddBookDialog,
          ),
        ],
      ),
      body: FutureBuilder<List<Book>>(
        future: books,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.separated(
              padding: const EdgeInsets.all(8),
              itemCount: snapshot.data!.length,
              itemBuilder: (BuildContext context, int index) {
                Book book = snapshot.data![index];
                return ListTile(
                  title: Text(book.title),
                  subtitle: Text(book.author),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () async {
                      try {
                        await apiService.deleteBook(book.id);
                        refreshBooks();
                      } catch (e) {
                        print(e.toString());
                      }
                    },
                  ),
                  onTap: () async {
                    try {
                      Book selectedBook = await apiService.getBook(book.id);
                      await Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => BookDetailScreen(book: selectedBook),
                        ),
                      );
                      refreshBooks();
                    } catch (e) {
                      print(e.toString());
                    }
                  },
                );
              },
              separatorBuilder: (BuildContext context, int index) =>
                  const Divider(),
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('${snapshot.error}'));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

图书详情页面

dart

复制

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'book_model.dart';
import 'api_service.dart';

class BookDetailScreen extends StatefulWidget {
  final Book book;

  const BookDetailScreen({Key? key, required this.book}) : super(key: key);

  @override
  _BookDetailScreenState createState() => _BookDetailScreenState();
}

class _BookDetailScreenState extends State<BookDetailScreen> {
  late Book book;
  final apiService = ApiService();

  @override
  void initState() {
    super.initState();
    book = widget.book;
  }

  Future<void> _saveChanges() async {
    try {
      await apiService.updateBook(book.id, book);
      Navigator.pop(context, book);
    } catch (e) {
      print(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Book Detail'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(labelText: 'Title'),
              initialValue: book.title,
              onChanged: (value) => setState(() => book = Book(
                id: book.id,
                title: value,
                author: book.author,
                description: book.description,
              )),
            ),
            TextField(
              decoration: const InputDecoration(labelText: 'Author'),
              initialValue: book.author,
              onChanged: (value) => setState(() => book = Book(
                id: book.id,
                title: book.title,
                author: value,
                description: book.description,
              )),
            ),
            TextField(
              decoration: const InputDecoration(labelText: 'Description'),
              initialValue: book.description,
              onChanged: (value) => setState(() => book = Book(
                id: book.id,
                title: book.title,
                author: book.author,
                description: value,
              )),
            ),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  child: const Text('Cancel'),
                  onPressed: () => Navigator.pop(context),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  child: const Text('Save'),
                  onPressed: _saveChanges,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

整合与测试

运行后端服务

确保MongoDB服务器正在运行，然后在终端中运行：

bash

复制

uvicorn main:app --reload

运行前端应用

在另一个终端中，导航到Flutter项目目录，然后运行：

bash

复制

flutter run

测试CRUD操作

1. 创建图书：在主页面点击"添加"按钮，输入图书信息，然后点击"添加"。
2. 查看图书详情：在主页面点击某本书，进入详情页面。
3. 更新图书信息：在详情页面修改图书信息，然后点击"保存"。
4. 删除图书：在主页面点击某本书旁边的删除按钮。

结论

本报告详细介绍了如何使用FastAPI、MongoDB和Flutter构建一个完整的CRUD应用程序。通过遵循本指南，您可以创建一个功能齐全的图书管理系统，包括后端API和前端UI。这个示例可以作为基础，扩展到其他类型的应用程序。

参考文献

[1] FastAPI官方文档. https://fastapi.tiangolo.com/zh/.

[5] MongoDB 7.0新特性概览 - 阿里云文档. https://help.aliyun.com/zh/mongodb/product-overview/features-of-mongodb-7-0.

[6] 使用MongoDB 8.0 的四大理由. https://www.mongodb.com/blog/post/top-4-reasons-to-use-mongodb-8-0-cn.

[10] Flutter 2025 年产品路线图发布. https://docs.flutter.cn/posts/flutter-2025-roadmap.

[22] 实现MongoDB fastapi详细教程 - 51CTO博客. https://blog.51cto.com/u16175441/9761973.

[55] RealPython-中文系列教程-四- - 绝不原创的飞龙- 博客园. https://www.cnblogs.com/apachecn/p/18522860.

[64] 问如何将FastAPI路由器与FastAPI-用户和MongoDB结合使用？ - 腾讯云. https://cloud.tencent.com/developer/ask/sof/107837582/answer/132660143.