转自：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. 安装Windows服务，一直提示系统正在关机的错误。

    错误截图如下: 问题概况: 在本机安装没问题,程序没问题. 安装到公司的测试环境就报错了!以管理员身份运行也不行. 解决方案: 1.最后发现是360安全防护中心拦截了.具体解决过程如下: 2.进入36 ...

  2. 启动Mysql时，提示error 2002 的解决办法

    故障描述 启动时提示ERROR 2002(HY000) 启动服务时,提示the server quit without updating PID file. 解决方法一: 1.由于mysql是卸载后重 ...

  3. 【PostgreSQL-9.6.3】如何得到psql中命令的实际执行SQL

    当我们在psql界面执行以“\”开头的命令时,数据库会立刻返回执行结果,而不会返回命令的实际执行过程.通过两种方式可以实现执行过程的查看: 方法一:启动psql命令时加“-E”参数 postgres@ ...

  4. Python 之 %s字符串、%d整型、%f浮点型

    %s string="hello" #%s打印时结果是hello print "string=%s" % string # output: string=hel ...

  5. 程序员客栈与DaoCloud这两家企业联手后，运维工程师要失业了！

    2017年1月11日 ,程序员客栈与DaoCloud正式建立合作伙伴关系,为创业企业和团队提供容器应用解决方案.通过与DaoCloud合作,客栈可以更有效地把控开发环节中的不确定因素,解决项目工期不确 ...

  6. C#抽奖算法

    摘自网络 static void Main(string[] args) { //各物品的概率保存在数组里 ]{ 0.5f, 0.5f, , }; //单次测试 //Console.WriteLine ...

  7. H3C交换机配置学习随笔

    1.交换机配置VLAN vlan 创建VLAN: <h3c>system-view [h3c]vlan 10 删除ID为10的vlan:undo vlan 10 注:任何型号的交换机,都支 ...

  8. atcoder.keyence2019.contest E-Connecting Cities

    真是道好题啊,当时怎么想都没想出来... 传送门 简述题意: 有n个点,每个点有一个权值Ai,连接i,j两个点的代价是 |i−j|×D+Ai+Aj  其中D是给定的常数,问把n个点联通的最小代价 1≤ ...

  9. [Ynoi2015]此时此刻的光辉

    题目大意: 给定一个序列,每次询问一段区间的数的乘积的约数个数. 解题思路: 在太阳西斜的这个世界里,置身天上之森.等这场战争结束之后,不归之人与望眼欲穿的众人, 人人本着正义之名,长存不灭的过去.逐 ...

  10. python-pycharm windows安装

    pycharm_IDE安装 1. 首先先pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载 ...