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

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

---

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

// 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 年來沒有做過的事情。

---

設計

對路由器的期望：

1. 路由在單獨的檔案中定義

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

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;

1. 路由器整合到主 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");
});

1. 連接控制器時遵循的約定

控制器位於 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");
});

---

執行

步驟：

1. 使用Docker建立開發容器。
2. 設定 ESBuild 將 TypeScript 編譯為 JavaScript。
3. 安裝Jest測試。
4. 寫測試來驗證路由器的第一個版本。
5. 實作路由器，直到所有測試都通過。
6. 恢復我長期未使用的 NPM 憑證（9 年後）。
7. 將 NPM 套件發佈為版本 1.0.0。
8. 修正關鍵安裝錯誤並刪除版本 1.0.0 和 1.1.0。 ？
9. 將路由器應用到一個有十幾條路由的生產項目。

---

問答

為什麼還要這樣做？現有的解決方案有很多！

• 它有趣、有用，並且有助於解決方案的多樣性。

為什麼這麼簡單？難道不應該更複雜嗎？

• 遵循KISS原則。稍後可以根據需要添加複雜性。

為什麼是控制器？它們不是不必要的嗎？

• 控制器對於小型專案來說很方便。更高的抽象（例如類似操作/操作的解決方案）更適合更大的系統。

這個解決方案是否有效？

• 絕對！該路由器在一個小型生產應用中使用，並且在數十條路由中表現完美​​。

它可以處理什麼規模的專案？

• miniframe-router適合有幾十條路由的應用。沒有嚴格的尺寸限制。

---

結論

專案程式碼與文件：GitHub - miniframe-router

NPM 包：miniframe-router

按讚、分享和訂閱！始終歡迎建設性回饋。

作者頁：GitHub - the-teacher

以上是miniframe-router：Express.JS 應用程式的路由器的詳細內容。更多資訊請關注PHP中文網其他相關文章！