Как динамически отображать экспресс-представления

Question

Я новичок в выражении JS и пытаюсь создать CMS следующим образом:

1. У пользователей есть конструктор страниц, где они могут перетаскивать различные компоненты на странице.
2. каждый компонент имеет свои собственные данные, которые также определяются пользователем
3. Каждый компонент имеет свой собственный шаблон представления

Итак, я должен проверить, какие компоненты нужно загрузить,подготовьте данные для каждого из них, отправьте эти данные в соответствующий шаблон, визуализируйте один большой HTML-код и отправьте клиенту.

Я знаю, слишком сложно объяснить, как создать это, но любые учебные пособия, примеры,ресурсы будут оценены.

Answer 1

IIUC, вы можете сделать это, используя функцию include, которая есть в большинстве языков шаблонов.Для примера я буду использовать ejs.Кроме того, я предполагаю, что вы знаете, как получить данные для выбора пользователя на ваш сервер.

в вашем app.js:

app.get('/someRoute', function(req, res) {

    var data = //get user data here

    res.render('someTemplate', {data:data});
});

someTemplate.ejs:

<%- include('header') %> //you should do this on every page

<% if (data == 'foo') { %>
   <%- include('foo', {data:data}) %> //note that you can pass data to templates like this
<% } %>

<% if (data == 'bar') %>
    <%- include('bar') %>
<% } %>

<% include('footer') %>

foo.ejs:

//some component here

Если вы хотите узнать больше, проверьте документы .

Надеюсь, это поможет!

Answer 2

Вы можете использовать Template Engine для этой цели, поскольку он позволяет вам использовать статические файлы шаблонов в вашем приложении.Во время выполнения механизм шаблонов заменяет переменные в файле шаблона фактическими значениями и преобразует шаблон в файл HTML, отправляемый клиенту.Этот подход облегчает разработку HTML-страницы.

Некоторые популярные движки шаблонов, которые работают с Express: Pug , Усы и EJS ,Генератор приложений Express использует Jade по умолчанию, но также поддерживает несколько других.

Также проверьте ссылку