SpringBoot2-[模板引擎-Thymeleaf]

2年前 (2022) 程序员胖胖胖虎阿

380 0 0

SpringBoot2-[模板引擎-Thymeleaf]

👨🏻‍🎓博主介绍：大家好，我是芝士味的椒盐，一名在校大学生，热爱分享知识，很高兴在这里认识大家🌟
🌈擅长领域：Java、大数据、运维、电子
🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！
🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

文章目录

- 模板引擎-Thymeleaf
- - 1、**表达式**
  - **2、字面量**
  - **3、文本操作**
  - **4、数学运算**
  - **5、布尔运算**
  - **6、比较运算**
  - **7、条件运算**
  - **8、特殊操作**

模板引擎-Thymeleaf

SpringBoot不支持JSP
Thymeleaf:现代化、服务端Java模板引擎

引入Thymeleaf支持

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

基本语法：

1、表达式

2、字面量

文本值: **‘one text’ , ‘Another one!’ ,…**数字: **0 , 34 , 3.0 , 12.3 ,…**布尔值: true , false

空值: null

变量： one，two，… 变量不能有空格

3、文本操作

字符串拼接: +

变量替换: |The name is ${name}|

4、数学运算

运算符: + , - , * , / , %

5、布尔运算

运算符: and , or

一元运算: ! , not

6、比较运算

比较: **> , < , >= , <= ( gt , lt , ge , le )**等式: == , != ( eq , ne )

7、条件运算

If-then: (if) ? (then)

If-then-else: (if) ? (then) : (else)

Default: (value) ?: (defaultvalue)

8、特殊操作

无操作： _
- ⚠️ 注意：当文本不在一个标签中的时候·，需要使用行内写法
  
  比如
```
<a href="#"  class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <img src="images/photos/user-avatar.png" alt="" />
            John Doe
          <span class="caret"></span>
</a>
```
  - 行内写法
```
<a href="#"  class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <img src="images/photos/user-avatar.png" alt="" />
                [[${session.loginUser.userName}]]
          <span class="caret"></span>
</a>
```
视图解析
- 返回值以 forward: 开始： new InternalResourceView(forwardUrl); --> 转发request.getRequestDispatcher(path).forward(request, response);
- 返回值以 redirect: 开始： new RedirectView() --》 render就是重定向
- 返回值是普通字符串： new ThymeleafView（）—>

Thymeleaf使用

SpringBoot已经配置好了基本的Thymeleaf的属性

@Configuration(
    proxyBeanMethods = false
)
@EnableConfigurationProperties({ThymeleafProperties.class})
@ConditionalOnClass({TemplateMode.class, SpringTemplateEngine.class})
@AutoConfigureAfter({WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class})

ThymeleafProperties.java

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;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";

代码实现：

success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page!</title>
</head>
<body>
<div th:text="${msg}">占位符1</div>
<a href="link" th:href="${link}">进入百度！</a>
<a href="link" th:href="@{https://www.baidu.com}">进入百度！</a>
</body>
</html>

ViewController.java

@Controller
public class ViweController {
    /**
     *<div>将参数写入请求域中，发给模版引擎</div>
     * @param model
     * @return 页面字符串和thymeleaf的前缀/template 以及后缀.html进行拼接
     */
    @GetMapping("/aitu")
    public String success(Model model){
        model.addAttribute("msg","你好世界！");
        model.addAttribute("link","https://www.baidu.com");
        return "success";
    }
}

公共代码块抽取-三种方式

首先选择使用footer标签抽取，还是使用选择器抽取

抽取：

<footer th:fragment="copy">
  &copy; 2011 The Good Thymes Virtual Grocery
</footer>

选择器抽取

<div id="common_script">
</div>

选择公共代码块使用的方式

<div th:inset=""footer :: copy"></div>

- 将footer以及其内部内容放到div内部，也就是当前的div也包括

<div th:replace=""footer :: copy"></div>

- 将footer以及其内部内容放到div所在的位置，div将没有

<div th:include=""footer :: copy"></div>

- 将footer内容放到当前的div中，包括div不包括footer

拦截器

定制拦截器需要实现HandlerInterceptor 接口

@Slf4j
public class LoginInterceptor implements HandlerInterceptor {

配置拦截器

@Configuration
public class WebConfig implements WebMvcConfigurer {
    /**

拦截器原理
SpringBoot2-[模板引擎-Thymeleaf]

版权声明：程序员胖胖胖虎阿发表于 2022年9月13日下午9:40。
转载请注明：SpringBoot2-[模板引擎-Thymeleaf] | 胖虎的工具箱-编程导航

相关文章

IDEA2021激活破解教程(IDEA2021 激活码,绝对有效)

程序员胖胖胖虎阿

327

portaudio使用笔记《转》

程序员胖胖胖虎阿

308

Mysql 通过ibd文件恢复数据

程序员胖胖胖虎阿

228

IntelliJ IDEA专业版破解教程(Intellij IDEA2021破解教程,每日更新)

程序员胖胖胖虎阿

150

Intellij IDEA最新永久破解方法(windows/mac idea2022.1破解图文教程,每日更新)

程序员胖胖胖虎阿

214

根本上解决mysql启动失败问题Job for mysqld.service failed because the control process exited with error code.

程序员胖胖胖虎阿

354

暂无评论

暂无评论...

致力于称为最好的程序员导航网站

友链申请免责声明关于我们

Copyright © 2022 胖虎的工具箱-编程导航 陇ICP备2022001249号