Flutter CQRS架构实现插件cqrs的使用

简介

cqrs 是一个用于与CQRS（命令查询职责分离）兼容后端进行便捷通信的库，它允许你通过查询和命令的方式操作数据。本文将详细介绍如何在Flutter项目中使用cqrs插件。

使用示例

添加依赖

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

dependencies:
  cqrs: ^latest_version # 替换为最新的版本号

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

创建查询和命令类

为了减少样板代码，你可以使用json_serializable来自动生成JSON序列化代码。

查询类

定义一个查询类，例如获取所有花的信息：

import 'package:cqrs/cqrs.dart';
import 'package:json_annotation/json_annotation.dart';

part 'all_flowers.g.dart';

@JsonSerializable()
class AllFlowers implements Query<List<Flower>> {
  const AllFlowers({required this.page});

  final int page;

  @override
  String getFullName() => 'AllFlowers';

  @override
  List<Flower> resultFactory(dynamic json) {
    return (json as List).map((e) => Flower.fromJson(e)).toList();
  }

  @override
  Map<String, dynamic> toJson() => _$AllFlowersToJson(this);
}

@JsonSerializable()
class Flower {
  Flower({required this.name, required this.pretty});

  final String name;
  final bool pretty;

  factory Flower.fromJson(Map<String, dynamic> json) => _$FlowerFromJson(json);
  Map<String, dynamic> toJson() => _$FlowerToJson(this);
}

记得运行flutter pub run build_runner build来自动生成序列化代码。

命令类

定义一个命令类，例如添加一朵新花：

import 'package:cqrs/cqrs.dart';
import 'package:json_annotation/json_annotation.dart';

part 'add_flower.g.dart';

@JsonSerializable()
class AddFlower implements Command {
  const AddFlower({
    required this.name,
    required this.pretty,
  });

  final String name;
  final bool pretty;

  @override
  String getFullName() => 'AddFlower';

  @override
  Map<String, dynamic> toJson() => _$AddFlowerToJson(this);
}

同样需要运行flutter pub run build_runner build。

初始化CQRS实例

创建一个HTTP客户端，并初始化CQRS实例：

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

void main() async {
  // API的基础URL，请确保URL以斜杠结尾
  final apiUri = Uri.parse('https://flowers.garden/api/');

  // 创建HTTP客户端，这里可以是一个处理token刷新等逻辑的自定义客户端
  final loginClient = http.Client();

  // 初始化CQRS实例
  final cqrs = Cqrs(loginClient, apiUri);

  // 执行查询和命令
  await fetchAndAddFlowers(cqrs);
}

Future<void> fetchAndAddFlowers(Cqrs cqrs) async {
  try {
    // 获取第一页的所有花
    final flowers = await cqrs.get(AllFlowers(page: 1));
    print('Fetched ${flowers.length} flowers.');

    // 添加一朵新花
    final result = await cqrs.run(AddFlower(name: 'Daisy', pretty: true));

    // 检查命令执行结果
    if (result is CommandSuccess) {
      print('Added a daisy successfully!');
    } else if (result is CommandFailure && result.isInvalid) {
      print('Validation errors occurred!');
      // 处理验证错误
    } else {
      print('Error occurred');
    }
  } catch (e) {
    print('An error occurred: $e');
  }
}

完整示例Demo

下面是一个完整的示例程序，展示了如何在Flutter应用中使用cqrs插件：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:cqrs/cqrs.dart';
import 'all_flowers.dart'; // 假设这是你定义查询类的文件
import 'add_flower.dart';  // 假设这是你定义命令类的文件

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

  // API的基础URL，请确保URL以斜杠结尾
  final apiUri = Uri.parse('https://flowers.garden/api/');

  // 创建HTTP客户端，这里可以是一个处理token刷新等逻辑的自定义客户端
  final loginClient = http.Client();

  // 初始化CQRS实例
  final cqrs = Cqrs(loginClient, apiUri);

  runApp(MyApp(cqrs: cqrs));
}

class MyApp extends StatelessWidget {
  final Cqrs cqrs;

  const MyApp({Key? key, required this.cqrs}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CQRS Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlowersPage(cqrs: cqrs),
    );
  }
}

class FlowersPage extends StatefulWidget {
  final Cqrs cqrs;

  const FlowersPage({Key? key, required this.cqrs}) : super(key: key);

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

class _FlowersPageState extends State<FlowersPage> {
  List<Flower>? _flowers;
  bool _isLoading = false;

  Future<void> fetchFlowers() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final flowers = await widget.cqrs.get(AllFlowers(page: 1));
      setState(() {
        _flowers = flowers;
      });
    } catch (e) {
      print('Failed to fetch flowers: $e');
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  Future<void> addFlower(String name, bool pretty) async {
    try {
      final result = await widget.cqrs.run(AddFlower(name: name, pretty: pretty));

      if (result is CommandSuccess) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Added a flower successfully!')),
        );
        await fetchFlowers(); // 刷新列表
      } else if (result is CommandFailure && result.isInvalid) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Validation errors occurred!')),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Error occurred')),
        );
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('An error occurred: $e')),
      );
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CQRS Demo'),
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : _flowers == null || _flowers!.isEmpty
              ? Center(child: Text('No flowers found.'))
              : ListView.builder(
                  itemCount: _flowers!.length,
                  itemBuilder: (context, index) {
                    final flower = _flowers![index];
                    return ListTile(
                      title: Text(flower.name),
                      subtitle: Text(flower.pretty ? 'Pretty' : 'Not pretty'),
                    );
                  },
                ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final name = await showDialog<String>(
            context: context,
            builder: (context) => AlertDialog(
              title: Text('Add Flower'),
              content: TextField(
                decoration: InputDecoration(hintText: 'Enter flower name'),
              ),
              actions: [
                TextButton(
                  onPressed: () => Navigator.pop(context, ''),
                  child: Text('Cancel'),
                ),
                TextButton(
                  onPressed: () => Navigator.pop(context, 'Daisy'),
                  child: Text('OK'),
                ),
              ],
            ),
          );

          if (name != null && name.isNotEmpty) {
            addFlower(name, true);
          }
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

这个例子展示了如何在一个简单的Flutter应用中集成cqrs插件，包括查询花朵列表和添加新花朵的功能。希望这能帮助你更好地理解和使用cqrs插件。