Flutter模拟数据插件mockzilla的使用

Mockzilla 是一个Flutter插件，用于运行和配置本地的、模拟的HTTP服务器，允许您的移动应用模拟对REST API的调用。

完整文档请参阅这里!

为什么使用Mockzilla？

• ✅ 编译时安全的模拟端点定义。
• ✅ HTTP客户端无关。
• ✅ 完全离线工作。
• ✅ 完全包含在您的应用程序代码库中。

快速上手

⚠️ 警告: Mockzilla仅作为开发工具使用。不要在生产环境中使用！有关如何使用不同的Dart入口点进行此操作的建议，请参阅这里。

(1) 创建Mockzilla服务器配置并添加模拟端点

final mockzillaConfig = MockzillaConfig().addEndpoint(
    () => EndpointConfig(
        name: "Hello world",
        endpointMatcher: (request) => request.uri.endsWith("/hello-world"),
        defaultHandler: (request) => const MockzillaHttpResponse(
            body: jsonEncode(const HelloWorldResponse())),
        errorHandler: (request) => const MockzillaHttpResponse(
            statusCode: 418,
        ),
    ),
);

(2) 启动模拟服务器！

// 确保在启动Mockzilla之前调用此方法!
WidgetsFlutterBinding.ensureInitialized();

await Mockzilla.startMockzilla(mockzillaConfig);

Mockzilla Desktop

Mockzilla Desktop应用程序允许您在运行时检查和配置模拟端点。您可以操纵响应并调整连接设备上的模拟延迟。

更多关于Mockzilla Desktop的信息可以在这里找到：Mockzilla Desktop概述。

ℹ️ 注意: Mockzilla Desktop从版本1.0.0开始取代了Web控制台。Web控制台现已弃用，并将最终退役。

示例代码

以下是example/lib/main.dart文件中的示例代码：

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:mockzilla/mockzilla.dart';
import 'package:mockzilla_example/engine/feature/packages/models.dart';
import 'package:mockzilla_example/engine/feature/packages/packages_client.dart';

import 'engine/config/mockzilla_config.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final params = await Mockzilla.startMockzilla(mockzillaConfig);
  debugPrint("""
    +----------------+-----------------------------------+
    |                Mockzilla started 🚀                |
    +----------------+-----------------------------------+
    | Mock base URL  | ${params.mockBaseUrl.padRight(33)} |
    | API base URL   | ${params.apiBaseUrl.padRight(33)} |
    | Endpoint count | ${params.config.endpoints.length.toString().padRight(33)} |
    +----------------+-----------------------------------+
  """);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const PackagesList(),
    );
  }
}

class PackagesList extends StatefulWidget {
  const PackagesList({super.key});

  @override
  State<PackagesList> createState() => _PackagesListState();
}

class _PackagesListState extends State<PackagesList> {
  final _packagesClient = PackagesClient(
    Dio(BaseOptions(contentType: "application/json")),
  );
  late Future<FetchPackagesResponse> _future;

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

  void fetchPackages() {
    setState(() {
      _future = _packagesClient.fetchPackages(
        const FetchPackagesRequest(query: "mockzilla"),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Mockzilla Demo"),
        actions: [
          IconButton(
            onPressed: fetchPackages,
            icon: const Icon(Icons.refresh),
          )
        ],
      ),
      body: FutureBuilder(
        future: _future,
        builder: (context, snapshot) => switch (snapshot.connectionState) {
          ConnectionState.waiting => const Center(
              child: CircularProgressIndicator(),
            ),
          ConnectionState.done when snapshot.hasData => ListView.builder(
              itemBuilder: (context, index) {
                final package = snapshot.data!.packages[index];
                return PackageCard(package: package);
              },
              itemCount: snapshot.data!.packages.length,
            ),
          _ => Center(
              child: Text(
                  "Something went wrong! Error is: \n${snapshot.error.toString()}"),
            ),
        },
      ),
    );
  }
}

class PackageCard extends StatelessWidget {
  final Package package;

  const PackageCard({
    required this.package,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Text(
            package.name,
            style: Theme.of(context).textTheme.headlineSmall,
          ),
          Text(package.description)
        ],
      ),
    );
  }
}

通过上述代码，您可以看到如何使用Mockzilla来创建一个简单的Flutter应用，该应用可以模拟API请求并显示响应结果。希望这些信息对您有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。