Flutter Directus CMS集成插件directus_core的使用

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

Flutter Directus CMS 集成插件 directus_core 的使用

Directus SDK for Dart/Flutter

非官方的 Directus SDK for Dart/Flutter 提供了用于读取、创建、更新和删除用户及系统数据的 API，支持身份验证以及活动访问。此包是从 这里 的 JS 版本移植而来。大多数方法与 JS 版本相同，但由于 Dart 类型系统的不同，有些方法可能会有所不同。

安装

在 pubspec.yaml 文件中的 dependencies 下添加 directus 并运行 pub get 或 flutter pub get。 更多信息可以在这里找到：安装文档。

# 在 pubspec.yaml 中添加依赖
dependencies:
  directus: ^x.x.x

运行以下命令安装依赖：

flutter pub get

贡献

提交代码前请运行以下命令：

flutter test
flutter format .

编写测试是有益的，但不是强制性的。

开始使用

初始化实例

创建实例并初始化。必须调用 .init() 方法来初始化存储，否则将抛出 DirectusError 错误。

使用 directus

此包需要 Flutter，因为它使用 shared_preferences 来持久化数据。

import 'package:directus/directus.dart';

final sdk = await Directus('http://localhost:8055')
                    .init();

使用 directus_core

此包不依赖于 Flutter，但不知道如何存储数据，因此需要传递一个自定义的存储对象，该对象扩展自 DirectusStorage。我们提供了一个内存存储对象，可以在应用程序运行时保持数据。

import 'package:directus_core/directus_core.dart';

// 提供自定义存储
final sdk = await DirectusCore('http://localhost:8055', storage: MemoryStorage())
                    .init();

示例

单例模式

import 'package:directus/directus.dart';

await DirectusSingleton.init('http://localhost:8055');
final sdk = DirectusSingleton.instance;

使用集合

获取单个项目的详细信息

// ID 必须是 `String` 因为 Dart 不支持联合类型
final res = await sdk.items('users').readOne('someId');
print(res.data['name']);

获取多个项目

final users =  await sdk.items('users').readMany(Query(limit: 5, offset: 5));
users.data.forEach((user) => print(user['name']));

final firstThreeUsers = await DirectusSdk().items('users').readMany(
      filter: Filters({'id': Filter.isIn(['1', '2'])})
    );
firstThreeUsers.data.forEach((user) => print(user['name']));

创建单个项目

final createdUser = await sdk.items('users').createOne({'name': 'Test'});

创建多个项目

final createdUsers = await sdk.items('users').createMany([{'name': 'Test'}, {'name': 'Two'}]);

更新单个项目

final updatedUser = await sdk.items('users').updateOne(data: {'name': 'Test'}, id: '55');

更新多个项目

final updatedUsers = await sdk.items('users').updateMany(data: {'name': 'Test'}, ids: ['55']);

删除单个项目

await sdk.items('users').deleteOne('55');

删除多个项目

await sdk.items('users').deleteMany(['55']);

身份验证

检查用户是否已登录

final isLoggedIn = sdk.auth.isLoggedIn;

登录

await sdk.auth.login(email: 'test@example.com', password: 'password');

登出

await sdk.logout();

获取当前用户

// 如果用户未登录，`currentUser` 将为 null。
final user = await sdk.auth.currentUser?.read();

更新当前用户

// 如果用户未登录，`currentUser` 将为 null。
final updatedUser = await sdk.auth.currentUser?.update({'name': 'Dart'});

启用两步验证

// 如果用户未登录，`fta` 将为 null。
await sdk.auth.tfa?.enable('current-password');

禁用两步验证

// 如果用户未登录，`fta` 将为 null。
await sdk.auth.fta?.disable('otp');

请求密码重置

await sdk.auth.forgottenPassword.request('email@example.com');

重置密码

// 第一个参数中的 token 是通过 `request()` 发送的邮件中的 token。
await sdk.auth.forgottenPassword.reset(token: 'some-token', password: 'new-password');

活动

查看活动

final activity = await sdk.activity.readOne('some-id');
final activities = await sdk.activity.readMany(Query(limit: 10));

添加评论

final comment = await sdk.activity.createComment(collection: 'posts',
                  item: 'some-id',
                  comment: 'Awesome post',
                );

更新评论

final updatedComment = await sdk.activity.updateComment(id: '50', comment: 'Awesome change!');

删除评论

await sdk.activity.deleteComment('55');

其他功能

集合

final collections = sdk.collections;

字段

final fields = sdk.fields;

文件

final files = sdk.files;

文件夹

final folders = sdk.folders;

权限

final permissions = sdk.permissions;

预设

final presets = sdk.presets;

关系

final relations = sdk.relations;

版本控制

final revisions = sdk.revisions;

角色

final roles = sdk.roles;

服务器

测试连接

final pong = await sdk.server.ping();

获取服务器信息

final info = await sdk.server.info();

获取 API 规范（OAS 格式）

final oas = await sdk.server.oas();

设置

final settings = sdk.settings;

用户

邀请新用户

await sdk.users.invite(email: 'test@example.com', role: 'some-uuid');

邀请多个用户

await sdk.users.inviteMany(emails: ['test@example.com'], role: 'some-uuid');

接受用户邀请

await sdk.users.acceptInvite(token: 'some-token', password: 'secret-password');

工具

获取随机字符串

final randomString = await sdk.utils.randomString(15);

生成给定值的哈希

final hash = await sdk.utils.generateHash('value-to-hash');

验证哈希是否有效

final correctHash = await sdk.utils.verifyHash('Some value.', 'hashed-value');

对集合中的项目进行排序

await sdk.utils.sort(collection: 'users', itemPk: '5', toPk: '10');

还原到之前的版本

await sdk.utils.revert('25');

更多关于Flutter Directus CMS集成插件directus_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter Directus CMS集成插件directus_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用directus_core插件与Directus CMS进行交互的示例代码。directus_core插件允许你轻松地从Flutter应用与Directus CMS进行通信。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  directus_core: ^最新版本号  # 请替换为实际的最新版本号

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

2. 配置Directus客户端

在你的Flutter项目中，创建一个新的Dart文件（例如directus_client.dart）来配置和初始化Directus客户端：

import 'package:directus_core/directus_core.dart';

class DirectusService {
  late DirectusClient _client;

  DirectusService({required String projectId, required String apiKey, required String apiUrl}) {
    _client = DirectusClient(
      projectId: projectId,
      apiKey: apiKey,
      baseUrl: apiUrl,
    );
  }

  // 获取所有项目
  Future<List<Map<String, dynamic>>> getItems() async {
    final response = await _client.getItems(
      collection: 'items', // 替换为你的集合名称
      query: DirectusQuery().select(),
    );
    return response.data ?? [];
  }

  // 创建新项目
  Future<Map<String, dynamic>> createItem({required Map<String, dynamic> data}) async {
    final response = await _client.createItem(
      collection: 'items', // 替换为你的集合名称
      data: data,
    );
    return response.data ?? {};
  }

  // 更新项目
  Future<Map<String, dynamic>> updateItem({required String id, required Map<String, dynamic> data}) async {
    final response = await _client.updateItem(
      collection: 'items', // 替换为你的集合名称
      id: id,
      data: data,
    );
    return response.data ?? {};
  }

  // 删除项目
  Future<void> deleteItem({required String id}) async {
    await _client.deleteItem(
      collection: 'items', // 替换为你的集合名称
      id: id,
    );
  }
}

3. 使用Directus客户端

在你的主应用程序文件（例如main.dart）中，使用你配置的Directus客户端进行CRUD操作：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'directus_client.dart';

void main() {
  final directusService = DirectusService(
    projectId: 'your-project-id', // 替换为你的项目ID
    apiKey: 'your-api-key', // 替换为你的API密钥
    apiUrl: 'https://your-directus-instance.com/api/v1', // 替换为你的Directus实例URL
  );

  runApp(
    MultiProvider(
      providers: [
        Provider<DirectusService>.value(value: directusService),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Directus CMS Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late DirectusService _directusService;
  List<Map<String, dynamic>> _items = [];

  @override
  void initState() {
    super.initState();
    _directusService = Provider.of<DirectusService>(context);
    _fetchItems();
  }

  Future<void> _fetchItems() async {
    final items = await _directusService.getItems();
    setState(() {
      _items = items;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Directus CMS Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (context, index) {
                  final item = _items[index];
                  return ListTile(
                    title: Text(item['name'] ?? ''), // 替换为实际字段
                  );
                },
              ),
            ),
            ElevatedButton(
              onPressed: () async {
                final newItem = await _directusService.createItem(data: {'name': 'New Item'}); // 替换为实际字段和数据
                setState(() {
                  _items.add(newItem);
                });
              },
              child: Text('Add Item'),
            ),
          ],
        ),
      ),
    );
  }
}

注意

  1. 替换占位符：确保你替换了所有的占位符（例如your-project-id, your-api-key, https://your-directus-instance.com/api/v1，以及集合名称和字段）。
  2. 错误处理：在实际应用中，你应该添加错误处理逻辑来处理网络请求失败或数据解析错误。
  3. 依赖管理：确保你使用的是最新版本的directus_core插件，并遵循其文档和更新日志。

这个示例展示了如何使用directus_core插件在Flutter应用中与Directus CMS进行基本的CRUD操作。根据你的需求，你可以进一步扩展和自定义这些功能。

回到顶部