1.新建Spring Boot项目

添加spring-boot-starter-thymeleaf依赖

 <dependency>

     <groupId>org.springframework.boot</groupId>

     <artifactId>spring-boot-starter-thymeleaf</artifactId>

 </dependency>

2.添加静态文件

根据spring boot默认规则，脚本和样式默认都放在src/main/resources/static下，我这里引入的metro-bootstrap-master（一个开源的模板）

结构如图所示：

3.演示html页面

根据spring boot默认规则，页面放置在src/main/resources/templates下，也可以在application.properties自定义路径。

 ########################################################

 ###THYMELEAF (ThymeleafAutoConfiguration)

 ########################################################

 #spring.thymeleaf.prefix=classpath:/templates/

 #spring.thymeleaf.suffix=.html

 #spring.thymeleaf.mode=HTML5

 #spring.thymeleaf.encoding=UTF-8

 #spring.thymeleaf.content-type=text/html

 # set to false for hot refresh

 spring.thymeleaf.cache=false

具体html代码如下：

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

    <head>

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

        <meta http-equiv="x-ua-compatible" content="IE=edge"/>

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

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

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

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

    </head>

    <body>

        <div class="grid">

            <div class="row col-md-12">

                <div class="tile tile-clouds col-md-3 col-xs-12"  >

                    <h1 th:text="${s[0]}"></h1>

                </div>

                <div class="tile tile-emerald col-md-3 col-xs-12"  >

                    <h1 th:text="${s[1]}"></h1>

                </div>

                <div class="tile tile-turquoise col-md-3 col-xs-12"  >

                    <h1 th:text="${s[2]}"></h1>

                </div>

                <div class="tile tile-amethyst col-md-3 col-xs-12"  >

                    <h1 th:text="${s[3]}"></h1>

                </div>

            </div>

        </div>

    </body>

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

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

    <script th:src="@{js/metro-docs.js}"></script>

    <script th:inline="javascript">

        var s = [[${s}]];

        console.log(s);

    </script>

</html>

4.视图和数据

新建一个controller，新建一个数组返回数据，代码如下：

package com.haq.web;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

@Controller

@RequestMapping("/")

public class SampleController {

    @RequestMapping("/index")

    public String index(Model model){

        String[] s = {"我是1","我是2","我是3","我是4"};

        model.addAttribute("s",s);

        return "index";

    }

}

5.运行

启动spring boot，返回http://127.0.0.1:8080/index,效果如图所示：

后记：欢迎大家交流学习，有问题还望多多指教，O(∩_∩)O谢谢。

Spring Boot 学习笔记--整合Thymeleaf的更多相关文章

  1. Spring Boot 学习笔记--整合Redis

    1.新建Spring Boot项目 添加spring-boot-starter-data-redis依赖 <dependency> <groupId>org.springfra ...

  2. Spring Boot学习笔记 - 整合Swagger2自动生成RESTful API文档

    1.添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <!--swagger2--> <dependency> <groupId>io.spr ...

  3. Spring Boot 学习笔记(六) 整合 RESTful 参数传递

    Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...

  4. Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客

    ==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...

  5. Spring Boot学习笔记2——基本使用之最佳实践[z]

    前言 在上一篇文章Spring Boot 学习笔记1——初体验之3分钟启动你的Web应用已经对Spring Boot的基本体系与基本使用进行了学习,本文主要目的是更加进一步的来说明对于Spring B ...

  6. Spring Boot WebFlux-04——WebFlux 整合 Thymeleaf

    第04课:WebFlux 整合 Thymeleaf 上一篇介绍的是用 MongoDB 来实现 WebFlux 对数据源的操作,那么有了数据需要渲染到前台给用户展示,这就是本文关心的 View 层,Vi ...

  7. Spring Boot 2.0 整合Thymeleaf 模板引擎

    本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...

  8. spring boot整合jsp的那些坑（spring boot 学习笔记之三）

    Spring Boot 整合 Jsp 步骤: 1.新建一个spring boot项目 2.修改pom文件 <dependency>            <groupId>or ...

  9. Spring Boot学习笔记：整合Shiro

    Spring Boot如何和Shiro进行整合: 先自定义一个Realm继承AuthorizingRealm,并实现其中的两个方法,分别对应认证doGetAuthenticationInfo和授权do ...

随机推荐

  1. 了解 : prevent default

    基本了解是阻止事件之前设置好的事件触发,像是angular router ui里的 preventDefault是这样的. 在$stateChange的是后,可以调用preventDefault 来阻 ...

  2. 程序点滴001_Python模拟点阵数字

    尝试过很多编程语言,写过不少程序(当然,基本上都是些自娱自乐或给自己用的工具类的小玩意儿),逐渐认识到编写程序是一个不断完善.不断优化的过程——编程首先要有一个想法(目标),围绕这个目标形成最基本的功 ...

  3. Java中byte与16进制字符串的互换原理

    我们都知道Java中的byte是由8个bit组成的,而16进制即16中状态,它是由4个bit来表示的,因为24=16.所以我们可以把一个byte转换成两个用16进制字符,即把高4位和低4位转换成相应的 ...

  4. 测试不同格式下depth buffer的精度

    这篇文章主要是参考MJP的“Attack of The Depth Buffer”,测试不同格式下depth buffer的精度. 测试的depth buffer包含两类: 一是非线性的depth b ...

  5. 在node中使用 ES6

    ES6+ 太棒了,但是很多高级功能node是不支持的,就需要使用babel转换成ES5, 1.安装babel依赖 npm install babel-core --save-dev 2.安装babel ...

  6. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  7. JavaWeb之JSON

    一.什么是JSON? JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML ...

  8. HTML5学习笔记<六>: HTML5框架, 背景和实体

    HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...

  9. 使用RecyclerView实现的分组列表。

    项目介绍: StickyHeaders使用RecyclerView实现的分组列表

  10. 使用slice和concat对数组的深拷贝和浅拷贝

    一.数组浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份. 如下代码,如果只是简单才用赋值的方法,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问 ...