转自：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. 复习java基础第六天（IO）

    一:File 类 • 输入:读取外部数据(磁盘.光盘等存储设备的数据)到程序(内存)中.  • 输出:将程序(内存)数据输出到磁盘.光盘等存储设备中 • Java 的 IO 流主要包括输入.输出两种 ...

  2. 安卓手机USB无法共享、上网或卡顿的解决方法

    安卓手机通过USB为电脑(Windows10)提供网络接入点时,系统程序会异常卡顿. 1)设备管理器2)点击“网络适配器”,在弹出的下拉列表中选择”Remote NDIS based Internet ...

  3. C#如何判断操作系统语言版本

    using System.Runtime.InteropServices; static void Main(string[] args) { System.Console.WriteLine(Sys ...

  4. mvc重定向

    出处 : https://www.cnblogs.com/lgxlsm/p/5441149.html .重定向方法:Redirect / RedirectToAction / RedirectToRo ...

  5. Java继承实现接口的抽象类

    1.TestIntace.java package com.chase.abstrac; /** * 接口 * @author Chase * * @date 2013-10-21 下午02:29:1 ...

  6. day34-2 类和对象（重点）

    目录 类 定义类和对象 __dict__ 和__class__ 创建对象时的底层运作 定义对象独有的特征 init __slots__(了解) 给对象添加属性时的底层运作 类 分类/类别 上述的代码( ...

  7. python 字符串模糊匹配 Fuzzywuzzy

    Python提供fuzzywuzzy模块,不仅可用于计算两个字符串之间的相似度,而且还提供排序接口能从大量候选集中找到最相似的句子. (1)安装 pip install fuzzywuzzy (2)接 ...

  8. (C/C++学习)2.C语言中文件流操作基本函数总结

    函数所在头文件:stdio.h 说明:前半部分主要为对各个文件流操作函数的例举,后半部分着重于上机运行分析.文中部分引用自王桂林老师的C/C++课件. 1.FIELE *fopen(const cha ...

  9. 单元测试代码：SpringTest+JUnit

    /** * JUnit单元测试父类,配置了Spring的基础环境. <br/> * 可以作为Controller.Service.Dao单元测试的父类. * * @author leiwe ...

  10. ExtJs之Ext.grid.GridPanel（部分未完）

    今天在家休息,年假不用就作费啊. 看了几部香港老电影,陪爸爸看了勇士占奇才, 然后,测试了一下EXTJS未完的内容, 在京东上订了七本历史普及书,近两百块..:) 搞定. <!DOCTYPE h ...