Maison > interface Web > js tutoriel > miniframe-router : routeur pour les applications Express.JS

miniframe-router : routeur pour les applications Express.JS

DDD
Libérer: 2025-01-02 13:10:42
original
269 Les gens l'ont consulté

miniframe-router — un routeur minimaliste pour les applications Express.JS, inspiré de Ruby on Rails. Voici comment je l'ai fait.

miniframe-router: Router for Express.JS Applications


Exemple de ce à quoi pourrait ressembler le routage dans une application simple.

// Root routes
root("index#home");

// Basic CRUD routes
get("/users", "users#index");
get("/users/:id", "users#show");
post("/users", "users#create");
post("/users/:id", "users#update");
post("/users/:id/destroy", "users#destroy");

// Posts routes with scope
scope("blog", () => {
  get("/posts", "posts#index");
  get("/posts/:id", "posts#show");
  post("/posts", "posts#create");
  post("/posts/:id", "posts#update");
  post("/posts/:id/destroy", "posts#destroy");
});
Copier après la connexion
Copier après la connexion

Contexte

Je n'avais pas écrit d'applications NodeJS depuis environ 10 ans. Curieux de connaître Telegram Mini Apps, j'ai décidé de construire quelques projets simples pour explorer ce nouveau domaine.

Pour cela, j'avais besoin de routage pour le backend de mes applications. Les solutions existantes ne m'ont pas vraiment impressionné, j'ai donc décidé de créer mon propre routeur : simple, efficace et inspiré de Ruby on Rails. C’était aussi une belle opportunité de rafraîchir mes connaissances sur la création de packages NPM, quelque chose que je n’avais pas fait depuis 9 ans.


Conception

Attentes concernant le routeur :

  1. Le routage est défini dans un fichier séparé

Cela simplifie la structure de la candidature et évite d'encombrer le dossier de candidature principal.

import {
  root,
  get,
  post,
  routeScope as scope,
  getRouter,
} from "miniframe-router";

// Root routes
root("index#home");

// Basic CRUD routes
get("/users", "users#index");
get("/users/:id", "users#show");
post("/users", "users#create");
post("/users/:id", "users#update");
post("/users/:id/destroy", "users#destroy");

// Posts routes with scope
scope("blog", () => {
  get("/posts", "posts#index");
  get("/posts/:id", "posts#show");
  post("/posts", "posts#create");
  post("/posts/:id", "posts#update");
  post("/posts/:id/destroy", "posts#destroy");
});

export default getRouter;
Copier après la connexion
  1. Le routeur s'intègre dans le fichier ExpressJS principal

Un point d'entrée simple et efficace pour l'application : src/index.js ou src/main.js.

import express from "express";
import getRouter from "./routes"; // <<< DEFINE ROUTES

const app = express();
app.use(express.json());
app.use(getRouter()); // <<< USER ROUTES

app.listen(3000, () => {
  console.log("Demo app is running on http://localhost:3000");
});
Copier après la connexion
  1. Conventions suivantes pour connecter les contrôleurs

Les contrôleurs se trouvent dans le répertoire src/controllers.

MyApp
└── src
    ├── controllers
    │   ├── blog
    │   │   └── postsController.ts
    │   ├── indexController.ts
    │   └── usersController.ts
    ├── index.ts
    └── routes
        └── index.ts
Copier après la connexion

Structure du fichier

  • Les itinéraires sont définis dans src/routes/index.js.
  • Les contrôleurs contiennent la logique de traitement des requêtes :

Exemple : src/controllers/usersController.ts (ou .js).

// Root routes
root("index#home");

// Basic CRUD routes
get("/users", "users#index");
get("/users/:id", "users#show");
post("/users", "users#create");
post("/users/:id", "users#update");
post("/users/:id/destroy", "users#destroy");

// Posts routes with scope
scope("blog", () => {
  get("/posts", "posts#index");
  get("/posts/:id", "posts#show");
  post("/posts", "posts#create");
  post("/posts/:id", "posts#update");
  post("/posts/:id/destroy", "posts#destroy");
});
Copier après la connexion
Copier après la connexion

Mise en œuvre

Mesures:

  1. Créez un conteneur de développement à l'aide de Docker.
  2. Configurez ESBuild pour compiler TypeScript en JavaScript.
  3. Installez Jest pour les tests.
  4. Écrire des tests pour valider la première version du routeur.
  5. Implémentez le routeur jusqu'à ce que tous les tests réussissent.
  6. Récupérer mes identifiants NPM inutilisés depuis longtemps (après 9 ans).
  7. Publiez le package NPM en version 1.0.0.
  8. Corrigez les bugs d'installation critiques et supprimez les versions 1.0.0 et 1.1.0. ?
  9. Appliquer le routeur à un projet de production avec une douzaine de routes.

Questions et réponses

Pourquoi même faire ça ? Il existe tellement de solutions existantes !

  • C'est intéressant, utile, et contribue à la diversité des solutions.

Pourquoi si simple ? Cela ne devrait-il pas être plus complexe ?

  • Suite au principe KISS. La complexité peut être ajoutée plus tard si nécessaire.

Pourquoi des contrôleurs ? Ne sont-ils pas inutiles ?

  • Les contrôleurs sont pratiques pour les petits projets. Les abstractions supérieures telles que les solutions de type Action/Opération sont mieux adaptées aux systèmes plus grands.

Cette solution est-elle même fonctionnelle ?

  • Absolument ! Le routeur a été utilisé dans une petite application de production et a parfaitement fonctionné avec des dizaines de routes.

Quelle taille de projets peut-il gérer ?

  • miniframe-router convient aux applications comportant des dizaines de routes. Il n'y a pas de limitations strictes de taille.

Conclusion

Code du projet et documentation : GitHub - miniframe-router

Package NPM : miniframe-router

Aimez, partagez et abonnez-vous ! Les commentaires constructifs sont toujours les bienvenus.

Page de l'auteur : GitHub - le-prof

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal