Flutter 鸿蒙Mock数据服务实现:数据模拟与接口映射

欢迎加入开源鸿蒙跨平台社区! https://openharmonycrossplatform.csdn.net

效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Mock数据服务演示

Mock配置

  • 启用/禁用Mock服务
  • 环境选择(开发/测试/生产)
  • Mock端点管理
  • Mock数据配置

请求拦截

  • 自动拦截请求
  • 返回Mock数据
  • 模拟网络延迟
  • 记录请求日志

Mock端点管理展示

端点列表

  • 显示所有Mock端点
  • 显示请求方法
  • 显示Mock数据
  • 启用/禁用开关

端点测试

  • 点击测试按钮
  • 查看Mock响应
  • 检查数据格式
  • 验证Mock配置

实现步骤

1. Mock服务实现

核心类设计

class MockService {
  final Map<String, MockConfig> _mocks = {};
  bool enabled = true;
  
  void register(String path, MockConfig config) {
    _mocks[path] = config;
  }
  
  Future<Response> intercept(Request request) async {
    if (!enabled) {
      return await realRequest(request);
    }
    
    final mock = _mocks[request.path];
    if (mock != null && mock.enabled) {
      return mock.response;
    }
    
    return await realRequest(request);
  }
}

2. Mock配置管理

配置数据结构

class MockConfig {
  final String path;
  final String method;
  final String mockData;
  final bool enabled;
  final int delay;
  
  Response get response {
    return Response(
      statusCode: 200,
      body: mockData,
    );
  }
}

配置加载

Future<void> loadMockConfig() async {
  final file = File('mock_config.json');
  final json = await file.readAsString();
  final config = jsonDecode(json);
  
  for (var item in config['endpoints']) {
    register(item['path'], MockConfig.fromJson(item));
  }
}

3. 请求拦截

拦截器实现

class MockInterceptor extends Interceptor {
  final MockService mockService;
  
  
  Future<Request> onRequest(Request request) async {
    if (mockService.enabled) {
      final mock = mockService.getMock(request.path);
      if (mock != null) {
        return MockRequest(request, mock);
      }
    }
    return request;
  }
}

4. 数据模拟

数据生成器

class MockDataGenerator {
  static Map<String, dynamic> generateUser() {
    return {
      'id': Random().nextInt(1000),
      'name': 'User ${Random().nextInt(100)}',
      'email': 'user${Random().nextInt(100)}@example.com',
    };
  }
  
  static List<Map<String, dynamic>> generateUsers(int count) {
    return List.generate(count, (i) => generateUser());
  }
}

功能特性

1. Mock配置

环境区分

enum MockEnvironment {
  development,
  testing,
  production,
}

class MockConfig {
  final MockEnvironment environment;
  final Map<String, MockEndpoint> endpoints;
}

动态配置

void updateMockData(String path, String data) {
  final mock = _mocks[path];
  if (mock != null) {
    _mocks[path] = mock.copyWith(mockData: data);
  }
}

2. 数据模板

模板引擎

class MockTemplate {
  static String process(String template, Map<String, dynamic> context) {
    var result = template;
    
    context.forEach((key, value) {
      result = result.replaceAll('{{$key}}', value.toString());
    });
    
    return result;
  }
}

模板示例

{
  "id": "{{id}}",
  "name": "{{name}}",
  "timestamp": "{{timestamp}}"
}

3. 延迟模拟

网络延迟

Future<Response> getResponse(MockConfig mock) async {
  if (mock.delay > 0) {
    await Future.delayed(Duration(milliseconds: mock.delay));
  }
  
  return mock.response;
}

随机延迟

int getRandomDelay() {
  final random = Random();
  return 100 + random.nextInt(900); // 100-1000ms
}

4. 错误模拟

错误响应

class MockError {
  final int statusCode;
  final String message;
  
  static MockError notFound() {
    return MockError(404, 'Not Found');
  }
  
  static MockError serverError() {
    return MockError(500, 'Internal Server Error');
  }
}

使用说明

基本使用

  1. 启用Mock服务

    • 打开Mock开关
    • 选择环境
    • 配置Mock端点
  2. 配置Mock端点

    • 添加端点路径
    • 设置请求方法
    • 配置Mock数据
  3. 测试Mock

    • 发送测试请求
    • 查看Mock响应
    • 验证数据格式

高级功能

条件Mock

class ConditionalMock {
  final bool Function(Request) condition;
  final MockConfig mock;
  
  bool shouldMock(Request request) {
    return condition(request);
  }
}

动态Mock

class DynamicMock {
  final Function(Request) generator;
  
  Response generateResponse(Request request) {
    return generator(request);
  }
}

技术要点

1. 数据一致性

数据验证

bool validateMockData(String data, String schema) {
  try {
    final jsonData = jsonDecode(data);
    final jsonSchema = jsonDecode(schema);
    return validate(jsonData, jsonSchema);
  } catch (e) {
    return false;
  }
}

2. 性能优化

缓存Mock数据

final Map<String, Response> _cache = {};

Response getCachedResponse(String path) {
  return _cache.putIfAbsent(
    path,
    () => generateResponse(path),
  );
}

3. 调试支持

请求日志

void logMockRequest(Request request, Response response) {
  logger.info({
    'type': 'mock',
    'path': request.path,
    'method': request.method,
    'response': response.body,
    'timestamp': DateTime.now(),
  });
}

最佳实践

1. Mock数据设计

真实数据模拟

Map<String, dynamic> generateRealisticUser() {
  final names = ['张三', '李四', '王五'];
  final domains = ['qq.com', 'gmail.com', '163.com'];
  
  return {
    'id': Random().nextInt(1000),
    'name': names[Random().nextInt(names.length)],
    'email': '${Random().nextInt(100)}@${domains[Random().nextInt(domains.length)]}',
  };
}

2. 环境隔离

环境配置

class MockEnvironmentConfig {
  static final Map<MockEnvironment, Map<String, MockConfig>> configs = {
    MockEnvironment.development: _devConfigs,
    MockEnvironment.testing: _testConfigs,
    MockEnvironment.production: {},
  };
}

3. 团队协作

配置共享

Future<void> shareMockConfig() async {
  final config = await exportConfig();
  await uploadToSharedStorage(config);
}

Future<void> importMockConfig() async {
  final config = await downloadFromSharedStorage();
  await loadConfig(config);
}

应用场景

1. 前端开发

独立开发

void setupDevelopmentMocks() {
  mockService.register('/api/users', MockConfig(
    path: '/api/users',
    method: 'GET',
    mockData: jsonEncode({
      'users': MockDataGenerator.generateUsers(10),
    }),
  ));
}

2. 单元测试

测试Mock

void setUp() {
  mockService.enabled = true;
  mockService.register('/api/login', MockConfig(
    path: '/api/login',
    method: 'POST',
    mockData: '{"success": true, "token": "test-token"}',
  ));
}

3. 演示环境

演示数据

void setupDemoMocks() {
  mockService.register('/api/products', MockConfig(
    path: '/api/products',
    method: 'GET',
    mockData: jsonEncode({
      'products': [
        {'id': 1, 'name': '演示商品1', 'price': 99.9},
        {'id': 2, 'name': '演示商品2', 'price': 199.9},
      ],
    }),
  ));
}

总结

Flutter鸿蒙Mock数据服务实现了完整的开发测试解决方案,包括:

  • ✅ Mock服务管理
  • ✅ 请求拦截功能
  • ✅ 数据模拟生成
  • ✅ 接口映射配置
  • ✅ 环境隔离支持

该功能为Flutter for OpenHarmony应用提供了便捷的开发测试环境,显著提升开发效率。

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐