Hono 快速入门：简单设置指南（简短的文章）-js教程-PHP中文网

Hono 快速入门：简单设置指南（简短的文章）

Patricia Arquette

发布： 2024-10-12 06:20:02

原创

339 人浏览过

介绍

您听说过一个名为 Hono 的 Web 框架吗？
最近，我在各种媒体上看到“Hono”这个名字，决定自己尝试一下。
今天，我将分享 Hono 的简要概述以及简单的初始设置指南，部分作为我自己的备忘录。

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

什么是霍诺？

Hono 是一个基于 TypeScript 构建的轻量级快速 Web 框架。
我对它还是个新手，还没有探索它的所有功能，但 Hono 的主要优势似乎是它的高速和轻量级路由以及它的多运行时支持。它使用相同的代码库，可以在各种 JavaScript 运行时无缝运行，例如 Cloudflare、Deno、Bun、AWS、Node.js 等。

在我的日常 Web 开发工作中，我经常使用 MERN 堆栈，并且主要依赖 Express 作为我的后端框架。然而，与 Express 相比，Hono 似乎具有更好的 TypeScript 兼容性和更高的灵活性，这使其成为在不久的将来成为领先框架之一的有希望的候选者。

此外，作为 Web 框架领域相对较新的参与者，Hono 具有很大的潜力，并且很可能在未来几年内将自己打造成跨平台和环境使用的下一代框架。

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

设置

在设置环境时，Hono 提供了方便的模板，让您轻松上手。这次，让我们使用 npm 开始。

首先，运行以下命令：

npm create hono@latest hono-myapp

登录后复制

运行命令后，系统会提示您选择模板。选择最适合您的项目环境的一种。对于本文，选择 Nodejs 模板。

安装完成后，将创建一个包含最少必需项目的项目文件，因此 cd 并运行 npm run dev。

如果没有错误或问题，请尝试打开 localhost 并查看是否出现 Hello World。

添加简单路线

到目前为止，我们只运行了模板文件，所以让我们添加一些代码来增强项目。接下来，我们将使用 Hono 创建一条接受动态参数的路线。您应该在我们之前创建的目录的 src 文件夹中找到一个 index.ts 文件。让我们编辑此文件并添加像 app.get('/hello/:name') 这样的路由来处理名为 name 的路径参数并在响应中返回其值。

将以下代码片段添加到您现有的代码中：

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
});

登录后复制

:name 部分是一个路径参数，它允许我们动态捕获 URL 中的值。使用 c.req.param('name')，我们可以提取 :name 的值并将其在响应中显示为 Hello, {name}!.

在服务器运行的情况下，尝试访问以下 URL：

http://localhost:3000/branches/John → 显示：你好，约翰！
http://localhost:3000/branches/Alice → 显示：你好，爱丽丝！

通过这种方式，您可以动态更改名称部分，以根据输入显示不同的消息。

这是完整代码的最终版本：

import { serve } from '@hono/node-server'
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
})

const port = 3000
console.log(`Server is running on port ${port}`)

serve({
  fetch: app.fetch,
  port
})

登录后复制

Quick Start with Hono: Simple Setup Guide (Bite-sized article)