P4 外部资源导入

创建控制器

@GetMapping("/p4")
public void javascript(Model model) {
	User user = new User();
  user.setTags(List.of("PHP", "Java", "Python"));
  model.addAttribute("user",user);
}

创建前端

在static文件夹下创建一个app.css内容如下：

.app{
    height: 200px;
    width: 200px;
    background-color: gold;
}

在template文件夹下创建p4.html，通过th:href导入CSS

<!DOCTYPE html>
<html lang="en" xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/app.css}" >
</head>
<body>
<div class="app">
    1
</div>
</body>
</html>

通过阴间语法/*[[${user}]]*/{};将对象导入到javascript中

<script th:inline="javascript">
    const user = /*[[${user}]]*/{};
    console.log(user)
</script>

通过th:classappend追加CSS

通过${idx.last}判断是不是最后一个

<ul>
  <li th:each="tag,idx:${user.tags}" th:text="${tag}" 
		th:classappend="${idx.last}?active"></li>
</ul>