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. Material Design学习-----FloatingActionButton

    FloatingActionButton是悬浮操作按钮,它继承自imageview,所以说它具备有imageview所有的方法和属性.与其他按钮不同的是,FloatingActionButton默认就 ...

  2. SqlHelper帮助类_上(SQLServer数据库含Connection详解)

    在操作数据库时,经常会用到自己封装的SqlHelper.这里主要对SQLServer数据库的Sqlhelper,主要用于在同一个连接中完成CRUD! 一.ADO.NET中的Connection详解: ...

  3. ACM 子串和

    子串和 时间限制:5000 ms  |  内存限制:65535 KB 难度:3   描述 给定一整型数列{a1,a2...,an},找出连续非空子串{ax,ax+1,...,ay},使得该子序列的和最 ...

  4. 分享小知识：善用Group By排序

    以下列举了公用表/临时表/聚合函数三个因素为例子(覆盖索引因素除外,有利用此类索引都会以索引顺序)  环境: Microsoft SQL Server 2014 (SP1-GDR) (KB319472 ...

  5. entity framework core 支持批量插入，值得期待

    entity framework6.x之前搞了这么多版本,构架这么牛B,居然没有批量插入更新的功能,但有很多替换的解决方案,例如Entity Framework Extended Library(ht ...

  6. jquery.zclip.js 不起作用

    最近有用到复制的这个功能,选用jQuery的插件,正常使用的时候,没有任何问题: $('#copy_mobile_watch_address').zclip({ path: '/dist/plugin ...

  7. 深入浅出数据结构C语言版（1）——什么是数据结构及算法

    在很多数据结构相关的书籍,尤其是中文书籍中,常常把数据结构与算法"混合"起来讲,导致很多人初学时对于"数据结构"这个词的意思把握不准,从而降低了学习兴趣和学习信 ...

  8. linux上执行 xhost unable to open display

    linux下执行xhost命令报错:unable to open display,解决方法,linux 下通过xhost进入图形界面,经常会出现报错"unable to  open disp ...

  9. MonkeyRunner之小白如何使用MonkeyRecorder录制回放脚本

    之前摸索了好久.学习Python语言.安装工具.拉拉溜溜也慢慢地一点点进步.每天就疯狂的上网找资料.虽然大牛们写的很详细.但是自己就是笨的不知怎么做.最后找了一篇文章,真的就是万事俱备只欠东风的感觉, ...

  10. 单发邮箱 群发邮箱 程序 Email winform

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...