使用 Express.js 和 EJS 模板引擎创建动态网站-JavaScript中文网-JavaScript教程资源分享门户

最近，在 Web 开发中，动态网站变得越来越普遍。动态网站是指在浏览器上加载时可以发生更改，比如用户登录状态更改。这种类型的网站需要使用服务器端的编程语言和框架来生成 HTML。

在 JavaScript 市场上，Express.js 是非常流行的一个框架。它为开发人员提供了很多功能，如路由、中间件、视图引擎等。EJS（Embedded JavaScript Templating）是当前流行的模板引擎之一，它帮助开发人员在服务器端生成 HTML。

在本文中，我们将研究如何使用 Express.js 和 EJS 模板引擎创建动态网站。

环境搭建

在开始之前，需要确保您已经安装了 Node.js 和 npm（Node.js 包管理器）。您可以运行以下命令在终端中检查它们是否安装：

node -v
npm -v

接下来，让我们安装所需要的依赖项。在命令提示符中运行以下命令：

npm init
npm install express --save
npm install ejs --save

首先，让我们通过运行以下命令来创建一个可执行的 Express 应用程序：

express --view=ejs myapp

上述命令将在您的计算机上创建一个名为“myapp”的文件夹。现在，我们已经成功地创建了一个 Express 应用程序，并使用 EJS 作为我们的视图引擎。

路由是 Express.js 中最重要的概念之一。路由是指定义 URL 和相应的请求处理程序之间的映射关系。

打开 app.js 文件，并在其底部添加以下代码：

app.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

这个路由将匹配网站的根 URL 并渲染名为“index”的 EJS 视图，该视图位于 views 目录下。我们还将传递一个 JavaScript 对象作为第二个参数，它将传递给视图模板并允许渲染动态数据。

在 views 目录下，创建一个名为“index.ejs”的文件。此文件将作为我们的主页视图。

打开 index.ejs 文件，并将以下内容添加到文件的顶部：

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

在其中，我们使用 EJS 的 <%= %> 标签从 JavaScript 对象中渲染数据，并将其插入我们的 HTML 标记中。此外，我们还连接了一个名为“style.css”的样式表。确保将其放置在 public 目录下。

继续在 index.ejs 文件中添加以下代码：

<body>
  <h1><%= title %></h1>
  <p>Welcome to <%= title %></p>
</body>
</html>

这将在我们的网站首页中显示标题和欢迎消息。

现在，您已准备就绪，可以启动 Express 应用程序。运行以下命令启动服务器：

npm start

在这篇文章中，我们学习了如何使用 Express.js 和 EJS 模板引擎创建动态网站。我们了解了路由和试图引擎的基本概念，以及如何处理动态数据。通过使用示例代码，我们解释了所有的步骤，并演示了如何启动应用程序。我希望这篇文章对您有所帮助并且可以成功地创建您自己的动态网站。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6450bda6980a9b385b9ab720