Flutter插件h4的使用_h4可组合工具、函数式风格和简单接口。

Flutter插件h4的使用_h4可组合工具、函数式风格和简单接口。

轻量级Dart Web框架

受unjs H(3) API启发。可组合工具、函数式风格和简单接口。

这是一个正在积极开发的新项目，虽然有测试，但可能会以不可预期的方式出现问题。

欢迎反馈。

官方文档还在编写中 - 链接

开始使用

在pubspec.yaml文件中添加H4插件：

dependencies:
  h4: 0.4.1

或者通过命令行安装：

dart pub add h4

导入库并开始构建你的服务器：

import 'package:h4/create.dart';

void main() {
  var app = createApp();
  var router = createRouter();

  app.use(router);

  router.get("/", (event) => "Hello world!");
}

示例

Hello World

void main() {
  var app = createApp(port: 4000);
  var router = createRouter();

  app.use(router);

  router.get("/", (event) => "Hello world");
}

全局钩子

注册应用程序范围内的钩子：

• onRequest
• onError
• afterResponse

这些钩子会为每个请求调用，并可用于向您的应用中添加全局逻辑，例如日志记录、错误处理等。

var app = createApp(
  port: 5173,
  onRequest: (event) {},
  onError: (error, stacktrace, event) {},
  afterResponse: (event) {},
);
var router = createRouter();
app.use(router);

参数路由

可以在路由中定义参数，使用:前缀：

router.get('/users/:id', (event) {
  final userId = event.params['id'];
  return 'User with id: $userId';
});

通配符路由

// 匹配 'articles/page' 和 '/articles/otherPage' 但不匹配 'articles/page/subPage'
router.get('/articles/*', (event) {
  final path = event.path;
  return 'The tea is teaing!!';
});

// 匹配 'articles/foo/bar' 和 'articles/page/subPage/subSubPage'
router.get('/articles/**', (event) {
  final path = event.path;
  return 'The tea is teaing!!';
});

错误处理

可以抛出一个特殊的CreateError异常来终止请求并发送400 - 错误请求响应。

高级示例

多个路由器与基础路径

通过创建具有不同基础路径的多个路由器来组织路由：

void main() {
  var app = createApp(port: 3000);

  var mainRouter = createRouter();
  var apiRouter = createRouter();

  // 挂载路由器，设置不同的基础路径
  app.use(mainRouter, basePath: '/');
  app.use(apiRouter, basePath: '/api');

  // 主路由
  mainRouter.get('/hello', (event) => {'message': 'Hello World'});

  // API路由
  apiRouter.get('/users', (event) => ['user1', 'user2']);
  apiRouter.post('/auth', (event) async {
    var body = await readRequestBody(event);
    return body;
  });
}

请求上下文与头部

存储特定于请求的数据并处理头部信息：

void main() {
  var app = createApp(
    port: 3000,
    onRequest: (event) {
      // 存储数据到请求上下文中
      event.context["userId"] = "123";

      // 设置CORS头
      handleCors(event, origin: "https://myapp.com", methods: "GET,POST");
    },
    afterResponse: (event) {
      print("Response sent with status: ${event.statusCode}");
    }
  );
}

文件上传

处理文件上传：

void main() {
  var app = createApp(port: 3000);
  var router = createRouter();
  app.use(router);

  router.post("/upload", (event) async {
    var files = await readFiles(
      event,

      // 表单数据字段，文件存储在这里
      fieldName: 'file',

      // 可选：设置自定义目录用于上传文件。（默认为临时目录）
      customFilePath: 'uploads',

      // 可选：对文件名进行哈希以提高安全性。（默认为false）
      // 当为false时，文件将被前缀一个简单的哈希。
      hashFileName: true,

      // 可选：设置最大文件大小（默认为10MB）
      maxFileSize: 5
    );

    // 返回的File对象包含：path, size, originalname, mimeType
    return {
      'message': 'Upload complete',
      'files': files
    };
  });
}

表单数据处理

轻松处理多部分表单数据：

void main() {
  var app = createApp(port: 3000);
  var router = createRouter();
  app.use(router);

  router.post("/signup", (event) async {
    var formData = await readFormData(event);

    // 访问表单字段
    var username = formData.get('username');
    var password = formData.get('password');

    // 获取多个值
    var interests = formData.getAll('interests');

    return {
      'user': username,
      'interests': interests
    };
  });
}

带有自定义响应的错误处理

实现健壮的错误处理：

void main() {
  var app = createApp(
    port: 3000,
    onError: (error, stacktrace, event) {
      print("Error occurred: $error");
    }
  );
  var router = createRouter();
  app.use(router);

  router.get("/risky-operation", (event) async {
    try {
      // 可能失败的操作
      throw Exception("Something went wrong");
    } catch (e) {
      throw CreateError(
        message: "Operation failed: $e",
        errorCode: 400
      );
    }
  });
}

客户端将接收到JSON负载：

{
  "status": 400,
  "message": "Operation failed {error Message}"
}