Flutter客户端通信插件angel3_client的使用
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
更多关于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服务器进行通信。