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

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

通读全文需要3分钟。

image

教程目录

image

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

目标是什么?

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

开发环境

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

项目目录

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

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

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

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

  • 本文我们给大家演示的模板引擎是thymeleaf,他默认的模板文件是以.html的方式。

  • 而上面所说的freemaker引擎,默认的模板文件是.ftl

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

  1. 默认模板文件后缀
spring.freemarker.suffix=.ftl
spring.thymeleaf.suffix=.html
  1. 默认模板文件路径

resources/templates

  1. 静态文件路径(不需要渲染的页面或者是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>

添加视图模板文件

在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>

注意语法:

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

添加控制器

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

@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;
  }
}

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

 @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;
  }
  • Model 就是视图层渲染所需要的数据
  • ModelAndView 就是视图层渲染所需要的数据和要渲染的视图

运行启动

@SpringBootApplication
public class WebApplication {

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

启动类还是一个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. 变量赋值

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

  1. 对象赋值
 <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>

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

  1. 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. 集合赋值
<!--读物实体列表-->
    <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. if判断
<!--if语句语法-->
<span th:if="${book.getPrice() gt 60}" class="offer">if语句语法</span>
  1. map集合
 <!--map-->
 <div th:each="key,v:${myMap}">
   <p th:text="${'索引:'+v.index+'Key:'+key.getKey()+'value:'+key.getValue()}"></p>
 </div>

获取本课程代码

  • 获取方式,私信: 003
    小编编辑很辛苦,希望得到您的点击关注,和小编一起学习SpringBoot。

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

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

推荐阅读更多精彩内容