在 Express.js 和 EJS 中呈現視圖的最佳實踐

Question

我通過了一個使用 Express.js 路由僅呈現 EJS 模板的網站。 所有可能的路線都在/routes/index.js文件中。 因為文件會變大（會添加多個新路由），我想將文件拆分為更友好的 state 以供未來的開發人員使用。 而且即使有多個類別，URL 也只有 1 級深度。

https://i.stack.imgur.com/J5eEq.png <-帶有類別和頁面的導航欄

示例：在圖片上您可以看到多個類別，但如果您點擊“賭博圖”，它會將您重定向到路線/acidbase-belance 。 更合乎邏輯的是/acidbase/belance 。 並且有很多代碼重復。

當前實施：

 router.get("/acidbase", function (req, res, next) {
  res.render("template", { title: "Acid-base Simulator", page: "acidbase" });
});

router.get("/acidbase-intro", function (req, res, next) {
  res.render("template", {
    title: "The ABC of Acid-base balance",
    page: "acidbaseintro",
  });
});

router.get("/acidbase-the-interpreter", function (req, res, next) {
  res.render("template", {
    title: "The Interpreter",
    page: "acidbaseInterpreter",
  });
});

router.get("/acidbase-balance", function (req, res, next) {
  res.render("template", {
    title: "Acid-base balance",
    page: "acidbaseBalance",
  });
});

router.get("/cardiovascular", function (req, res, next) {
  res.render("template", {
    title: "Cardiac and vascular function coupling",
    page: "cardiovascular",
  });
});

router.get("/cardiovascular-theory", function (req, res, next) {
  res.render("template", {
    title: "Cardiovascular theory",
    page: "cardiovascularTheory",
  });
});

router.get("/pvsimulator", function (req, res, next) {
  res.render("template", { title: "pV Diagram", page: "cardiovascularpv" });
});

router.get("/electrophysiology2", function (req, res, next) {
  res.render("template", {
    title: "Nernst potentials",
    page: "electrophysiology2",
  });
});

router.get("/electrophysiology", function (req, res, next) {
  res.render("template", {
    title: "Equilibrium membrane potential",
    page: "electrophysiology",
  });
});

...
...
...

重構這個的最佳實踐是什么？

我的想法：

• 將每個類別拆分為單獨的文件（ routes\categorieName.js ）

• 在routes\index.js中創建可能的路由數組，並創建一些查找機制。 例子：

var possible_routes = [{ categorie: "acidbase", subroutes: [{ title: "test", page: "acid" }] }];
router.get("/:categorie/:page", function (req, res, next) {

var categorie = possible_routes.find(obj => {
  return obj.categorie === req.params.categorie
})

...
...
...

  if (typeof req.params.page !== "undefined")

    res.render("template", { title: "Express", page: req.params.categorie/req.params.page });
});

• 或混合以前的兩種想法，將類別拆分為單獨的文件並為頁面創建機制。

Answer 1

好的，現在我明白了你的意思。

所以你會像這樣 go ：

const productRouter = require('./routes/productRouter.js');
app.get('/product', productRouter));

產品路由器將是這樣的：

const express = require('express');

const router = express.router();

router.get('/acidbaseblabla', (req, res) => {
    res.render('yourview.ejs')
});

export default router;

您可以根據需要多次重復此操作，從而將您的路線划分為不同的文件。

只有在需要呈現動態項目時才必須使用請求參數 ( /:product )，而不是用於 static 視圖。

我希望這是有道理的，並且可以幫助您理解如何解決這個問題：:)