Heim > Web-Frontend > js-Tutorial > miniframe-router: Router für Express.JS-Anwendungen

miniframe-router: Router für Express.JS-Anwendungen

DDD
Freigeben: 2025-01-02 13:10:42
Original
269 Leute haben es durchsucht

miniframe-router – ein minimalistischer Router für Express.JS-Anwendungen, inspiriert von Ruby on Rails. So habe ich es gemacht.

miniframe-router: Router for Express.JS Applications


Beispiel, wie Routing in einer einfachen Anwendung aussehen könnte.

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

Kontext

Ich hatte seit etwa 10 Jahren keine NodeJS-Anwendungen mehr geschrieben. Neugierig auf Telegram Mini Apps, beschloss ich, ein paar einfache Projekte zu erstellen, um dieses neue Feld zu erkunden.

Dazu benötigte ich Routing für das Backend meiner Anwendungen. Bestehende Lösungen überzeugten mich nicht ganz, also beschloss ich, meinen eigenen Router zu entwickeln – einfach, effektiv und inspiriert von Ruby on Rails. Es war auch eine großartige Gelegenheit, mein Wissen über die Erstellung von NPM-Paketen aufzufrischen, was ich seit 9 Jahren nicht mehr getan hatte.


Design

Erwartungen an den Router:

  1. Routing wird in einer separaten Datei definiert

Dies vereinfacht die Bewerbungsstruktur und vermeidet ein Überladen der Hauptbewerbungsdatei.

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;
Nach dem Login kopieren
  1. Der Router integriert sich in die Haupt-ExpressJS-Datei

Ein einfacher und effektiver Einstiegspunkt für die Anwendung: src/index.js oder 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");
});
Nach dem Login kopieren
  1. Befolgen Sie die Konventionen zum Anschließen von Controllern

Controller befinden sich im Verzeichnis src/controllers.

MyApp
└── src
    ├── controllers
    │   ├── blog
    │   │   └── postsController.ts
    │   ├── indexController.ts
    │   └── usersController.ts
    ├── index.ts
    └── routes
        └── index.ts
Nach dem Login kopieren

Dateistruktur

  • Routen werden in src/routes/index.js definiert.
  • Controller enthalten die Logik zur Bearbeitung von Anfragen:

Beispiel: src/controllers/usersController.ts (oder .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");
});
Nach dem Login kopieren
Nach dem Login kopieren

Durchführung

Schritte:

  1. Erstellen Sie einen Entwicklungscontainer mit Docker.
  2. Richten Sie ESBuild zum Kompilieren von TypeScript zu JavaScript ein.
  3. Installieren Sie Jest zum Testen.
  4. Schreiben Sie Tests, um die erste Version des Routers zu validieren.
  5. Implementieren Sie den Router, bis alle Tests bestanden sind.
  6. Meine lange ungenutzten NPM-Anmeldeinformationen wiederherstellen (nach 9 Jahren).
  7. Veröffentlichen Sie das NPM-Paket als Version 1.0.0.
  8. Beheben Sie kritische Installationsfehler und entfernen Sie die Versionen 1.0.0 und 1.1.0. ?
  9. Wenden Sie den Router auf ein Produktionsprojekt mit einem Dutzend Routen an.

Fragen und Antworten

Warum überhaupt das tun? Es gibt so viele bestehende Lösungen!

  • Es ist interessant, nützlich und trägt zur Lösungsvielfalt bei.

Warum so einfach? Sollte es nicht komplexer sein?

  • Nach dem KISS-Prinzip. Komplexität kann später nach Bedarf hinzugefügt werden.

Warum Controller? Sind sie nicht unnötig?

  • Controller sind praktisch für kleine Projekte. Höhere Abstraktionen wie aktions-/operationsähnliche Lösungen eignen sich besser für größere Systeme.

Funktioniert diese Lösung überhaupt?

  • Absolut! Der Router wurde in einer kleinen Produktions-App verwendet und funktionierte bei Dutzenden von Routen perfekt.

Welche Projektgrößen können damit bearbeitet werden?

  • Miniframe-Router eignet sich für Anwendungen mit Dutzenden von Routen. Es gibt keine strengen Größenbeschränkungen.

Abschluss

Projektcode und Dokumentation: GitHub – Miniframe-Router

NPM-Paket: Miniframe-Router

Gefällt mir, teile und abonniere! Konstruktives Feedback ist jederzeit willkommen.

Autorenseite: GitHub – the-teacher

Das obige ist der detaillierte Inhalt vonminiframe-router: Router für Express.JS-Anwendungen. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage