视图解析与模板引擎thymeleaf

  视图解析:SpringBoot默认不支持JSP,需要引入第三方模板引擎技术实现页面渲染。

视图解析

在这里插入图片描述

模板引擎thymeleaf

thymeleaf使用

  1. 引入starter
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  1. 自动配置好thymeleaf
@Configuration(proxyBeanMethods = false)
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration { }

自动配置好的策略
1、所有thymeleaf的配置值都在 ThymeleafProperties
2、配置好了 SpringTemplateEngine
3、配好了 ThymeleafViewResolver
4、我们只需要直接开发页面

	public static final String DEFAULT_PREFIX = "classpath:/templates/";
	public static final String DEFAULT_SUFFIX = ".html";  //xxx.html

  前端页面就放在templates里面
在这里插入图片描述
页面开发

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="${msg}">ahh</h1>
<h2>
    <a href="前端随便写一个默认的地址" th:href="${link}">去百度</a>
    <a href="前端随便写一个默认的地址" th:href="@{link}">去百度2</a>
</h2>
</body>
</html>

在这里插入图片描述
在浏览器查看网页源码我们发现,使用${link}取到了网页url地址,而@{link}则不行。

## springboot整合thymeleaf ### 1. 导入起步依赖 ```xml org.springframework.boot spring-boot-starter-thymeleaf ``` ### 2. 更改引入版本 ```xml 3.0.2.RELEASE 2.1.1 ``` > 1. springboot自带的thymeleaf依赖为2.1.3版本,使用thymeleaf-layout-dialect版本为2以下版本。 > 2. 使用3或3以上的thymeleaf时,需要thymeleaf-layout-dialect的版本为2或以上。 > 3. 锁定thymeleaf版本时不能使用thymeleaf.version标签,会springboot内部的依赖标签冲突。应当使用springboot-thymeleaf.version标签来锁定版本。 ### 3. 配置文件配置 ```properties spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.check-template-location=true spring.thymeleaf.suffix=.html spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.mode=HTML spring.thymeleaf.cache=false ``` > spring.thymeleaf.cache为缓存,需要热部署时,需要设置为false ## 语法 ### 1. 替换标签体内容 ```html 显示欢迎 显示欢迎 ``` ### 2. 替换属性 ```html 显示欢迎 ``` ### 3. 在表达式中访问属性域 ```html 访问属性域 访问请求域 方式一 访问请求域 方式二 访问Session域 访Session域 方式一 访问Application域 方式一 ``` ### 4. 解析url地址 ```html 解析URL地址,获取ContextPath的值 @{}是把ContextPath的值附加到指定的地址前 @{}是把ContextPath的值附加到指定的地址前 ``` ### 5. 直接执行表达式 ```html 直接执行表达式 无转义效果 : [[${attrRequestScope}]] 有转义效果 : [(${attrRequestScope})] ``` ### 6. 分支迭代 #### 1. if 判断 ```html if判断字符串是否为空 attrRequestScope不为空显示 ~~~attrRequestScope为空显示~~~~ ``` #### 2. 测试循环 ```html 测试循环 ``` > 1. 使用th:each进行集合数据迭代 > 2. th:each="声明变量:${集合}" > 3. th:each 用在哪个标签上,哪个标签就会出现多次 ### 7. 引入外部代码 1. 要被引入的代码 include/part.html ```html 被包含的内容1111 被包含的内容2222 被包含的内容3333 ``` 2. 需要引入的页面 ```html ``` 3. 渲染后的页面源码 ```html 被包含的内容1111 被包含的内容2222 被包含的内容3333 ``` > 1. " :: "左边的值拼前后缀后必须能够找到要包含的文件。 > 2. " :: " 右边的值是代码片段的名字 ,就是th:fragment的值。 > 3. insert将代码原样引入。 > 4. replace使用被引入的代码属性替换原有的。 > 5. include使用被引入的代码div内部的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值