Flutter客户端通信插件angel3_client的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter客户端通信插件angel3_client的使用

Angel3 Client 是一个支持浏览器、移动端和命令行的客户端,用于与Angel3后端进行通信。它提供了丰富的功能,包括服务调用、认证和实时更新等。

使用方法

引入依赖

首先,在pubspec.yaml文件中添加angel3_client依赖:

dependencies:
  angel3_client: ^最新版本号

然后,根据你的平台选择合适的导入方式:

// 选择一种,取决于你的平台
import 'package:angel3_client/io.dart';
import 'package:angel3_client/browser.dart';
import 'package:angel3_client/flutter.dart';

初始化客户端

创建一个Angel实例,并指定服务器地址:

main() async {
  Angel app = Rest("http://localhost:3000");
}

调用服务

你可以通过service方法获取服务实例,并调用相应的方法:

foo() async {
  Service Todos = app.service("todos");
  List<Map> todos = await Todos.index();

  print(todos.length);
}

如果你希望直接使用类而不是Map,可以利用反射:

class Todo extends Model {
  String text;

  Todo({String this.text});
}

bar() async {
  Service Todos = app.service("todos", type: Todo);
  List<Todo> todos = await Todos.index();

  print(todos.length);
}

服务支持的操作包括:index, read, create, modify, update, 和 remove

认证

本地认证

var auth = await app.authenticate(type: 'local', credentials: {username: ..., password: ...});
print(auth.token);
print(auth.data); // User object

恢复JWT

Future<AngelAuthResult> reviveJwt(String jwt) {
  return app.authenticate(credentials: {'token': jwt});
}

通过弹出窗口认证

app.authenticateViaPopup('/auth/google').listen((jwt) {
  // 处理JWT
});

从localStorage恢复会话(仅限浏览器)

await app.authenticate();

登出

await app.logout();

实时更新

如果你想基于服务更新来更新集合,可以使用ServiceList

build(BuildContext context) async {
  var list = ServiceList(app.service('api/todos'));
  
  return StreamBuilder(
    stream: list.onChange,
    builder: _yourBuildFunction,
  );
}

示例代码

以下是一个完整的示例,展示如何使用angel3_client与服务进行交互:

import 'dart:async';
import 'package:angel3_client/angel3_client.dart';

Future doSomething(Angel app) async {
  var userService = app
      .service<String, Map<String, dynamic>>('api/users')
      .map(User.fromMap, User.toMap);

  var users = await (userService.index() as FutureOr<List<User>>);
  print('Name: ${users.first.name}');
}

class User {
  final String? name;

  User({this.name});

  static User fromMap(Map data) => User(name: data['name'] as String?);

  static Map<String, String?> toMap(User user) => {'name': user.name};
}

这个示例展示了如何定义一个User类,并通过angel3_client与后端的服务进行交互,获取用户列表并打印第一个用户的名称。

以上就是angel3_client的基本使用方法和示例代码,希望能帮助你在Flutter项目中实现与Angel3后端的通信。


更多关于Flutter客户端通信插件angel3_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter客户端通信插件angel3_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter应用中使用angel3_client进行客户端通信的代码案例。angel3_client 是一个用于与Angel框架(一个Dart后端框架)通信的客户端库。

首先,确保你已经在pubspec.yaml文件中添加了angel3_client的依赖:

dependencies:
  flutter:
    sdk: flutter
  angel3_client: ^4.0.0 # 请检查最新版本号

然后运行flutter pub get来获取依赖。

接下来,在你的Flutter项目中创建一个服务类来处理与Angel服务器的通信。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:angel3_client/angel3_client.dart';
import 'dart:convert';

class AngelService {
  late AngelClient client;

  AngelService(String baseUrl) {
    client = AngelClient(
      baseUrl: Uri.parse(baseUrl),
      serializers: const JsonSerializers(),
    );
  }

  Future<Map<String, dynamic>> fetchData(String endpoint) async {
    try {
      var response = await client.get(endpoint);
      if (response.isSuccessful) {
        return jsonDecode(response.bodyString!) as Map<String, dynamic>;
      } else {
        throw Exception('Failed to fetch data: ${response.status}');
      }
    } catch (e) {
      throw Exception('Error communicating with server: $e');
    }
  }

  Future<void> postData(String endpoint, Map<String, dynamic> data) async {
    try {
      var response = await client.post(endpoint, body: jsonEncode(data));
      if (!response.isSuccessful) {
        throw Exception('Failed to post data: ${response.status}');
      }
    } catch (e) {
      throw Exception('Error communicating with server: $e');
    }
  }
}

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late AngelService angelService;
  late Future<Map<String, dynamic>>? futureData;
  late String errorMessage = '';

  @override
  void initState() {
    super.initState();
    angelService = AngelService('http://your-angel-server-url');
    fetchData();
  }

  void fetchData() async {
    setState(() {
      futureData = angelService.fetchData('/your-endpoint');
      errorMessage = '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Angel3 Client Demo'),
        ),
        body: Center(
          child: futureData == null
              ? CircularProgressIndicator()
              : FutureBuilder<Map<String, dynamic>>(
                  future: futureData!,
                  builder: (context, snapshot) {
                    if (snapshot.hasError) {
                      return Text('Error: ${snapshot.error}');
                    } else if (snapshot.connectionState == ConnectionState.done) {
                      Map<String, dynamic> data = snapshot.data!;
                      return ListView.builder(
                        shrinkWrap: true,
                        itemCount: data.length,
                        itemBuilder: (context, index) {
                          var key = data.keys.elementAt(index);
                          var value = data[key];
                          return ListTile(
                            title: Text('$key: $value'),
                          );
                        },
                      );
                    } else {
                      return CircularProgressIndicator();
                    }
                  },
                ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            Map<String, dynamic> postData = {'key': 'value'};
            try {
              await angelService.postData('/your-post-endpoint', postData);
              setState(() {
                futureData = null; // Optionally refetch data if needed
                fetchData();
              });
            } catch (e) {
              setState(() {
                errorMessage = 'Error posting data: $e';
              });
            }
          },
          tooltip: 'Post Data',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个AngelService类来处理与Angel服务器的GET和POST请求。fetchData方法用于从指定端点获取数据,而postData方法用于向指定端点发送数据。

MyApp类中,我们初始化了AngelService并在应用启动时获取数据。我们使用FutureBuilder来异步显示从服务器获取的数据。还有一个浮动操作按钮(FAB)用于向服务器发送POST请求。

请根据你的实际需求调整URL和端点。这个示例只是一个基本的演示,展示了如何使用angel3_client在Flutter应用中与Angel服务器进行通信。

回到顶部