在 Express.js 和 EJS 中呈现视图的最佳实践

Question

我通过了一个使用 Express.js 路由仅呈现 EJS 模板的网站。所有可能的路线都在 /routes/index.js 文件中。因为文件会变大（会添加多个新路由），所以我想将文件拆分为对未来开发人员更友好的状态。即使有多个类别，URL 也只有一层深。

https://i.stack.imgur.com/J5eEq.png <-带有类别和页面的导航栏

示例：在图片上你可以看到多个类别，但如果你点击 "Gamble Diagram"，它会将你重定向到路线 /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

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

所以你会这样做：

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)。

我希望这是有道理的，并且可以帮助您了解如何处理这个问题！ :)

在 Express.js 和 EJS 中呈现视图的最佳实践

Best practice for rendering views in Express.js and EJS

javascript

ejs

express