内容简介：如果你并不了解SpringBoot的静态页面,请看我的Thymeleaf第一篇:这是 Thymeleaf(一) 的链接 :使用自己的图标:
如果你并不了解SpringBoot的静态页面,请看我的Thymeleaf第一篇:
这是 Thymeleaf(一) 的链接 : aaatao66.github.io/2019/05/26/…
- 如果静态资源文件夹下有 index.html的话,直接访问localhost:8080的话,index就是欢迎页
使用自己的图标:
在静态资源文件夹放一个 favicon.ico 的图标,springboot底层会自动调用这个为我们的图标
我找了个小叮当的图标
效果:
自定义静态资源文件夹
在你的 yml/properties下添加:
spring.resources.static-locations=classpath:/hello/,classpath:/carson/ 复制代码
定义之后,原来默认的就不可以使用了
2. 引入 Thymeleaf
SpringBoot推荐使用thymeleaf, 因为语法简单,功能强大 , 不推荐使用jsp,默认也不支持jsp
<!-- 引入 thymeleaf 模板引擎-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
复制代码
新版本的Spring Boot会自动设置好版本,如果你是1.x的Spring Boot,可能要自己更改版本了
3. Thymeleaf 使用&语法
源码:
@ConfigurationProperties(
prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
// 下面是前后缀,也就是说只要放在 prefix 目录下,就可以被渲染了
private String prefix = "classpath:/templates/";
private String suffix = ".html";
复制代码
- 写一个 controller 方法:
@RequestMapping("nice")
public String nice(){
return "nice";
}
复制代码
- 在 resources下的 templates目录下创建nice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是 nice 标签</h1>
</body>
</html>
复制代码
- 启动程序,访问 localhost:8080/nice
使用:
1.html页面 导入 thymeleaf 的名称空间
<html lang="en" xmlns:th="http://www.thymeleaf.org"> 复制代码
2.使用thymeleaf语法
- controller:
@RequestMapping("nice")
public String nice(Map<String,Object> map){
map.put("hello","你好");
return "nice";
}
复制代码
- nice.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是 nice 标签</h1>
<!--获取作用域的文本内容-->
<div th:text="${hello}"></div>
</body>
</html>
复制代码
语法规则
1.th:text; 改变当前元素里面的内容;
th: 任意html属性,来替换原生属性
- HTML代码:
<div id="div01" class="mydiv" th:id="${hello}" th:class="${hello}" th:text="${hello}"></div>
复制代码
- Spring Boot解析后的源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是 nice 标签</h1>
<div id="你好" class="你好">你好</div>
</body>
</html>
复制代码
id 和 class都被替换了
属性优先级
表达式
具体参考:官方文档
Simple expressions:(表达式语法)
Variable Expressions: ${...} : 获取变量值; OGNL
1. 获取对象的属性,调用方法
2. 使用内置的基本对象
#ctx : the context object.
#vars: the context variables.
#locale : the context locale.
#request : (only in Web Contexts) the HttpServletRequest object.
#response : (only in Web Contexts) the HttpServletResponse object.
#session : (only in Web Contexts) the HttpSession object.
#servletContext : (only in Web Contexts) the ServletContext object
Selection Variable Expressions: *{...} 选择表达式: 和${}在功能上是一样的
Message Expressions: #{...} 获取国际化内容
Link URL Expressions: @{...} 定义URL
Fragment Expressions: ~{...}
Literals (字面量)
Text literals: 'one text' , 'Another one!' ,…
Number literals: 0 , 34 , 3.0 , 12.3 ,…
Boolean literals: true , false
Null literal: null
Literal tokens: one , sometext , main ,…
Text operations: (文本操作
String concatenation: +
Literal substitutions: |The name is ${name}|
Arithmetic operations: 数学运算
Binary operators: + , - , * , / , %
Minus sign (unary operator): -
Boolean operations: (布尔运算)
Binary operators: and , or
Boolean negation (unary operator): ! , not
Comparisons and equality: 比较运算
Comparators: > , < , >= , <= ( gt , lt , ge , le )
Equality operators: == , != ( eq , ne )
Conditional operators: (条件运算)
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
Special tokens:
Page 17 of 104
No-Operation: _
复制代码
试验以下:
- controller代码:
@RequestMapping("nice")
public String nice(Map<String,Object> map){
map.put("hello","<h1>你好<h1/>");
map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
return "nice";
}
复制代码
- html 代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是 nice 标签</h1>
<div id="div01" class="mydiv" th:id="${hello}" th:class="${hello}" th:text="${hello}"></div>
<hr/>
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
<hr/>
<!-- th:each 每次遍历都会生成当前这个标签-->
<h4 th:text="${user}" th:each="user:${users}"></h4>
<hr/>
<h4>
<span th:each="user:${users}">[[${user}]]</span>
</h4>
</body>
</html>
复制代码
- 显示结果为:
- 网页源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是 nice 标签</h1>
<div id="<h1>你好<h1/>" class="<h1>你好<h1/>"><h1>你好<h1/></div>
<hr/>
<div><h1>你好<h1/></div>
<div><h1>你好<h1/></div>
<hr/>
<!-- th:each 每次遍历都会生成当前这个标签-->
<h4>zhangsan</h4>
<h4>lisi</h4>
<h4>wangwu</h4>
<hr/>
<h4>
<span>zhangsan</span><span>lisi</span><span>wangwu</span>
</h4>
</body>
</html>
复制代码
小总结:
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
复制代码
th:text : 转义特殊字符,所以页面显示 <h1>你好</h1>
th:utext: 不转义特殊字符, 页面直接显示 h1标签 大标题 你好
th:each: 写在 h4 标签上,每次遍历都会产生一个新的 h4标签:
zhangsan
lisi
wangwu
而 写在 span里产生了3个span标签:
zhangsan lisi wangwu
我的掘金: juejin.im/user/5d1873…
个人博客:aaatao66.github.io/
欢迎关注点赞~~ 我会陆续记录自己的学习记录~
以上所述就是小编给大家介绍的《Spring Boot--Thymeleaf模板引擎/静态页面》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- SpringBoot2 整合FreeMarker模板，完成页面静态化处理
- Spring Boot 2 整合 FreeMarker 模板，完成页面静态化处理
- 静态库遇到静态库
- 全局变量，静态全局变量，局部变量，静态局部变量
- Android NDK秘籍--编译静态库、调用静态库
- static特别用法【静态导包】——Java包的静态导入
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
High Performance Python
Micha Gorelick、Ian Ozsvald / O'Reilly Media / 2014-9-10 / USD 39.99
If you're an experienced Python programmer, High Performance Python will guide you through the various routes of code optimization. You'll learn how to use smarter algorithms and leverage peripheral t......一起来看看 《High Performance Python》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
RGB转16进制工具
RGB HEX 互转工具