正文

掌握Express模板引擎，轻松实现动态网页制作

/0 浏览量
0414

在构建现代Web应用时，Express模板引擎是一个非常有用的工具。它允许开发者以高效和灵活的方式创建动态网页。本文将详细介绍Express模板引擎的基本概念、使用方法以及如何将其应用于实际项目中。

Express模板引擎简介

Express是一个流行的Node.js Web应用框架，它可以帮助开发者快速搭建Web服务器和应用程序。Express模板引擎是Express框架的一部分，它允许开发者将HTML模板与服务器端的数据结合起来，生成动态网页。

Express模板引擎支持多种模板语言，如EJS、Pug、Handlebars等。在这里，我们将以EJS为例进行讲解，因为它语法简单，易于上手。

安装Express和EJS

要开始使用Express模板引擎，首先需要在项目中安装Express和EJS。可以通过以下命令进行安装：

npm install express ejs

创建基本模板

在Express应用中，模板通常存储在views文件夹中。首先，创建一个名为views的文件夹，并在其中创建一个名为index.ejs的文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

在这个例子中，我们定义了一个简单的HTML模板，其中包含两个变量：title和message。这两个变量将在服务器端被替换为实际的数据。

配置Express应用

接下来，配置Express应用以使用EJS模板引擎。在主文件（例如app.js）中，添加以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 设置模板引擎为EJS，并指定模板文件夹
app.set('view engine', 'ejs');
app.set('views', 'views');

// 设置静态文件目录
app.use(express.static('public'));

// 路由示例
app.get('/', (req, res) => {
    res.render('index', { title: '我的网站', message: '欢迎来到我的网站！' });
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

在这个例子中，我们设置了模板引擎为EJS，并指定了模板文件夹。同时，我们还设置了一个静态文件目录，以便于存放CSS、JavaScript等资源文件。

实现动态网页

现在，我们已经准备好创建一个动态网页。在index.ejs文件中，修改模板内容，以便它能够显示一个用户列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <ul>
        <% users.forEach(user => { %>
            <li><%= user.name %></li>
        <% }); %>
    </ul>
</body>
</html>

在app.js文件中，添加一个路由处理函数，用于返回用户列表：

const users = [
    { name: 'Alice' },
    { name: 'Bob' },
    { name: 'Charlie' }
];

app.get('/users', (req, res) => {
    res.render('index', { title: '用户列表', message: '以下是我们的用户列表：', users: users });
});

现在，当访问/users路由时，页面将显示一个包含所有用户名的列表。

总结

通过学习Express模板引擎，我们可以轻松地实现动态网页制作。EJS模板引擎语法简单，易于上手，非常适合用于快速开发Web应用。希望本文能帮助你更好地掌握Express模板引擎的使用方法。

-- 展开阅读全文 --