当前位置：首页 > article >正文

前端全栈混合之路Deno篇：Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍

article 2024/10/25 13:22:49

前端全栈混合之路Deno篇：如何快速创建一个 restful-http服务应用及oak框架介绍

1. Deno简介

Deno 是由 Node.js 的创始人 Ryan Dahl 开发的一个全新的 JavaScript 和 TypeScript 运行时。Deno 旨在解决 Node.js 中的一些设计缺陷，并且具有更强的安全性、更简单的模块系统、内置的 TypeScript 支持等特点。Deno 默认以更加安全的方式运行代码，使用权限机制来限制对文件系统、网络和环境的访问。

Deno 提供了一些简单而强大的 API 来创建 HTTP 服务器，并且有像 Oak (Koa变体）这样的优秀框架来加速开发。本文将介绍如何使用 Deno 快速创建一个 RESTful HTTP 服务应用，同时介绍 Oak 框架的基本功能和使用方法。

推荐阅读前置介绍和权限等：Deno 2.0 的权限系统详解和多种权限配置权限声明方式 -一次性搞懂和学会用和 Deno2.0与Bun对比，谁更胜一筹？它们分别适合怎样的项目，谁更适合前端转全栈？

2. Deno.serve

Deno 通过内置的 Deno.serve API 提供了一种非常简单的方式来创建 HTTP 服务。下面我们来看看如何安装 Deno，并使用 Deno.serve 创建一个简单的 HTTP 服务。

对于简单的服务，使用这个标准接口是完全够用的，尤其是微服务的场景下，前后端的接口都是一致的。

2.1 使用

安装完成后，我们可以使用 Deno.serve 快速启动一个 HTTP 服务。以下是一个简单的示例：

简单运行：

const handler = (req: Request): Response => {
  const data = req.json() // 读取数据也是很简单的，和前端fetch的response基本一致
  return new Response("Hello, Deno!");
};

Deno.serve(handler);

配置项：

Deno.serve({
    port: 8000,
    handler: (req) => {
        req.respond({
            body: "Hello World",
        });
    },
})

将以上代码保存为 server.ts 文件，然后通过以下命令运行：

deno run --allow-net server.ts

这个代码段通过 Deno.serve 启动了一个 HTTP 服务，并在根路径下返回 “Hello, Deno!”。--allow-net 参数用于允许程序进行网络操作。

下面介绍两个场景的http服务扩展：静态文件+理由，详细的使用参考 deno-std-http标准库

2.2 扩展1- 静态文件服务

直接使用标准库提供的静态文件服务

deno run --allow-net --allow-read jsr:@std/http/file-server
Listening on:
- Local: http://localhost:8000

这样，我们就可以在浏览器中访问指定路径下的文件。

2.3 扩展2- 路由

与其它的路由不同之处在于，它是紧跟前端的规范 UrlPattern规范

import { route, type Route } from "@std/http/unstable-route";
import { serveDir } from "@std/http/file-server";

const routes: Route[] = [
  {
    pattern: new URLPattern({ pathname: "/about" }),
    handler: () => new Response("About page"),
  },
  {
    pattern: new URLPattern({ pathname: "/users/:id" }),
    handler: (_req, _info, params) => new Response(params?.pathname.groups.id),
  },
  {
    pattern: new URLPattern({ pathname: "/static/*" }),
    handler: (req: Request) => serveDir(req)
  },
  {
    method: ["GET", "HEAD"],
    pattern: new URLPattern({ pathname: "/api" }),
    handler: (req: Request) => new Response(req.method === 'HEAD' ? null : 'ok'),
  },
];

function defaultHandler(_req: Request) {
  return new Response("Not found", { status: 404 });
}

Deno.serve(route(routes, defaultHandler));

3. oak框架

虽然 Deno.serve 很简单易用，但对于复杂的应用程序来说，可能需要一个更高级的框架。Oak 是 Deno 上一个非常流行的 HTTP 中间件框架，类似于 Node.js 中的 Express，帮助开发者更高效地构建 RESTful API。

框架的运行时支持情况：Deno/Bun/Nodejs

3.1 安装

Oak 可以通过 Deno 的 URL 导入机制来安装和使用。可以通过以下方式导入 Oak：

import * as mod from "jsr:@oak/oak";

或者安装

deno add jsr:@oak/oak

3.2 使用

以下是使用 Oak 创建一个简单的 HTTP 服务的示例：

import { Application } from "jsr:@oak/oak/application";

const app = new Application();

app.use(async (ctx,next) => {
  ctx.response.body = "Hello, Oak!";
});

await app.listen({ port: 8000 });

这个代码段创建了一个新的 Oak 应用程序，并通过 app.listen 方法在 8000 端口启动了服务器。在浏览器中访问 http://localhost:8000，可以看到返回的 “Hello, Oak!”。

3.3 中间件

Oak 的核心特性之一是中间件 - 因为参考Koa，所以也是洋葱模式，也就是一个中间件搞定请求的前置和后处理。中间件是一个函数，可以对请求和响应进行处理。下面是一个使用中间件的示例：

import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (ctx, next) => {
  console.log(`Request: ${ctx.request.method} ${ctx.request.url}`);
  //   和Koa保持高度一致
  await next();
  console.log(`Response: ${ctx.response.status}`);
});

app.use((ctx) => {
  ctx.response.body = "Hello, Middleware!";
});

await app.listen({ port: 8000 });

这个例子中的中间件会在每个请求到达时记录请求的方法和 URL，并在响应后记录响应的状态码。

3.4 路由

Oak 提供了路由功能，使得处理不同 URL 的请求变得简单。可以通过 Router 类来实现路由：

import { Application } from "jsr:@oak/oak/application";
import { Router } from "jsr:@oak/oak/router";

const app = new Application();
const router = new Router();

router
  .get("/", (ctx) => {
    ctx.response.body = "Welcome to Oak Router!";
  })
  .get("/users", (ctx) => {
    ctx.response.body = "User list.";
  })
  .post("/users", (ctx) => {
    ctx.response.body = "Create a new user.";
  });

app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 8000 });

在这个示例中，我们创建了一个新的路由器，并为不同的路径和方法定义了处理函数。最后，我们将路由器挂载到应用程序上。

3.5 静态文件服务

Oak 还可以用于提供静态文件服务。可以使用 send 方法来处理静态文件请求：

import { send } from "jsr:@oak/oak/send";
import { Application } from "jsr:@oak/oak/application";

const app = new Application();

app.use(async (ctx) => {
  await send(ctx, ctx.request.url.pathname, {
    root: `${Deno.cwd()}/public`,
  });
});

await app.listen({ port: 8000 });

这个示例会从 public 目录中提供静态文件，例如 HTML、CSS 和 JavaScript 文件。通过这种方式，可以轻松地构建一个静态网站或提供文件下载服务。

总结

本文介绍了如何使用 Deno 内置的 Deno.serve 快速创建一个 HTTP 服务，并且介绍了 Oak 框架的安装和使用方法，包括中间件、路由和静态文件服务等功能。Deno 和 Oak 结合使得在前端全栈开发中创建 RESTful API 变得高效且简便，非常适合快速开发和部署现代 Web 应用程序。希望本文对您了解和使用 Deno 及 Oak 框架有所帮助。