Deno 中处理表单：正确方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，表单是最常见的元素之一，而 Deno 提供了完善的 API 来处理表单数据。在本篇文章中，我们将介绍使用 Deno 处理表单数据的正确方法，并提供示例代码供读者学习参考。

什么是表单？

表单是 Web 界面中最基本的交互形式之一，通常由多个表单元素组成，包括文本框、下拉框、单选框、复选框等等。表单通常用于用户填写信息或提交数据，例如注册页面、登陆页面、评论框等等。

Deno 中的表单处理

在 Deno 中，我们可以使用 Deno 模块提供的 listenAndServe() 方法来创建一个 HTTP 服务器，并使用 FormData 对象来处理表单数据。

具体来说，我们可以通过以下步骤来处理表单：

创建 HTTP 服务器。
解析表单数据。
处理表单数据。
返回响应结果。

下面我们将一一介绍这些步骤。

步骤一：创建 HTTP 服务器

在 Deno 中，我们可以使用 Deno.listenAndServe() 方法来创建一个 HTTP 服务器。示例代码如下：

import { serve } from "https://deno.land/std/http/server.ts";

const server = serve({ port: 8000 });
for await (const req of server) {
  // 处理请求
}

这段代码中，我们使用 Deno.listenAndServe() 方法创建了一个 HTTP 服务器，并在端口 8000 上监听请求。当有请求到来时，服务器会调用 for await 循环内的代码来处理请求。

步骤二：解析表单数据

在客户端提交表单时，表单数据通常会自动编码为字符串，并通过 HTTP 请求的主体传递给服务器。在 Deno 中，我们可以使用 Deno.readAll() 方法来从请求主体中读取表单数据，并使用 FormData 对象来将字符串解析为键值对形式的表单数据。示例代码如下：

// javascriptcn.com code example
import { serve } from "https://deno.land/std/http/server.ts";

const server = serve({ port: 8000 });
for await (const req of server) {
  // 读取请求数据
  const buffer = await Deno.readAll(req.body);
  const decoder = new TextDecoder();
  const data = decoder.decode(buffer);

  // 解析表单数据
  const form = new FormData(data);
  for (const [key, value] of form.entries()) {
    console.log(`${key}=${value}`);
  }
}

在这段代码中，我们首先使用 Deno.readAll() 方法读取了请求主体中的数据，并使用 TextDecoder 对象将数据转换为字符串。接着，我们使用 FormData 对象将字符串解析为键值对形式的表单数据，并遍历表单数据中的每一项。

步骤三：处理表单数据

在处理表单数据时，我们通常需要根据表单数据执行不同的操作。例如，我们可以将表单数据保存到数据库中，或根据表单数据生成动态页面。示例代码如下：

// javascriptcn.com code example
import { serve } from "https://deno.land/std/http/server.ts";
import { Database } from "https://deno.land/x/denodb/mod.ts";

// 定义数据库模型
class User extends Model {
  static table = "users";
  static fields = {
    id: { primaryKey: true, autoIncrement: true },
    username: DataTypes.STRING,
    password: DataTypes.STRING,
  };
}

const db = new Database({ dialect: "mysql", host: "localhost", username: "root", password: "password", database: "test" });
await db.sync({ drop: true });

// 创建 HTTP 服务器
const server = serve({ port: 8000 });
for await (const req of server) {
  // 读取请求数据
  const buffer = await Deno.readAll(req.body);
  const decoder = new TextDecoder();
  const data = decoder.decode(buffer);

  // 解析表单数据
  const form = new FormData(data);

  // 处理表单数据
  const username = form.get("username");
  const password = form.get("password");

  // 将表单数据保存到数据库中
  await db.transaction(async () => {
    const user = new User({ username, password });
    await user.save();
  });

  // 返回响应结果
  req.respond({ body: "注册成功" });
}

在这段代码中，我们使用了 denodb 模块来操作数据库，并定义了一个 User 模型用于存储用户信息。在处理表单数据时，我们首先从表单数据中获取用户名和密码，然后将其保存到数据库中。最后，我们返回了一个字符串表示用户注册成功。

步骤四：返回响应结果

在处理完表单数据后，我们需要将处理结果返回给客户端。在 Deno 中，我们可以使用 req.respond() 方法来发送响应结果。示例代码如下：

// javascriptcn.com code example
import { serve } from "https://deno.land/std/http/server.ts";

const server = serve({ port: 8000 });
for await (const req of server) {
  // 读取请求数据
  const buffer = await Deno.readAll(req.body);
  const decoder = new TextDecoder();
  const data = decoder.decode(buffer);

  // 解析表单数据
  const form = new FormData(data);

  // 处理表单数据
  // ...

  // 返回响应结果
  req.respond({ body: "响应结果" });
}

在这段代码中，我们调用了 req.respond() 方法来发送响应结果给客户端。在实际应用中，我们通常需要根据不同的处理结果返回不同的响应结果，例如登陆成功、注册成功、用户名错误等等。

结论

本篇文章介绍了使用 Deno 处理表单数据的正确方法，并提供了示例代码供读者学习参考。在实际应用中，我们可以根据业务需求对示例代码进行适当的修改和扩展，以实现更完善的表单处理功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6738679e317fbffedf103740