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

21 捕获404错误

在上一章中，我们探讨了如何使用自定义错误处理器来处理应用程序中出现的错误。错误处理是构建健壮应用程序的重要组成部分，而在这章中，我们将专注于捕获404错误，也就是应用程序的“未找到”错误。

什么是404错误？

简单来说，404错误表示用户请求的资源在服务器上不存在。当用户访问一个未定义的路由或网址时，Express会默认返回一个404状态码。这种情况在前端应用中很普遍，例如，当用户输入错误的URL时。

捕获404错误的基本方法

在Express中，我们可以使用middleware来处理404错误。通过添加一个中间件来捕获未处理的请求，可以确保我们的应用在用户请求不存在的路由时给出友好的响应。

实现404错误捕获

以下是一个简单的示例，演示如何在Express应用中捕获404错误。我们可以在所有路由定义之后添加一个404中间件。

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

// 定义其他路由
app.get('/', (req, res) => {
    res.send('主页');
});

app.get('/about', (req, res) => {
    res.send('关于我们');
});

// 捕获404错误
app.use((req, res, next) => {
    res.status(404).send('抱歉，您请求的页面不存在。');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`服务器正在监听 http://localhost:${PORT}`);
});

在上面的代码中，当用户访问一个未定义的路由时，Express会调用我们定义的404中间件，并返回一个404状态码及相应的信息。

友好的404错误页面

为了提高用户体验，我们可以让404错误页面更友好。可以创建一个单独的404页面模板，并在404中间件中渲染它。以下是使用EJS模板引擎的示例。

首先，安装EJS：

1	npm install ejs

在你的项目中配置EJS并创建一个404页面：

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

// 404错误页面
app.use((req, res, next) => {
    res.status(404).render('404', { title: '页面未找到' });
});

创建一个视图文件views/404.ejs：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1>404 - 页面未找到</h1>
    <p>抱歉，您请求的页面不存在。请检查您的链接或返回主页。</p>
</body>
</html>

这样，当用户请求一个不存在的路由时，会看到一个友好的404页面，而不是简单的文本信息。

总结

在本章中，我们学习了如何在Express.js应用中捕获404错误，并为用户提供一个更友好的错误页面。通过使用中间件和模板引擎，我们能够创建更好的用户体验，确保用户在面对错误时能够轻松理解发生了什么。

在下一章中，我们将探讨如何配置静态文件目录，以便更有效地服务我们的前端资源，欢迎继续学习！

21 捕获404错误

https://zglg.work/expressjs-zero/21/

作者

IT教程网(郭震)

发布于

2024-08-15

更新于

2024-08-16

许可协议

#Express.js教程

21 捕获404错误

什么是404错误？

捕获404错误的基本方法

实现404错误捕获

友好的404错误页面

总结

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论