Spring Boot - Thymeleaf template engine / static pages

1.Spring Boot mapping rules for static resources

If you do not understand SpringBoot static pages, see my first post Thymeleaf:

This is Thymeleaf (a) link: aaatao66.github.io/2019/05/26/...

If you have a static resource folders under index.html, then direct access to localhost: 8080 words, index is the welcome page

Use your own icons:

In static resource folder put a favicon.ico icon, springboot bottom will automatically call this our icon

I found a small icon jingle

effect:

Custom static resource folders

In your yml / properties added:

spring.resources.static-locations=classpath:/hello/,classpath:/carson/
复制代码

Once defined, the original will not be able to use the default

2. Introduction Thymeleaf

SpringBoot recommended thymeleaf, because the syntax is simple, powerful , do not recommend the use of jsp, jsp does not support default

 <!-- 引入 thymeleaf 模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
复制代码

The new version of the Spring Boot automatically set version 1.x if you are a Spring Boot, you may want to change their own version

3. Thymeleaf use & grammar

Source:

@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";
复制代码

Writing a controller method:

  @RequestMapping("nice")
    public String nice(){
        return "nice";
    }
复制代码

Creating nice.html in the templates directory of resources

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这是 nice 标签</h1>
</body>
</html>
复制代码

Start the program, visit localhost: 8080 / nice

use:

1.html pages of namespace import thymeleaf

<html lang="en" xmlns:th="http://www.thymeleaf.org">
复制代码

2. Use syntax 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>
复制代码

Syntax Rules

1.th:text; change the contents of the current element inside;

th: any html properties, to replace the native properties

HTML code:

<div id="div01" class="mydiv" th:id="${hello}" th:class="${hello}" th:text="${hello}"></div>
复制代码

Spring Boot parsed source code:

<!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 and class have been replaced

Properties Priority

expression

Specific reference: official document

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: _
复制代码

Test the following:

controller Code:

@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 code

<!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>
复制代码

Showing results:

Page source:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这是 nice 标签</h1>

<div id="&lt;h1&gt;你好&lt;h1/&gt;" class="&lt;h1&gt;你好&lt;h1/&gt;">&lt;h1&gt;你好&lt;h1/&gt;</div>
<hr/>
<div>&lt;h1&gt;你好&lt;h1/&gt;</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>
复制代码

Small summary:

<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
复制代码

th: text: escape special characters, so the page display <h1>你好</h1>

th: utext: not escape special characters, the page displayed directly h1 tag headline hello

th: each: h4 written on the label, each iteration will have a new h4 tags:

zhangsan

lysis

wangwu

The writing had three in a span span in:

zhangsan lisi wangwu

My Nuggets: juejin.im/user/5d1873...

Personal blog: aaatao66.github.io/

Welcome concern praise ~ ~ I will continue to record their own learning record -