Spring Boot web程序如何定制错误页面

我们使用Spring Boot开发web程序，登录不存在的path时会有错误提示页面。如何设置该错误页面以便更好地提示用户了？下面针对这个问题做个简要总结。

默认的错误页面

设置错误页面几种方式

设置错误页面-Thymeleaf

1, 默认的错误页面

当我们的程序没有专门设置错误页面时，我们可以看到启动日志中有类似信息（注，因为我使用了swagger所以有/swagger-resources 、/swagger-ui.html等map映射）

2018-07-21 21:33:34.881  INFO 1912 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean   : Mapping filter: 'characterEncodingFilter' to: [/*]
2018-07-21 21:33:35.237  INFO 1912 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/user/users],methods=[GET],produces=[application/json;charset=UTF-8]}" onto public java.lang.Iterable<com.yq.domain.User> com.yq.controller.UserController.findAllUsers()
2018-07-21 21:33:35.238  INFO 1912 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/user/users/{userId}],methods=[GET],produces=[application/json;charset=UTF-8]}" onto public com.yq.domain.User com.yq.controller.UserController.getUser(java.lang.String)
2018-07-21 21:33:35.244  INFO 1912 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/swagger-resources/configuration/security]}" onto public org.springframework.http.ResponseEntity<springfox.documentation.swagger.web.SecurityConfiguration> springfox.documentation.swagger.web.ApiResourceController.securityConfiguration()
2018-07-21 21:33:35.245  INFO 1912 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/swagger-resources]}" onto public org.springframework.http.ResponseEntity<java.util.List<springfox.documentation.swagger.web.SwaggerResource>> springfox.documentation.swagger.web.ApiResourceController.swaggerResources()
2018-07-21 21:33:35.246  INFO 1912 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/swagger-resources/configuration/ui]}" onto public org.springframework.http.ResponseEntity<springfox.documentation.swagger.web.UiConfiguration> springfox.documentation.swagger.web.ApiResourceController.uiConfiguration()
2018-07-21 21:33:35.254  INFO 1912 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/error]}" onto public org.springframework.http.ResponseEntity<java.util.Map<java.lang.String, java.lang.Object>> org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController.error(javax.servlet.http.HttpServletRequest)
2018-07-21 21:33:35.254  INFO 1912 --- [           main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/error],produces=[text/html]}" onto public org.springframework.web.servlet.ModelAndView org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController.errorHtml(javax.servlet.http.HttpServletRequest,javax.servlet.http.HttpServletResponse)
2018-07-21 21:33:35.395  INFO 1912 --- [           main] pertySourcedRequestMappingHandlerMapping : Mapped URL path [/v2/api-docs] onto method [public org.springframework.http.ResponseEntity<springfox.documentation.spring.web.json.Json> springfox.documentation.swagger2.web.Swagger2Controller.getDocumentation(java.lang.String,javax.servlet.http.HttpServletRequest)]
2018-07-21 21:33:35.443  INFO 1912 --- [           main] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped URL path [/swagger-ui.html] onto handler of type [class org.springframework.web.servlet.resource

我们登录页面，直接提示错误（注，我们配置任何页面，因此主页会直接报错）
这里写图片描述

2, 设置错误页面几种方式

Spring Boot自动配置名称为error的错误对应的视图，因此只要我们配置视图解析器就能实现错误页面的定制。

a, 提供一个实现了Spring的view接口的Bean，将该bean ID命名为error
b, 如果配置了Thymeleaf，提供名称为error.html的Thymeleaf模板
c, 如果配置了FreeMaker，提供名称为error.ftll的FreeMaker模板
d, 如果配置了Velocity，提供名称为error.vml的Velocity模板
e, 如果使用JSP视图，提供名称为error.jsp的JSP页面

3, 设置错误页面-Thymeleaf

我们选择使用Thymeleaf，提供名称为error.html的Thymeleaf模板。

3.1 首先，我们在pom文件中添加依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

3.2 然后，我们在resources目录下面的templates目录提供error.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>错误页面!</title>
    <link rel="stylesheet" th:href="@{/style.css}"></link>
</head>
<html>
<div class="errorPage">
    <span class="oops">错误Path!</span><br/>
    <p>There seems to be a problem with the page you requested
        (<span th:text="${path}"></span>).</p>
    <p th:text="${'Details: ' + message}"></p>
</div>
</html>

3.3 最后，运行效果截图
这里写图片描述

代码在这里，欢迎加星，fork.

有关使用ErrorController会在其他篇章介绍。