Express.js 是一个流行的 Node.js Web 框架,它可以快速构建 Web 应用程序。本文将详细介绍如何使用 Express.js 构建一个应用程序。
第一步:安装和设置 Express.js
在开始之前,你需要安装 Node.js 和 npm。然后在命令行中运行以下命令来创建一个新的 Express.js 项目:
npm init npm install express --save
这将创建一个 package.json 文件和一个 node_modules 目录,其中包含 Express.js 和其依赖项。
接下来,在项目的根目录下创建一个名为 app.js 的文件,并在其中添加以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ -------- ----- ---- - --------------- --------- --- ---------------- -------- -- - -------------------- --- --------- -- ---- -------- ---
这段代码创建了一个 Express.js 应用程序并定义了一个基本路由,当用户访问网站根目录时会返回 "Hello World!"。
现在,在命令行中运行以下命令启动应用程序:
node app.js
打开浏览器并访问 http://localhost:3000 即可查看结果。
第二步:路由和控制器
在 Express.js 中,路由是指 URL 和 HTTP 请求方法(GET、POST、PUT 等)的组合。可以通过定义路由来处理请求。在上面的示例中,我们定义了根目录的路由。
然而,在实际开发中,通常需要更复杂的路由和处理逻辑。为此,我们可以使用控制器来组织代码并处理请求。
在项目的根目录下创建一个名为 controllers 的目录,并在其中创建一个名为 homeController.js 的文件。在 homeController.js 文件中添加以下代码:
exports.index = function(req, res) { res.send('Hello World!'); };
这段代码定义了一个 index 方法,该方法将处理根目录的 GET 请求并返回 "Hello World!"。
接下来,在 app.js 文件中添加以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- -------------- - ---------------------------------------- ------------ ---------------------- ---------------- -------- -- - -------------------- --- --------- -- ---- -------- ---
这段代码加载 homeController.js 文件并将其与根目录的路由关联起来。当用户访问网站根目录时,Express.js 将调用 homeController.js 中的 index 方法来处理请求。
第三步:模板引擎
现在,我们已经能够构建一个基本的 Express.js 应用程序并处理简单的路由。但是,在实际开发中,通常需要向用户呈现动态内容。为此,我们可以使用模板引擎来生成 HTML。
在本文中,我们将使用 EJS 模板引擎。要使用 EJS,请运行以下命令安装 EJS:
npm install ejs --save
接下来,在项目的根目录下创建一个名为 views 的目录,并在其中创建一个名为 index.ejs 的文件。在 index.ejs 文件中添加以下代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ------- ------ ------- ------- ------- ------- -------
这段代码定义了一个简单的 HTML 模板,其中包含一个标题和一个消息。
现在,在 homeController.js 文件中修改 index 方法如下:
exports.index = function(req, res) { res.render('index', { title: 'Express.js', message: 'Hello World!' }); };
这段代码使用 EJS 模板引擎渲染 index.ejs 模板,并将 title 和 message 变量传递给模板以呈现动态内容。
最后,在 app.js 文件
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/10748