Express.js 是一种灵活且易于使用的 Node.js Web 开发框架，可以快速构建 Web 应用程序。在本文中，我们将介绍如何使用 Express.js 构建 Web 应用程序。
准备工作
在开始使用 Express.js 之前，需要安装 Node.js 和 npm。如果您已经安装了 Node.js 和 npm，请跳过此步骤。
安装 Node.js 和 npm
在 Node.js 的官方网站（https://nodejs.org/）上，下载并安装最新稳定版本的 Node.js。安装完成后，npm 也将随之安装。
初始化项目
使用 npm 初始化一个项目：
npm init
在初始化过程中，您需要提供一些基本信息，如项目名称、版本、描述等。您可以随时更改这些信息。
安装 Express.js
安装 Express.js：
npm install express
该命令将从 npm 下载并安装 Express.js。安装完成后，您可以在项目的 node_modules 目录中找到 Express.js。
Hello World
让我们从一个简单的 "Hello World" 应用开始，这将帮助您了解 Express.js 的基础知识。
创建一个新文件 index.js，并将以下代码添加到文件中：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ -------- ----- ---- - --------------- -------- -- ---------------- -------- -- - -------------------- --- --------- -- ---- ------- --
该代码使用 express() 函数创建 app 对象，该对象是我们使用 Express.js 构建 Web 应用程序的主要方法。代码使用 app.get 方法来定义路由，并在浏览器请求根路径时发送 "Hello World!"。
使用以下命令启动应用程序：
node index.js
打开浏览器并访问 http://localhost:3000/，您将看到 "Hello World!"。
路由
路由是指将请求映射到对应的处理程序的过程。在 Express.js 中，我们可以使用 app.get、app.post、app.put 等方法来定义路由。
让我们看一个例子。创建一个新文件 routes.js，并将以下代码添加到文件中：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------ - ---------------- --------------- -------- ----- ---- - -------------- ------ -- -------------------- -------- ----- ---- - --------------- ------ -- -------------- - ------
然后，在 index.js 文件中引入 routes.js：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ----- ------ - ------------------- ------------ ------- ---------------- -------- -- - -------------------- --- --------- -- ---- ------- --
我们使用 express.Router() 函数创建了一个新的路由对象，并定义了两个路由：根路由和关于页面路由。在 index.js 文件中，使用 app.use 方法将这两个路由添加到主应用程序中。
启动应用程序，并在浏览器中访问 http://localhost:3000/ 和 http://localhost:3000/about，您应该会看到相应页面的内容。
模板引擎
在实际应用程序中，我们需要动态生成 HTML 页面。使用模板引擎可以帮助我们简化这个过程。Express.js 支持各种模板引擎，包括 EJS、Handlebars 等。
在本例中，我们将使用 EJS 模板引擎。让我们安装 EJS 模块：
npm install ejs
然后在 routes.js 文件中使用以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------ - ---------------- --------------- -------- ----- ---- - ------------------- - ------ ------ -- -- -------------------- -------- ----- ---- - ------------------- - ------ -------- -------- ------ ------- -- -- -------------- - ------
在上面的例子中，我们使用 res.render 方法渲染 EJS 模板。在 index.ejs 和 about.ejs 文件中，我们可以访问 title 和 message 变量。
在项目根目录下创建 views 文件夹，并创建 index.ejs 和 about.ejs 文件。在这两个文件中添加以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ------- ------ ------- ------- ------- ------- -------
在 index.ejs 文件中，我们使用 title 变量作为页面标题，在 about.ejs 文件中，我们使用 message 变量作为页面内容。
在 index.js 文件中使用以下代码设置模板引擎：
app.set('view engine', 'ejs')这将告诉 Express.js 使用 EJS 模板引擎。
重新启动应用程序，访问 http://localhost:3000/ 和 http://localhost:3000/about，您应该会看到已使用 EJS 模板渲染的页面。
处理 POST 请求
在我们的应用程序中，我们可能需要处理 POST 请求。Express.js 提供了一个 body-parser 中间件，可以轻松地处理 POST 请求。
在 index.js 文件中添加以下代码：
const bodyParser = require('body-parser')
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())这将解析 POST 请求并将表单数据添加到 req.body 中。现在，我们可以在路由中处理 POST 请求。
在 routes.js 文件中添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------ - ---------------- --------------- -------- ----- ---- - ------------------ -- ---------------------- -------- ----- ---- - -------------------- - ------ ----- ----------- ----- ------------- -- -- -------------- - ------
我们在 form.ejs 文件中创建了一个表单，在 submit 路由中处理表单提交请求，并在 submit.ejs 文件中显示表单数据。
在 form.ejs 文件中添加以下代码：
<form method="POST" action="/submit"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <button type="submit">Submit</button> </form>
在 submit.ejs 文件中添加以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ------- ------ --------- --- ---- ------- ------- -------
这将使用表单提交的名称呈现 "Hello [name]"。
重新启动应用程序并访问 http://localhost:3000/，填写表单并提交它。您应该可以看到提交后的页面，其中包含您填写的名称。
总结
在本文中，我们学习了如何使用 Express.js 构建 Web 应用程序，包括使用路由、模板引擎和处理 POST 请求。Express.js 是一个功能强大的 Web 应用程序框架，可以加快您的开发速度并提高您的代码质量。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f5e28980a9b385b8e5bfa