正文

新手必看！Express.js与EJS模板引擎完美结合，轻松实现页面渲染与数据展示

/0 浏览量
0530

在构建现代Web应用时，选择合适的后端框架和模板引擎对于提高开发效率和提升用户体验至关重要。Express.js是一个流行的Node.js框架，而EJS则是一种简洁高效的模板引擎。本文将带您探索如何将Express.js与EJS结合，轻松实现页面渲染与数据展示。

Express.js简介

Express.js是一个简洁而灵活的Node.js Web应用框架，它为Web和移动应用提供了快速、无障碍的开发环境。它由一系列中间件组成，可以很容易地添加新的功能，如路由、模板引擎等。

EJS模板引擎简介

EJS（Embedded JavaScript）是一种模板引擎，它允许开发者将HTML模板与动态内容结合，从而生成完整的HTML页面。EJS使用嵌入式JavaScript代码来渲染模板，这使得它在处理数据展示时非常灵活。

安装Express.js和EJS

在开始之前，确保您已经安装了Node.js。接下来，创建一个新的项目目录，并执行以下命令来初始化项目：

mkdir express-ejs-example
cd express-ejs-example
npm init -y

然后，安装Express.js和EJS：

npm install express ejs

创建基本服务器

创建一个名为server.js的文件，并添加以下代码：

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'Hello, Express.js & EJS!' });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

这段代码创建了一个基本的Express服务器，并设置EJS作为模板引擎。当访问根路径时，它会渲染一个名为index.ejs的视图。

创建EJS模板

在项目目录下创建一个名为views的文件夹，并在其中创建一个名为index.ejs的文件：

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

这个简单的HTML模板使用EJS语法来插入变量title。

运行服务器

现在，运行服务器：

node server.js

在浏览器中访问http://localhost:3000，您应该能看到一个标题为“Hello, Express.js & EJS!”的页面。

渲染数据

为了展示如何将数据渲染到页面中，修改server.js文件，添加一个新的路由：

app.get('/data', (req, res) => {
  const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
  ];
  res.render('data', { users: users });
});

然后，在views文件夹中创建一个名为data.ejs的文件：

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

现在，访问http://localhost:3000/data，您将看到一个包含用户数据的列表。

总结

通过将Express.js与EJS模板引擎结合，您可以轻松实现页面渲染与数据展示。Express.js提供了强大的路由和中间件系统，而EJS则允许您在HTML模板中嵌入动态内容。这种组合使得构建现代Web应用变得既快速又灵活。希望本文能帮助您开始使用Express.js和EJS，祝您编码愉快！

-- 展开阅读全文 --