转自：https://segmentfault.com/a/1190000011149325

前言

Spring-boot-starter-web集成了Tomcat以及Spring MVC，会自动配置相关东西，Thymeleaf是用的比较广泛的模板引擎

1.引入依赖

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

2.在一个名为application.propertiesde 的文件中配置Thymeleaf

server.port=8080

spring.thymeleaf.cache=false

spring.thymeleaf.prefix=classpath:/templates/

spring.thymeleaf.check-template-location=true

spring.thymeleaf.suffix=.html

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.content-type=text/html

spring.thymeleaf.mode=HTML5

3.文件结构

4.Controller

package com.dlp.Controller;

import com.dlp.model.Person;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;

import java.util.List;

/**

 * Created by Administrator on 2017/9/6.

 */

@Controller

public class HelloController {

    @RequestMapping(value = "/index")

    public String index(Model  model)

    {

        Person single = new Person("hyj",21);

        List<Person> people = new ArrayList<Person>();

        Person p1 = new Person("dlp",21);

        Person p2 = new Person("tq",21);

        Person p3 = new Person("mk",21);

        people.add(p1);

        people.add(p2);

        people.add(p3);

        model.addAttribute("singlePerson",single);

        model.addAttribute("people",people);

        return "index";

    }

    }

这里使用@Controller而不用@RESTController是因为这里返回一个页面而不是一个值，如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面，配置的视图解析器InternalResourceViewResolver不起作用，返回的内容就是Return 里的内容。

5.Model类

package com.dlp.model;

/**

 * Created by Administrator on 2017/9/6.

 */

public class Person {

    private String name;

    private Integer age;

    public Person()  {

        super();

    }

    public Person(String name,Integer gae) {

        super();

        this.name=name;

        this.age=gae;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name=name;

    }

    public Integer getAge() {

        return age;

    }

    public Integer setAge(Integer age) {

        return age;

    }

}

6.index页面

<!DOCTYPE HTML>

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

<head>

    <meta content="text/html;charset=UTF-8"/>

    <meta name="viewport" content="width=device-width,initial-scale=1"/>

    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>

    <link th:href="@{/bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>

</head>

<body>

<div class="panel panel-primary">

   <div class="panel-heading">

       <h3 class="panel-title">访问model</h3>

   </div>

    <div class="panel-body">

        <span th:text="${singlePerson.name}"></span>

    </div>

</div>

<div th:if="${not #lists.isEmpty(people)}">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">列表</h3>

        </div>

        <div class="panel-body">

            <ul class="list-group">

                <li class="list-group-item" th:each="person : ${people}">

                    <span th:text="${person.name}"></span>

                    <span th:text="${person.age}"></span>

                    <button class="btn" th:onlick="'getName(\''+${person.name}+'\');'">获得名字</button>

                </li>

            </ul>

        </div>

    </div>

</div>

<script th:src="@{/jquery/jquery-3.2.1.min.js}"></script>

<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

<script th:inline="javascript">

    var single = [[${singlePerson}]];

    console.log(single.name+"/"+single.age);

    function getName(name) {

        console.log(name);

    }

</script>

</body>

</html>

xmlns:th="http://www.thymeleaf.org"命名空间，将镜头转化为动态的视图，需要进行动态处理的元素使用“th:”前缀；两个link引入bootstrap框架，通过@{}引入web静态资源（括号里面是资源路径）访问model中的数据通过${}访问，案例

7.运行

Springboot 之 引入Thymeleaf的更多相关文章

  1. springboot 引入 thymeleaf 模板

    第一步pom中: <!-- 引入 thymeleaf 模板依赖 --> <dependency> <groupId>org.springframework.boot ...

  2. springboot引入thymeleaf

    springboot引入thymeleaf 1.Thymeleaf使用 @ConfigurationProperties(prefix = "spring.thymeleaf") ...

  3. SpringBoot入门之Thymeleaf的使用

    在.net的MVC3 或更高版本等支持 Razor 的框架里使用cshtml,Razor是一种简单的编程语法,用于在网页中嵌入服务器端代码.在使用springboot开发mvc时也有与.net类似的视 ...

  4. 8.SpringBoot 模板引擎 Thymeleaf

    1.模板引擎原理 JSP.Velocity.Freemarker.Thymeleaf 都是模板引擎.SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: Thymeleaf模板引擎 ...

  5. SpringBoot框架 之 Thymeleaf

    目录 Thymeleaf 添加启动器 创建模板文件夹 基本使用 综合使用 Thymeleaf 介绍 SpringBoot并不推荐使用jsp Thymeleaf 是一个跟 Velocity.FreeMa ...

  6. SpringBoot 同时整合thymeleaf html、vue html和jsp

    问题描述 SpringBoot如何同时访问html和jsp SpringBoot访问html页面可以,访问jsp页面报错 SpringBoot如何同时整合thymeleaf html.vue html ...

  7. 【SpringBoot】SpringBoot/MyBatis/MySql/thymeleaf/Log4j整合工程

    工程下载地址:https://files.cnblogs.com/files/xiandedanteng/MMSpringWeb20191027-1.rar 工程目录结构如图: 1.创建工程 有些网文 ...

  8. 7 — 简单了解springboot中的thymeleaf

    1.官网学习地址 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 2.什么是thymeleaf? 一张图看明白: 解读: ...

  9. Idea中SpringBoot引入thymeleaf没有提示

    问题描述: 最近使用Idea搭建SpringBoot时,用到了 thymeleaf,但是出现了点问题:输入th: 代码有没有提示. 解决方法: <html lang="en" ...

随机推荐

  1. Android 集成GoogleMap,实现定位和获取位置信息

    1.准备 我使用的是AS2.2.2,首先FQ注册google开发者帐号,准备获取API Key,网上有许多相关资料我就不再赘述,这里讲一个比较小白级的获取方法,可以减少许多输入 1.1. AS创建项目 ...

  2. ListView中动态显示隐藏HeaderView和FooterView

    ListView中动态显示和隐藏Header&Footer 解决思路: 直接设置HeaderView和FooterView.setVisibility(View.GONE)无效, 布局仍然存在 ...

  3. Android测试写入文本Log

    写入本地SD卡: @SuppressLint("SdCardPath") public void writeFileSdcard(String fileName, String m ...

  4. Steal 偷天换日 题解(From luoguBlog)

    树形+背包 奇奇怪怪的dp. 考试的时候费了半天劲把题读完后思路基本正解, 然而也不知道为什么脑子鬼畜了一下打了个非递归建树? 而且链式前向星建边? 岔路口和藏品都搞成节点? 自己给自己找麻烦Orz. ...

  5. js获取当前具体时间

    /** * 获取当前时间 * @param isTime true:显示日期和时间,如:2018-09-20 13:25:12:false:显示日期,如:2018-09-20. * @returns ...

  6. Python2X和Python3X 除法运算符的使用：

    首先注明:如果没有特别说明,以下内容都是基于python 3.4的. 1. /是精确除法,//是向下取整除法,%是求模 2. %求模是基于向下取整除法规则的 3. 四舍五入取整round, 向零取整i ...

  7. Java基础学习笔记之：System类;Math类;Arrays类BigInteger，BigDecimal

    System类 在API中System类介绍的比较简单,我们给出定义,System中代表程序所在系统,提供了对应的一些系统属性信息,和系统操作.System类不能手动创建对象,因为构造方法被priva ...

  8. 文献阅读 | Benefits and limitations of genome-wide association studies

    参考:今日阅读:GWAS的优劣势 - Omics Liu  Omics 待续~

  9. html表单练习（讲义中的方法）

    用table作框体固定位置结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  10. 利用pandas库中的read_html方法快速抓取网页中常见的表格型数据

    本文转载自:https://www.makcyun.top/web_scraping_withpython2.html 需要学习的地方: (1)read_html的用法 作用:快速获取在html中页面 ...