精华内容
下载资源
问答
  • Thymeleaf

    2021-02-26 22:56:09
    一、引入Thymeleaf

    一、SpringBoot整合Thymeleaf
    1.加入依赖

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

    2.创建templates目录,在templates中创建html文件
    3.在html中引入thymeleaf的命名空间

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

    4.创建controller提供一个访问的方法

    @Controller
    public class HelloController {
        @RequestMapping("/hello")
        public String hello(Model model){
            model.addAttribute("mgs","hello thymeleaf");
            return "hello";
        }
    }
    

    5.在thymeleaf模板中取值

    <!DOCTYPE html>
    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div th:text="${mgs}"></div>
    </body>
    </html>
    

    二、Thymeleaf国际化

    使用#读取配置文件中的内容,一般用于Thymeleaf国际化
    在这里插入图片描述
    在这里插入图片描述三、变量获取语法
    1.controller

    @RequestMapping("/hello1")
        public String hello1(Model model){
            User user =new User("胖胖",18);
            user.setRole(new Role("程序员"));
            model.addAttribute("user",user);
            return "hello";
        }
    

    2.在thymeleaf模板取值

    <p th:text="${'姓名:'+user.name +' 年龄:'+user.age + ' 职业:'+user.role.roleName}"></p>
    

    四、Thymeleaf变量中实用的对象
    1.日期Dates

    model.addAttribute("now",new Date());
    
    <p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
    

    2.数字

    model.addAttribute("number",0.02524);
    
    <p th:text="${#numbers.formatPercent(number,2,2)}"></p>
    

    3.字符串Strings
    1)以某种字符拼接成字符串

    model.addAttribute("strArray",new String[]{"aa","bb","cc"});
    
    <p th:text="${#strings.arrayJoin(strArray,'-')} "></p
    

    2)截取字符串

    model.addAttribute("str","hellospringboot");
    
    <p th:text="${#strings.substring(str,3,5)} "></p>
    

    3)拆分字符串

    model.addAttribute("strs","aa-bb-cc");
    
    <p th:text="${#strings.listSplit(strs,'-')} "></p>
    

    五、Thymeleaf变量中selections

    @RequestMapping("/hello1")
        public String hello1(HttpSession session){
            User user =new User("胖胖",18);
            user.setRole(new Role("程序员"));
            session.setAttribute("user",user);
            return "hello";
        }
    

    第一种形式

    	<div th:object="${session.user}">
            <p>姓名: <span th:text="*{name}">Sebastian</span>.</p>
            <p>年龄: <span th:text="*{age}">Pepper</span>.</p>
            <p>职业: <span th:text="*{role.roleName}">Saturn</span>.</p>
        </div>
    

    第二种形式

    	<div>
            <p>姓名: <span th:text="${session.user.name}">Sebastian</span>.</p>
            <p>年龄: <span th:text="${session.user.age}">Pepper</span>.</p>
            <p>职业: <span th:text="${session.user.role.roleName}">Saturn</span>.</p>
        </div>
    

    六、URL地址解析语法
    controller

     @RequestMapping("/myUrl")
        public String myUrl(){
            return "myUrl";
        }
    

    thymeleaf模板

    <a href="details.html"
       th:href="@{http://localhost:8080/gtvg/order/details(orderId=${3})}">view</a>
    
    <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
    <a href="details.html" th:href="@{/order/details(orderId=${3})}">view</a>
    
    <!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
    <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${3})}">view</a>
    </body>
    

    配置文件指定contextPath

    server:
      servlet:
        context-path: /gtvg
    

    七、Thymeleaf基本语法

    	<!--字符串-->
        <span th:text="'The name of the user is ' + ${user.name}"/><br>
        <span th:text="|Welcome to our application, ${user.name}!|"/><br>
        <span th:text="'Welcome to our application, ' + ${user.name} + '!'"/><br>
        <span th:text="${user.name} + ' ' + |${user.age}, ${user.role.roleName}|"/>
        <hr>
        <!--数字-->
        <div th:text="${user.age} % 2 == 0"/>
        <div th:text="${user.age % 2 == 0} "/>
        <hr>
        <!--比较 age是否大于1-->
        <div th:if="${user.age} > 1">
            <span th:text="'Execution mode is ' + ( (${user.name} == '胖胖')? 'yes' : 'no')"/>
        </div>
    

    八、迭代Ineration

    <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <!--iterStat 状态变量-->
        <!--even/odd 当前循序是否是偶数/奇数 -->
        <tr th:each="users,iterStat : ${users}" th:class="${iterStat.odd}? 'odd'">
            <td th:text="${iterStat.index}"></td>
            <td th:text="${users.name}"></td>
            <td th:text="${users.age}"></td>
        </tr>
    

    九、Condition中的if

    <tr th:each="users: ${users}">
            <td th:text="${users.name}"></td>
            <td th:text="${users.age}"></td>
            <td>
                <span th:text="${users.role==null?'-':users.role.roleName}"></span>
                <a th:href="@{/user/roleDetail}"
                   th:if="${users.role!=null}">view</a>
            </td>
        </tr>
    
    展开全文
  • thymeleaf

    2021-01-29 23:05:48
    1. thymeleaf简介 Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. 现代化、服务端...

    1. thymeleaf简介

    Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text.
    现代化、服务端Java模板引擎

    2. 基本语法

    2.1 表达式

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

    2.2 字面量

    • 文本值: ‘one text’ , ‘Another one!’ ,…
    • 数字: 0 , 34 , 3.0 , 12.3 ,…
    • 布尔值: true , false
    • 空值: null
    • 变量: one,two,… 变量不能有空格

    2.3 文本操作

    字符串拼接: +
    变量替换: |The name is ${name}|

    2.4 数学运算

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

    2.5 布尔运算

    • 运算符: and , or
    • 一元运算: ! , not

    2.6 比较运算

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

    2.7 条件运算

    If-then: (if) ? (then)
    If-then-else: (if) ? (then) : (else)
    Default: (value) ?: (defaultvalue)

    2.8 特殊操作

    无操作: _

    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}">
    

    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>
    

    6. 属性优先级

    在这里插入图片描述

    3. SpringBoot使用thymeleaf

    3.1 引入Starter

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

    3.2 自动配置好了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
    

    3. 页面开发

    <!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>
    
    展开全文
  • Thymeleaf 简易教程

    2021-06-11 02:32:29
    Thymeleaf 简易教程git clone https://github.com/codergege/springmvc-thymeleaf-demo.gitcd springmvc-thymeleaf-demo./gradlew appRun我没在 windows 中试过... SpringMVC 中整合 Thymeleaf首先要加入 thymeleaf ...

    Thymeleaf 简易教程

    git clone https://github.com/codergege/springmvc-thymeleaf-demo.git

    cd springmvc-thymeleaf-demo

    ./gradlew appRun

    我没在 windows 中试过, 如果运行不起来, 看源码吧 ...

    1. SpringMVC 中整合 Thymeleaf

    首先要加入 thymeleaf 依赖. 如果你用 gradle, 加入这样的依赖就可以了:

    // thymeleaf 视图

    compile group: 'org.thymeleaf', name: 'thymeleaf-spring4', version: thymeleafVersion

    version 那里可以换成自己想用的版本.

    Demo 项目中使用 gradle + springmvc + thymeleaf

    根据需要可以将 gradle 换成 maven.

    三个必须配的 bean.

    Demo 项目中使用 JavaConfig 的方式, 你也可以使用 xml 方式配置.

    @Configuration

    public class ThymeleafConfig implements ApplicationContextAware {

    private static final String UTF8 = "UTF-8";

    private ApplicationContext applicationContext;

    @Override

    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {

    this.applicationContext = applicationContext;

    }

    /* **************************************************************** */

    /* THYMELEAF-SPECIFIC ARTIFACTS */

    /* TemplateResolver

    /* **************************************************************** */

    @Bean

    public SpringResourceTemplateResolver templateResolver(){

    // SpringResourceTemplateResolver automatically integrates with Spring's own

    // resource resolution infrastructure, which is highly recommended.

    SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();

    templateResolver.setApplicationContext(this.applicationContext);

    templateResolver.setPrefix("/WEB-INF/templates/");

    templateResolver.setSuffix(".html");

    // HTML is the default value, added here for the sake of clarity.

    templateResolver.setTemplateMode(TemplateMode.HTML);

    // Template cache is true by default. Set to false if you want

    // templates to be automatically updated when modified.

    // Template 缓存, 如果设置为 false, 那么当 templates 改变时会自动更新

    templateResolver.setCacheable(false);

    return templateResolver;

    }

    @Bean

    public SpringTemplateEngine templateEngine(){

    // SpringTemplateEngine automatically applies SpringStandardDialect and

    // enables Spring's own MessageSource message resolution mechanisms.

    SpringTemplateEngine templateEngine = new SpringTemplateEngine();

    templateEngine.setTemplateResolver(templateResolver());

    // Enabling the SpringEL compiler with Spring 4.2.4 or newer can

    // speed up execution in most scenarios, but might be incompatible

    // with specific cases when expressions in one template are reused

    // across different data types, so this flag is "false" by default

    // for safer backwards compatibility.

    templateEngine.setEnableSpringELCompiler(true);

    return templateEngine;

    }

    @Bean

    public ThymeleafViewResolver viewResolver(){

    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();

    viewResolver.setTemplateEngine(templateEngine());

    viewResolver.setCharacterEncoding(UTF8);

    return viewResolver;

    }

    }

    准备就绪, 可以愉快的玩耍 thymeleaf 了, let's go!

    2. 使用 th:text

    2.1 外部文本(消息)

    Welcome Message

    外部文本的概念: 外部文本抽取模板代码片段到模板文件外面, 使外部文本可以存在另一个

    文件中(比如 properties 文件). 通常把外部文本叫做消息(messages).

    Thymeleaf 通过 #{...} 语法来使用消息.

    在 springmvc 中使用消息要额外配置 ResourceBundleMessageSource 这个 bean:

    // 用于外部文本及国际化消息

    @Bean

    public ResourceBundleMessageSource messageSource() {

    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();

    messageSource.setBasename("messages");

    return messageSource;

    }

    这个 bean 会去 classpath 根目录下去寻找 messages 为基名的 properties 文件. 比如,

    messages.properties, messages_en_US.properties, messages_zh_CN.properties.

    th:text 外部文本会替换 p 标签内的内容.

    2.2 使消息不转换 html 标签

    如果我们在 messages.properites 中这么写: index.welcome=Welcome to SpringMVC

    那么 thymeleaf 会转成

    Welcome to <b>SpringMVC</b>

    这显然不是

    我们想要的. 这时候就可以用 th:utext(for “unescaped text)

    2.3 使用并显示变量

    变量概念: 存在 java web 上下文中的变量. 比如 request, session, application, page ...

    用 ${...} 语法可以用来显示变量. 花括号内使用的是 ognl 表达式语言.

    springmvc 中用 spel 语言代替 ognl 语言.

    3. 标准表达式语法

    概览:

    简单表达式

    变量表达式: ${...}

    选择变量表达式: *{...}

    消息表达式: #{...}

    URL 表达式: @{...}

    代码段表达式: ~{...}

    字面量

    文本字面量: 'some text'

    数值字面量: 0, 34, 3.0, 12.3

    布尔值字面量: true, false

    Null 值字面量: null

    Tokens 字面量: one, content, sometext, ...

    文本操作符

    字符串连接: +

    字面量替换: |The name is ${name}|

    算术操作符

    二元操作符: +, -, *, /, %

    减号(一元操作符): -

    布尔操作符(逻辑操作符)

    二元操作符: and, or

    非(一元操作符): !, not

    比较操作符

    比较: >, =, <= (gt, lt, ge, le)

    相等性: ==, != (eq, ne)

    条件操作符

    if-then: (if) ? (then)

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

    默认: (value) ?: (defaultvalue)

    特殊符号

    忽略 Thymeleaf 操作: _

    所有这些特性都可以组合, 嵌套使用.

    3.1 消息

    消息中也可以包含变量, 比如在 index.welcome 中, 想打印出时间:

    # 在 messages.properties 文件中用 {0}, {1}, {2}, ... 占位符

    index.welcome=Welcome to SpringMVC, time is: {0}

    那么在 index.html 模板文件中就可以这样写:

    Welcome message

    其中 ${date} 就像一个参数那样被传进去了.

    3.2 变量

    变量表达式 ${...} 用的是 ognl(对象图导航语言). 在 springmvc 中用 spel(spring 表达式语言)

    代替. 其实两者在大部分情况下用法是相同的.

    Ognl, spel 不在本文范围, 不展开讨论了.

    下面看几个例子就知道变量表达式的大部分用法了.

    3.2.1 内置基本对象

    下面是一些内置的基本对象, 可以用 # 符号直接使用

    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.

    使用例子:

    country:

    3.2.2 内置工具对象

    除了基本对象, thymeleaf 还提供了一组工具对象.

    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).

    例子, 格式化时间:

    time:

    3.3 选择变量表达式

    获取变量可以使用 ${...} 语法外, 还可以使用 *{...}, 称为选择变量表达式.

    选择变量表达式与变量表达式的不同之处在于, 如果前面有一个选择对象了, 那么用它获取

    这个选择对象的属性或方法时, 可以不写对象名.

    那么选择对象的概念是什么呢? 选择对象是用 th:object 表示的对象.

    看例子:

    选择变量表达式

    等价的变量表达式

    如果存在选择对象了, 那么在 ${...} 中也可以用 #object 来使用选择对象.

    ${...} 中使用 #object 引用 "选择对象"

    3.4 Link URL 表达式

    链接 URL 表达式语法是 @{...}

    有不同类型的 URLs:

    绝对路径 URLs: http://localhost:8888/demo/index

    相对路径 URLs:

    页面相对: user/login.html

    上下文相对: /employee/emps 注意用 / 打头, 会自动把上下文路径(比如 http://localhost:8888/demo) 路径加上去.

    服务器相对(不重要)

    协议相对(不重要)

    例子:

    返回首页

    去 demo1 页面

    去 demo1 页面, 带参数

    去 demo1 页面, 带 RESTful 风格参数

    中文会自动转码; 如果有多个参数,用逗号隔开.

    3.5 代码段(fragment)

    语法: ~{...}

    最常见的用法是与 th:insert 或 th:replace 配合使用. 例如:

    3.6 字面量

    3.6.1 文本字面量

    很简单, 用单引号包裹起来就是一个文本字面量了. 文本字面量可以包含任意字符, 但是如

    果想包含 ' , 得用 \ 进行转意.

    页面上显示效果:

    Any characters,
    Let's go!

    可以看到
    不会被 html 解析, 按字面量显示了!

    3.6.2 数字字面量

    今年是

    明年是

    页面显示效果:

    今年是 2017

    明年是 2018

    3.6.3 布尔值字面量

    布尔值字面量直接用 true, false 就可以了.

    条件是真, div 内会被解析, 内容会显示
    条件是假, 这个 div 元素不会被解析, 所以不会显示

    == 可以放在 {} 内部, 这种情况下, 表达式计算用的是 ognl/spel 引擎. 条件是真, div 内会被解析, 内容会显示

    页面显示效果:

    条件是真, div 内会被解析, 内容会显示

    == 可以放在 {} 内部, 这种情况下, 表达式计算用的是 ognl/spel 引擎. 条件是真, div 内会被解析, 内容会显示

    注意看第二个 div, th:if 返回 false 后, 这个 div 元素就不会在页面中存在了.

    第三个 div, == 放在了 {} 内部, 此时整个 {} 内的表达式用 ognl/spel 引擎计算; 如果

    == 放在外部, 那么 thymeleaf 引擎负责计算是否相等.

    3.6.4 null 字面量

    会显示
    用 ognl/spel 引擎, 会显示

    页面显示效果:

    会显示

    用 ognl/spel 引擎, 会显示

    3.6.5 字面量 tokens

    数值, 布尔值, null 实际上是 tokens 字面量的特别情况.

    Tokens 字面量允许省略单引号, 只要符合: 由 A-Z, a-z, 0-9, 方括号([, ]), 点(.), 连字符(-),

    下划线(_) 组成.

    所以, 没有空格, 逗号等等.

    ...
    ...

    3.7 连接字符串

    文本, 不管是文本字面量还是通过 ognl/spel 计算出来的文本, 都能用 + 操作符连接.

    3.8 字面量替换

    使用字面量替换, 可以省去 '...' + '...' 这种麻烦. 语法是 |...|

    |...| 内部只允许使用变量表达式, 不能有其他的 '...' 字面量, 布尔值数值字面量, 以及

    条件表达式等等.

    3.9 算术操作符

    是奇数

    是偶数

    注意 th:with 的作用是声明一个局部变量. 这个局部变量的作用域是 声明时的元素及其

    子元素.

    所以如果放在 声明 isOdd 变量的 div 外面, isOdd 变量就不存在了.

    3.10 比较与相等操作符

    至少有 3 个部门

    3.11 条件表达式与默认表达式

    条件表达式由 3 个部分组成, condition, then, else. 每个部分自身又是一个表达式, 即

    它们分别可以用变量(${...}, *{...}), 消息(#{...}), URLs(@{...}), 字面量等来

    表示.

    3.12 No-Op 操作符(_)

    No-Op 操作符指明期待的表达式结果不做任何事情. 比如说 th:text 中最后计算结果是 _

    那么 th:text 元素根本就不会生成.

    这里的内容不会被 th:text 替换

    没有指定电子邮箱

    3.13 数据转换与格式化

    Thymeleaf 的变量表达式(${...}, *{...})使用 {{...}} 来表示需要进行转换. 允许我

    们使用自定义的数据转换服务来转换表达式返回结果.

    使用 thymeleaf-spring3 和 thymeleaf-spring4 的话, 会自动调用 spring 的 Conversion

    Service.

    3.14 预处理表达式

    用双下划线 __...__ 包裹普通的表达式就可以.

    4. 设置属性值

    本章学习 thymeleaf 如何设置或修改 html 元素属性.

    4.1 设置任意属性 th:attr

    可以用 th:attr 来设置任意属性.

    4.2 设置指定属性

    一般 th:attr 很少会用到, 而是会直接使用指定的 th:*.

    比如已经用过的 th:href, th:text, th:value, th:action ...

    几乎所有的 html 元素属性都有对应的 th:* 版本.

    4.3 追加属性

    可以使用 th:attrappend, th:attrprepend 来追加(不是替换)属性值.

    这个不常用.

    但是 th:classappend 比较常用:

    aaaaa

    aaaaa

    4.4 固定值布尔属性

    典型代表就是 checkbox, radio 中的 checked 属性了.

    可以使用 th:checked 来设置, 如果表达式返回 true, checked 就被设置, 返回 false,

    checked 属性就不会加上去.

    4.5 任意属性处理器

    th:* 中, * 如果不是 html 中的属性, 也会当成属性加进去.

    通过查看页面源码, 可以看到:

    5. 迭代

    5.1 迭代初步

    使用 th:each

    th:each 用起来很方便, 就像 java 中的 for 循环一样.

    for(Employee emp: employees) {

    // Do something

    }

    在 thymeleaf 中使用迭代太方便了! 回想 jstl 那些坑爹的标签, 泪都留下来...

    可以用 th:each 迭代的 java 类型

    th:each 不仅仅可以对 java.util.List 类型迭代, 实际上大部分的 java 集合类型都可

    以使用它来迭代.

    实现了 java.util.Iterable 接口的对象

    实现了 java.util.Enumeration 接口的对象

    实现了 java.util.Iterator 接口的对象, 不会一次性读入内存, 返回一个读一个.

    实现了 java.util.Map 接口的对象, 这时候迭代的值是 java.util.Map.Entry.

    任何数组

    5.2 保存迭代状态

    th:each 还提供了一个变量可以保存迭代状态. 用法是 th:each="emp, status: ${employees}"

    状态变量保存了以下数据:

    index 属性, 0 开始的索引值

    count 属性, 1 开始的索引值

    size 属性, 集合内元素的总量

    current 属性, 当前的迭代对象

    even/odd 属性, boolean 类型的, 用来判断是否是偶数个还是奇数个

    first 属性, boolean 类型, 是否是第一个

    last 属性, boolean 类型, 是否是最后一个

    看例子:

    • 编号

      姓名

      性别

      生日

      部门

      编辑

      删除

      当前迭代状态

    • 编辑

      删除

    也可以不显式声明 status 变量, thymeleaf 会自动创建一个, 状态变量的名称是你声明的

    变量加上 Stat, 比如上面的例子 emp: ${emplopyees} 会创建一个 empStat 的状态变量

    6. 控制表达式

    6.1 if 和 unless

    th:unless 是 th:if 的相反条件, 所以只用 th:if 就可以了.

    th:if 如果返回 true, 其所在的 html 元素会被 thymeleaf 解析. 返回 false, 就当这

    个 html 元素不存在了.

    不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false.

    规则如下:

    值是非 null:

    boolean 类型并且值是 true, 返回 true

    数值类型并且值不是 0, 返回 true

    字符类型(Char)并且值不是 0, 返回 true

    String 类型并且值不是 "false", "off", "no", 返回 true

    不是 boolean, 数值, 字符, String 的其他类型, 返回 true

    值是 null, 返回 false

    看例子:

    todo 显示 employees 列表

    这里不会显示

    6.2 switch 语句

    使用 th:switch 然后在子元素中 th:case 进行选择. 默认是 th:case="*".

    1 个

    2 个

    3 个

    很多个

    到此为止, 使用 thymeleaf 的大部分场景都涉及到了. 还有 fragment 部分看 demo 项目吧.

    more todo ...

    展开全文
  • Thymeleaf实用实例

    2021-01-19 19:08:07
    之前一直使用Freemarker,对Thymeleaf了解但是不熟悉,最近因为其他项目组他们要快速搭建后台,使用了一个三方的框架用到了Thymeleaf,所以进一步了解了一些。 发现Thymeleaf更加像前端的模板语言,所以对静态页面有...

    1. 简介

    之前一直使用Freemarker,对Thymeleaf了解但是不熟悉,最近因为其他项目组他们要快速搭建后台,使用了一个三方的框架用到了Thymeleaf,所以进一步了解了一些。

    发现Thymeleaf更加像前端的模板语言,所以对静态页面有更好的兼容性,就是,如果是Freemarker模板文件,浏览器是解析不了的,会直接出错。而使用Thymeleaf模板文件,如果没有解析,浏览器也能解析,基本样式基本没有问题,只是不能解析数据。

    因为Thymeleaf使用属性,少了很多像Freemarker的tag,这样语法上看起来也更加简介一些。

    这篇文章主要记录一下Thymeleaf中一些常用的功能,以便于看到这些东西知道是什么意思。

    2. 开始

    在SpringBoot中使用Thymeleaf非常简单,只需要添加下面的依赖就可以了:

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

    然后,基本就和使用JSP一样,除了语法不同。

    SpringBoot Thymeleaf默认配置会去classpath的templates去找模板文件,和Freemarker默认的后缀ftl不同,Thymeleaf直接使用的html后缀,就是为了就算不能解析,浏览器也能识别。

    接下来添加一个Controller:

    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    @RequestMapping("/data")
    public class DataController {
    
        @RequestMapping("/index")
        public String show(Model model){
            model.addAttribute("id","10001");
            model.addAttribute("name","Tim");
            model.addAttribute("userhome","<a style='color:red' href='/user/10001'>Tim</a>");
            return "index";
        }
    }
    

    然后添加一个index.html文件:

    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Index</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
    <div th:text="'用户ID:' + ${id}"/>
    <div th:text="'用户名称:' + ${name}"/>
    <div th:utext="'用户主页:' + ${userhome}"/>
    </body>
    </html>
    

    如果你对模板文件熟悉,不管是前端模板,还是后端模板,基本一看就能大致猜出上面的模板是什么意思。

    Thymeleaf通过th:text来绑定标签的文本属性,就是给标签设置text内容。其中th是Thymeleaf的缩写,text表示文本属性。

    除了使用th:text,还可以使用th:utext,th:utext最重要的一点是可以设置带html标签的text

    在这里插入图片描述

    3. list遍历

    @RequestMapping("/list")
    public String list(Model model) {
        List<Integer> ids = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            ids.add(i) ;
        }
        model.addAttribute("ids", ids);
        return "collection/list";
    }
    
    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>List</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
    <div>
        <table>
            <tr><td>编号</td><td>ID</td><td>是否是第偶数个元素</td><td>是否是第奇数个元素</td></tr>
            <tr th:each="id,memberStat:${ids}">
                <td th:text="${memberStat.index + 1}"/>
                <td th:text="${id}"/>
                <td th:text="${memberStat.even}"/>
                <td th:text="${memberStat.odd}"/>
            </tr>
        </table>
    </div>
    </body>
    </html>
    

    4. map遍历

    @RequestMapping("/map")
    public String map(Model model) {
        Map<Integer,String> map = new HashMap<>();
        for (int i = 0; i < 10; i++) {
            map.put(i,"VL" + i);
        }
        model.addAttribute("map", map);
        return "collection/map";
    }
    
    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Map</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
    <div>
        <table>
            <tr><td>编号</td><td>key</td><td>value</td><td>是否是第偶数个元素</td><td>是否是第奇数个元素</td></tr>
            <tr th:each="entry,memberStat:${map}">
                <td th:text="${memberStat.index + 1}"/>
                <td th:text="${entry.key}"/>
                <td th:text="${entry.value}"/>
                <td th:text="${memberStat.even}"/>
                <td th:text="${memberStat.odd}"/>
            </tr>
        </table>
    </div>
    </body>
    </html>
    

    5. if unless switch

    @RequestMapping("/ifel")
    public String ifel(Model model) {
        model.addAttribute("score", 89);
        return "tool/ifel";
    }
    
    <body>
    <div>
        <div th:if="${score ge 90}">
            A
        </div>
        <div th:if="${score lt 90 && score ge 80}">
            B
        </div>
        <div th:unless="${score ge 80}">
            C
        </div>
    </div>
    
    <div>
        <div th:switch="${score}">
            <div th:case="100">100</div>
            <div th:case="99">90</div>
            <div th:case="*">都不匹配</div>
        </div>
    </div>
    </body>
    </html>
    

    if是条件满足执行,unless不是else的意思,而是条件不满足执行。

    Thymeleaf支持switch,这样就避免了写多个if语句了。

    6. @

    用过JSP的朋友都知道,JSP的路径真是一点都不方便,要自己去拼接,虽然也可以直接添加拦截器、工具类去处理。

    Thymeleaf提供了@,然我们不用去拼接网站前缀,主要是处理上下文部分。

    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <a th:href="@{/user/info}">访问controller方法</a>
    

    7. th:object

    th:object提供了一种省略对象前缀的访问方式,看实例就清楚。

    @RequestMapping("/info")
    public String userInfo(Model model) {
        User user = new User();
        user.setId(10001);
        user.setName("轩辕雪");
        user.setAge(25);
        model.addAttribute("user", user);
        return "user/info";
    }
    
    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>用户信息</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
    <div>
        <div th:text="'用户ID:' + ${user.id}"/>
        <div th:text="'用户姓名:' + ${user.name}"/>
        <div th:text="'用户年龄:' + ${user.age}"/>
    </div>
    
    <div th:object="${user}">
        <div th:text="'用户ID:' + *{id}"/>
        <div th:text="'用户姓名:' + *{name}"/>
        <div th:text="'用户年龄:' + *{age}"/>
    </div>
    </body>
    </html>
    

    上面的两种绑定方式是完全等价的。

    8. 工具方法

    @RequestMapping("/tool")
    public String tool(Model model) {
        Set<String> set = new HashSet<>() ;
        set.add("A");
    
        Map<String,Integer> map = new HashMap<>();
        map.put("a",1);
    
        List<Integer> list = new ArrayList<>() ;
        for (int i = 0 ; i < 10 ; i ++) {
            list.add(i) ;
        }
    
        Integer[] array = new Integer[list.size()];
        list.toArray(array);
    
        model.addAttribute("list", list) ;
        model.addAttribute("set", set) ;
        model.addAttribute("map", map) ;
        model.addAttribute("array", array) ;
        model.addAttribute("now", new Date()) ;
        return "tool/tool" ;
    }
    
    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Index</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
    <div>日期:</div>
    <div>
        <div th:text="${#dates.millisecond(now)}"/>
        <div th:text="${#dates.format(now,'yyyy-MM-dd')}"/>
        <div th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"/>
    </div>
    
    <div>字符串:</div>
    <div>
        <div th:text="${#strings.isEmpty('')}"/>
        <div th:text="${#strings.replace('$199','$','')}"/>
        <div th:text="${#strings.toUpperCase('love')}"/>
        <div th:text="${#strings.trim('   I Love You        ')}"/>
    </div>
    
    <div>其他:</div>
    <div>
        <div th:text="${#sets.contains(set,'a')}"/>
        <div th:text="${#lists.size(list)}"/>
        <div th:text="${#maps.containsKey(map, 'a')}"/>
        <div th:text="${#arrays.length(array)}"/>
        <div th:text="${#aggregates.sum(array)}"/>
        <div th:text="${#numbers.formatInteger(3.1415926,3,'POINT')}"/>
        <div th:text="${#numbers.formatDecimal(3.1415926,3,'POINT',2,'COMMA')}"/>
        <div th:text="${#numbers.formatPercent(3.1415926, 3, 2)}"/>
    </div>
    </body>
    </html>
    

    注意dates的millisecond只是获取毫秒,而不是时间戳。

    这样的工具类方法还有一大堆,具体可以参考官方的:Thymeleaf工具类

    9. include replace insert

    在处理页面的时候,经常需要引入一些公共页面,Thymeleaf中我们可以使用include实现。

    和JSP、Freemarker不同,Thymeleaf可以不导入整个页面,而是只导入这个页面中的某些片段(fragment)

    在页面中,我们可以通过下面的方式来定义片段:

    <div th:fragment="page"></div>
    

    通过下面的方式引入片段:

    <div th:include="pagefile::page"></div>
    

    include的有一些简写方式:

    <!--  "::"前面是模板文件名,后面是fragement的名称 -->
    <div th:include="template/pagefile::page"></div>
    
    <!-- 省略模板文件名,只有fragment名称,则加载本页面对应的fragment -->
    <div th:include="::page"></div>
    
    <!-- 只写模板文件名,省略fragment名称,则加载整个页面 -->
    <div th:include="template/nav"></div>
    

    来一个示例看一看,加强理解:

    @RequestMapping("/myinclude")
    public String myinclude(Model model) {
        return "user/myinclude";
    }
    

    定义一个公共的包含文件include.html:

    <head th:fragment=header(title)>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title th:text="${title}"></title>
        <link rel="shortcut icon" href="favicon.ico">
    </head>
    
    <div th:fragment="footer">
        <script th:src="@{/js/jquery.min.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
    </div>
    
    <div clss="fragment-content-class" th:fragment="content(first,second)">
        <div th:text="'第一个参数:' + ${first} + '  第二个参数:' + ${second}"></div>
    </div>
    

    导入页面:

    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="common/include :: header('myinclude-title')" />
    </head>
    <body>
    
    <div class="page-content-class" th:insert="common/include :: content('Hello','insert')"></div>
    <div class="page-content-class" th:include="common/include :: content('Hello','include')"></div>
    <div class="page-content-class" th:replace="common/include :: content('Hello','replace')"></div>
    
    <th:block th:insert="common/include :: footer" />
    </body>
    </html>
    

    Thymeleaf渲染之后的页面:

    <!DOCTYPE HTML>
    <html>
    <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title>myinclude-title</title>
        <link rel="shortcut icon" href="favicon.ico">
    
    </head>
    <body>
    
    <div class="page-content-class"><div clss="fragment-content-class">
        <div>第一个参数:Hello  第二个参数:insert</div>
    </div></div>
    <div class="page-content-class">
        <div>第一个参数:Hello  第二个参数:include</div>
    </div>
    <div clss="fragment-content-class">
        <div>第一个参数:Hello  第二个参数:replace</div>
    </div>
    
    <div>
        <script src="/js/jquery.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
    </div>
    </body>
    </html>
    

    我们可以简单的小结一下:

    1. th:insert:保留自己和th:fragment的主标签
    2. th:replace:只保留th:fragment的主标签
    3. th:include:只保留自己的主标签

    10. 处理本地文件

    除了在Web中使用,我们也当做一个本地工具使用:

    import org.thymeleaf.TemplateEngine;
    import org.thymeleaf.context.Context;
    import org.thymeleaf.templateresolver.FileTemplateResolver;
    
    import java.util.HashMap;
    import java.util.Map;
    
    public class ThymeleafHelper {
    
        private static TemplateEngine templateEngine;
    
        static {
            templateEngine = new TemplateEngine();
            FileTemplateResolver resolver = new FileTemplateResolver();
            resolver.setPrefix("G:\\tmp\\thymeleaf\\");
            resolver.setCharacterEncoding("UTF-8");
            resolver.setSuffix(".html");
            templateEngine.setTemplateResolver(resolver);
        }
    
        public static String redering(String templateFileName, Map<String,Object> data) {
            Context context = new Context();
            context.setVariables(data);
            return templateEngine.process(templateFileName, context);
        }
    
        public static void main(String[] args) {
            HashMap<String, Object> data = new HashMap<>();
            data.put("id","10001");
            data.put("name","Tim");
            data.put("userhome","<a style='color:red' href='/user/10001'>Tim</a>");
            System.out.println(redering("index",data));
        }
    }
    

    可能需要单独引入ognl包:

    <dependency>
        <groupId>ognl</groupId>
        <artifactId>ognl</artifactId>
        <version>3.2.18</version>
    </dependency>
    
    展开全文
  • 集成Thymeleaf模板 2.1 了解 Thymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发 模板引擎是一个技术名词,是跨领域跨平台的概念,在 Java 语言体系下有模板引擎,在 C#、PHP 语言体系下也有模板引擎,...
  • Thymeleaf 教程

    2021-06-06 19:26:46
    Thymeleaf 是一个服务器端 Java 模板引擎,能够处理 HTML、XML、CSS、JAVASCRIPT 等模板文件。Thymeleaf 模板可以直接当作静态原型来使用,它主要目标是为开发者的开发工作流程带来优雅的自然模板,也是 Java 服务器...
  • SpringBoot整合Thymeleaf 一:Thymeleaf thymeleaf 英文寓意为 百里香的叶子 Thymeleaf 与其它模板引擎相比,最大的特点是   1)能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用。便于前后端...
  • day60:thymeleaf

    千次阅读 2021-12-02 00:52:30
    --thymeleaf依赖包--> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.0.11.RELEASE</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> ...
  • Thymeleaf 页面静态化模板生成
  • Thymeleaf 3学习笔记

    2021-03-07 04:55:04
    Thymeleaf 目前最新版本3.0Thymeleaf作为Spring-Boot官方推荐模板引擎,而且支持纯HTML浏览器展现(模板表达式在脱离运行环境下不污染html结构).是时候了解一番了。安装与初始化配置与Spring集成org....
  • Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以正确显示在浏览器中的HTML,也可以作为静态原型工作,从而在开发团队中进行更强大的协作。随着Spring框架的模块,与您最喜欢的工具的集成,以及...
  • 文章目录1 引入Thymeleaf1.1 Thymeleaf是什么?1.2 Thymeleaf可以处理什么样的模板?1.3 方言:标准方言2 一个很棒的虚拟杂货店设计2.1 一个杂货店的网站2.2 创建和配置模板引擎模板解析器模板引擎3 使用文本3.1 多语言...
  • 集合的遍历10.thymeleaf如何定义变量11.字面量12.字符串拼接方式13.比较运算符14.逻辑运算符15.三目运算符16.分支结构,th:if,th:unless,th:switch,th:case17.thymeleaf的一些常用的内置对象18.内联 1.pom.xml <?...
  • Thymeleaf入门到吃灰

    2020-12-20 11:16:34
    Thymeleaf官网部分翻译:反正就是各种好Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎Spring官方支持的服务的渲染模板中,并不包含jsp。而是Thymeleaf和Freemarker等,而Thymeleaf与SpringMVC的...
  • 一、Thymeleaf简介 1、什么是ThymeleafThymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。是新一代 Java 模板引擎,它支持 HTML 原型,其文件后缀为“.html”,因此它可以直接被浏览器打开,此时浏览器...
  • springboot+shiro+thymeleaf整合 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jdbc</artifactId> </...
  • 史上最详 Thymeleaf 使用教程前言基础语法文本标签 th:text/th:utext字符串拼接*{...}和 ${...}表达式#{...}表达式~{...}片段表达式@{...}链接网址表达式条件判断 th:if/th:unlessswitchfor循环th:hrefth:classth:...
  • thymeleaf语法入门

    2020-12-21 22:10:19
    1.Thymeleaf简介 官方网站:https://www.thymeleaf.org/index.html Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎。 Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - HTML。可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,722
精华内容 37,888
关键字:

themeleaf