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

简介: 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应用

相关文章
|
9月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
885 1
|
5月前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
277 13
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
786 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
596 70
|
10月前
|
JavaScript 前端开发 API
|
11月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1863 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
前端开发 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
818 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
12月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
595 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用
接下来,人与智能体的交互将变得更为紧密,比如 N 年以后是否可以逐渐过渡。这个逐渐过渡的过程实际上是温和的,从依赖人类到依赖超大规模算力的转变,可能会取代我们的一些职责。这不仅仅是简单的叠加关系。对于AI和超大规模算力,这是否意味着我们可以大幅度提升软件质量,是否可以缩短研发周期并提高效率,还有创造出更优质的软件并持续发展,这无疑是肯定的。
784 25
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
397 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章