Лучшие практики для рендеринга представлений в Express. js и EJS - PullRequest
Новая
       7

Лучшие практики для рендеринга представлений в Express. js и EJS

0 голосов
/ 18 апреля 2020

Я получил веб-сайт, который отображает только шаблоны E JS, используя Express. js маршрутизацию. Все возможные маршруты в файле /routes/index.js. Поскольку размер файла будет больше (будет добавлено несколько новых маршрутов), я хочу разбить файл на более дружественный статус для будущих разработчиков. И хотя есть несколько категорий, URL имеет только 1 уровень глубины.

https://i.stack.imgur.com/J5eEq.png <-навигация с категориями и страницами </p>

Пример: на картинке вы можете увидеть несколько категорий, но если вы нажмете «Диаграмма азартных игр», она перенаправить вас на маршрут /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 });
});
  • или сочетание двух предыдущих идей, разделение категорий на отдельные файлы и создание механизма для страниц.

1 Ответ

0 голосов
/ 18 апреля 2020

Хорошо, теперь я понял, что вы хотите сделать.

Итак, вы бы 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), только если вам нужно визуализировать динамику c пункт, не для просмотра c просмотров.

Надеюсь, это имеет смысл и поможет вам понять, как к этому подойти! :)

...