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的更多相关文章

Spring Boot 学习笔记--整合Redis
1.新建Spring Boot项目添加spring-boot-starter-data-redis依赖 <dependency> <groupId>org.springfra ...
Spring Boot学习笔记 - 整合Swagger2自动生成RESTful API文档
1.添加Swagger2依赖在pom.xml中加入Swagger2的依赖  <dependency> <groupId>io.spr ...
Spring Boot 学习笔记(六) 整合 RESTful 参数传递
Spring Boot 学习笔记源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...
Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客
==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...
Spring Boot学习笔记2——基本使用之最佳实践[z]
前言在上一篇文章Spring Boot 学习笔记1——初体验之3分钟启动你的Web应用已经对Spring Boot的基本体系与基本使用进行了学习,本文主要目的是更加进一步的来说明对于Spring B ...
Spring Boot WebFlux-04——WebFlux 整合 Thymeleaf
第04课:WebFlux 整合 Thymeleaf 上一篇介绍的是用 MongoDB 来实现 WebFlux 对数据源的操作,那么有了数据需要渲染到前台给用户展示,这就是本文关心的 View 层,Vi ...
Spring Boot 2.0 整合Thymeleaf 模板引擎
本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...
spring boot整合jsp的那些坑（spring boot 学习笔记之三）
Spring Boot 整合 Jsp 步骤: 1.新建一个spring boot项目 2.修改pom文件 <dependency> <groupId>or ...
Spring Boot学习笔记：整合Shiro
Spring Boot如何和Shiro进行整合: 先自定义一个Realm继承AuthorizingRealm,并实现其中的两个方法,分别对应认证doGetAuthenticationInfo和授权do ...

随机推荐

用C#代码实现类似QQ窗体的“上、左、右”停靠功能
大家都知道QQ有一个自动停靠功能,即“上.左.右”,当你把窗体拖到屏幕边缘,然后移开鼠标它会自动缩放,然后只显示一小小点出来,我们仔细观察会发现其实它只露3像素左右的边缘,当你鼠标移上去它又会伸出来, ...
Docker私有仓库--自签名方式
为了能集中管理我们创建好的镜像,方便部署服务,我们会创建私有的Docker仓库.通读了一遍官方文档,Docker为了确保安全使用TLS,需要CA认证,认证时间长的要钱啊,免费过期时间太短,还是用自签名 ...
Linux下，Nginx的安装、升级及动态添加模块
系统基于ubuntu server 14.04.4 amd64 安装第一步下载并解压Nginx压缩包从Nginx官网下载Nginx,或者在Linux上执行wget http://nginx.or ...
spring exception
Spring MVC异常处理SimpleMappingExceptionResolver[转] (2012-12-07 13:45:33) 转载▼ 标签: 杂谈分类: 技术分享 Spring3.0中 ...
解决springmvc在单纯返回一个字符串对象时所出现的乱码情况(极速版)
使用springmvc框架开发了这么长时间,之前都是直接返回jsp页面,乱码情况都是通过配置和手动编解码来解决,但是今天突然返回一段单纯的字符串时,发现中文乱码情况解决不了了,下面就给各位分享一下如何 ...
Json数据解析在Unity3d中的应用
最近做项目过程中因为Json文件名写错了一个字母Unity报错,找错误找到半夜,当时为了验错,写了一个小Demo,正好借此总结一下Json. 1.什么是Json JSON(JavaScript Obj ...
ACM 序号互换
序号互换时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 Dr.Kong设计了一个聪明的机器人卡多,卡多会对电子表格中的单元格坐标快速计算出来.单元格的行坐标是由数字 ...
Python 之 json 模块
引言对于做web开发的人来说,json文本必须要熟知与熟练使用的.大部分网站的API接口调用返回的数据,就是json格式的.如果看json对象所包含的内容,相信对熟悉Python的人开说,很快就能把 ...
Solr DateRangeField
Solr DateRangeField 是solr5.0 实现的一个feature. 关于 DateRangeField 支持日期查询如 date_field:[2016-03-23 TO 2017 ...
Jmeter接口压力测试
SOAP百科:Soap简单对象访问协议,是交换数据的一种协议规范,是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WEB上交换结构化的和固化的信息.webServi ...

Spring Boot 学习笔记--整合Thymeleaf