node.js - 如何动态渲染快速视图

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});
});

一些模板.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

您可以为此目的使用模板引擎，因为它使您能够在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送给客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易。

与 Express 一起使用的一些流行模板引擎是Pug、Mustache和EJS。Express 应用程序生成器默认使用Jade，但它也支持其他几个。

还要检查这个链接