Heim > Web-Frontend > js-Tutorial > Hauptteil

Schnellstart mit Hono: Einfache Einrichtungsanleitung (mundgerechter Artikel)

Patricia Arquette
Freigeben: 2024-10-12 06:20:02
Original
393 Leute haben es durchsucht

Einführung

Haben Sie schon einmal von einem Web-Framework namens Hono gehört?
Kürzlich bin ich in verschiedenen Medien auf den Namen „Hono“ gestoßen und habe beschlossen, es selbst auszuprobieren.
Heute werde ich einen kurzen Überblick über Hono zusammen mit einer einfachen Anleitung zur Ersteinrichtung geben, teilweise als Erinnerung für mich selbst.

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

Was ist Hono?

Hono ist ein leichtes und schnelles Web-Framework, das auf TypeScript basiert.
Ich bin noch neu darin und habe noch nicht alle Funktionen erkundet, aber die Hauptstärken von Hono scheinen sein schnelles und leichtes Routing und seine Multi-Runtime-Unterstützung zu sein. Es funktioniert nahtlos mit verschiedenen JavaScript-Laufzeiten wie Cloudflare, Deno, Bun, AWS, Node.js und mehr und verwendet dieselbe Codebasis.

Bei meiner regulären Webentwicklungsarbeit verwende ich oft den MERN-Stack und verlasse mich hauptsächlich auf Express als mein Backend-Framework. Allerdings scheint Hono im Vergleich zu Express über eine bessere TypeScript-Kompatibilität und eine höhere Flexibilität zu verfügen, was es zu einem vielversprechenden Kandidaten dafür macht, in naher Zukunft eines der führenden Frameworks zu werden.

Darüber hinaus verfügt Hono als relativ neuer Akteur im Bereich der Web-Frameworks über großes Potenzial und könnte sich in den kommenden Jahren durchaus als Framework der nächsten Generation etablieren, das auf verschiedenen Plattformen und Umgebungen eingesetzt wird.

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

Aufstellen

Beim Einrichten der Umgebung bietet Hono praktische Vorlagen, die Ihnen einen einfachen Einstieg ermöglichen. Dieses Mal beginnen wir mit npm.

Führen Sie zunächst den folgenden Befehl aus:

npm create hono@latest hono-myapp
Nach dem Login kopieren

Nachdem Sie den Befehl ausgeführt haben, werden Sie aufgefordert, eine Vorlage auszuwählen. Wählen Sie diejenige aus, die am besten zur Umgebung Ihres Projekts passt. Wählen Sie für diesen Artikel die NodeJS-Vorlage aus.

Nachdem die Installation abgeschlossen ist, wird eine Projektdatei mit den minimal erforderlichen Elementen erstellt. Legen Sie sie also auf CD und führen Sie npm run dev aus.

Wenn es keine Fehler oder Probleme gibt, versuchen Sie, localhost zu öffnen und prüfen Sie, ob Hello World angezeigt wird.

Hinzufügen einer einfachen Route

Bisher haben wir nur die Vorlagendateien ausgeführt, also fügen wir ein wenig Code hinzu, um das Projekt zu verbessern. Als Nächstes erstellen wir mit Hono eine Route, die dynamische Parameter akzeptiert. Sie sollten eine index.ts-Datei im Ordner src des zuvor erstellten Verzeichnisses finden. Bearbeiten wir diese Datei und fügen wir eine Route wie app.get('/hello/:name') hinzu, um einen Pfadparameter namens name zu verarbeiten und seinen Wert in der Antwort zurückzugeben.

Fügen Sie den folgenden Codeausschnitt zu Ihrem vorhandenen Code hinzu:

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

:name part ist ein Pfadparameter, der es uns ermöglicht, den Wert in der URL dynamisch zu erfassen. Mit c.req.param('name') können wir den Wert von :name extrahieren und ihn in der Antwort als Hallo, {name}!.

anzeigen

Versuchen Sie bei laufendem Server, auf die folgenden URLs zuzugreifen:

http://localhost:3000/branches/John → Zeigt an: Hallo, John!
http://localhost:3000/branches/Alice → Zeigt an: Hallo, Alice!

Auf diese Weise können Sie den Namensteil dynamisch ändern, um je nach Eingabe unterschiedliche Nachrichten anzuzeigen.

Hier ist die endgültige Version des vollständigen Codes:

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
})
Nach dem Login kopieren

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

Abschluss

Ursprünglich hatte ich geplant, etwas tiefer in Hono einzutauchen, aber ich habe beschlossen, diesen Artikel kurz und prägnant zu halten und mich auf die Übersicht und den Einrichtungsprozess von Hono zu konzentrieren. Daher könnte der Inhalt etwas unvollständig wirken.

Ich werde jedoch weiterhin mit Hono experimentieren, und wenn ich in Zukunft neue Erkenntnisse oder Tipps entdecke, werde ich diese auf jeden Fall in einem Folgebeitrag teilen.

Vielen Dank, dass Sie bis zum Ende gelesen haben, und ich hoffe, Sie in meinen zukünftigen Artikeln wiederzusehen. Ich schätze Ihre anhaltende Unterstützung!

Das obige ist der detaillierte Inhalt vonSchnellstart mit Hono: Einfache Einrichtungsanleitung (mundgerechter Artikel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage