前端全栈之路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://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应用

相关文章
|
10天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
36 9
|
6天前
|
JSON Java Apache
非常实用的Http应用框架,杜绝Java Http 接口对接繁琐编程
UniHttp 是一个声明式的 HTTP 接口对接框架,帮助开发者快速对接第三方 HTTP 接口。通过 @HttpApi 注解定义接口,使用 @GetHttpInterface 和 @PostHttpInterface 等注解配置请求方法和参数。支持自定义代理逻辑、全局请求参数、错误处理和连接池配置,提高代码的内聚性和可读性。
|
15天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
29 3
|
19天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
52 0
|
4天前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
17 9
|
16天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
16天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
22天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
22天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
Java Apache
<!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
hbase从集群中有8台regionserver服务器,已稳定运行了5个多月,8月15号,发现集群中4个datanode进程死了,经查原因是内存 outofMemory了(因为这几台机器上部署了spark,给spark开的...
811 0

热门文章

最新文章