Skip to main content

Getting Started

还没翻译译自英文（hono.dev）本页 36 段都还没译

要点（模型写的）

模型写的

背景方法设置分析

Getting Started

Hono 让跨运行时的设置、开发和部署变得容易

Using Hono is super easy. We can set up the project, write code, develop with a local server, and deploy quickly. The same code will work on any runtime, just with different entry points. Let's look at the basic usage of Hono.We can set up the project, write code, develop with a local server, and deploy quickly. The same code will work on any runtime, just with different entry points.Hono 让跨运行时的设置、编码和部署变得容易 相同的代码可在任何运行时上工作，只需不同的入口点，简化了开发Hono 让跨运行时的设置、编码和部署变得容易Hono

Starter

使用 create-hono 为你的平台搭建起始模板

Starter templates are available for each platform. Use the following "create-hono" command.Starter templates are available for each platform. Use the following "create-hono" command.使用 create-hono 命令开始一个起始模板 每个平台都有起始模板，简化了项目初始化使用 create-hono 命令开始一个起始模板create-hono

npmyarnpnpmbundeno

npm create hono@latest my-app

Then you will be asked which template you would like to use. Let's select Cloudflare Workers for this example.Then you will be asked which template you would like to use. Let's select Cloudflare Workers for this example.为本示例选择 Cloudflare Workers 模板 提示询问使用哪个模板，此选择决定了项目设置为本示例选择 Cloudflare Workers 模板Cloudflare Workers

? Which template do you want to use?
    aws-lambda
    bun
    cloudflare-pages
❯   cloudflare-workers
    deno
    fastly
    nextjs
    nodejs
    vercel

The template will be pulled into my-app, so go to it and install the dependencies.The template will be pulled into my-app, so go to it and install the dependencies.导航到 my-app 并安装依赖 模板拉取后，必须安装依赖才能运行应用导航到 my-app 并安装依赖安装依赖

npmyarnpnpmbun

cd my-app
npm i

Once the package installation is complete, run the following command to start up a local server.Once the package installation is complete, run the following command to start up a local server.运行 npm run dev 启动本地服务器 安装依赖后，此命令启动开发服务器运行 npm run dev 启动本地服务器npm run dev

npmyarnpnpmbun

npm run dev

Hello World

用 TypeScript 编写一个基本 Hono 应用，包含单个路由

You can write code in TypeScript with the Cloudflare Workers development tool "Wrangler", Deno, Bun, or others without being aware of transpiling.You can write code in TypeScript with the Cloudflare Workers development tool "Wrangler", Deno, Bun, or others without being aware of transpiling.编写 TypeScript 代码无需担心转译 Wrangler、Deno 和 Bun 等工具自动处理转译编写 TypeScript 代码无需担心转译TypeScript

Write your first application with Hono in src/index.ts. The example below is a starter Hono application.Write your first application with Hono in src/index.ts. The example below is a starter Hono application.在 src/index.ts 中编写你的第一个 Hono 应用 示例起始应用演示了 Hono 的基本用法在 src/index.ts 中编写你的第一个 Hono 应用src/index.ts

The import and the final export default parts may vary from runtime to runtime, but all of the application code will run the same code everywhere.The import and the final export default parts may vary from runtime to runtime, but all of the application code will run the same code everywhere.导入和导出的部分因运行时而异，但应用代码到处运行 运行时特定的入口点不同，但核心逻辑保持可移植导入和导出的部分因运行时而异，但应用代码到处运行应用代码

import { Hono } from 'hono'

const app = new Hono()

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

export default app

Start the development server and access http://localhost:8787 with your browser.Start the development server and access http://localhost:8787 with your browser.启动开发服务器并访问 http://localhost:8787 此 URL 是开发服务器的默认地址启动开发服务器并访问 http://localhost:8787localhost:8787

npmyarnpnpmbun

npm run dev

Return JSON

使用 c.json 轻松为 GET 路由返回 JSON

Returning JSON is also easy. The following is an example of handling a GET Request to /api/hello and returning an application/json Response.Returning JSON is also easy. The following is an example of handling a GET Request to /api/hello and returning an application/json Response.使用 c.json 轻松为 GET 路由返回 JSON 示例展示了处理 GET 到 /api/hello 并返回 application/json使用 c.json 轻松为 GET 路由返回 JSONc.json

app.get('/api/hello', (c) => {
  return c.json({
    ok: true,
    message: 'Hello Hono!',
  })
})

Request and Response

访问路径参数、查询、头部，并处理各种 HTTP 方法

Getting a path parameter, URL query value, and appending a Response header is written as follows.Getting a path parameter, URL query value, and appending a Response header is written as follows.轻松访问路径参数、查询值和设置头部 代码示例演示了检索 id 和 page，并设置 X-Message 头部轻松访问路径参数、查询值和设置头部路径参数

app.get('/posts/:id', (c) => {
  const page = c.req.query('page')
  const id = c.req.param('id')
  c.header('X-Message', 'Hi!')
  return c.text(`You want to see ${page} of ${id}`)
})

We can easily handle POST, PUT, and DELETE not only GET.We can easily handle POST, PUT, and DELETE not only GET.轻松处理 POST、PUT 和 DELETE 方法，而不仅仅是 GET Hono 通过简单的路由定义支持所有 HTTP 方法轻松处理 POST、PUT 和 DELETE 方法，而不仅仅是 GETPOST

app.post('/posts', (c) => c.text('Created!', 201))
app.delete('/posts/:id', (c) =>
  c.text(`${c.req.param('id')} is deleted!`)
)

Return HTML

使用 html 助手或 JSX 语法返回 HTML

You can write HTML with the html Helper or using JSX syntax. If you want to use JSX, rename the file to src/index.tsx and configure it (check with each runtime as it is different). Below is an example using JSX.You can write HTML with the html Helper or using JSX syntax. If you want to use JSX, rename the file to src/index.tsx and configure it (check with each runtime as it is different).使用 html 助手或 JSX 语法返回 HTML JSX 需要将文件重命名为 .tsx 并配置运行时使用 html 助手或 JSX 语法返回 HTMLHTML

const View = () => {
  return (
    <html>
      <body>
        <h1>Hello Hono!</h1>
      </body>
    </html>
  )
}

app.get('/page', (c) => {
  return c.html(<View />)
})

Return raw Response

直接从路由返回原始 Response 对象

You can also return the raw Response.You can also return the raw Response.你可以直接返回原始 Response 对象 这允许完全控制响应，绕过 Hono 的助手你可以直接返回原始 Response 对象Response

app.get('/', () => {
  return new Response('Good morning!')
})

Using Middleware

使用 basicAuth 等中间件轻松添加认证

Middleware can do the hard work for you. For example, add in Basic Authentication.Middleware can do the hard work for you. For example, add in Basic Authentication.使用 basicAuth 等中间件轻松添加认证 示例展示了使用基本认证保护 /admin 路由使用 basicAuth 等中间件轻松添加认证basicAuth

import { basicAuth } from 'hono/basic-auth'

// ...

app.use(
  '/admin/*',
  basicAuth({
    username: 'admin',
    password: 'secret',
  })
)

app.get('/admin', (c) => {
  return c.text('You are authorized!')
})

There are useful built-in middleware including Bearer and authentication using JWT, CORS and ETag. Hono also provides third-party middleware using external libraries such as GraphQL Server and Firebase Auth. And, you can make your own middleware.There are useful built-in middleware including Bearer and authentication using JWT, CORS and ETag. Hono also provides third-party middleware using external libraries such as GraphQL Server and Firebase Auth. And, you can make your own middleware.Hono 提供内置和第三方中间件，以及自定义中间件 内置包括 Bearer、JWT、CORS、ETag；第三方使用外部库Hono 提供内置和第三方中间件，以及自定义中间件中间件

Adapter

适配器提供平台特定功能，如 WebSocket 处理

There are Adapters for platform-dependent functions, e.g., handling static files or WebSocket. They are published as separate packages. For example, to handle WebSocket in Cloudflare Workers, install and import @hono/cloudflare-workers.There are Adapters for platform-dependent functions, e.g., handling static files or WebSocket. They are published as separate packages. For example, to handle WebSocket in Cloudflare Workers, install and import @hono/cloudflare-workers.适配器提供平台特定功能，如 WebSocket 处理 它们是独立的包，例如 @hono/cloudflare-workers 用于 Workers 中的 WebSocket适配器提供平台特定功能，如 WebSocket 处理适配器

import { upgradeWebSocket } from '@hono/cloudflare-workers'

app.get(
  '/ws',
  upgradeWebSocket((c) => {
    // ...
  })
)

Next step

遵循平台特定指南进行设置和部署

Most code will work on any platform, but there are guides for each. For instance, how to set up projects or how to deploy. Please see the page for the exact platform you want to use to create your application!Most code will work on any platform, but there are guides for each. For instance, how to set up projects or how to deploy. Please see the page for the exact platform you want to use to create your application!遵循平台特定指南进行设置和部署 大多数代码可移植，但设置和部署细节因平台而异遵循平台特定指南进行设置和部署平台特定指南

Edit on GitHub
AI 翻译查看英文原文