初学thymeleaf的笔记

发布于：2023-01-11 ⋅ 阅读:(376) ⋅ 点赞:(0)

1. thymeleaf

首先先介绍一下thymeleaf,它是一种模板引擎技术,它和javaweb中的jsp很相似,不过thymeleaf可以搭配springboot进行使用,将它结合springboot搭建个人的博客是一个不错的选择。
对于 thymeleaf的语法和之前接触的编程语言的语法差不多,如c,java等。
我是在准备搭建自己的博客的过程中的,发现一个项目使用到了thymeleaf,最终发现对于写个人博客这样的小型项目确实不错。
下面将通过一个简单的例子快速的将thymeleaf和springboot进行整合。

2.thymeleaf的第一个例子

  • 首先在ideal中创建一个普通的maven项目

  • 在pom.xml中导入thymeleaf的坐标

<dependency>
	<groupId>org.thymeleaf</groupId>
	<artifactId>thymeleaf</artifactId>
	<version>3.0.15.RELEASE</version>
</dependency>
  • 创建一个类
    在这里插入图片描述
    类中的代码如下,注意不要导错了包
package com.wei;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;

/**
 * @author weijiangquan
 * @date 2022/6/5 -13:41
 * @Description
 */
public class HelloThymeleaf {

    public static void main(String[] args) {
        //创建模板引擎
        TemplateEngine engine = new TemplateEngine();
        //准备模板
        String input = "<input type='text' th:value='hellothymeleaf'/>";
        //准备数据,使用Context
        Context context = new Context();
        //调用引擎,处理模板和数据
        String out = engine.process(input,context);
        System.out.println("结果数据:"+out);
    }
}

运行结果如下
在这里插入图片描述

3 模板使用数据

代码如下

package com.wei;

import org.junit.Test;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;

/**
 * @author weijiangquan
 * @date 2022/6/5 -13:49
 * @Description 模板使用数据
 */
public class MyTest {

    @Test
    public void test1(){
        TemplateEngine engine = new TemplateEngine();
        String inStr = "<input type='text' th:value='${name}'/>";
        Context context = new Context();

        context.setVariable("name","你好啊");  //setVariable 是设置变量的意思


        String process = engine.process(inStr, context);
        System.out.println("html="+process);

    }
}

在这里插入图片描述

4 使用模板文件

  • 首先先创建一个html文件
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" th:value="${name}"/>
</body>
</html>

编写测试类

   @Test
    public void test02(){
        TemplateEngine engine = new TemplateEngine();
        //读取磁盘中的模板文件
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        //设置引擎使用 resolver
        engine.setTemplateResolver(resolver);
        //指定数据
        Context context = new Context();
        context.setVariable("name","王五");
        //处理模板
        String html = engine.process("main.html", context);
        System.out.println("html="+html);

    }

在这里插入图片描述

5 使用模板文件

6 设置模板的前缀和后缀

  • 在resources资源目录下创建一个templates目录,在该目录下创建一个html文件
    在这里插入图片描述
    java的测试代码
    @Test
    public void test03(){
        TemplateEngine engine = new TemplateEngine();
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();

        resolver.setPrefix("templates/");  //设置前缀
        resolver.setSuffix(".html");      //设置后缀

        engine.setTemplateResolver(resolver);

        Context context = new Context();
        context.setVariable("name","小卫");

        engine.process("index",context);

        String html = engine.process("index",context);

        System.out.println(html);

    }

index.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" th:value="${name}"/>
</body>
</html>

在这里插入图片描述

7 springboot环境搭建

创建一个springboot项目
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

8 测试springboot中使用模板

  • 在appliacation.properties中加入如下内容
    在这里插入图片描述
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

测试代码

package com.wei.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

/**
 * @author weijiangquan
 * @date 2022/6/5 -14:40
 * @Description
 */

@Controller
public class HelloController {

    /**
     * @param model 可以存放数据,放入到request作用域
     * @return String 表示视图
     */
    @RequestMapping("/hello")
    public String hello(Model model, HttpServletRequest request){
        //添加数据

        // model.addAttribute("name","小王");
        request.setAttribute("name","张三");
        //指定模板视图
        return "index";
    }
}

在这里插入图片描述

html中的代码如下
在这里插入图片描述
启动项目之后,在浏览器中输入localhost:8080/hello进行访问
在这里插入图片描述

9 变量表达式的基本基本语法(常用)

目录结构如下

在这里插入图片描述

package com.wei.controller;

import com.wei.vo.School;
import com.wei.vo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @author weijiangquan
 * @date 2022/6/5 -16:47
 * @Description
 */

@Controller
public class ExpressController {

    @RequestMapping("/express_var")
    public String express_var(Model model){

        //添加简单基本类型
        model.addAttribute("myName","张三");
        model.addAttribute("myAge",20);
        //添加对象类型
        Student student = new Student();
        student.setId(1001);
        student.setAge(12);
        student.setEmail("wei@qq.com");
        student.setName("小张");
        student.sex = "男";

        //创建school对象
        School school = new School();
        school.setSchname("东京大学");
        school.setSchaddress("北京");
        student.setSchool(school);

        model.addAttribute("student",student);
        return "var1";
    }
}


package com.wei.vo;

/**
 * @author weijiangquan
 * @date 2022/6/5 -16:50
 * @Description
 */
public class Student {
    private Integer id;
    private String name;
    private String email;
    private Integer age;

    public String sex;


    private School school;

    public School getSchool() {
        return school;
    }

    public void setSchool(School school) {
        this.school = school;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", email='" + email + '\'' +
                ", age=" + age +
                '}';
    }
}


package com.wei.vo;

/**
 * @author weijiangquan
 * @date 2022/6/5 -17:19
 * @Description
 */
public class School{

    private String schname;
    private String schaddress;

    public String getSchname() {
        return schname;
    }

    public void setSchname(String schname) {
        this.schname = schname;
    }

    public String getSchaddress() {
        return schaddress;
    }

    public void setSchaddress(String schaddress) {
        this.schaddress = schaddress;
    }
}

在这里插入图片描述
在这里插入图片描述
var1.html

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
</head>
<meta charset="UTF-8">
<title>变量表达式</title>
<body>
    <p>获取简单数据类型的数据</p>
    <p th:text="${myName}"></p>
    <p th:text="${myAge}"></p>

    <br/>
    <p>对象类型的属性</p>
    <p th:text="${student.id}">id</p>
    <p th:text="${student.name}">name</p>
    <p th:text="${student.email}">email</p>
    <p th:text="${student.age}">age</p>

    <br>
    <div>性别: <span th:text="${student.sex}"></span></div>

    <br/>

    <div>
        学校名称:<span th:text="${student.school.schname}"></span>
    </div>

</body>
</html>

10 选择表达式

11 链接表达式 @{…}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>@{}链接地址</title>
</head>
<body>
    <p>链接表达式</p>
    <a th:href="@{queryStudent}">1.@{queryStudent}</a>
    <br/>
    <a th:href="@{./queryStudent}">2.  ./queryStudent</a>
    <br>
    <a th:href="@{../user/list}">3. ../queryStudent</a>
    <br>
    <a th:href="@{/user/home}">4. /user/home</a>
    <br>
    <a th:href="@{http://www.baidu.com}">5. http://www.baidu.com</a>
    <br>

</body>
</html>

链接表达式传递参数

在这里插入图片描述

12 标准表达式

12.1 文本

在这里插入图片描述
在这里插入图片描述

12.2 数字

数字文本就是:数字，算术运算也可用:+,-,*,/和%,表达式中的值可以进行比较>,<,>=和<=符号，以及和!=可以被用来检查是否相等。一些符合需要使用实体gt(>)，lt(),ge(>=),le(<=),not(!)。还有eq(),neq(!=)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

12.3 布尔

在这里插入图片描述

    @GetMapping("/bool")
    public String doBool(Model model){
        model.addAttribute("age",16);
        model.addAttribute("married",true);

        return "bool";
    }

12.4 null和""

模板中为null或"'就不会显示

13 设置属性值

属性 作用
th:text 计算其值表达式并将结果设置为标签的标签体
th:utext th:text 会对结果中特殊字符进行转义,th:utext不会
th:attr 为标签中任意属性设置,可以一次设置多个属性
th:* 为html指定的属性设值,一次设置一个

总结

上面通过一个例子将thymeleaf的基本使用和一些常用的语法进行了说明,如果想要知道更多关于thymeleaf的知识和用法,可以进行官网进行更加深入的学习。

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布