Flutter数据库交互插件nanc_api_supabase的使用

本文将详细介绍如何在Flutter项目中使用nanc_api_supabase插件来与Supabase进行数据库交互。通过该插件，您可以直接从Nanc界面管理Supabase中的所有数据，包括创建新记录、新表以及定义它们之间的关系等。

使用步骤

1. 添加依赖

首先，在您的pubspec.yaml文件中添加nanc_api_supabase依赖：

dependencies:
  nanc_api_supabase: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

2. 初始化插件

在Flutter项目的入口文件（如main.dart）中初始化nanc_api_supabase插件，并配置Supabase的相关信息。例如：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final supabase = SupabaseClient(
    'https://your-project-id.supabase.co', // 替换为您的Supabase项目URL
    'your-api-key', // 替换为您的Supabase API密钥
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    initializeNancApi();
  }

  Future<void> initializeNancApi() async {
    await NancApi.init(supabase);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nanc API Supabase 示例'),
      ),
      body: Center(
        child: Text('初始化完成！'),
      ),
    );
  }
}

3. 创建新记录

接下来，我们将演示如何使用nanc_api_supabase插件在Supabase中创建新记录。假设我们有一个名为users的表，我们将向该表插入一条新记录。

Future<void> createNewRecord() async {
  try {
    final response = await NancApi.insert(
      table: 'users',
      fields: {
        'name': 'John Doe',
        'email': 'john.doe@example.com',
        'age': 30,
      },
    );
    print('新记录已创建: $response');
  } catch (e) {
    print('创建记录失败: $e');
  }
}

4. 查询数据

现在，我们将展示如何查询Supabase中的数据。例如，查询users表中的所有记录：

Future<void> fetchRecords() async {
  try {
    final response = await NancApi.select(
      table: 'users',
    );
    print('查询结果: $response');
  } catch (e) {
    print('查询失败: $e');
  }
}

5. 更新记录

接下来，我们将演示如何更新Supabase中的现有记录。例如，我们将更新users表中ID为1的记录：

Future<void> updateRecord() async {
  try {
    final response = await NancApi.update(
      table: 'users',
      fields: {'age': 31},
      condition: 'id = 1',
    );
    print('记录已更新: $response');
  } catch (e) {
    print('更新记录失败: $e');
  }
}

6. 删除记录

最后，我们将展示如何删除Supabase中的记录。例如，删除users表中ID为1的记录：

Future<void> deleteRecord() async {
  try {
    final response = await NancApi.delete(
      table: 'users',
      condition: 'id = 1',
    );
    print('记录已删除: $response');
  } catch (e) {
    print('删除记录失败: $e');
  }
}

完整示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final supabase = SupabaseClient(
    'https://your-project-id.supabase.co', // 替换为您的Supabase项目URL
    'your-api-key', // 替换为您的Supabase API密钥
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    initializeNancApi();
  }

  Future<void> initializeNancApi() async {
    await NancApi.init(supabase);
  }

  Future<void> createNewRecord() async {
    try {
      final response = await NancApi.insert(
        table: 'users',
        fields: {
          'name': 'John Doe',
          'email': 'john.doe@example.com',
          'age': 30,
        },
      );
      print('新记录已创建: $response');
    } catch (e) {
      print('创建记录失败: $e');
    }
  }

  Future<void> fetchRecords() async {
    try {
      final response = await NancApi.select(
        table: 'users',
      );
      print('查询结果: $response');
    } catch (e) {
      print('查询失败: $e');
    }
  }

  Future<void> updateRecord() async {
    try {
      final response = await NancApi.update(
        table: 'users',
        fields: {'age': 31},
        condition: 'id = 1',
      );
      print('记录已更新: $response');
    } catch (e) {
      print('更新记录失败: $e');
    }
  }

  Future<void> deleteRecord() async {
    try {
      final response = await NancApi.delete(
        table: 'users',
        condition: 'id = 1',
      );
      print('记录已删除: $response');
    } catch (e) {
      print('删除记录失败: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nanc API Supabase 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: createNewRecord,
              child: Text('创建新记录'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: fetchRecords,
              child: Text('查询记录'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: updateRecord,
              child: Text('更新记录'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: deleteRecord,
              child: Text('删除记录'),
            ),
          ],
        ),
      ),
    );
  }
}