正文

“轻松上手Express.js：学会如何高效渲染动态列表页面”

/0 浏览量
0411

Express.js 是一个流行的 Node.js 框架，它使得创建 Web 应用程序变得简单快捷。在这个教程中，我们将一起探索如何使用 Express.js 来高效渲染动态列表页面。无论是初学者还是有一定经验的开发者，这篇文章都将帮助你掌握这一技能。

环境准备

在开始之前，请确保你的计算机上已经安装了 Node.js 和 npm（Node.js 的包管理器）。你可以通过访问 Node.js 官网 来下载和安装它们。

创建项目

  1. 打开终端或命令提示符。
  2. 创建一个新的目录，例如 express-dynamic-list。
  3. 切换到该目录。
  4. 初始化一个新的 Node.js 项目，运行 npm init -y。
  5. 安装 Express.js，运行 npm install express。

设置基本路由

首先，我们需要创建一个基本的 Express 应用程序。在项目根目录下创建一个名为 app.js 的文件，并添加以下代码：

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

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

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

运行 node app.js，你应该能看到终端输出服务器正在运行的信息。

模拟数据

为了渲染动态列表页面，我们需要一些数据。在这个例子中，我们将使用一个简单的数组来模拟数据。

在项目根目录下创建一个名为 data.js 的文件，并添加以下代码：

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

module.exports = items;

渲染动态列表

现在，我们将创建一个路由来渲染动态列表页面。在 app.js 文件中，添加以下代码：

const express = require('express');
const app = express();
const port = 3000;
const items = require('./data');

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.get('/items', (req, res) => {
  res.render('items', { items });
});

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

接下来，我们需要创建一个名为 items.ejs 的模板文件，它将用于渲染动态列表。在项目根目录下创建一个名为 views 的文件夹，并在其中创建一个名为 items.ejs 的文件，并添加以下代码：

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

使用 EJS 模板引擎

在上面的代码中，我们使用了 EJS 作为模板引擎。要使用 EJS，我们需要安装它。在终端中运行以下命令：

npm install ejs

现在，我们可以在 app.js 文件中配置 EJS：

const express = require('express');
const app = express();
const port = 3000;
const items = require('./data');

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

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.get('/items', (req, res) => {
  res.render('items', { items });
});

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

运行应用程序

现在，你可以运行你的应用程序了。在终端中运行以下命令：

node app.js

打开浏览器并访问 http://localhost:3000/items，你应该能看到一个包含动态列表的页面。

总结

在这个教程中，我们学习了如何使用 Express.js 和 EJS 模板引擎来创建一个简单的动态列表页面。通过模拟数据并使用 EJS 模板，我们可以轻松地渲染包含动态内容的数据列表。希望这个教程能帮助你轻松上手 Express.js！

-- 展开阅读全文 --