Spring Boot、Thymeleaf、Bootsrap白页错误集锦

错误代码500

做了一个包含thymeleaf的登录页面，然后尝试访问的时候遇到了这个问题：

• 这个错误的代码是500，意思是可以向服务器获取这个页面，但是这个页面有错
• 具体的错误是"template parsing"的时候出错了，出错的地方是templates/login.html文件
• 打开login.html文件一看，发现是th:href的语法没有写好，原本应该写为：

<img class="mb-4" th:src="@{asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">

自己忘记加大括号写成：

<img class="mb-4" th:src="asserts/img/bootstrap-solid.svg" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">

导致这个图片加载不出来



然后是做了一个拦截器，拦截除了登录页面的所有页面。在浏览器里面我尝试登录主页的时候没有被拦截然后转到登录页面，而是出现了这个页面：

然后idea的控制台显示我的错误如下：

拦截器写错了，定位到拦截器里面我的代码为：

是我拦截的路径没有写对，本来应该写

"/index.html"

我写成了：

"index.html"

前者的路径才是对的，因为"/"符号会自动加载静态资源路径下的文件，按照我的错误的写法，spring boot是不能发现这个"index.html"文件的

页面缺失+idea服务器端报错

我想要在Staff Management中显示所有的员工，但是页面是缺失的：

网页端没有显示报错，但是服务器端显示报错：

可以看到页面缺失的位置是从"email"那一栏开始的。
打开list.html文件中对应的位置，发现是：

th的行内写法右边多了一个大括号。。。。，改回来即可

bootstrap页面样式缺失

页面本来应该显示一个完整的添加员工的页面，但是页面没有bootstrap的样式：
如上图所示，转到一个bootstrap页面，但是没有bootstrap的样式。
这里出错的原因是没有将页面渲染时需要的数据传递过去。浏览器控制台中显示：

页面代码有个模块是：

<div class="form-group">
<label>department</label>
	<select class="form-control" name="department.id">
		<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
	</select>
</div>

页面渲染时需要得到一个department的数据，但是控制器没有将这个数据传递过去：

@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id") Integer id,Model model){
    Employee employee=employeeDao.get(id);
    model.addAttribute("emp",employee);

        // 修改和添加使用同一个html文件
        return "emp/add";
}

这个出错是我尝试两个控制器同时访问同一个html文件时导致的。
第一个控制器是实现【添加员工】的功能，点击主页面中的【添加员工】按钮时，会打开add.html文件，可以正常的显示页面：

主页面中还有一个【编辑】按钮，本来点击按钮之后，会跳转到同一个add.html文件中的，但是这次跳转页面就蹦了，功能是完好的，但是bootstrap的界面完全渲染不出来：

然后浏览器端显示报错如下：

服务器端没有报错。

后来通过对比自己的add.html文件和材料中的add.html文件发现原来是自己没有写样式的资源索取路径。例如本来要通过th:href来引入样式文件的：

<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">

我前面就忘记加th:href的资源引入路径了，导致资源加载不出来。