SpringBoot最简单方式实现自定义异常页面(404)

最简单的方式实现所有自定义异常页面（如 404、500 等）是通过静态资源文件或模板引擎来实现。

方法 1：使用静态资源文件（最简单）

Spring Boot 默认会在 src/main/resources/static 或 src/main/resources/public 目录下查找静态资源文件。你可以直接在这些目录中放置自定义的错误页面文件。
在 src/main/resources/static/error 目录下创建错误页面文件：

404.html：自定义 404 页面
500.html：自定义 500 页面
error.html：通用错误页面（如果没有匹配的状态码，会使用此页面）

目录结构
src/main/resources/static/error/
├── 404.html
├── 500.html
└── error.html
在这里插入图片描述
404.html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>404 - 页面未找到</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"><script src="https://cdn.tailwindcss.com"></script><style>body {min-height: 1024px;display: flex;flex-direction: column;}.main-content {flex: 1;}@keyframes float {0% { transform: translateY(0px); }50% { transform: translateY(-20px); }100% { transform: translateY(0px); }}.floating {animation: float 3s ease-in-out infinite;}.hover-scale {transition: transform 0.3s ease;}.hover-scale:hover {transform: scale(1.05);}</style>
</head>
<body class="bg-gray-50">
<div class="w-[1440px] mx-auto main-content flex flex-col items-center justify-center"><div class="text-center"><img src="https://ai-public.mastergo.com/ai/img_res/c0f93458673669a270d60c3eabee0378.jpg"alt="迷路的小狗"class="w-[400px] h-[400px] object-cover floating mb-8"><h1 class="text-[120px] font-bold text-primary mb-4">404</h1><p class="text-2xl text-gray-600 mb-6">呜呜，这个页面可能被调皮的小狗叼走啦～</p><p class="text-lg text-gray-500 mb-8">别担心，让我们一起去找找其他好玩的地方吧！</p><div class="flex gap-4 justify-center mb-16"><button class="bg-primary text-white px-8 py-3 text-lg font-semibold hover-scale !rounded-button whitespace-nowrap">返回首页</button><button class="bg-white border-2 border-primary text-primary px-8 py-3 text-lg font-semibold hover-scale !rounded-button whitespace-nowrap">返回上一页</button></div></div>
</div><footer class="w-[1440px] mx-auto py-8 border-t border-gray-200"><div class="flex justify-between items-center px-8"><div class="flex items-center gap-6"><span class="text-gray-600">联系我们：400-888-8888</span><div class="flex gap-4"><a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-weixin text-xl w-8 h-8 flex items-center justify-center"></i></a><a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-weibo text-xl w-8 h-8 flex items-center justify-center"></i></a><a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-qq text-xl w-8 h-8 flex items-center justify-center"></i></a></div></div></div>
</footer>
</body>
</html>

适合简单的静态页面。

方法 2：使用模板引擎（如 Thymeleaf）

在 src/main/resources/templates/error 目录下创建错误页面文件：

404.html：自定义 404 页面
500.html：自定义 500 页面
error.html：通用错误页面

目录结构
src/main/resources/templates/error/
├── 404.html
├── 500.html
└── error.html
404.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>404 Not Found</title>
</head>
<body><h1>404 - Page Not Found</h1><p>The page you are looking for does not exist.</p><p>Error: <span th:text="${error}"></span></p>
</body>
</html>