[英]Best practice for rendering views in Express.js and EJS
我通过了一个使用 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 });
});
好的,现在我明白了你的意思。
所以你会像这样 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 视图。
我希望这是有道理的,并且可以帮助您理解如何解决这个问题::)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.