Maison > interface Web > js tutoriel > Démarrage rapide avec Hono : Guide de configuration simple (article en bouchée)

Démarrage rapide avec Hono : Guide de configuration simple (article en bouchée)

Patricia Arquette
Libérer: 2024-10-12 06:20:02
original
423 Les gens l'ont consulté

Introduction

Avez-vous déjà entendu parler d'un framework Web appelé Hono ?
Récemment, j'ai découvert le nom "Hono" dans divers médias et j'ai décidé de l'essayer moi-même.
Aujourd'hui, je vais partager un bref aperçu de Hono ainsi qu'un simple guide de configuration initiale, en partie à titre de mémo pour moi-même.

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

Qu’est-ce qu’Hono ?

Hono est un framework Web léger et rapide construit sur TypeScript.
Je suis encore nouveau dans ce domaine et je n'ai pas encore exploré toutes ses fonctionnalités, mais les principaux atouts de Hono semblent être son routage rapide et léger et sa prise en charge multi-exécution. Il fonctionne de manière transparente sur différents environnements d'exécution JavaScript, tels que Cloudflare, Deno, Bun, AWS, Node.js, etc., en utilisant la même base de code.

Dans mon travail régulier de développement Web, j'utilise souvent la pile MERN et je m'appuie principalement sur Express comme framework backend. Cependant, Hono semble avoir une meilleure compatibilité TypeScript et une plus grande flexibilité par rapport à Express, ce qui en fait un candidat prometteur pour devenir l'un des principaux frameworks dans un avenir proche.

De plus, étant un acteur relativement nouveau dans le domaine des frameworks Web, Hono a beaucoup de potentiel et pourrait très bien s'imposer comme un framework de nouvelle génération utilisé sur diverses plates-formes et environnements dans les années à venir.

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

Installation

Lors de la configuration de l'environnement, Hono propose des modèles pratiques qui vous permettent de démarrer facilement. Cette fois, utilisons npm pour commencer.

Tout d'abord, exécutez la commande suivante :

1

npm create hono@latest hono-myapp

Copier après la connexion

Après avoir exécuté la commande, vous serez invité à sélectionner un modèle. Choisissez celui qui convient le mieux à l’environnement de votre projet. Pour cet article, sélectionnez le modèle nodejs.

Une fois l'installation terminée, un fichier de projet contenant les éléments minimaux nécessaires sera créé, alors cd-le et exécutez npm run dev.

S'il n'y a pas d'erreurs ou de problèmes, essayez d'ouvrir localhost et voyez si Hello World apparaît.

Ajout d'un itinéraire simple

Jusqu'à présent, nous n'avons exécuté que les fichiers modèles, ajoutons donc un peu de code pour améliorer le projet. Ensuite, nous utiliserons Hono pour créer un itinéraire qui accepte des paramètres dynamiques. Vous devriez trouver un fichier index.ts dans le dossier src du répertoire que nous avons créé précédemment. Modifions ce fichier et ajoutons une route comme app.get('/hello/:name') pour gérer un paramètre de chemin appelé name et renvoyer sa valeur dans la réponse.

Ajoutez l'extrait de code suivant à votre code existant :

1

2

3

4

app.get('/branches/:name', (c) => {

  const name = c.req.param('name')

  return c.text(`Hello, ${name}!`)

});

Copier après la connexion

:name part est un paramètre de chemin qui nous permet de capturer dynamiquement la valeur dans l'URL. En utilisant c.req.param('name'), nous pouvons extraire la valeur de :name et l'afficher dans la réponse sous la forme Bonjour, {name} !.

Le serveur étant en cours d'exécution, essayez d'accéder aux URL suivantes :

http://localhost:3000/branches/John → Affiche : Bonjour John !
http://localhost:3000/branches/Alice → Affiche : Bonjour Alice !

De cette façon, vous pouvez modifier la partie nom de manière dynamique pour afficher différents messages en fonction de l'entrée.

Voici la version finale du code complet :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

})

Copier après la connexion

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

Conclusion

Au départ, j'avais prévu de plonger un peu plus profondément dans Hono, mais j'ai décidé de garder cet article court et concis en me concentrant sur la présentation et le processus de configuration de Hono. Par conséquent, le contenu peut sembler un peu incomplet.

Cependant, je continuerai à expérimenter avec Hono, et si je découvre de nouvelles idées ou astuces à l'avenir, je ne manquerai pas de les partager dans un article de suivi.

Merci beaucoup d'avoir lu jusqu'au bout, et j'espère vous revoir dans mes futurs articles. J'apprécie votre soutien continu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal