SpringBoot系列(六)集成thymeleaf详解版

SpringBoot系列(六)集成thymeleaf详解版

目录

  1. thymeleaf简介
  2. thymeleaf特点
  3. thymeleaf在SpringBoot的应用
  4. SpringBoot引入Thymeleaf
  5. controller配置
  6. thymeleaf页面测试编写
  7. 结果展示
  8. 其他thymeleaf语法
thymeleaf.png

1. thymeleaf简介

 1. Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

 2. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显示,也可以作为静态原型工作,从而可以在开发团队中加强协作。

 3. Thymeleaf拥有适用于Spring Framework的模块,与您喜欢的工具的大量集成以及插入您自己的功能的能力,对于现代HTML5 JVM Web开发而言,Thymeleaf是理想的选择-尽管它还有很多工作要做。

2. thymeleaf特点

 1. thymeleaf在有网络无网络的环境下都可以运行,所以可以直接在浏览器打开查看静态页面效果。它支持HTML原型,可以在HTML标签里面添加其他属性来实现数据渲染。

 2. thymeleaf具有开箱即用的特性,Thymeleaf是Spring boot推荐使用的模版引擎,直接以html显示,前后端可以很好的分离。

3. thymeleaf在SpringBoot的应用

 1. 国际化,渲染不同国家的语言

 2. 共同页面显示,比如统一异常页面处理,共同的页面处理

4. SpringBoot引入Thymeleaf

 新建一个Springboot web项目,然后添加以下依赖。

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

 然后在配置文件里面添加如下依赖。

spring:
  thymeleaf:
    cache: false 
    prefix: classpath:/templates/
    encoding: UTF-8 #编码
    suffix: .html #模板后缀
    mode: HTML #模板

配置说明:

cache这一行是将页面的缓存关闭,不然我们改变页面之后可能不能及时看到更改的内容,默认是true。

prefix是配置thymeleaf模板所在的位置。

encoding 是配置thymeleaf文档的编码,后面的就不说了

5. controller配置

 上面我们配置好了环境之后就可以创建一个controller文件夹,然后写一个controller,来测试我们的thymeleaf是否成功引入。顺便创建一个对象。
代码:

@Controller
public class ThymeleafController {

    @GetMapping("/getStudents")
    public ModelAndView getStudent(){
        List<Student> students = new LinkedList<>();
        Student student = new Student();
        student.setId(1);
        student.setName("全栈学习笔记");
        student.setAge(21);
        Student student1 = new Student();
        student1.setId(2);
        student1.setName("张三");
        student1.setAge(22);
        students.add(student);
        students.add(student1);
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("students",students);
        modelAndView.setViewName("students");
        return modelAndView;
    }
}

代码解释 :我们创建一个list,然后在list里面添加数据,一遍一次将数据传到页面使用。然后我们创建一个ModelAndView的对象,将list放入这个modeAndView对象中,第一个参数是需要放到model中的属性名称相当于是一个键,第二个是,是一个对象。然后利用setViewName方法,设置要跳转的页面或者说是将数据传到对应的页面

 最外层我们使用了一个 @Controller,这个注解是用来返回一个页面或者视图层的。

 当然,返回ModelAndView对象只是一种方法,还有其他的方法,比如说下面这样

@RequestMapping("/getString")
public String getString(HttpServletRequest request){
    String name = "全栈学习笔记";
    request.setAttribute("name",name);
    return "index.html";
}

利用http的request传值。
然后还有这样

@RequestMapping("/getModel")
public String getModel(Model model){
    model.addAttribute("key","这是一个键");
    return "index.html";
}

 去掉末尾的.html也可以,因为我们在配置文件里面设置了文件的格式为HTML文件。return的字符串都是对应的HTML文件的名称。

实体类代码如下:

/**
 * (Student)实体类
 *
 * @author 全栈学习笔记
 * @since 2020-04-14 11:39:10
 */
public class Student  {
    private static final long serialVersionUID = -91969758749726312L;
    /**
    * 唯一标识id
    */
    private Integer id;
    /**
    * 姓名
    */
    private String name;
    /**
    * 年龄
    */
    private Integer age;
    //省略get,set方法,自己加上
}

6. 页面编写

 写好代码就等页面了,在templates文件夹下面创建一个students.html文件,编写如下代码

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr th:each="student:${students}">
        <td th:text="${student.id}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.age}"></td>
    </tr>
</table>
</body>
</html>

 这里有一个很重要的事情就是,我们使用thymeleaf模板之前必须先引入thymeleaf,如下。

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

 这个很关键,不然你就用不了这个thymeleaf语法规则。

代码说明:你可以看到th:each 这个语法,是用来遍历的,类似于for循环,然后我们通过th:text 这个语法来渲染文字。

7.测试结果显示

 运行项目,浏览器输入localhost:8089/getStudents

QQ截图20200418161622.png

8.thymeleaf常用的语法

常用的语法:

<!-- 对象 -->
<div th:object="${student}">
    <p th:text="id"></p>
    <p th:text="name"></p>
    <p th:text="age"></p>
</div>
<!-- 逻辑判断 -->
th:if
th:else
<!-- 分支控制 -->
th:switch
th:case

<!--循环 -->
th:each
<!-- 运算 -->
<p th:text="${age}%2 == 0"></p>
<!-- 赋制value -->
th:value
<!-- 链接 -->
th:href

本期讲解就到这里,如果你觉得本文对你有用,可以点个赞,点个关注哦!下一期更精彩!wx search 全栈学习笔记!点个关注不迷路。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容