在当前的 Web 开发中，前端技术的发展日新月异，前端开发者需要掌握各种技术和工具。其中，Express.js 和 EJS 模板引擎是非常常用的 Web 开发工具。Express.js 是一个基于 Node.js 平台的 Web 开发框架，它提供了一系列强大的功能，使得 Web 开发变得更加简单和高效。而 EJS 模板引擎则是一种简单易用的模板语言，它能够帮助我们更加方便地生成 HTML 页面。
本文将详细介绍如何使用 Express.js 和 EJS 模板引擎构建 Web 应用，包括安装和配置 Express.js，使用 EJS 模板引擎，以及如何结合两者来构建 Web 应用。
安装和配置 Express.js
首先，我们需要安装 Node.js 和 Express.js。在安装 Node.js 后，我们可以使用 npm 命令来安装 Express.js。在命令行中输入以下命令来进行安装：
--- ------- ------- ------
安装完成后，我们就可以开始配置 Express.js 了。在项目的根目录下，创建一个名为 app.js 的文件，并在其中添加以下代码：
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
在这段代码中，我们首先引入了 Express.js 模块，并创建了一个名为 app 的应用实例。接着，我们使用 app.get() 方法来定义一个路由，当用户访问根路径时，会返回一个简单的 "Hello World!" 字符串。最后，我们使用 app.listen() 方法来启动应用，监听 3000 端口。
现在，我们可以在命令行中运行以下命令来启动应用：
---- ------
然后，我们可以在浏览器中访问 http://localhost:3000 来查看应用是否正常运行。
使用 EJS 模板引擎
接下来，我们将使用 EJS 模板引擎来生成 HTML 页面。首先，我们需要安装 EJS 模板引擎。在命令行中输入以下命令来进行安装：
--- ------- --- ------
安装完成后，我们需要在 app.js 文件中添加以下代码来配置 EJS 模板引擎：
------------- -------- ------- ---------------- --------- - ----------
在这段代码中，我们首先使用 app.set() 方法来设置模板引擎为 EJS。接着，我们使用 app.set() 方法来设置模板文件所在的目录为 views 目录。
现在，我们可以在 views 目录下创建一个名为 index.ejs 的文件，用于生成 HTML 页面。在 index.ejs 文件中，我们可以使用 EJS 的模板语言来生成动态的 HTML 内容。例如，我们可以使用以下代码来生成一个简单的 HTML 页面：
--------- ----- ------ ------ ---------- ----- ---------- ------- ------ ------- ------- ------- ------- -------
在这段代码中，我们使用 <%= %> 语法来输出动态内容。例如，<%= title %> 会被替换为我们传递给模板的 title 变量的值。
接下来，我们需要在 app.js 文件中修改路由，以便使用 EJS 模板引擎来生成 HTML 页面。在 app.js 文件中，我们可以使用以下代码来修改路由：
------------ ----- ---- -- - ------------------- - ------ ------------- -------- ------ ------- --- ---
在这段代码中，我们使用 res.render() 方法来渲染名为 index 的模板文件，并传递一个包含 title 和 message 变量的对象。
现在，我们可以在浏览器中访问 http://localhost:3000 来查看我们生成的 HTML 页面了。
结合 Express.js 和 EJS 模板引擎构建 Web 应用
最后，我们将结合 Express.js 和 EJS 模板引擎来构建一个简单的 Web 应用。在这个应用中，我们将创建一个简单的 To-Do List，用户可以添加和删除任务。
首先，我们需要在 app.js 文件中添加以下代码来处理表单提交：
----- ---------- - ----------------------- ------------------------------- --------- ---- ---- ---------------- ----- ---- -- - ----- ---- - -------------- ----------------- ------------------ --- ------------------- ----- ---- -- - ----- ----- - --------------- ------------------- --- ------------------ ---
在这段代码中，我们首先引入了 body-parser 模块，并使用 app.use() 方法来设置它。接着，我们定义了两个路由，分别用于处理添加任务和删除任务的表单提交。在这两个路由中，我们分别获取表单提交的参数，并对 tasks 数组进行操作。最后，我们使用 res.redirect() 方法来重定向到根路径。
接下来，我们需要在 index.ejs 文件中添加一个表单，以便用户可以添加任务。在 index.ejs 文件中，我们可以使用以下代码来添加表单：
--------- -----
------
------
---------- ----- ----------
-------
------
------- ------- -------
----- ------------- --------------
------ ----------- ----------- --
------- --------------------------
-------
----
-- -------------------- ------ -- - --
------- ---- -- ----- ---------------- -------------------- ------------- ------------ ---------- ----- --- --------- -----------------------------------------
-- -- --
-----
-------
-------在这段代码中，我们添加了一个表单，用于添加任务。表单的 action 属性指定了表单提交的路由，而 method 属性指定了表单提交的方法。接着，我们使用一个循环来遍历 tasks 数组，并在页面中显示每个任务和一个删除按钮。在删除按钮中，我们使用一个隐藏的 input 元素来传递任务的索引值。
现在，我们已经完成了一个简单的 To-Do List 应用。用户可以在表单中添加任务，并在页面中看到所有任务的列表。用户还可以点击删除按钮来删除任务。
总结
本文介绍了如何使用 Express.js 和 EJS 模板引擎构建 Web 应用。我们首先介绍了如何安装和配置 Express.js，然后介绍了如何使用 EJS 模板引擎生成动态的 HTML 页面。最后，我们结合 Express.js 和 EJS 模板引擎构建了一个简单的 To-Do List 应用，帮助读者进一步理解如何使用这两个工具来构建 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f3beeb2b3ccec22fc2dfde