Spring Boot 整合 Thymeleaf 模板 - 第004章 - 增加页面样式/脚本支持

视频课程地址: Spring Boot 整合 Thymeleaf 模板

  • 默认情况下,Spring Boot从classpath下一个叫/static(/public,/resources或/META-INF/resources)的文件夹或从ServletContext根目录提供静态内容。这使用了Spring MVC的ResourceHttpRequestHandler,所以你可以通过添加自己的WebMvcConfigurerAdapter并覆写addResourceHandlers方法来改变这个行为(加载静态文件)

  • 在 resources 目录下新建 static 目录, 并创建 style.css 样式表

.login-title {
    font-size: 30px;
}
  • 在页面中引入 css 样式表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>SpringBoot Thymeleaf Integration</title>
    <link rel="stylesheet" href="/style.css" />
</head>
<body>

<h1>SpringBoot Thymeleaf Integration</h1>

<h2>h2 title</h2>

<span class="login-title">我是引用的样式</span>

</body>
</html>
  • 在 static 目录下创建 home.js 脚本文件
alert(1);
  • 在页面中引入脚本文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>SpringBoot Thymeleaf Integration</title>
    <link rel="stylesheet" href="/style.css" />
</head>
<body>

<h1>SpringBoot Thymeleaf Integration</h1>

<h2>h2 title</h2>

<span class="login-title">我是引用的样式</span>

</body>
<script src="/home.js"></script>
</html>

猜你喜欢

转载自blog.csdn.net/shrcheng/article/details/79667042