Flutter MongoDB集成插件flutter_mongo_stitch_web的使用

flutter_mongo_stitch_web #

Flutter MongoDB 集成插件 flutter_mongo_stitch_web 是 flutter_mongo_stitch 的 Web 平台实现。

使用说明 #

导入包 #

从版本 0.7.1 开始，此插件作为 flutter_mongo_stitch 在 Web 平台上的官方实现，因此只需在依赖中添加 flutter_mongo_stitch: ^0.7.1 即可自动将其包含在项目中。

在较新的 Flutter 版本（>=1.12.13+hotfix.4）中，无需对 pubspec.yaml 文件进行额外修改：

dependencies:
  flutter:
    sdk: flutter
  flutter_mongo_stitch: ^0.7.1

Web 集成 #

从版本 0.2.0 开始，Web 集成已经完全在后台完成，开发者无需手动操作。

完整示例 Demo #

以下是一个完整的示例，展示如何在 Flutter Web 应用中使用 flutter_mongo_stitch_web 插件连接到 MongoDB 数据库并执行基本操作。

import 'package:flutter/material.dart';
import 'package:flutter_mongo_stitch/flutter_mongo_stitch.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MongoStitchExample(),
    );
  }
}

class MongoStitchExample extends StatefulWidget {
  [@override](/user/override)
  _MongoStitchExampleState createState() => _MongoStitchExampleState();
}

class _MongoStitchExampleState extends State<MongoStitchExample> {
  String status = "未连接";

  Future<void> connectToMongoDB() async {
    try {
      // 初始化 Stitch 客户端
      await MongoStitch.initialize('your-stitch-app-id');

      // 连接到数据库
      final client = MongoStitchClient('mongodb-atlas');
      final db = client.getDatabase('your-database-name');
      final collection = db.getCollection('your-collection-name');

      // 查询数据
      final queryResult = await collection.find({});

      setState(() {
        status = "已连接，查询结果: ${queryResult.length} 条记录";
      });
    } catch (e) {
      setState(() {
        status = "连接失败: $e";
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MongoDB Stitch 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(status),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: connectToMongoDB,
              child: Text('连接 MongoDB'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter MongoDB集成插件flutter_mongo_stitch_web的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter MongoDB集成插件flutter_mongo_stitch_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_mongo_stitch_web 是一个用于在 Flutter 应用中集成 MongoDB Stitch（现已更名为 MongoDB Realm）的插件。它允许你在 Flutter Web 应用中与 MongoDB 数据库进行交互。以下是如何使用 flutter_mongo_stitch_web 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_mongo_stitch_web 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_mongo_stitch_web: ^0.1.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 初始化 MongoDB Stitch

在你的 Flutter 应用中，你需要初始化 MongoDB Stitch 客户端。通常，你可以在 main.dart 文件中进行初始化：

import 'package:flutter_mongo_stitch_web/flutter_mongo_stitch_web.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 MongoDB Stitch
  await FlutterMongoStitchWeb.initialize(
    appId: 'your-app-id',  // 替换为你的 MongoDB Stitch App ID
  );

  runApp(MyApp());
}

3. 登录和认证

MongoDB Stitch 提供了多种认证方式，如匿名登录、电子邮件/密码登录、第三方登录等。你可以根据需要选择合适的认证方式。

例如，使用匿名登录：

import 'package:flutter_mongo_stitch_web/flutter_mongo_stitch_web.dart';

Future<void> loginAnonymously() async {
  try {
    await FlutterMongoStitchWeb.loginAnonymous();
    print('Logged in anonymously');
  } catch (e) {
    print('Failed to login anonymously: $e');
  }
}

4. 执行数据库操作

一旦登录成功，你可以使用 MongoDB Stitch 客户端执行数据库操作。例如，查询集合中的数据：

import 'package:flutter_mongo_stitch_web/flutter_mongo_stitch_web.dart';

Future<void> fetchData() async {
  try {
    final db = FlutterMongoStitchWeb.getDatabase('your-database-name');
    final collection = db.collection('your-collection-name');

    final documents = await collection.find().toList();
    print('Fetched documents: $documents');
  } catch (e) {
    print('Failed to fetch data: $e');
  }
}

5. 处理用户登出

当用户需要登出时，你可以调用 logout 方法：

import 'package:flutter_mongo_stitch_web/flutter_mongo_stitch_web.dart';

Future<void> logout() async {
  try {
    await FlutterMongoStitchWeb.logout();
    print('Logged out');
  } catch (e) {
    print('Failed to logout: $e');
  }
}
回到顶部