springboot之如何使用thymeleaf

最新推荐文章于 2024-04-03 12:03:15 发布

kxj19980524

最新推荐文章于 2024-04-03 12:03:15 发布

阅读量979

点赞数 1

分类专栏： thymeleaf springboot

本文链接：https://blog.csdn.net/kxj19980524/article/details/85450378

版权

springboot 同时被 2 个专栏收录

35 篇文章 2 订阅

订阅专栏

thymeleaf

4 篇文章 0 订阅

订阅专栏

thymeleaf它的好处就是html形式的文件,美工可以直接打开,后台人员打开的是动态的,可以同时开发,还有html格式的文件符合SEO(搜索引擎优化),可以更好的进行搜索排名.

thymeleaf它是基于OGNL表达式的,在它的官网上有取值的方式

`${...}`表达式实际上是在上下文中包含的变量映射上执行的OGNL（对象 - 图形导航语言）表达式。

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#variables

thymeleaf它是一个受保护的文件夹,就相当于WEB-INF一样,不能直接访问,必须得通过controller访问,如果非要直接访问的话,就放到public文件夹下就可以直接访问了.

pom文件导入thymeleaf模块

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

实时刷新功能不需要重启项目,导入下面依赖

然后关闭thymelaf的缓存功能,然后修改完html代码后按快捷键ctrl+f9

spring.thymeleaf.cache=false

创建controller

package com.buba.controller;

import com.buba.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Calendar;
import java.util.Date;

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
    @RequestMapping("/toIndex")
    public String toIndex(Model model, HttpSession session, HttpServletRequest request){
        request.getServletContext().setAttribute("age",21);
        model.addAttribute("key","kxj");
        session.setAttribute("name","康骁将");
        User user = new User();
        user.setUsername("陈红");
        user.setPassword("123");
        Date date = new Date();
        Calendar instance = Calendar.getInstance();
        instance.setTime(date);
        instance.set(1998,5,24,12,12,12);
        user.setBirth(instance.getTime());
        model.addAttribute("user",user);
        return "index";
    }
}

在thymeleaf文件夹下创建index.html,记得meta标签后面写个结束斜杠默认创建html是没用的,不然会报错,引入thymeleaf的命名空间,然后就可以从后台传值了,我下面列了几个简单的单个传值,对象传值,和session传值,application报红不用管,可以使用.

变量表达式:${}这种取值方式是变量表达式,是从page,request,session,aoolication域中取变量和对象

{}选择表达式,从指定的对象中获取相应的属性,如下图 th:object="${user}"这表示定义了个对象,然后直接使用{}里面填对象的属性就获取到了.

日期的格式化 ${#dates.format(pro.availableFrom,'yyyy-MM-dd')}
小数的格式化,3代表整数保留几位,不够补0,2表示小数保留几位

<td><span th:text="'￥'+${#numbers.formatDecimal(pro.price,3,2)}">￥23.56</span></td>

消息表达式#{},在resources文件夹下创建messages.properties文件,然后里面写key,value形式的键值对,chinese后面的那是中文的unicode码,就是要想读取中文的话必须转为unicode码才可以,也可以在值的中间写{0}表示占位符,动态的拼接字符串,unicode码以/开头,一个/表示一个汉字.

这个网址是中文转unicode码的http://tool.chinaz.com/tools/unicode.aspx

在key后面写小括号,然后里面写后台传过来的东西,就可以表示占位符的位置,来动态拼接字符串

消息表达式默认的路径就是在resources下面,文件是以messages开头的文件,在配置文件中可以修改读取的路径,这个消息表达式其实是配置国际化使用的在起这个messages名字的时候必须加,语言,加国家,以下划线隔开.默认是读取的当地的配置文件,也就是中文的,也可以写区域解析器来修改读取哪个配置文件,从而面对不同的人群展示不同的效果.

国际化效果,创建一个中文的配置文件一个英文的,让它们的key相同,命名必须规范,然后通过区域解析器来修改默认的语言.

国际化命名地址https://blog.csdn.net/kxj19980524/article/details/85468117

区域解析器配置,直接复制就可以不用修改,通过Locale.后面写哪个国家来修改默认语言.

package com.buba.configuration;

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.i18n.SessionLocaleResolver;

import java.util.Locale;

@SpringBootConfiguration
public class MessagesConfiguration {
    //区域解析器
    @Bean
    public LocaleResolver localeResolver(){
        SessionLocaleResolver slr = new SessionLocaleResolver();
        //设置默认语言
        slr.setDefaultLocale(Locale.US);
        return slr;
    }
}

如果只写个区域解析器的话是写死的,达不到动态的效果,接下来实现动态改变语言的效果.在controller中写个转换语言的方法,前台传过来请求,带上转换成什么语言的参数

@GetMapping("/changeLang")
public String changeLang(String lang, HttpServletRequest request, HttpServletResponse response){
    LocaleResolver localeResolver = RequestContextUtils.getLocaleResolver(request);
    if("zh".equals(lang)){
        localeResolver.setLocale(request,response, Locale.CHINA);
    }else if ("en".equals(lang)){
        localeResolver.setLocale(request,response,Locale.US);
    }
    String referer = request.getHeader("referer");//上次请求的路径
    return "redirect:"+referer;
}

在前台页面里使用@{}链接表达式来获取上下文路径,也就是项目名,写法就是 th:href开头里面写@{}表示上下文路径,里面写具体controller路径,传参的时候使用小括号传参.多个参数用逗号分割并且加单引号如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
    <a th:href="@{/thymeleaf/changeLang(lang='zh',name='康骁将')}">中文</a>|||<a th:href="@{/thymeleaf/changeLang(lang=en)}">english</a>
    <p><span th:text="#{username}"></span></p>
</body>
</html>

就实现这种点哪种语言出来相对应的语言了

片段表达式,就相当于jsp中引用另一个jsp的内容

创建一个html使用th:fragment="copyright"这个标签来声明一个判断,名字随便起.

然后再另一个html中,使用th:include="index2::copyright"来调用,里面的值第一个是要引用html页面的名字,第二个参数是片段的名字.

有三种引用的方式3.0版本前只能使用前两种,3.0版本后可使用所有的.

看源码,体会它们之前的区别

可以在pom中加这两句改版本

<thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.1.2</thymeleaf-layout-dialect.version>

这些是thymeleaf的默认配置,已经配置好的东西,比如访问路径什么的,所以在访问thymeleaf下面的html的时候不需要加文件夹名和后缀.想改的话自己加配置就可以了.

th:each循环遍历allUser是后台传的集合,user为起的别名

userStat.count这个是序列号变量名+Stat.count

th:remove="all-but-first"使用这个的原因是让后台人员看不到前台的数据,但是也不能把这些数据删了以免前台人员看不到数据了.

条件判断th:switch,跟java一样,最后一个*表示else

在thymeleaf中使用字符串需要使用单引号,也可以直接进行加减判断,在双引号中只能使用表达式,不能表达式字符串混合使用,如果想字符串拼接,需要使用|这个符合或者单引号拼接字符串,剩下的都简单看一下就可以了.

th:text的作用是替换标签中间的内容,

th:if的作用是如果正确,就输出标签里的内容

th:text th:if 这两个混合使用的话,就是如果if里面的正确,那么就执行text然后替换标签里的内容

th:class 这里配合三目运算符,如果正确就在该标签上加class样式

<p><span th:text="'#{username}'"></span></p>
<p th:text="2019+1"></p>
<p th:text="2019-1"></p>
<p th:text="2*2"></p>
<p th:text="9/3"></p>
<p th:text="9%4"></p>
<div th:if="false" th:text="kxj"></div>

<p th:text="|Welcome to our application,kxj#{username}|"></p>
<p th:text="'Welcome to our application,kxj'+#{username}"></p>

<p th:text="true and false">and</p>
<p th:text="true or false">and</p>
<p th:text="!true">and</p>
<p th:text="a">and</p>


<p th:if="1>2">and</p>
<p th:if="1<2">and</p>
<p th:if="1>=2">and</p>
<p th:if="1<=2">and</p>

<p th:if="1 lt 2">and</p>
<p th:if="1 gt 2">and</p>
<p th:if="1 le 2">and</p>
<p th:if="1 ge 2">and</p>
<p th:if="1 eq 2">and</p>


<p><span th:class="true ? 'green' :' red'">样例一</span></li></p>
<p><span th:class="true ? 'green'">样例二</span></li></p>

<p><span th:class="false ? 'green' :' red'">样例一</span></li></p>
<p><span th:class="false ? 'green'">样例二</span></li></p>

th:text

th:object

th:href

th:src

th:action

th:fragment

th:if

th:class

th:incloud

th:insert

th:replace

th:utext 支持html标签,自动转义html标签

kxj19980524

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
springboot之如何使用thymeleaf

thymeleaf它的好处就是html形式的文件,美工可以直接打开,后台人员打开的是动态的,可以同时开发,还有html格式的文件符合SEO(搜索引擎优化),可以更好的进行搜索排名.thymeleaf它是基于OGNL表达式的,在它的官网上有取值的方式${...}表达式实际上是在上下文中包含的变量映射上执行的OGNL（对象 - 图形导航语言）表达式。https://www.thymelea...
复制链接

扫一扫