【springboot】2、thymeleaf

四、thymeleaf

1、简介

使用SpringBoot；

1）、创建SpringBoot应用，选中我们需要的模块；

2）、SpringBoot已经默认将这些场景配置好了，只需要在配置文件中指定少量配置就可以运行起来

3）、自己编写业务代码；

2、SpringBoot对静态资源的映射规则；

@ConfigurationProperties(prefix = "spring.resources", ignoreUnknownFields = false)
public class ResourceProperties implements ResourceLoaderAware {
    //可以设置和静态资源有关的参数，缓存时间等
    WebMvcAuotConfiguration：//源码

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!this.resourceProperties.isAddMappings()) {
        logger.debug("Default resource handling disabled");
        return;
    }
    Integer cachePeriod = this.resourceProperties.getCachePeriod();
    if (!registry.hasMappingForPattern("/webjars/**")) {
        customizeResourceHandlerRegistration(
            registry.addResourceHandler("/webjars/**")
            .addResourceLocations(
                "classpath:/META-INF/resources/webjars/")//自动导入的路径
            ///webjars/**下面的请求都映射到了classpath:/META-INF/resources/webjars/
            .setCachePeriod(cachePeriod));
    }
    String staticPathPattern = this.mvcProperties.getStaticPathPattern();
    //静态资源文件夹映射
    if (!registry.hasMappingForPattern(staticPathPattern)) {
        customizeResourceHandlerRegistration(
            registry.addResourceHandler(staticPathPattern)
            .addResourceLocations(
                this.resourceProperties.getStaticLocations())
            .setCachePeriod(cachePeriod));
    }
}

//配置欢迎页映射
@Bean
public WelcomePageHandlerMapping welcomePageHandlerMapping(
    ResourceProperties resourceProperties) {
    return new WelcomePageHandlerMapping(resourceProperties.getWelcomePage(),
                                         this.mvcProperties.getStaticPathPattern());
}

//配置喜欢的图标
@Configuration
@ConditionalOnProperty(value = "spring.mvc.favicon.enabled", matchIfMissing = true)
public static class FaviconConfiguration {

    private final ResourceProperties resourceProperties;

    public FaviconConfiguration(ResourceProperties resourceProperties) {
        this.resourceProperties = resourceProperties;
    }

    @Bean
    public SimpleUrlHandlerMapping faviconHandlerMapping() {
        SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
        mapping.setOrder(Ordered.HIGHEST_PRECEDENCE + 1);
        //所有  **/favicon.ico 
        mapping.setUrlMap(Collections.singletonMap("**/favicon.ico",
                                                   faviconRequestHandler()));
        return mapping;
    }

    @Bean
    public ResourceHttpRequestHandler faviconRequestHandler() {
        ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();
        requestHandler
            .setLocations(this.resourceProperties.getFaviconLocations());
        return requestHandler;
    }
}

1）、所有 localhost:8080/webjars/** ，都去 classpath:/META-INF/resources/webjars/ 找资源；

​ webjars：以jar包的方式引入静态资源；

http://www.webjars.org/ 搜索对应的包，比如jquery，会有对应的pom依赖，复制写入pom中即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDTTgPFm-1613986912018)(images/搜狗截图20180203181751.png)]

比如localhost:8080/webjars/jquery/3.3.1/jquery.js 对应到 classpath:/META-INF/resources/webjars/jquery/3.3.1/jquery.js

<!--引入jquery-webjar-->在访问的时候只需要写webjars下面资源的名称即可
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
</dependency>

不只有/webjars/下的文件会被项目自动识别到，还有几个地方也会被识别到：

2）、"/**" 访问当前项目的任何资源，都去（静态资源的文件夹）找映射

"classpath:/META-INF/resources/",   
"classpath:/resources/",    //即src/main/resources/resources 两个
"classpath:/static/", 
"classpath:/public/" 
"/"：当前项目的根路径

根据上面，所以我们如果要放一些自己的静态文件，如图片，可以放到对应的位置

欢迎页：输入localhost:8080/ (注意无需写index.html) 会映射到如classpath:/public/index.html

标签图标：classpath:/static/favicon.ico 会被自动识别为图标

RsourceProperties.java spring.resources.static-location=classpath:/hello,classpath:/atguigu/

以前的静态文件就访问不了了

3、模板引擎

默认不支持JSP，因为jar包，嵌入式的tomcat，所以默认不支持JSP

常见模板引擎：JSP、Velocity、Freemarker、Thymeleaf

SpringBoot推荐的Thymeleaf；语法更简单，功能更强大；

1、引入thymeleaf；

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

<!-- 如果要切换thymeleaf版本，可以写入如下内容-->
<properties>
    <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
    <!-- 布局功能的支持程序  thymeleaf3主程序应该用layout2以上版本 -->
    <!-- thymeleaf2   layout1-->
    <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>

2、Thymeleaf使用

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");

	private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");

	public static final String DEFAULT_PREFIX = "classpath:/templates/";

	public static final String DEFAULT_SUFFIX = ".html";

只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染； 视图解析器

使用：比如我们在Controller里在map中加了一些值，然后视图解析器转发过来，我们想要获取出值

1、首先得导入thymeleaf的名称空间，为了又语法提示

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

2、使用thymeleaf语法；

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>成功！</h1>
    <!--th:text 将div里面的文本内容设置为...  显示的时候是不显示"123"的 -->
    <div th:text="${hello}">123</div>
</body>
</html>

3、语法规则

1）、th:text；改变当前元素里面的文本内容；

th:任意html属性；来替换原生属性的值
如<div id="1" th:id="${hello}" th:text="${hello}">123</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eUoHKRd2-1613986912021)(images/2018-02-04_123955.png)]

表达式名字	语法	用途
变量取值	${…}	获取请求域、session域、对象等值
选择变量	*{…}	获取上下文对象值
消息	#{…}	获取国际化等值
链接	@{…}	生成链接
片段表达式	~{…}	jsp:include 作用，引入公共页面片段

3、设置属性值-th:attr

设置单个值

<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
  </fieldset>
</form>

设置多个值

<img src="../../images/gtvglogo.png"  th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

以上两个的代替写法 th:xxxx

<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
<form action="subscribe.html" th:action="@{/subscribe}">

所有h5兼容的标签写法

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes

4、迭代

<tr th:each="prod : ${prods}">
        <td th:text="${prod.name}">Onions</td>
        <td th:text="${prod.price}">2.41</td>
        <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
  <td th:text="${prod.name}">Onions</td>
  <td th:text="${prod.price}">2.41</td>
  <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

5、条件运算

<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

2）、表达式？

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.
                
                ${session.foo}
            3）、内置的一些工具对象：
#execInfo : information about the template being processed.
#messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.
#uris : methods for escaping parts of URLs/URIs
#conversions : methods for executing the configured conversion service (if any).
#dates : methods for java.util.Date objects: formatting, component extraction, etc.
#calendars : analogous to #dates , but for java.util.Calendar objects.
#numbers : methods for formatting numeric objects.
#strings : methods for String objects: contains, startsWith, prepending/appending, etc.
#objects : methods for objects in general.
#bools : methods for boolean evaluation.
#arrays : methods for arrays.
#lists : methods for lists.
#sets : methods for sets.
#maps : methods for maps.
#aggregates : methods for creating aggregates on arrays or collections.
#ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

    Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样；只有一个补充功能：配合 th:object="${session.user}：代表暂存，后面*号会取出来他的属性值
       <div th:object="${session.user}">
            <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
            <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
            <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
        </div>
    
    Message Expressions: #{...}：获取国际化内容
    Link URL Expressions: @{...}：定义URL；
    		@{/order/process(execId=${execId},execType='FAST')}
    Fragment Expressions: ~{...}：片段引用表达式
    		<div th:insert="~{commons :: main}">...</div>
    		
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:
    No-Operation: _ 

自动配置

@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

<!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}">哈哈</h1>
<h2>
    <a href="www.atguigu.com" th:href="${link}">去百度 绝对路径</a>  <br/>
    <a href="www.atguigu.com" th:href="@{link}">去百度2 相对路径</a>
</h2>
</body>
</html>

@PostMapping("/login")
public String main(User user, HttpSession session, Model model){ //RedirectAttributes

    if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword())){
        //把登陆成功的用户保存起来
        session.setAttribute("loginUser",user);
        //登录成功重定向到main.html;  重定向防止表单重复提交
        return "redirect:/main.html"; // 可以用model传过去数据
    }else {
        model.addAttribute("msg","账号密码错误");
        //回到登录页面
        return "login";
    }

}

@GetMapping("/main.html")
public String mainPage(HttpSession session,Model model){

    log.info("当前方法是：{}","mainPage");
    //是否登录。  拦截器，过滤器
    Object loginUser = session.getAttribute("loginUser");
    if(loginUser != null){
        return "main";
    }else {
        //回到登录页面
        model.addAttribute("msg","请重新登录");
        return "login";
    }
    ValueOperations<String, String> opsForValue =  redisTemplate.opsForValue();

    String s = opsForValue.get("/main.html");
    String s1 = opsForValue.get("/sql");

    model.addAttribute("mainCount",s);
    model.addAttribute("sqlCount",s1);

    return "main";
}

页面抽取

@写法的时候，/代表项目名

抽取

在footer中写
<div th:fragment=""/>

在子内容中写insert  或者replace会保留大标签head 或者 include（不推荐）
<div insert="~{footer :: copy}"/>
或
<div insert="footer :: copy"/>
<div insert="~{footer :: #id}"/>
js也可以写到div里