简介
Express 是一款流行的 Node.js web 开发框架。 Marko 是一个 JavaScript UI 库，类似于 React 或 Vue，它使用 HTML 和 JavaScript 构建可重用的 UI 组件。
Express-Marko 将这两者结合在一起。 它是一个用于 Express 的 Marko 视图渲染引擎，使我们能够使用 Marko 轻松地创建动态的服务器端视图。
在本文中，我们将探讨如何使用 Express-Marko。
安装
在开始使用 Express-Marko 之前，我们需要先安装 Node.js 和 Express。
然后，我们可以使用以下命令来安装 express-marko：
npm install express-marko --save
在 Express 中使用 Marko
在我们开始使用 Express-Marko 之前，我们需要先创建一个基本的 Express 应用程序。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - --------------- -------- -- ---------------- -- -- - -------------------- --- --------- -- ---- ------- --
现在，我们需要在应用程序中使用 Express-Marko。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------------ - ------------------------ ----- ---- - --------------- ----- --- - --------- ----------------------- ------------ ----- ---- -- - ------------------------------ --------------------- -- ---------------- -- -- - -------------------- --- --------- -- ---- ------- --
现在，我们已经可以在我们的项目中使用 Marko 模板。
我们在这里使用了 res.marko 方法来渲染 Marko 模板。 res.marko 需要传递 Marko 文件的路径作为第一个参数。 在 views 文件夹中创建名为 index.marko 的文件，这将是我们的模板。
以下是我们的 index.marko 文件：
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------------
-------
------
--------- -----------
-------
-------现在我们已经成功地使用 Marko 模板在 Express 中呈现网页了！
传递数据到视图
为了能够在视图中显示数据，我们需要将数据传递到视图渲染器中。 Express 中的信息能够很容易地通过 request 和 response 对象传递。
-- -------------------- ---- -------
----- ------- - ------------------
----- ------------ - ------------------------
----- ---- - ---------------
----- --- - ---------
-----------------------
------------ ----- ---- -- -
----- ---- - -
------ ------ -------
-------- -------- -- --- ------
-
------------------------------ --------------------- -----
--
---------------- -- -- -
-------------------- --- --------- -- ---- -------
--现在我们已经将数据传递到了我们的模板中，可以在模板中显示它们。
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------------
-------
------
----------------------
----------------------
-------
-------带有布局的模板
在大多数情况下，我们将使用模板中一个通用的布局模式。 Express-Marko 使我们能够轻松地实现布局模板。
首先，我们需要创建一个布局模板，比如 layout.marko。 这个布局模板中将使用 title 和 content 变量。
-- -------------------- ---- -------
--------- -----
------
------
----------------------------
-------
------
---------------
-------
-------在我们的视图文件中，我们将使用 <layout> 自定义标签将我们的内容包含在内：
<layout> Hello, World! </layout>
这里在视图文件中只包含了简单的字符串，但是我们也可以在这里包含任意数量的 HTML。
现在我们需要告诉 Express-Marko, 如何将这两个文件放在一起。 我们可以在 Express 应用程序中使用 layout 方法。
-- -------------------- ---- -------
----- ------- - ------------------
----- ------------ - ------------------------
----- ---- - ---------------
----- --- - ---------
-----------------------
------------ ----- ---- -- -
----- ---- - -
------ ------ -------
-------- -------- -- --- ------
-
------------------------------ --------------------- -
------- -------------------- ----------------------
----- ----
--
--
---------------- -- -- -
-------------------- --- --------- -- ---- -------
--在这个示例中，我们向 res.marko 方法中传递了一个包含 layout 和 data 属性的对象。 layout 属性用于告诉 Express-Marko 在渲染页面时应该使用哪个布局模板。
现在在我们的应用程序中使用带有布局的模板了！
结论
在本文中，我们学习了如何在 Express 中使用 Marko 模板。 使用 Express-Marko，我们可以轻松地创建可重用的 UI 组件并将其用于服务器端视图。 我们探讨了如何将数据传递到视图中，以及如何使用带有布局的模板。
通过使用 Express-Marko，我们可以提高我们的生产力并减少编写模板所需的时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005551581e8991b448d24a8