Spring Boot 学习笔记--整合Thymeleaf
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的依赖 <!--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 ...
随机推荐
- angular : ui-router 操作原理
<body> <a ui-sref="title">title<a> </body> ui-router 会去解析body里的ui- ...
- Android Studio 代码自动提示无效
Android Studio代码自动提示无效(not available in Power Save mode)的解决办法 问题描述: 今天用Android studio敲代码,突然间就没有代码提示了 ...
- visibility: hidden和 display: none的区别
visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.
- Android学习总结(十五) ———— Notification(状态栏通知)基本用法
一.Notification基本概念 Notification是一种具有全局效果的通知,它展示在屏幕的顶端,首先会表现为一个图标的形式,当用户向下滑动的时候,展示出通知具体的内容.我们在用手机的时候 ...
- SQL server 数据库 ——聚合函数(一列 多行,值类型)
聚合函数 5种函数: 1.max最大值 select max(price) from car where code='c024' 2.min最小值 select * from car wher ...
- Eclipse添加tomcat出现 The Apache Tomcat installation at this directory is version 8.5.6. A Tomcat 8.0 installation is expected.
打开tomcat安装目录:apache-tomcat-8.5.6\lib 找到catalina.jar 用解压缩工具打开 org/apache/catalina/util/ServerInfo.pro ...
- Spring Data JPA 简单查询--接口方法
一.接口方法整理速查 下表针对于简单查询,即JpaRepository接口(继承了CrudRepository接口.PagingAndSortingRepository接口)中的可访问方法进行整理.( ...
- redux三个基本原则
(1)单一数据源:整个应用的state被存储在一棵object tree中,并且这个object tree只存在于唯一一个store中: (2)state是只读的:唯一改变state的方法就是触发ac ...
- jQuery中$.extend(true,object1, object2);深拷贝对象
语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 深浅拷贝对应的参数就是[deep],是可选的,为true或false.默认情况是fa ...
- php文件管理与基础功能的实现
文件的基本操作 先来看一下PHP文件基础操作,请看强大注释 <body> <?php var_dump(filetype("./img/11.png")); // ...