转自：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. 查看Oracle数据库表空间大小，是否需要增加表空间的数据文件

    在数据库管理中,磁盘空间不足是DBA都会遇到的问题,问题比较常见. --1查看表空间已经使用的百分比 Sql代码 select a.tablespace_name,a.bytes/1024/1024 ...

  2. 【Hexo】本地local4000打不开解决方法

    错误:Cannot GET /spadesq.github.io/ (注:spadesq.github.io是原来放hexo文件夹的名字) 由于我后来把hexo文件夹搬迁到别处,但我发现打开本地,地址 ...

  3. 【sqli-labs】 less31 GET- Blind -Impidence mismatch -Having a WAF in front of web application (GET型基于盲注的带有WAF注入)

    标题和less30一样 http://192.168.136.128/sqli-labs-master/Less-31/login.php?id=1&id=2" ")闭合的 ...

  4. swift-自动计算字符串的宽高

    写一个方法来继承String //自动控制文字换行及宽度 extension String { func textSizeWithFont(font: UIFont, constrainedToSiz ...

  5. 10.shard、replica机制及单node下创建index

    主要知识点     1.shard&replica机制梳理 2.单node环境下创建index的情况     1.shard&replica机制再次梳理     (1)index包含多 ...

  6. PHP socket初探 --- 关于IO的一些枯燥理论

    [原文地址:https://blog.ti-node.com/blog...] 要想更好了解socket编程,有一个不可绕过的环节就是IO．在Linux中,一切皆文件．实际上要文件干啥?不就是读写么? ...

  7. django-celery-win10

    setting初始化: 定时任务 增加tasks 启动:

  8. MYSQL（一） 简单语法

    MYSQL(一) 简单语法 1.默认约束:mysql里面DEFAULT关键字后面是不用加括号的 --1.1 创建数据库 mysql> create database holly; Query O ...

  9. IntelliJ IDEA 和 webstorm更换主题

    1. 搜索http://color-themes.com/?view=index 2. 查找自己喜欢的主题,下载 3. 放在安装位置(个人习惯,放在哪都行,能找到就行) 4. 然后打开importSe ...

  10. （11）Spring Boot配置ContextPath【从零开始学Spring Boot】

    Spring boot默认是/ ,这样直接通过http://ip:port/就可以访问到index页面,如果要修改为http://ip:port/path/ 访问的话,那么需要在Application ...