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

本文涉及的产品
函数计算FC,每月15万CU 3个月
Serverless 应用引擎免费试用套餐包,4320000 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://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 框架有所帮助。

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

相关文章
|
4天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
22 8
|
9天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
20 2
|
13天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
44 0
|
9天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
24 3
|
10天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
16 3
|
16天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
16天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
Web App开发 新零售 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
1.尽可能地了解需求,系统层面适用开闭原则 2.模块化,低耦合,能快速响应变化,也可以避免一个子系统的问题波及整个大系统 3.
748 0
|
Web App开发 前端开发 Java
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
线程的状态有:new、runnable、running、waiting、timed_waiting、blocked、dead 当执行new Thread(Runnabler)后,新创建出来的线程处于new状态,这种线程不可能执行 当执行thread.start()后,线程处于runnable状态,这种情况下只要得到CPU,就可以开始执行了。
729 0
|
Web App开发 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
zookeeper watch的定义如下:watch事件是一次性触发器,当watch监视的数据发生变化时,通知设置了该watch的client,即watcher。
934 0

热门文章

最新文章

下一篇
无影云桌面