简介
在前端开发中，我们经常需要和服务器进行交互，而 Express 框架则是我们常用的服务器框架之一。而在使用 Express 框架时，我们通常需要配置前端模板引擎，这也是许多前端开发者会遇到的问题。
Express-html 是一个基于 Express 框架的前端模板引擎，它可以快速地帮助我们处理 HTML、CSS 和 JavaScript 等前端资源。本文将详细介绍 Express-html 的使用方法，为初学者提供一份实用的指导。
安装
在使用 Express-html 之前，我们需要先安装 Express 框架和 express-html 模块。打开命令行窗口输入以下命令：
npm install express npm install express-html
使用
安装好依赖之后，我们就可以使用 Express-html 模块了。在 Express 中使用 Express-html 模块非常简单，只需要在 Express 应用程序中使用以下代码即可：
const expressHtml = require('express-html');
const app = express();
app.engine('html', expressHtml());
app.set('view engine', 'html');在这段代码中，我们首先引入了 Express-html 模块，并将其赋值给变量 expressHtml。接着，我们实例化了 Express 应用程序，并使用 app.engine() 方法注册了 html 类型的文件扩展名，并将其赋值为 expressHtml 函数。最后，我们使用 app.set() 方法将视图引擎设置为 html。
在程序中的某个位置，我们可以使用 res.render() 方法将一个视图文件渲染为 HTML 页面并传递数据：
app.get('/', (req, res) => {
res.render('home', {
title: '首页',
content: '欢迎来到 Express-html 的世界',
});
});在这个例子中，我们使用 app.get() 方法监听根路径，当用户访问根路径时，我们将 home.html 文件渲染为 HTML 页面，并使用对象传递了 title 和 content 两个数据。
模板语法
在 Express-html 中，我们可以使用简单的模板语法来编写前端页面，这些语法包括插值、条件渲染、循环等等。
插值
插值语法用于在 HTML 模板中引用 JavaScript 变量或表达式。我们使用双括号将变量或表达式包裹即可：
<h1>{{ title }}</h1>在这个例子中，我们将 title 变量插入了一个 h1 元素中。
条件渲染
条件渲染语法用于在 HTML 模板中根据条件来显示或隐藏某些元素。我们使用 if 指令来实现条件渲染：
{% if isAuthorized %}
<p>您已经登录</p>
{% else %}
<p>请先登录</p>
{% endif %}在这个例子中，我们根据 isAuthorized 变量的值来决定是否显示相应的段落。如果该变量的值为真，则显示“您已经登录”，否则显示“请先登录”。
循环
循环语法用于在 HTML 模板中遍历 JavaScript 对象或数组并渲染相应的元素。我们使用 for 指令来实现循环渲染：
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>在这个例子中，我们使用 for 指令遍历了 items 数组，并将遍历的结果以 li 元素的形式渲染在了一个无序列表中。其中，item 变量代表了当前遍历到的数组元素。
示例代码
以下是一个完整的 Express-html 示例代码，它演示了如何使用 Express-html 来渲染一个 HTML 页面并传递数据：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- ------- - -------------------
----- --- - ----------
-- -- ---- ----
------------------ ---------------
------------- -------- --------
-- -----------
------------ ----- ---- -- -
------------------ -
------ -----
-------- ----- ------------ -----
------ -------------- ------- -------
---
---
-- ----------
---------------- -- -- -
------------------- ------- -- ------------------------
---在这个例子中，我们注册了一个 HTML 模板引擎，然后设置了一个路由处理函数，该函数根据用户请求渲染了一个名为 home.html 的模板文件，并传递了 title、message 和 items 三个数据，其中 items 是一个数组。
总结
通过本文的介绍，我们详细地了解了 Express-html 的使用方法和模板语法。在实际应用中，我们可以按照本文的指导来愉快地使用这个轻量级的前端模板引擎，让代码更加简洁高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e9181e8991b448dbea5