教程标签: Express.js教程

👏🏻 你好！欢迎访问IT教程网，0门教程，教程全部原创，计算机教程大全，全免费！

2024-08-15发表2024-08-16更新编程 / Express.js教程5 分钟读完 (大约776个字)

25 使用EJS模板引擎

在本章中，我们将学习如何在Express.js应用中使用EJS（嵌入式JavaScript）作为模板引擎。EJS是一种简单易用的模板引擎，使我们能够生成动态HTML页面。

1. EJS简介

EJS允许我们在HTML中嵌入JavaScript代码。我们可以在页面中动态插入数据，控制内容的显示和样式等。这对于构建动态Web应用程序非常非常重要。

EJS的基本语法如下：

<%- variable %>：输出未经转义的内容。
<%= variable %>：输出经过HTML转义的内容。
<% code %>：执行JavaScript代码，但不输出内容。
<% if (condition) { %> ... <% } %>：条件语句。

2. 安装EJS

要在你的Express应用程序中安装EJS，你需要使用npm命令：

1	npm install ejs

安装完成后，我们需要在Express中进行一些配置，以使用EJS作为模板引擎。

3. 配置Express使用EJS

在你的app.js或主应用文件中，添加以下代码来设置EJS为视图引擎：

const express = require('express');
const app = express();
const path = require('path');

// 设置EJS为模板引擎
app.set('view engine', 'ejs');

// 设置视图文件目录
app.set('views', path.join(__dirname, 'views'));

// 其他中间件和路由

在这个配置中，我们设置了视图引擎为ejs，并指定了视图文件的存放目录为views。现在，我们就可以在这个目录下创建EJS模板文件。

4. 创建EJS模板文件

接下来，在views目录下创建一个名为index.ejs的文件，内容可以如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用EJS模板引擎</title>
</head>
<body>
    <h1>欢迎来到EJS模板引擎的世界!</h1>
    <p>当前时间: <%= new Date() %></p>
    <ul>
        <% for(let item of items) { %>
            <li><%= item %></li>
        <% } %>
    </ul>
</body>
</html>

在这个EJS模板中，我们使用了<%= new Date() %>来展示当前时间，并使用了一个循环来显示一个items数组的内容。

5. 渲染EJS模板

在Express的路由中，我们可以渲染这个EJS模板并传递数据。

app.get('/', (req, res) => {
    const items = ['苹果', '香蕉', '橘子'];
    res.render('index', { items });
});

在这个路由中，我们定义了一个数组items，它包含了一些水果的名称。我们将这个数组作为数据传递给index.ejs模板。

6. 运行应用

确保一切设置正确，然后运行你的应用：

1	node app.js

访问 http://localhost:3000，你将看到渲染的EJS模板，显示了欢迎信息和当前时间，以及水果列表。

7. 总结

在本章中，我们学习了如何：

使用 npm 安装EJS。
配置Express使用EJS作为模板引擎。
创建一个基本的EJS模板。
渲染EJS模板并传递数据。

通过使用EJS，我们可以轻松创建动态的HTML页面，为我们的应用增添活力。在下一章中，我们将深入讨论如何渲染更加复杂的模板，继续探讨EJS的强大功能。

分享转发

2024-08-15发表2024-08-16更新编程 / Express.js教程5 分钟读完 (大约708个字)

26 渲染模板

在本章中，我们将深入探讨如何使用 Express.js 渲染 EJS 模板。渲染模板是 Web 应用程序中最重要的功能之一，它允许我们在服务器端生成动态 HTML 内容。

渲染 EJS 模板

首先，我们需要在 Express.js 中设置 EJS 作为我们的视图引擎。在上一篇中，我们已经介绍了如何使用 EJS 模板引擎，接下来我们将使用 res.render() 方法来渲染模板。

1. 设置视图引擎

确保在你的 Express 应用中已经设置了 EJS 作为视图引擎，如下所示：

const express = require('express');
const app = express();
const path = require('path');

// 设置视图目录
app.set('views', path.join(__dirname, 'views'));

// 设置 EJS 作为模板引擎
app.set('view engine', 'ejs');

2. 创建 EJS 模板

假设我们在 views 目录下创建了一个名为 index.ejs 的文件，内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎页面</title>
</head>
<body>
    <h1>欢迎, <%= name %>!</h1>
    <p>当前时间：<%= currentTime %></p>
</body>
</html>

在这个模板中，我们使用了 <%= %> 语法来输出变量。

3. 渲染模板

接下来，我们将设置一个路由来渲染这个模板。我们将向模板传递一些数据，比如用户的名字和当前时间。

app.get('/', (req, res) => {
    // 要传递给模板的数据
    const data = {
        name: '张三',
        currentTime: new Date().toLocaleString()
    };

    // 渲染 template，并传递 data
    res.render('index', data);
});

在这里，我们定义了一个根路由，处理对主页的请求。我们创建了一个包含用户名称和当前时间的 data 对象，并将其传递给 res.render() 方法。

4. 启动服务器

最后，我们需要启动 Express 服务器，使其能够处理请求：

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
    console.log(`服务器正在运行，访问 http://localhost:${PORT}`);
});

完整代码如下：

const express = require('express');
const app = express();
const path = require('path');

// 设置视图目录
app.set('views', path.join(__dirname, 'views'));

// 设置 EJS 作为模板引擎
app.set('view engine', 'ejs');

// 渲染模板的路由
app.get('/', (req, res) => {
    const data = {
        name: '张三',
        currentTime: new Date().toLocaleString()
    };

    res.render('index', data);
});

// 启动服务器
const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
    console.log(`服务器正在运行，访问 http://localhost:${PORT}`);
});

5. 访问渲染结果

现在启动你的服务器并访问 http://localhost:3000，你将会看到渲染后的 HTML 页面，其中将包含传递给模板的名称和当前时间。

总结

在本节中，我们学习了如何使用 Express.js 渲染 EJS 模板。通过 res.render() 方法，我们能够向模板传递动态数据，使得我们的网站能够生成个性化的内容。在下一节中，我们将讨论如何在渲染模板时传递多个变量。

分享转发

2024-08-15发表2024-08-16更新编程 / Express.js教程6 分钟读完 (大约854个字)

27 模板引擎之传递变量的内容

在前面一节中，我们探讨了如何使用 Express.js 渲染模板。了解了如何通过响应对象将数据连接到模板并展示它们。现在这一节中，我们将深入讨论如何在渲染模板时传递变量。

传递变量的基本概念

在使用模板引擎渲染页面时，通常需要将数据传递到模板中，以便在页面上动态生成内容。在 Express.js 中，您可以通过 res.render() 方法轻松实现这一点，该方法的第一个参数为模板名称，第二个参数则为要传递到模板的变量对象。

例子：基础变量传递

让我们从一个基本的案例开始，演示如何传递变量。假设我们有一个名为 index.ejs 的模板文件，其内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1><%= greeting %></h1>
    <p>当前时间是：<%= currentTime %></p>
</body>
</html>

然后可以在我们的 Express 应用中这样设置路由：

const express = require('express');
const app = express();
const path = require('path');

// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views')); // 假设 views 目录与根目录同级

app.get('/', (req, res) => {
    const currentTime = new Date().toLocaleString();
    res.render('index', {
        title: '欢迎来到首页',
        greeting: '你好，世界！',
        currentTime: currentTime
    });
});

app.listen(3000, () => {
    console.log('服务器已启动，访问 http://localhost:3000');
});

在这个例子中，我们创建了一个简单的 Express 应用程序，并在根路由中调用 res.render() 方法，将 title、greeting 和 currentTime 变量传递给 index.ejs 模板。模板中的 <%= %> 语法用来插入变量值。

传递复杂的数据结构

除了基本数据类型，我们还可以向模板传递复杂的对象或数组。这在需要动态展示多个内容时尤其有用。

例子：传递对象和数组

假设我们想在模板中显示一份用户的详细信息，以及他们的爱好列表。在 index.ejs 中，模版可能看起来如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= user.name %>'s Profile</title>
</head>
<body>
    <h1>用户姓名: <%= user.name %></h1>
    <p>年龄: <%= user.age %></p>
    
    <h2>爱好</h2>
    <ul>
        <% user.hobbies.forEach(function(hobby) { %>
            <li><%= hobby %></li>
        <% }) %>
    </ul>
</body>
</html>

在路由中，我们可以这样设置：

app.get('/user', (req, res) => {
    const user = {
        name: '张三',
        age: 28,
        hobbies: ['阅读', '旅行', '摄影']
    };
    
    res.render('index', { user: user });
});

此时，当您访问 /user 路由时，将渲染一个显示用户信息和爱好的页面。

使用局部变量

在使用模板时，您还可以将不同的局部变量传递到模板，以进一步组织代码。例如：

app.get('/hello', (req, res) => {
    const name = 'Alice';
    res.render('hello', { name: name });
});

在 hello.ejs 中，您可以这样使用：

1	<h1>你好，<%= name %>!</h1>

总结

通过本节的学习，我们了解到如何在使用 Express.js 渲染模板时传递各种变量，包括简单类型、对象和数组。有效的使用变量能够极大增强模板的动态性和可读性。在实际开发中，这种方法使得我们能够创建出交互性更强、内容更加丰富的 Web 应用。

在下一章中，我们将继续讨论如何将 Node.js 应用部署到生产环境，包括如何优化应用性能和安全性。请继续关注！

分享转发

2024-08-15发表2024-08-16更新编程 / Express.js教程7 分钟读完 (大约1013个字)

28 部署Node.js应用

在上一章中，我们学习了如何使用模板引擎向前端传递数据。现在，我们即将进入一个非常重要的阶段：将我们的应用部署到生产环境。这一过程不仅仅是将代码放到服务器上那么简单，还涉及到配置、优化和安全等多个方面。

了解Node.js应用的部署

部署是应用开发过程中至关重要的一步。虽然在本地开发环境中可以进行调试和试验，但在生产环境中，我们需要确保应用具备高可用性和性能。Node.js应用通常有几个主要的部署策略，比如使用传统的虚拟主机、云服务（例如AWS、Azure、Heroku等）以及容器化（Docker等）。

环境准备

在开始部署之前，你需要确保:

选择合适的服务器（如AWS EC2、DigitalOcean等）
安装Node.js和npm
配置数据库（如MongoDB、MySQL等）

下面是一个简单的例子，展示如何在一个Ubuntu服务器上安装Node.js：

# 更新包列表
sudo apt update

# 安装Node.js
sudo apt install nodejs

# 安装npm
sudo apt install npm

使用PM2管理Node.js应用

在生产环境中，我们不仅需要启动我们的应用，还需要确保应用能在崩溃后自动重启。PM2是一个非常流行的Node.js进程管理工具，可以帮助我们管理应用生命周期。

安装PM2

你可以使用npm来安装PM2：

1	npm install pm2 -g

启动应用

假设你的应用入口文件是 app.js，可以使用以下命令启动应用：

1	pm2 start app.js --name myapp

你可以使用以下命令查看正在运行的应用：

pm2 list

如果需要重启应用，可以使用：

1	pm2 restart myapp

设置开机自启动

为了确保服务器重启后应用能够自动启动，使用以下命令生成启动脚本：

1	pm2 startup

这将提示你复制一条命令到终端中执行。执行后，使用以下命令保存当前的进程列表：

pm2 save

Nginx作为反向代理

在生产环境中，通常会使用 Nginx 作为反向代理服务器。Nginx可以处理静态文件、负载均衡和 SSL 终端等。

安装Nginx

1	sudo apt install nginx

配置Nginx

编辑 Nginx 配置文件：

1	sudo nano /etc/nginx/sites-available/myapp

可以使用如下配置作为起点：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://localhost:3000;  # Node.js应用运行的端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

完成后，启用配置并重启Nginx：

1
2
3

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
sudo nginx -t  # 检查配置是否正确
sudo systemctl restart nginx

安全配置

在将应用部署到生产环境后，确保你的应用是安全的：

使用HTTPS：通过Let’s Encrypt等工具获取SSL证书。
环境变量：不要在代码中硬编码敏感信息，使用环境变量存储敏感数据。
限制CORS：为API设置合适的CORS策略，确保只允许特定的域访问。

小结

在本章中，我们学习了如何将Node.js应用部署到生产环境，包括环境准备、使用PM2管理进程、通过Nginx提供反向代理服务以及一些安全配置。这些步骤为我们应用的上线做好了充分的准备。

在接下来的章节，我们将探讨如何对Node.js应用进行性能优化，以应对高并发的请求。

接下来是性能优化技巧，准备好提升你的应用性能吧！

分享转发

2024-08-15发表2024-08-16更新编程 / Express.js教程7 分钟读完 (大约1062个字)

29 性能优化技巧

在上节中，我们探讨了如何将 Node.js 应用部署到生产环境中。部署只是保证应用可用的第一步，接下来的重要任务是如何优化性能，以保证应用在高负载情况下依然稳定高效。在本节中，我们将介绍一些有效的性能优化技巧，帮助你在 Express.js 应用中提升性能。

1. 使用压缩中间件

对于 Web 应用，传输的数据量直接影响到加载时间。使用压缩中间件可以显著减少传输数据的大小，从而加快响应时间。compression 是一个常用的中间件，可以通过以下方式轻松集成到你的 Express.js 应用中。

const compression = require('compression');
const express = require('express');
const app = express();

// 使用压缩中间件
app.use(compression());

// 其他中间件和路由
app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

通过使用 compression 中间件，服务的响应会在发送之前被压缩，这可以帮助提高加载速度，尤其是在移动设备上。

2. 使用缓存

缓存是提升性能的另一个关键策略。Express.js 本身不会自动进行缓存，但你可以使用中间件或者手动实现缓存。apicache 是一个常用的缓存中间件，下面是它的基本用法：

const apicache = require('apicache');
const cache = apicache.middleware;

app.get('/data', cache('5 minutes'), (req, res) => {
  const data = /* 从数据库或其他来源获取的数据 */;
  res.json(data);
});

在上面的代码中，当请求 /data 路径时，返回的结果将在 5 分钟内被缓存。下次请求此路径时，直接返回缓存的结果，而不会执行数据获取逻辑，可以显著减少后端负载和响应时间。

3. 使用异步操作

Node.js 和 Express.js 本身是基于非阻塞 I/O 设计的，充分利用这个特点，使用异步操作可以帮助提高应用性能。例如：

app.get('/user/:id', async (req, res) => {
  try {
    const user = await getUserFromDatabase(req.params.id); // 异步获取用户
    res.json(user);
  } catch (error) {
    res.status(500).send('Server Error');
  }
});

确保使用 async/await 或 Promises，能够减少 I/O 操作的阻塞，从而提高应用处理请求的能力。

4. 连接数据库池

在处理多个请求时，每个请求都建立一个新的数据库连接会消耗大量资源。通过使用数据库连接池，可以重用连接，从而提高性能。例如，使用 mysql 库建立连接池：

const mysql = require('mysql');
const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'localhost',
  user: 'user',
  password: 'password',
  database: 'database'
});

app.get('/users', (req, res) => {
  pool.query('SELECT * FROM users', (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});

通过连接池，应用可以在需要时快速获取可用连接，而不必每次都建立新的连接，极大提高了数据库操作的性能。

5. 监控和分析

最后，持续监控和性能分析是保证长期性能优化的关键。使用诸如 New Relic、PM2 或 Grafana 等工具来监控应用的 CPU 和内存使用情况，以及响应时间等性能指标，可以帮助你发现瓶颈并进行进一步的优化。以下是一个使用 PM2 进行应用监控的示例：

1 2	pm2 start app.js --name "my-app" --watch pm2 monit

使用 pm2 monit 命令可以实时监控应用性能，及时发现问题并做出调整。

结论

在 Express.js 应用的部署和优化过程中，性能优化是至关重要的步骤。通过使用压缩、缓存、异步操作、数据库连接池和监控工具等技巧，可以显著提升你的应用性能。这些最佳实践将帮助你在高负载情况下，保持应用的稳定性和高效性。

接下来，我们将探讨一些 常见问题及解决方案，以帮助你处理在开发和部署过程中可能遇到的挑战。

分享转发

2024-08-15发表2024-08-16更新编程 / Express.js教程7 分钟读完 (大约1022个字)

30 部署和优化之常见问题及解决方案

在进行 Express.js 应用程序的部署和优化过程中，开发人员可能会遇到各种问题。为了帮助您快速查找和解决这些问题，本节将总结一些常见的问题及其解决方案，确保您的应用程序能够顺利运行并具备良好的性能。

1. 应用程序启动失败

问题描述

在尝试启动 Express 应用时，控制台抛出错误信息。这可能是由于未安装依赖、环境变量配置错误或其他原因。

解决方案

检查依赖：确保您已运行 npm install 以安装所有必要的依赖。如果有更新的依赖，您也可以使用 npm update。
环境变量：确保所有必需的环境变量都已正确设置，特别是数据库连接字符串和端口号。
1
2
export DATABASE_URL="your_database_url"
export PORT=3000
查看错误日志：认真查看错误日志以获取有关错误的更多信息，尤其是堆栈跟踪部分。

2. 连接数据库失败

问题描述

在应用启动或运行时，连接数据库的无法建立，通常会显现为 ECONNREFUSED 或超时错误。

解决方案

确保数据库正在运行：检查数据库服务是否正在运行。例如，如果使用 MongoDB，可以使用以下命令：
1
sudo systemctl status mongod

配置连接字符串：确保您使用的连接字符串是正确的，包括用户名、密码和数据库名。例如：

1 2	const mongoose = require('mongoose'); mongoose.connect(process.env.DATABASE_URL, { useNewUrlParser: true, useUnifiedTopology: true });

网络问题：如果数据库和应用在不同的主机上，请确保网络访问是打开且允许的。

3. 性能下降

问题描述

在高流量时段，应用程序响应时间增长显著。

解决方案

使用缓存：通过实现缓存策略（例如 Redis）来减少数据库查询次数。

const redis = require('redis');
const client = redis.createClient();

app.get('/data', (req, res) => {
    client.get('someKey', (err, result) => {
        if (result) {
            res.send(result);
        } else {
            // 查询数据库
            db.query('SELECT ...', (dbErr, data) => {
                client.setex('someKey', 3600, JSON.stringify(data)); // 缓存 1 小时
                res.send(data);
            });
        }
    });
});

使用负载均衡：通过多个实例部署应用程序，并使用负载均衡器（如 Nginx）来分发流量。

upstream express_app {
    server app_instance1:3000;
    server app_instance2:3000;
}

server {
    listen 80;
    location / {
        proxy_pass http://express_app;
    }
}

4. 跨域请求问题

问题描述

当前端与后端分离，且前端请求后端 API 时会出现跨域问题，浏览器控制台报错。

解决方案

使用 CORS 中间件：通过安装并配置 cors 中间件，可以简化跨域资源共享的处理。

1	npm install cors

const cors = require('cors');
app.use(cors({
    origin: 'http://your-frontend-domain.com',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    credentials: true
}));

5. 应用程序崩溃

问题描述

在某些情况下，Express 应用程序会意外崩溃，导致服务中断。

解决方案

使用进程管理工具：使用 PM2 或 forever 来管理 Node.js 进程，这样即使应用崩溃，也能自动重启。
1
2
npm install pm2 -g
pm2 start app.js --name "my-express-app"

捕获未处理的错误：在应用中捕获未处理的 Promise 拒绝和异常，以避免因未处理异常导致的进程崩溃。

process.on('uncaughtException', function (err) {
    console.error('There was an uncaught error', err);
    // 进行必要的清理工作，例如关闭数据库连接
    process.exit(1); // 强制退出
});

process.on('unhandledRejection', (reason, promise) => {
    console.error('Unhandled Rejection at:', promise, 'reason:', reason);
});

小结

在部署和优化 Express.js 应用程序时，20+在问题解决过程中保持清晰的思路至关重要。这里总结的常见问题及其解决方案，希望能为您提供帮助。接下来，我们将讨论如何进行高可用性部署，确保应用长期稳定运行。

🔥 新增教程

1. EJS简介

2. 安装EJS

3. 配置Express使用EJS

4. 创建EJS模板文件

5. 渲染EJS模板

6. 运行应用

7. 总结

分享转发

渲染 EJS 模板

1. 设置视图引擎

2. 创建 EJS 模板

3. 渲染模板

4. 启动服务器

5. 访问渲染结果

总结

分享转发

传递变量的基本概念

例子：基础变量传递

传递复杂的数据结构

例子：传递对象和数组

使用局部变量

总结

分享转发

了解Node.js应用的部署

环境准备

使用PM2管理Node.js应用

安装PM2

启动应用

设置开机自启动

Nginx作为反向代理

安装Nginx

配置Nginx

安全配置

小结

分享转发

1. 使用压缩中间件

2. 使用缓存

3. 使用异步操作

4. 连接数据库池

5. 监控和分析

结论

分享转发

1. 应用程序启动失败

问题描述

解决方案

2. 连接数据库失败

问题描述

解决方案

3. 性能下降

问题描述

解决方案

4. 跨域请求问题

问题描述

解决方案

5. 应用程序崩溃

问题描述

解决方案

小结

分享转发