Flutter书架管理插件leto_shelf的使用

快速入门

在本README中，我们将主要介绍如何使用leto_shelf插件来构建GraphQL服务器。更多关于使用leto构建GraphQL模式和服务器的一般信息和示例，请参阅主仓库的letot文档。此README仅包含与构建leto驱动的web服务器相关的绑定和实用程序的信息。

大多数章节在此README中都有一个“测试”链接。你可以阅读测试源代码以获取使用示例。

安装

首先，你需要在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  leto_schema: ^0.0.1-dev.3
  leto: ^0.0.1-dev.1
  leto_shelf: ^0.0.1-dev.1

  shelf: ^1.0.0
  shelf_router: ^1.0.0
  # 不需要用于服务器，只是用于测试
  http: ^1.0.0

dev_dependencies:
  # 只有在使用代码生成时才需要
  leto_generator: ^0.0.1-dev.3

服务器示例

一个完整的Dart示例，包括Flutter客户端和Leto/Shelf服务器，可以在letot聊天示例中找到。

处理器

此包提供了shelf处理器来响应HTTP请求。

graphQLHttp

// 处理POST和GET请求，支持"application/graphql", "application/json", "application/graphql+json" 和 "multipart/form-data" 类型。
// 实现遵循了[GraphQL Over HTTP 规范](https://github.com/graphql/graphql-over-http/blob/main/spec/GraphQLOverHTTP.md)和[GraphQL 多部分请求规范](https://github.com/jaydenseric/graphql-multipart-request-spec)。

// POST 请求支持 GraphQL Query 和 Mutation 操作
// 我们限制 GET 请求只允许执行 GraphQL Query 操作
// 支持使用 "multipart/form-data" 类型的文件上传

// 默认情况下，将发送带有JSON主体的200状态码响应，结构遵循[GraphQL 规范](https://spec.graphql.org/draft/#sec-Response)。

// 对于不符合规范的请求，将发送400状态码响应。
// 对于GET请求中的Mutation操作，将发送405状态码响应（方法不被允许）。

graphQLWebSocket

// 使用 "graphql-ws" 或 "graphql-transport-ws" Web Socket子协议处理Query、Mutation和Subscription请求。
// 当使用此处理器时，[headers]和[custom-response]实用程序将不起作用。

// 参数 validateIncomingConnection 允许你为Web Socket连接支持身份验证，并传递一个 GraphQLWebSocketServer 作为参数，可以用于关闭连接。
// 提供了一些ping和保持活动的Duration配置参数，用于移除过时的连接或识别到达客户端时的问题。

Web UI 探索者

这些网页允许你探索你的GraphQL模式，查看所有类型和字段，阅读每个元素的文档，并对GraphQL服务器执行请求。

通常作为静态HTML在部署的服务器上公开。每个都具有多个配置选项，以确定默认标签、查询和变量，GraphQL HTTP和WebSocket（订阅）端点，UI的主题等。

所有静态HTML文件和配置都可以在graphql_ui文件夹中找到。

GraphiQL

// 文档: [GraphiQL 文档](https://github.com/graphql/graphiql/tree/main/packages/graphiql#readme)。使用 graphiqlHandler。经典的GraphQL探索器。

Playground

// 文档: [Playground 文档](https://github.com/graphql/graphql-playground)。使用 playgroundHandler。支持多标签、订阅。

Altair

// 文档: [Altair 文档](https://github.com/altair-graphql/altair)。使用 altairHandler。支持文件上传、多标签、订阅、插件。

功能和实用工具

一些有用的实用工具和绑定，用于在Leto中处理shelf HTTP请求和响应。

文件上传

// 仅在使用 "multipart/form-data" 类型时可用，你的HTTP客户端需要遵循[GraphQL 多部分请求规范](https://github.com/jaydenseric/graphql-multipart-request-spec)。不能与Web Sockets一起使用。

// 使用 Upload 类和 Upload.graphQLType 构建模式。当使用代码生成时，Upload.graphQLType 将无需额外配置即可使用。只需将 Upload 类作为解析器的输入或将字段添加到输入对象中。

请求和响应

// 可以通过 extractRequest 函数或提供的Dart扩展（在同一文件中）访问shelf HTTP请求。

请求

import 'package:leto_schema/leto_schema.dart'; // Query 和 Ctx
import 'package:leto_shelf/leto_shelf.dart'; // extractRequest 和 ctx.request 扩展

@Query()
String getName(Ctx ctx) {
  final Request request = ctx.request;
  assert(request == extractRequest(ctx));
  assert(request.headersAll is Map<String, List<String>>);
  return '';
}

Headers

appendHeader

// 添加一个新的值到给定的header，不会覆盖之前设置的值。

changeHeader

// 设置给定header的新值，会覆盖之前设置的值。

自定义响应

updateResponse

// 如果新的响应包含一个主体或状态码不同于200，则新的响应将不做修改返回。
// 然而，如果新的响应没有包含主体且状态码为200（可能你只更改了头部），则默认的GraphQL JSON主体将附加到响应头中。

中间件

其他非特定于GraphQL服务器的shelf中间件。

etag

// 计算和验证 [ETag](https://developer.mozilla.org/docs/Web/HTTP/Headers/ETag) 和 [If-None-Match](https://developer.mozilla.org/docs/Web/HTTP/Headers/If-None-Match) 头部。

// 此中间件将在提供的 shouldProcessResponse 函数（默认：状态码小于300的响应）返回 true 的每个响应上计算一个ETag，并将其设置在 "ETag" 响应头中。如果已经设置了ETag，则将其保留不变。使用ETag，它将与请求的 "If-None-Match" 值进行比较。如果找到了ETag，则将发送带有ETag的304状态码响应。

// 可以指定一个自定义的 hasher 函数，该函数根据响应的主体返回ETag，默认我们使用 package:crypt 的 sha256 编码器。

cors

// CORS 请求配置。

jsonParse

// 解析JSON主体。

更多关于Flutter书架管理插件leto_shelf的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼•2 天前

更多关于Flutter书架管理插件leto_shelf的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用leto_shelf插件来管理书架的示例代码。请注意，leto_shelf并不是一个广为人知的Flutter插件名称，因此我将假设你指的是一个自定义的或类似的插件用于书架管理，并且这里会使用一些Flutter和Dart的基本概念来模拟这个功能。

在实际应用中，你可能需要找到一个具体的书架管理插件或者自己实现书架管理的功能。以下是一个简化的示例，展示了如何使用Flutter和Dart来管理书架，其中会模拟一些基本的书架操作，比如添加书籍、删除书籍和查看书架。

1. 添加依赖

首先，确保你的pubspec.yaml文件中没有特别的依赖，因为我们将使用Flutter和Dart的标准库。如果你有一个特定的书架管理插件，请按照该插件的文档添加依赖。

2. 数据模型

定义一个书籍的数据模型：

class Book {
  final String title;
  final String author;

  Book({required this.title, required this.author});
}

3. 书架管理

创建一个书架管理类，用于添加、删除和查看书籍：

class Shelf {
  List<Book> books = [];

  void addBook(Book book) {
    books.add(book);
  }

  void removeBook(String title) {
    books.removeWhere((book) => book.title == title);
  }

  List<Book> getBooks() {
    return books;
  }
}

4. UI界面

创建一个简单的UI界面来与书架交互：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Book Shelf Manager',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShelfScreen(),
    );
  }
}

class ShelfScreen extends StatefulWidget {
  @override
  _ShelfScreenState createState() => _ShelfScreenState();
}

class _ShelfScreenState extends State<ShelfScreen> {
  final Shelf shelf = Shelf();
  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _authorController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Book Shelf Manager'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _titleController,
              decoration: InputDecoration(labelText: 'Book Title'),
            ),
            TextField(
              controller: _authorController,
              decoration: InputDecoration(labelText: 'Author'),
            ),
            ElevatedButton(
              onPressed: () {
                shelf.addBook(Book(title: _titleController.text, author: _authorController.text));
                setState(() {}); // 更新UI
                _titleController.clear();
                _authorController.clear();
              },
              child: Text('Add Book'),
            ),
            SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: shelf.getBooks().length,
                itemBuilder: (context, index) {
                  final Book book = shelf.getBooks()[index];
                  return Dismissible(
                    key: Key(book.title),
                    onDismissed: (direction) {
                      shelf.removeBook(book.title);
                      setState(() {}); // 更新UI
                    },
                    child: ListTile(
                      title: Text(book.title),
                      subtitle: Text('by ${book.author}'),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

将上述代码添加到你的Flutter项目中，然后运行应用。你将看到一个简单的书架管理界面，可以添加书籍并通过滑动来删除书籍。

请注意，这只是一个基本的示例，用于展示如何在Flutter中管理书架。如果你使用的是特定的leto_shelf插件，请查阅该插件的文档以获取更详细的使用说明和API。

Flutter书架管理插件leto_shelf的使用

Flutter书架管理插件leto_shelf的使用

目录

快速入门

安装

服务器示例

处理器

graphQLHttp

graphQLWebSocket

Web UI 探索者

GraphiQL

Playground

Altair

功能和实用工具

文件上传

请求和响应

请求

Headers

自定义响应

中间件

etag

cors

jsonParse

1. 添加依赖

2. 数据模型

3. 书架管理

4. UI界面

5. 运行应用