JAVA制作自定义404、4xx、500、503、5xx等响应报错界面的代码实例教程

最新推荐文章于 2024-06-28 10:09:23 发布

任聪聪

最新推荐文章于 2024-06-28 10:09:23 发布

阅读量1.1k

点赞数 18

分类专栏： Java 文章标签： java 开发语言

本文链接：https://blog.csdn.net/hj960511/article/details/136986659

版权

Java 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用SpringBoot和Thymeleaf创建自定义的404、4xx、500和5xx错误页面，包括非Thymeleaf方式和Thymeleaf模板方式，以及如何配置和运行项目。

摘要由CSDN通过智能技术生成

本篇文章主要讲解通过springboot、thymeleaf制作自定义404、4xx、500、503、5xx等响应报错界面的代码实例教程。
日期：2024年3月24日
作者：任聪聪
文章附件：https://download.csdn.net/download/hj960511/89024106

一、实际效果

说明：以下为制作好的自定义错误页面信息的源代码项目运行效果，结合文章及附件源码进行学习会更快一点。
在这里插入图片描述

二、准备工作

步骤一、打开阿里云应用脚手架工具，配置如下项目参数信息

地址：https://start.aliyun.com/
在这里插入图片描述

步骤二、下载源代码

在这里插入图片描述

步骤三、导入到我们的idea

在这里插入图片描述

三、制作错误页面

步骤一、打开我们的项目，执行maven构建完毕，如下：

mvn install

构建完毕：

在这里插入图片描述

步骤二、删除不必要的项目控制器文件

在这里插入图片描述

四、制作非thymeleaf类型的报错页面。

说明：如下的配置是根据http响应来的，如果希望错误页相对指定，可以404、403、500、503等单独配置，springboot会自动加载。

步骤一、打开项目，找到resources，在static目录下创建error目录。

在这里插入图片描述

步骤二、选中error点击创建一个4xx名字的html文件如下图：

在这里插入图片描述

步骤三、在4xx.html中填写html的内容如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>4xx页面错误响应-demo</title>
</head>
<body>
<p style="text-align: center;line-height: 100vh;width: 100vw">4xx页面错误响应页-demo</p>
</body>
</html>

步骤四、创建5xx.html页面，并填写内容如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>5xx页面错误响应-demo</title>
</head>
<body>
<p style="text-align: center;line-height: 100vh;width: 100vw">5xx页面错误响应页-demo</p>
</body>
</html>

步骤五、找到项目运行文件，右键进行运行。

在这里插入图片描述

步骤六、运行成功如下图：

在这里插入图片描述
输入一个没有的路径：

注意：此方法不可以获取到status的状态信息，不能够动态显示状态和路径信息。

五、通过thymeleaf制作错误页面并获取状态信息

说明：这个方法和springboot自带的类似，通过模板引擎来完成，能够支持动态的显示结果信息，在页面中显示出动态的状态。

步骤一、打开项目文件，创建模板目录

在这里插入图片描述
目录名：templates

步骤二、创建error目录如下图：

在这里插入图片描述

步骤三、创建5xx.html，4xx.html文件内容如下：

4xx.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>4xx 响应错误页面-demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .error-container {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #e74c3c;
        }

        .error-info {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="error-container">
    <h1>4xx 响应错误页面-demo</h1>
    <div class="error-info">
        <p>页面状态: <span th:text="${status}"></span></p>
        <p>访问时间: <span th:text="${timestamp}"></span></p>
        <p>错误信息: <span th:text="${error}"></span></p>
        <p>消息信息: <span th:text="${message}"></span></p>
        <p>路径信息: <span th:text="${path}"></span></p>
    </div>
</div>
</body>
</html>

5xx.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>5xx 响应错误页面-demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .error-container {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #e74c3c;
        }

        .error-info {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="error-container">
    <h1>5xx 响应错误页面-demo</h1>
    <div class="error-info">
        <p>页面状态: <span th:text="${status}"></span></p>
        <p>访问时间: <span th:text="${timestamp}"></span></p>
        <p>错误信息: <span th:text="${error}"></span></p>
        <p>消息信息: <span th:text="${message}"></span></p>
        <p>路径信息: <span th:text="${path}"></span></p>
    </div>
</div>
</body>
</html>

完成后运行项目：
在这里插入图片描述

任聪聪

关注

18
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
JAVA制作自定义404、4xx、500、503、5xx等响应报错界面的代码实例教程

本篇文章主要讲解通过springboot、thymeleaf制作自定义404、4xx、500、503、5xx等响应报错界面的代码实例教程。日期：2024年3月24日作者：任聪聪。
复制链接

扫一扫