miniframe-router：Express.JS 應用程式的路由器-js教程-PHP中文網

miniframe-router：Express.JS 應用程式的路由器

DDD

發布： 2025-01-02 13:10:42

原創

269 人瀏覽過

miniframe-router — Express.JS 應用程式的極簡路由器，靈感來自 Ruby on Rails。這是我的製作方法。

miniframe-router: Router for Express.JS Applications

路由在簡單應用程式中的外觀範例。

// 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");
});

登入後複製

情境

我大約有 10 年沒有寫 NodeJS 應用程式了。出於對 Telegram Mini Apps 的好奇，我決定建立一些簡單的專案來探索這個新領域。

為此，我需要為我的應用程式後端進行路由。現有的解決方案並沒有給我留下深刻的印象，因此我決定創建自己的路由器 - 簡單、有效，並且受到 Ruby on Rails 的啟發。這也是一個很好的機會來刷新我創建 NPM 套件的知識，這是我 9 年來沒有做過的事情。

設計

對路由器的期望：

路由在單獨的檔案中定義

這簡化了應用程式結構並避免主應用程式檔案混亂。

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;

登入後複製

路由器整合到主 ExpressJS 檔案

簡單有效的應用程式入口點：src/index.js 或 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");
});

登入後複製

連接控制器時遵循的約定

控制器位於 src/controllers 目錄中。

MyApp
└── src
    ├── controllers
    │   ├── blog
    │   │   └── postsController.ts
    │   ├── indexController.ts
    │   └── usersController.ts
    ├── index.ts
    └── routes
        └── index.ts

登入後複製

文件結構

路由在 src/routes/index.js 中定義。
控制器包含處理請求的邏輯：

範例：src/controllers/usersController.ts（或 .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");
});

登入後複製