- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

SpringBoot2.0学习第三篇之整合thymeleaf模板引擎

西魏陶渊明发表于 2022/09/25 01:54:10 2022/09/25

【摘要】在Java开发中如果说要问最近几年最流行的Web开发框架是什么?可能只会有一个答案。那就是SpringBoot，造成这样的最大原因是，SpringBoot极大的简化了Web的开发流程，可以说是零配置搭建开...

在Java开发中如果说要问最近几年最流行的Web开发框架是什么?可能只会有一个答案。那就是SpringBoot，造成这样的最大原因是，SpringBoot极大的简化了Web的开发流程，可以说是零配置搭建开发环境。甚至web.xml的配置也没有了。使任何新手都可以在5分钟之内搭建一个Web项目，下面跟着小编来看看，如何在5分钟内搭建开放环境。

通读全文需要3分钟。

教程目录

SpringBoot2.0学习第三篇之整合thymeleaf模板引擎.md

目标是什么?

快速整合thymeleaf模板引擎
thymeleaf模板基础语法

开发环境

JDK1.8或更高版本
Maven
IntelliJ IDEA 开发工具

项目目录

|____resources
| |____templates
| | |____index.html
| | |____book.html
|____java
| |____hello
| | |____WebApplication.java
| | |____controller
| | | |____HelloController.java
| | | |____SyntaxDemoController.java
| | |____entities
| | | |____Book.java


  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

一. 快速整合thymeleaf视图模板引擎

  System.out.println(String.format("hello:%d", 1));
  System.out.println(String.format("hello:%s", "SpringBoot"));

  
 
  1
  2

首先我们先认识一下什么是视图模板引擎,其实简单的来看,以上代码就是一个模板引擎。何为模板引擎其实就是可以将不同数据类型,通过处理后,给添加到文本上。像下面这种%s就是String类型的占位符,%d是整型的占位符,而高级的一点的模板引擎是支持更多的语法,比如支持for循环，while循环，条件判断。就比如thymeleaf，或者是freemaker,或者是jsp之类的模板引擎都是支持的，那么为啥要在前面加一个视图模板引擎呢，是因为渲染的文本最终会被转换成html的格式，输出给客户端,客户端如果是浏览器访问,就会把文本直接渲染成可视化的方式展示给用户。

本文我们给大家演示的模板引擎是thymeleaf，他默认的模板文件是以.html的方式。
而上面所说的freemaker引擎,默认的模板文件是.ftl

在SpringBoot的配置文件中,如果不配置,默认就是下面这样写,当然我们也可以自定义模板文件的后缀,和模板文件所在的路径

默认模板文件后缀

spring.freemarker.suffix=.ftl
spring.thymeleaf.suffix=.html

  
 
  1
  2

默认模板文件路径

resources/templates

静态文件路径（不需要渲染的页面或者是css,js之类的放这个目录）

resources/static

好了,在知道以上这些知识储备后,我们就开始快速的整合thymeleaf吧！

首先添加依赖

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

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

添加视图模板文件

在resources/templates创建,index.html。注意因为我们整合的是thymeleaf所以我们的后缀要是.html。

如果要是整合freemarker那么我们文件名就要命名为index.ftl

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>软件编程指南: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<a href="https://www.toutiao.com/c/user/3686495601/#mid=1563737358895105"><img src="https://ws1.sinaimg.cn/large/006tKfTcgy1g0na8ceb0aj30uj0buwl1.jpg"></a>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

注意语法:

<p th:text="'Hello, ' + ${name} + '!'" />

添加控制器

可以看到在本节课程中,我们使用的是@Controller注解,而不是@RestController,那是因为本节我们是要需要视图模板引擎处理后才能将数据响应给客户端,而@RestController适合使用在不需要模板引擎处理,直接把数据响应给客户端的场景下。这里入参name是请求参数,Model和ModelAndView是自动注入进来的。

@Controller
public class HelloController {

  @GetMapping("/hello")
  public String greeting(@RequestParam(name = "name", required = false, defaultValue = "World") String name, Model model) {
    model.addAttribute("name", name);
    return "index";
  }
   @GetMapping("/hello2")
  public ModelAndView hello2(@RequestParam(name = "name", required = false, defaultValue = "World") String name, ModelAndView mv) {
    mv.setViewName("index");
    mv.addObject("name", name);
    return mv;
  }
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

当然也可以不自动注入,我们自己创建。像下面这种。

 @GetMapping("/hello3")
  public ModelAndView hello3(@RequestParam(name = "name", required = false, defaultValue =   "World") String name) {
    ModelAndView mv = new ModelAndView("index");
    mv.addObject("name", name);
    return mv;
  }

  
 
  1
  2
  3
  4
  5
  6

Model 就是视图层渲染所需要的数据
ModelAndView 就是视图层渲染所需要的数据和要渲染的视图

运行启动

@SpringBootApplication
public class WebApplication {

  public static void main(String[] args) {
    SpringApplication.run(WebApplication.class, args);
  }
}

  
 
  1
  2
  3
  4
  5
  6
  7

启动类还是一个Main函数

该main()方法使用Spring Boot的SpringApplication.run()方法启动应用程序。您是否注意到没有一行XML？也没有web.xml文件。此Web应用程序是100％纯Java，您无需处理配置任何管道或基础结构。

恭喜！您刚刚使用Spring Boot开发了一个网页。

thymeleaf模板基础语法

前面说了这些高级的模板引擎是可以处理各种类型的数据,也支持想for语句或if语句的语法，下面我们来看看如何使用。先看下控制类

@Controller
public class SyntaxDemoController {
  @GetMapping("/book")
  public String index(Model model) {
    Book book = new Book("颈椎病康复指南", "项目经理", new Date(), 23.95,"CG");
    model.addAttribute("book", book);
    model.addAttribute("title", "语法演示");
    model.addAttribute("books", loadBooks());
    model.addAttribute("myMap",loadMap());
    return "book";
  }
  public Map<String,String> loadMap(){
    Map<String,String>map=new ConcurrentHashMap<>();
    map.put("医生","C");
    map.put("教授","B");
    map.put("演员","C");
    return map;
  }
  public List<Book> loadBooks() {
    List<Book> books = new ArrayList<>();
    books.add(new Book("Java开发指南", "Jay", new Date(), 99.2,"PT"));
    books.add(new Book("Python从入门到放弃", "Lin", new Date(), 43.8,"CX"));
    books.add(new Book("NodeJs实战", "XD ", new Date(), 234.23,"*"));
    return books;
  }
}


  
 
  
 
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27

变量赋值

<title th:text="${title}"></title>

对象赋值

 <tr>
        <td th:text="${book.getName()}">默认值</td>
        <td th:text="${book.getAuthor()}">默认值</td>
        <td th:text="${#dates.format(book.getDate(), 'yyyy-MM-dd hh:mm:ss')}">默认值</td>
        <td th:text="${book.getPrice()}">默认值</td>
 </tr>

  
 
  1
  2
  3
  4
  5
  6

在数据模型Model 中添加一个变量book，就可以直接在目标中使用（Book必须有getset方法）

switch语法

<!--switch判断-->
<td th:switch="${book.getSaleType()}">
  <span th:case="'CG'">闪购</span>
  <span th:case="'PT'">拼团</span>
  <span th:case="'CX'">促销</span>
  <span th:case="*">其它</span>
</td>

  
 
  1
  2
  3
  4
  5
  6
  7

集合赋值

<!--读物实体列表-->
    <tr th:each="product : ${books}">
        <td th:text="${product.getName()}">默认值</td>
        <td th:text="${product.getAuthor()}">默认值</td>
        <td th:text="${#dates.format(product.getDate(), 'dd-MM-yyyy')}">默认值</td>
        <td th:text="${'￥' + #numbers.formatDecimal(product.getPrice(), 1, 2)}">默认值</td>
        <!--switch语法-->
        <td th:switch="${product.getSaleType()}">
            <span th:case="'CG'">闪购</span>
            <span th:case="'PT'">拼团</span>
            <span th:class="${product.getPrice() gt 40}?'offer'" th:case="'CX'">促销</span>
            <span th:case="*">其它</span>
        </td>
    </tr>

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

if判断

<!--if语句语法-->
<span th:if="${book.getPrice() gt 60}" class="offer">if语句语法</span>

  
 
  1
  2

map集合

 <!--map-->
 <div th:each="key,v:${myMap}">
   <p th:text="${'索引:'+v.index+'Key:'+key.getKey()+'value:'+key.getValue()}"></p>
 </div>

  
 
  1
  2
  3
  4

更多了解可以点击小编博客: https://blog.springlearn.cn/posts/4135/

github: https://github.com/lxchinesszz/spring-boot2-learning

文章来源: springlearn.blog.csdn.net，作者：西魏陶渊明，版权归原作者所有，如需转载，请联系作者。

原文链接：springlearn.blog.csdn.net/article/details/89524685

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入