Node.js构建动态天气查询网站实战教程

本文还有配套的精品资源，点击获取

简介：本项目展示了如何使用Node.js开发一个能够动态展示全球天气信息的简易网站。通过JavaScript的异步I/O能力，用户能够输入城市名查询实时天气，服务于日常生活或旅行规划。项目包括了Express框架的使用、API集成、模板引擎应用、异步编程、前端交互以及错误处理等技术要点。

1. Node.js基础与非阻塞I/O模型

Node.js的出现，标志着服务器端JavaScript应用开发的新纪元。它的非阻塞I/O模型是区别于传统服务器模型的重要特点，它允许Node.js在处理大量并发请求时，不会因为等待某些I/O操作而阻塞整个进程。这种模型尤其适用于I/O密集型应用，比如实时通信系统、数据流服务等。

在探讨Node.js的非阻塞I/O模型前，我们先了解其核心概念。Node.js使用了Google Chrome的V8 JavaScript引擎，该引擎性能卓越，处理JavaScript代码非常高效。此外，Node.js的事件循环机制是其非阻塞模型的关键所在。当一个Node.js进程执行时，它会进入一个事件循环，依次处理每一个事件（I/O事件、定时器事件等）。Node.js中的函数在完成I/O操作后，会将结果传递给回调函数，而不需要等待I/O操作的完成。

这种事件驱动的设计允许Node.js在单个线程上高效地处理并发请求，尽管Node.js目前也支持多线程，但其核心设计哲学仍然保持在单线程事件循环上。这一设计使得Node.js在处理大量小的I/O密集型任务时性能优秀，因为I/O操作的延迟并不会影响到其他请求的处理。

总的来说，Node.js通过非阻塞I/O模型和事件循环机制，提供了一种处理服务器端请求的高效方式，尤其适用于需要处理大量并发连接的应用场景。随着学习的深入，我们会逐渐了解如何利用Node.js的这些特性构建高效的后端应用。

2. Express.js框架应用

2.1 Express.js基础

2.1.1 安装与初识

Express.js 可以说是 Node.js 开发者的瑞士军刀，它让创建 web 应用变得更加简单快捷。要在 Node.js 环境中安装 Express.js，首先要确保已安装 Node.js 和 npm（Node.js 的包管理器）。安装 Express 的最常见方式是使用 npm 命令：

npm install express --save

执行以上命令后，Express.js 会被安装在本地 node_modules 目录下，并且 package.json 文件会自动添加 Express.js 到依赖项中。接下来，创建一个简单的 Express 应用：

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

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

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

代码解释： - require('express') : 引入 Express 模块。 - const app = express() : 创建一个新的 Express 应用实例。 - app.get('/') : 设置一个路由处理器，当用户访问根目录时触发。 - res.send('Hello World!') : 发送响应给客户端。 - app.listen(port, callback) : 监听指定的端口。

以上代码创建了一个基本的服务器，当访问 http://localhost:3000 时，会看到 "Hello World!" 的响应。

2.1.2 静态文件服务与中间件

静态文件服务是 Express.js 基础应用中不可或缺的部分。通过 Express 内置的 express.static 中间件，可以方便地将文件目录作为静态资源供外界访问。

// 引用 express 和 path 模块
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

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

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

如果有一个名为 "public" 的文件夹，里面存放有图片、JavaScript 文件、CSS 文件等资源，使用 express.static 后，这些文件就能被浏览器直接访问了。

2.2 Express.js路由机制

2.2.1 基本路由的设置

路由是 Express 应用的核心，它告诉 Express 如何响应客户端的 HTTP 请求。基本的路由设置包括三种 HTTP 方法：GET, POST 和 DELETE。

// GET路由示例
app.get('/about', (req, res) => {
  res.send('About page');
});

// POST路由示例
app.post('/login', (req, res) => {
  res.send('Login page');
});

// DELETE路由示例
app.delete('/user/:id', (req, res) => {
  res.send('User deleted');
});

2.3 Express.js应用的进阶技巧

2.3.1 视图和模板引擎集成

在 Express 应用中，为了更高效地渲染视图，集成模板引擎是一个很好的选择。例如，EJS 是一个流行的模板引擎，它允许在 HTML 中嵌入 JavaScript 代码。

首先，需要安装 EJS 模板引擎：

npm install ejs --save

然后在 Express 应用中配置 EJS：

const express = require('express');
const app = express();
const path = require('path');
const viewsDir = path.join(__dirname, 'views');

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

app.get('/', (req, res) => {
  res.render('index', { title: 'Home Page', message: 'Welcome to our website!' });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000/');
});

这里 index 是 EJS 模板文件的名称，存储在 views 目录下， title 和 message 是传递给模板的变量。

2.3.2 错误处理与调试技巧

在开发过程中，错误处理至关重要。Express 提供了中间件来统一处理错误：

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

调试技巧包括使用 console.log 输出调试信息，使用断点和 Node.js 的 Inspector 工具进行调试。

以上就是 Express.js 框架的基础应用章节。在下一节，我们将深入探讨 Express.js 的路由处理机制，如何设置动态路由以及路由参数的处理。

3. 路由处理机制

路由处理机制是Web应用的心脏，它负责处理不同类型的HTTP请求，并将它们分发到对应的处理程序中。在Express.js框架中，路由的定义和管理是高效且灵活的，使得开发者能够构建出清晰和易于维护的应用结构。本章将深入探讨Express.js的路由机制，包括路由的匹配规则、路由参数的使用以及中间件在路由中的应用。

3.1 路由匹配规则

路由匹配规则决定了客户端的请求如何被识别并分发到特定的处理器。在Express.js中，一个路由由一个HTTP方法、一个URL路径和一个或多个处理函数组成。

3.1.1 基本路由定义

在Express.js中，定义基本路由非常简单。以下是一个基本的路由定义示例：

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

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

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

在这个示例中，当客户端向服务器发送一个GET请求到根路径（ / ）时，服务器将响应"Hello World!"。 app.get 方法定义了一个处理HTTP GET请求的路由。

3.1.2 路由参数

在许多情况下，路由需要能够处理动态内容，例如用户ID或产品名称。Express.js允许在路由路径中使用参数来捕获这些动态部分。参数通过冒号（:）表示，后跟参数名称。

app.get('/users/:userId', (req, res) => {
  const userId = req.params.userId;
  res.send(`User ID: ${userId}`);
});

在这个示例中，任何发往 /users/:userId 的请求都会被匹配，并且 userId 参数可以从 req.params 对象中获取。

3.2 动态路由与通配符

除了参数外，路由还可以包含通配符，这使得一个路由能够匹配一组路径。

3.2.1 通配符的使用

在Express.js中，可以使用通配符 * 来匹配任意数量的字符，这在需要捕获路径的末尾部分时非常有用。

app.get('/images/*', (req, res) => {
  const path = req.path;
  res.send(`Path: ${path}`);
});

这个路由会匹配所有以 /images/ 开头的路径，并将整个路径传递给处理函数。

3.2.2 正则表达式路由

Express.js还允许使用正则表达式来定义路由，这为路由匹配提供了更强大的灵活性。

app.get(/^\/book\/\d+$/, (req, res) => {
  res.send('Book route matched!');
});

上述示例使用正则表达式匹配以 /book/ 开头，后跟一个或多个数字的路径。

3.3 中间件在路由中的应用

中间件是Express.js的核心概念之一。它们是在请求-响应循环中的函数，可以在路由处理器之前执行各种任务。

3.3.1 中间件示例

const loggerMiddleware = (req, res, next) => {
  console.log(`Request: ${req.method} ${req.url}`);
  next(); // 必须调用next()，否则请求将被挂起
};

app.use(loggerMiddleware);

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

在这个示例中，定义了一个日志中间件 loggerMiddleware ，它在请求到达任何路由处理器之前记录请求信息。使用 app.use() 将中间件应用到所有路由上。

3.3.2 中间件的应用

中间件可以在路由级别应用，也可以在全局级别应用。在路由级别应用中间件意味着中间件只会应用于特定的路由。

app.get('/', loggerMiddleware, (req, res) => {
  res.send('Hello from the middleware-enabled route!');
});

这个路由只会应用 loggerMiddleware 中间件，因为中间件是在路由定义中指定的。

3.4 高级路由模式

为了实现更复杂的路由匹配和处理逻辑，Express.js提供了多种方法，包括但不限于路由的前缀、命名路由和路由的重定向。

3.4.1 路由前缀

在实际开发中，可能需要对某一类路由应用相同的中间件。Express.js允许为路由组设置前缀。

const adminRouter = express.Router();

adminRouter.use(loggerMiddleware);

adminRouter.get('/', (req, res) => {
  res.send('Admin dashboard');
});

app.use('/admin', adminRouter);

在这个示例中，所有以 /admin 为前缀的路由都将通过 loggerMiddleware 中间件。

3.4.2 命名路由

命名路由允许我们为路由设置一个名字，这在需要生成具有路由的URL时非常有用。

app.get('/users/:userId', (req, res) => {
  res.send(`User ID: ${req.params.userId}`);
});

const userUrl = app.urlFor('getUsers', { userId: '123' });

这里使用 app.urlFor() 方法生成了一个命名路由 getUsers 的URL。

3.5 路由的重定向

有时，可能需要将用户从一个路由重定向到另一个路由。Express.js提供了 res.redirect() 方法来处理这种情况。

app.get('/old-path', (req, res) => {
  res.redirect('/new-path');
});

app.get('/new-path', (req, res) => {
  res.send('New path');
});

以上代码展示了如何将访问 /old-path 的用户重定向到 /new-path 。

3.6 路由的错误处理

在开发过程中，错误处理是一个非常关键的部分。Express.js允许我们为应用定义错误处理中间件，它们专门用来处理错误情况。

3.6.1 错误处理中间件

错误处理中间件与其他中间件类似，但具有四个参数：错误对象、请求对象、响应对象和next函数。这是因为错误处理中间件专门用来处理错误。

app.get('/error', (req, res, next) => {
  const err = new Error('Some error occurred!');
  next(err); // 调用next()并传递错误对象，触发错误处理中间件
});

app.use((err, req, res, next) => {
  res.status(500).send('Error occurred: ' + err.message);
});

这个示例定义了一个路由，当请求到达时会抛出一个错误，并通过调用 next(err) 传递给错误处理中间件，最后返回错误信息。

3.6.2 维护状态的错误处理

错误处理中间件可以用来维护应用的状态，通过响应体、响应头、响应状态码等方式通知客户端错误信息。

app.get('/error-state', (req, res, next) => {
  res.status(404).json({ error: 'Page not found' });
});

这个示例在遇到错误时向客户端返回一个JSON格式的错误信息，并设置了一个适当的HTTP状态码。

通过以上内容的探讨，我们了解了Express.js路由处理机制的深度和广度。从基本的路由定义到参数捕获，再到中间件的应用以及错误处理的策略，每个环节都是构建一个健壮Web应用不可或缺的部分。在后续章节中，我们将继续深入探讨Express.js的其他高级特性，包括集成模板引擎、利用中间件进行请求管理以及异步编程实践等，以帮助开发者们构建出更加高效、可维护的Web应用。

4. 第三方天气API集成

4.1 探索第三方天气API

为了在Web应用中提供实时的天气信息，集成第三方天气API是一种高效且常用的方法。通过这样的API，我们可以快速地获取全球各地的天气数据，包括温度、湿度、风速、天气状况等。这些数据可以用于多种场景，如旅行规划、户外活动建议，甚至是日常天气更新。在本章节中，我们将深入探讨如何使用Node.js集成第三方天气API，以及如何处理和展示这些数据。

4.1.1 API选择

集成第三方天气API的第一步是选择合适的API服务提供者。目前，市面上有很多提供天气信息的API服务，如OpenWeatherMap、Weatherstack、AccuWeather等。每一个API服务都有其独特之处，比如数据的详细程度、响应时间、限制等。在选择API时，需要考虑以下几点：

• 数据准确性 ：确保API提供的数据准确可靠。
• 更新频率 ：选择一个可以提供实时或近实时更新的API。
• 文档完整性 ：详尽的API文档可以帮助我们更好地理解如何使用它。
• 调用限制 ：了解API的调用限制，包括频率和费用。
• 试用期和价格 ：评估是否提供免费试用期，以及长期使用的价格结构。

一旦选定API服务，可以前往其官方网站注册账户，并获取一个API密钥（API Key），这将用于后续的请求认证。

4.1.2 Node.js中API的调用

在Node.js中集成第三方天气API，通常使用 axios 或 request 库发起HTTP请求。在本小节中，我们将使用 axios 作为例子来展示如何通过API获取天气数据。

首先，安装 axios ：

npm install axios

然后创建一个函数来调用API，并处理响应：

const axios = require('axios');

async function fetchWeatherData(apiKey, city) {
    try {
        const response = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}`);
        return response.data;
    } catch (error) {
        console.error('Error fetching weather data:', error);
    }
}

4.1.3 错误处理与数据解析

获取到天气API的数据后，我们需要解析这些数据并处理可能出现的错误。考虑到API返回的可能是JSON格式的数据，Node.js原生的 JSON.parse() 方法可以用于解析JSON字符串。在上文的 fetchWeatherData 函数中，我们已经处理了网络请求的错误，但还需要对数据的结构进行检查。

// 在 fetchWeatherData 函数中，解析数据后进行检查
const weatherData = response.data; // 解析JSON响应体

// 检查天气数据是否有效
if (weatherData && weatherData.current) {
    console.log('Current weather conditions for', city, ':', weatherData.current);
} else {
    console.error('No valid weather data received');
}

4.2 数据处理与展示

4.2.1 数据展示

获取到天气数据之后，接下来需要考虑如何将这些数据显示在Web应用上。首先，我们可以在控制台打印出天气信息，但最终我们可能希望将数据展示在页面上。为了实现这一点，我们可以结合HTML模板引擎（如EJS或Pug）和Express.js视图系统。

假设我们使用EJS作为模板引擎，可以创建一个视图文件 weather.ejs ，并在其中添加以下代码：

<!-- weather.ejs 文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <title>Weather</title>
</head>
<body>
    <h1>Current weather conditions for <%= city %></h1>
    <p>Temperature: <%= weatherData.current.temp_c %>°C</p>
    <p>Condition: <%= weatherData.current.condition.text %></p>
    <!-- 添加更多天气信息展示 -->
</body>
</html>

然后在Express.js应用中设置路由和控制器来渲染这个视图：

app.get('/weather/:city', async (req, res) => {
    const apiKey = 'YOUR_API_KEY';
    const city = req.params.city;
    const weatherData = await fetchWeatherData(apiKey, city);

    if (weatherData) {
        res.render('weather', { city: city, weatherData: weatherData.current });
    } else {
        res.status(500).send('Error fetching weather data');
    }
});

4.2.2 响应式设计

在Web开发中，确保应用在不同设备上均能良好展示是非常重要的。响应式设计可以帮助我们在不同屏幕尺寸和设备上提供一致的用户体验。可以通过添加媒体查询（Media Queries）到CSS中，以实现响应式布局。例如：

/* 在样式表中添加媒体查询 */
@media only screen and (max-width: 600px) {
    /* 当屏幕尺寸小于600px时应用的样式 */
    body {
        background-color: #f3f3f3;
    }
}

4.3 完整示例

下面是一个集成第三方天气API并展示结果的完整示例。这个例子涵盖了一个基本的Node.js应用，它使用Express.js框架、EJS模板引擎以及第三方天气API。

// index.js
const express = require('express');
const axios = require('axios');
const path = require('path');
const app = express();

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

// 获取天气数据的函数
async function fetchWeatherData(apiKey, city) {
    try {
        const response = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}`);
        return response.data;
    } catch (error) {
        console.error('Error fetching weather data:', error);
    }
}

// 设置路由以获取并展示天气信息
app.get('/weather/:city', async (req, res) => {
    const apiKey = 'YOUR_API_KEY';
    const city = req.params.city;
    const weatherData = await fetchWeatherData(apiKey, city);

    if (weatherData) {
        res.render('weather', { city: city, weatherData: weatherData.current });
    } else {
        res.status(500).send('Error fetching weather data');
    }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

在 views/weather.ejs 模板中，我们已经展示了如何渲染天气信息。现在，您可以使用 npm start 命令启动应用，并通过浏览器访问 http://localhost:3000/weather/your-city-name 来查看不同城市的天气信息。

本章节展示了如何集成第三方天气API，调用API获取数据，处理响应以及在Web应用中展示这些数据。通过这种方式，您可以轻松地将天气信息集成到任何Web应用中，为用户提供实时且有价值的信息。

5. Express中间件应用

5.1 中间件的基本概念与作用

在Express框架中，中间件（Middleware）是一个重要的概念，它提供了一种方便的方式来处理服务器上的请求和响应。中间件函数可以访问请求对象（req）、响应对象（res）以及应用程序中处于请求-响应循环流程中的下一个中间件函数。中间件通常用于执行以下任务： - 执行任何代码。 - 修改请求和响应对象。 - 结束请求-响应循环。 - 调用下一个中间件函数。

中间件可以被定义为全局的，也可以绑定到特定的路径，还可以是错误处理中间件。全局中间件会对所有的请求生效，而局部中间件只对特定路径的请求生效。

5.2 中间件的类型与应用场景

Express中间件的类型多样，可以分为以下几类：

5.2.1 应用级中间件

应用级中间件绑定到整个应用上，处理所有的请求。例如，以下代码展示了如何定义一个应用级中间件来记录请求时间：

app.use((req, res, next) => {
  console.log('Time:', Date.now());
  next();
});

5.2.2 路由级中间件

路由级中间件与特定的路由相关联。如果要对特定路径的请求执行特定操作，可以使用路由级中间件。例如：

const adminRouter = express.Router();

adminRouter.use((req, res, next) => {
  if (req.session.user && req.session.user.role === 'admin') {
    next();
  } else {
    res.status(403).send('Access Denied');
  }
});

adminRouter.get('/dashboard', (req, res) => {
  res.send('Admin Dashboard');
});

5.2.3 错误处理中间件

错误处理中间件专门用于处理应用中出现的错误。它们有四个参数，分别是 err, req, res, 和 next。例如：

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

5.2.4 内置中间件与第三方中间件

Express自带一些内置中间件，如 express.static 用于提供静态文件服务。此外，还可以使用第三方中间件来扩展应用的功能，例如 body-parser 用于解析JSON格式的请求体。

5.3 自定义中间件的开发与应用

创建自定义中间件非常简单，通常是一个函数，它接收三个参数：req, res, 和 next。以下是一个简单的自定义日志中间件的示例：

const logger = (req, res, next) => {
  console.log(req.method + ' ' + req.url);
  next();
};

app.use(logger);

5.4 中间件的执行顺序与流程控制

中间件的执行顺序非常重要，通常是按照它们被添加到应用中的顺序执行的。理解这一流程对于设计应用的请求处理逻辑至关重要。

5.4.1 全局中间件与局部中间件的执行顺序

假设我们有以下路由配置：

app.use(logger); // 全局中间件
app.get('/users', [auth, getUser]); // 局部中间件

在这个例子中，每个到达 /users 的GET请求都会先通过 logger 中间件，然后是 auth 中间件，最后是 getUser 中间件。

5.4.2 错误处理中间件的特殊性

错误处理中间件的特殊性在于它们使用四个参数，必须在所有路由和其他中间件之后定义，以便它们可以捕获应用中的任何错误。

app.use((err, req, res, next) => {
  res.status(500).send('An error occurred: ' + err.message);
});

5.5 中间件的高级应用案例

中间件的高级应用包括请求过滤、会话管理、身份验证、日志记录等。下面是一个使用中间件来实现请求体解析的高级示例：

app.use(express.json()); // 解析JSON格式的请求体
app.use(express.urlencoded({ extended: true })); // 解析URL编码的请求体

在这个例子中， express.json() 和 express.urlencoded() 中间件都被用于解析请求体，为后续的路由处理提供便利。

通过本章节的介绍，您现在应该对Express中间件的工作原理和应用有了深刻的理解。您可以利用这些知识，根据具体需求设计和实现更加强大和灵活的Node.js Web应用。

6. 模板引擎使用

6.1 模板引擎基础

在Web开发中，模板引擎是一种技术，它允许开发者使用特定的模板语言编写模板，然后将数据填充到模板中生成HTML或其他格式的文档。模板引擎通常包含在Web应用框架中，比如Express.js，提供了从后端逻辑到前端显示的快速转换。

6.1.1 模板引擎的作用

模板引擎的目的在于提供一种分离数据逻辑和视图表示的方式。通过模板引擎，开发者可以定义HTML结构，并在其中嵌入控制逻辑（如循环、条件语句）以及数据绑定表达式。当有数据传入时，模板引擎将负责生成最终的HTML文件，确保每次数据变化时，前端页面能够及时更新。

6.1.2 常用的模板引擎

Express.js支持多种模板引擎，包括但不限于EJS、Pug（前身为Jade）、Mustache和Handlebars等。每种模板引擎都有其独特的语法和特性。选择哪一种模板引擎通常取决于个人喜好、项目需求和社区支持等因素。

6.1.3 如何选择合适的模板引擎

在选择模板引擎时，可以考虑以下因素： - 语法简洁性 ：语法越简单，学习曲线就越平缓。 - 社区和插件生态 ：一个活跃的社区和丰富的插件库可以让你在遇到问题时更容易找到解决方案。 - 性能 ：不同的模板引擎在处理和渲染模板时的性能存在差异。 - 安全性 ：防止诸如XSS攻击这类安全漏洞是选择模板引擎时必须考虑的。

6.1.4 模板引擎在Express.js中的使用

在Express.js应用中集成模板引擎通常涉及以下步骤： - 安装模板引擎包。 - 在Express应用中设置模板引擎。 - 在路由中使用模板引擎渲染视图。

接下来将分别针对EJS和Pug模板引擎展示具体的集成和使用示例。

6.2 EJS模板引擎使用

EJS是一个简洁、易于使用的模板语言，它允许开发者使用标准的JavaScript代码嵌入模板中。EJS模板使用 .ejs 作为文件扩展名。

6.2.1 安装与设置EJS

在项目目录下，首先需要安装EJS模块：

npm install ejs

然后，在Express应用中设置EJS为默认的模板引擎：

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

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

6.2.2 EJS模板语法

EJS使用 <% %> 来执行JavaScript代码， <%= %> 输出变量的值， <%- %> 输出未转义的值。EJS还支持条件语句和循环。

例如，创建一个名为 index.ejs 的模板文件：

<!DOCTYPE html>
<html>
<head>
    <title>Index Page</title>
</head>
<body>
    <h1>Hello, <%= user.name %>!</h1>
    <% if (user.admin) { %>
        <p>Welcome Admin!</p>
    <% } %>
    <ul>
        <% users.forEach(function(user) { %>
            <li><%= user.name %></li>
        <% }); %>
    </ul>
</body>
</html>

6.2.3 渲染EJS模板

在Express路由中，可以使用 res.render() 方法来渲染EJS模板并发送给客户端：

app.get('/', (req, res) => {
    const users = [
        { name: 'Alice' },
        { name: 'Bob' },
        { name: 'Charlie' }
    ];
    res.render('index', { user: { name: 'Doe' }, users });
});

6.3 Pug模板引擎使用

Pug（前身为Jade）使用一种更简洁的语法，它利用空格和缩进来表示结构，不使用大括号和分号。Pug模板使用 .pug 作为文件扩展名。

6.3.1 安装与设置Pug

安装Pug模板引擎：

npm install pug

然后，在Express应用中配置Pug：

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

app.set('view engine', 'pug'); // 设置Pug为默认模板引擎

6.3.2 Pug模板语法

Pug模板语法非常注重结构和缩进。例如，创建一个名为 index.pug 的模板文件：

doctype html
html
    head
        title= title
    body
        h1= message
        if user.admin
            p Welcome Admin!
        ul
            each user in users
                li= user.name

6.3.3 渲染Pug模板

使用Pug模板渲染页面和EJS类似：

app.get('/', (req, res) => {
    const users = [
        { name: 'Alice' },
        { name: 'Bob' },
        { name: 'Charlie' }
    ];
    res.render('index', { title: 'Index Page', message: 'Hello, World!', user: { admin: true }, users });
});

6.4 模板引擎进阶技巧

在实际的项目中，模板引擎可以被运用到更多高级场景中，例如布局（layout）和继承（inheritance）、局部视图（partial views）以及中间件的集成等。

6.4.1 布局和继承

模板引擎通常提供了一种机制，允许开发者定义布局模板，并在不同的页面中继承这些布局。这有助于维护网站的整体风格一致性。

在Pug中，可以通过 block 关键字定义布局块，然后在其他模板中覆盖这些块：

// layout.pug
doctype html
html
    head
        title= title
    body
        block content

// index.pug
extends layout.pug

block content
    h1= message

6.4.2 局部视图（Partials）

局部视图或称为片段（Partials）是模板引擎中的一项重要功能，它允许开发者定义可重用的模板片段，并在其他模板中引用它们。

在EJS中使用局部视图：

<%- include partials/header.ejs %>
<p>Main content of the page.</p>
<%- include partials/footer.ejs %>

6.4.3 模板引擎与中间件

模板引擎的处理过程也可以与中间件集成，例如在渲染模板之前执行某些中间件逻辑（如用户认证、日志记录等）。

app.use((req, res, next) => {
    // Perform some middleware logic
    next();
});

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

通过以上章节的讲解，相信读者已经掌握了如何在Express.js中使用模板引擎。不同的模板引擎为前端页面的渲染提供了灵活多样的选择，使开发人员可以针对不同的应用场景选择最合适的工具。在实际的开发实践中，合理地利用模板引擎可以极大提高Web应用的开发效率和维护性。

7. JavaScript异步编程实践

在处理Web应用中的大量并发I/O操作时，JavaScript异步编程技术是不可或缺的。Node.js的非阻塞I/O模型自然地与JavaScript的异步特性相契合。本章重点在于实践JavaScript的异步编程模式，确保您能够有效地运用Promises、async/await等技术来优化您的Web应用。

7.1 异步编程概述

异步编程允许程序在执行I/O操作（如文件读写、网络请求等）时不必阻塞主线程，从而可以处理其他任务。JavaScript的异步操作通常通过回调函数、Promises、以及async/await语法糖来实现。

7.1.1 回调函数

回调是异步编程的基础，但它的缺点在于难以管理，特别是当存在多个异步操作且需要层层嵌套时。

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.log(err);
    return;
  }
  // 文件读取成功，处理数据
  console.log(data);
  fs.writeFile('exampleOut.txt', data, (err) => {
    if (err) {
      console.log(err);
    }
  });
});

7.1.2 Promises

为了解决回调地狱问题，Promises提供了一种更清晰和可管理的异步编程方式。

const fsPromise = require('fs').promises;

fsPromise.readFile('example.txt', 'utf8')
  .then((data) => {
    console.log(data);
    return fsPromise.writeFile('exampleOut.txt', data);
  })
  .then(() => {
    console.log('文件处理完成');
  })
  .catch((err) => {
    console.log(err);
  });

7.1.3 async/await

async/await是建立在Promises之上的语法糖，它使异步代码的书写和理解更接近于同步代码。

const fs = require('fs').promises;

async function processFile() {
  try {
    const data = await fs.readFile('example.txt', 'utf8');
    console.log(data);
    await fs.writeFile('exampleOut.txt', data);
    console.log('文件处理完成');
  } catch (err) {
    console.log(err);
  }
}

processFile();

7.2 异步编程实践

在实际开发中，我们经常需要处理多个异步操作，并确保它们的执行顺序或并行执行，以达到最优的性能。

7.2.1 异步操作的顺序执行

有时候，我们希望确保几个异步操作按照特定的顺序执行。我们可以使用Promise.allSettled()来管理这些操作。

async function processFiles() {
  const promises = [
    fsPromise.readFile('example1.txt', 'utf8'),
    fsPromise.readFile('example2.txt', 'utf8')
  ];

  const results = await Promise.allSettled(promises);
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`文件${index + 1}读取成功: ${result.value}`);
    } else {
      console.log(`文件${index + 1}读取失败: ${result.reason}`);
    }
  });
}

processFiles();

7.2.2 并行执行异步操作

当我们需要同时发起多个异步请求，并且这些请求之间没有依赖关系时，我们可以使用Promise.all()来提高代码效率。

async function parallelRequests() {
  const [data1, data2] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2')
  ]);

  const result1 = await data1.json();
  const result2 = await data2.json();

  // 同时处理结果
  console.log(result1);
  console.log(result2);
}

parallelRequests();

7.2.3 异步流控制

在复杂的异步操作中，有时候我们需要更精细地控制执行流程。我们可以使用async/await结合if语句来进行流程控制。

async function controlFlowConditionally() {
  const fileData = await fsPromise.readFile('example.txt', 'utf8');
  if (fileData.includes('specific condition')) {
    await fsPromise.writeFile('output.txt', fileData);
  }
}

controlFlowConditionally();

7.2.4 处理异步操作中的错误

错误处理是异步编程的一个重要部分。我们通常使用try/catch块来捕获并处理异步代码中的错误。

async function handleErrors() {
  try {
    await fsPromise.readFile('nonExistentFile.txt', 'utf8');
  } catch (err) {
    console.error('读取文件失败:', err);
  }
}

handleErrors();

7.3 异步编程最佳实践

为了确保异步编程的高效和可维护性，这里提供一些最佳实践的建议。

7.3.1 使用 async/await 而非回调地狱

在可能的情况下，避免嵌套的回调函数，转而使用async/await语法来编写更清晰的代码。

7.3.2 使用 Promise.all 和 Promise.allSettled 管理并发请求

合理使用Promise.all()和Promise.allSettled()可以有效地管理并发异步操作，并确保所有操作完成后再继续执行。

7.3.3 考虑错误处理和异常管理

在异步代码中，确保每一步骤都有正确的错误处理机制，以避免未捕获的异常导致程序崩溃。

7.3.4 使用try/catch处理异步操作中的异常

在async函数中使用try/catch来捕获和处理异常，这可以提供程序执行的稳定性和可预测性。

7.3.5 避免不必要的全局错误处理器

虽然全局错误处理器能够捕获未捕获的异常，但过度依赖它们可能会掩盖程序中的根本问题。

7.4 结合实际案例

让我们看一个实际案例，了解如何在Web应用中实现异步编程模式。

7.4.1 实现一个简单的API调用示例

这个示例将演示如何使用Node.js的fetch API异步获取第三方API数据。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

fetchData();

7.4.2 异步API请求与错误处理

我们将在fetchData的基础上添加错误处理，以确保任何请求失败都能得到适当的响应。

async function fetchDataWithErrorHandling() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求数据时发生错误:', error);
  }
}

fetchDataWithErrorHandling();

异步编程是现代Web应用开发的核心部分。掌握JavaScript异步编程模式，如Promises和async/await，对于构建高效和响应快速的应用程序至关重要。通过上述的介绍和实践案例，您可以有效地将这些技术融入到您的项目中，提高应用的性能和用户体验。

本文还有配套的精品资源，点击获取

简介：本项目展示了如何使用Node.js开发一个能够动态展示全球天气信息的简易网站。通过JavaScript的异步I/O能力，用户能够输入城市名查询实时天气，服务于日常生活或旅行规划。项目包括了Express框架的使用、API集成、模板引擎应用、异步编程、前端交互以及错误处理等技术要点。

本文还有配套的精品资源，点击获取