Flutter电商后端集成插件vendure_sdk的使用

vendure_sdk 是一个用于在 Flutter 应用中与 Vendure 电子商务后端集成的插件。Vendure 是一个基于 Node.js 的现代电子商务框架，提供了灵活且可扩展的 API，适用于构建复杂的电子商务应用。

1. 安装 vendure_sdk

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

dependencies:
  flutter:
    sdk: flutter
  vendure_sdk: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 初始化 VendureClient

在你的 Flutter 应用中，首先需要初始化 VendureClient。这个客户端将用于与 Vendure 后端进行通信。

import 'package:vendure_sdk/vendure_sdk.dart';

void main() {
  final client = VendureClient(
    baseUrl: 'https://your-vendure-server.com',  // 你的Vendure服务器地址
    // 其他可选配置
  );

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final VendureClient client;

  MyApp({required this.client});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vendure Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vendure Flutter Demo'),
        ),
        body: MyHomePage(client: client),
      ),
    );
  }
}

3. 使用 VendureClient 进行查询和操作

你可以使用 VendureClient 来执行各种 GraphQL 查询和操作。以下是一些常见的用例：

获取产品列表

class MyHomePage extends StatelessWidget {
  final VendureClient client;

  MyHomePage({required this.client});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: client.query('''
        query {
          products(options: { take: 10 }) {
            items {
              id
              name
              description
            }
          }
        }
      '''),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else {
          final products = snapshot.data['products']['items'];
          return ListView.builder(
            itemCount: products.length,
            itemBuilder: (context, index) {
              final product = products[index];
              return ListTile(
                title: Text(product['name']),
                subtitle: Text(product['description']),
              );
            },
          );
        }
      },
    );
  }
}

添加商品到购物车

void addToCart(String productId, int quantity) async {
  final result = await client.mutate('''
    mutation {
      addItemToOrder(productVariantId: "$productId", quantity: $quantity) {
        ... on Order {
          id
          total
        }
        ... on ErrorResult {
          errorCode
          message
        }
      }
    }
  ''');

  if (result['addItemToOrder']['errorCode'] != null) {
    print('Error: ${result['addItemToOrder']['message']}');
  } else {
    print('Item added to cart. Order ID: ${result['addItemToOrder']['id']}');
  }
}

4. 处理身份验证

Vendure 通常需要身份验证来执行某些操作（如管理订单、用户信息等）。你可以使用 VendureClient 来处理登录和身份验证。

用户登录

void login(String email, String password) async {
  final result = await client.mutate('''
    mutation {
      login(username: "$email", password: "$password") {
        ... on CurrentUser {
          id
          identifier
        }
        ... on ErrorResult {
          errorCode
          message
        }
      }
    }
  ''');

  if (result['login']['errorCode'] != null) {
    print('Login failed: ${result['login']['message']}');
  } else {
    print('Login successful. User ID: ${result['login']['id']}');
  }
}

5. 错误处理

在与 Vendure 后端通信时，可能会遇到各种错误。确保在代码中正确处理这些错误，以便向用户提供有意义的反馈。

void fetchData() async {
  try {
    final result = await client.query('''
      query {
        products(options: { take: 10 }) {
          items {
            id
            name
            description
          }
        }
      }
    ''');
    print('Data: $result');
  } catch (e) {
    print('Error fetching data: $e');
  }
}