Springboot 之 引入Thymeleaf
转自：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=HTML53.文件结构
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的更多相关文章
- springboot 引入 thymeleaf 模板
第一步pom中: <!-- 引入 thymeleaf 模板依赖 --> <dependency> <groupId>org.springframework.boot ...
- springboot引入thymeleaf
springboot引入thymeleaf 1.Thymeleaf使用 @ConfigurationProperties(prefix = "spring.thymeleaf") ...
- SpringBoot入门之Thymeleaf的使用
在.net的MVC3 或更高版本等支持 Razor 的框架里使用cshtml,Razor是一种简单的编程语法,用于在网页中嵌入服务器端代码.在使用springboot开发mvc时也有与.net类似的视 ...
- 8.SpringBoot 模板引擎 Thymeleaf
1.模板引擎原理 JSP.Velocity.Freemarker.Thymeleaf 都是模板引擎.SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: Thymeleaf模板引擎 ...
- SpringBoot框架 之 Thymeleaf
目录 Thymeleaf 添加启动器 创建模板文件夹 基本使用 综合使用 Thymeleaf 介绍 SpringBoot并不推荐使用jsp Thymeleaf 是一个跟 Velocity.FreeMa ...
- SpringBoot 同时整合thymeleaf html、vue html和jsp
问题描述 SpringBoot如何同时访问html和jsp SpringBoot访问html页面可以,访问jsp页面报错 SpringBoot如何同时整合thymeleaf html.vue html ...
- 【SpringBoot】SpringBoot/MyBatis/MySql/thymeleaf/Log4j整合工程
工程下载地址:https://files.cnblogs.com/files/xiandedanteng/MMSpringWeb20191027-1.rar 工程目录结构如图: 1.创建工程 有些网文 ...
- 7 — 简单了解springboot中的thymeleaf
1.官网学习地址 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 2.什么是thymeleaf? 一张图看明白: 解读: ...
- Idea中SpringBoot引入thymeleaf没有提示
问题描述: 最近使用Idea搭建SpringBoot时,用到了 thymeleaf,但是出现了点问题:输入th: 代码有没有提示. 解决方法: <html lang="en" ...
随机推荐
- HTML链接用法
1.链接的打开方式 ①在新页面打开 <a href="www.baidu.com" target="_blank">百度一下</a> ② ...
- 关于php初学者的理解！请大家浏览并指出不足！谢谢！
昨天开始学习php,由于之前是学习.NET的,刚接触php,就关于语法就是各种不适应,什么js,jq在脑子里一团浆糊..过了一天感觉好了点,现在有点想法,大家欢迎交流批评! 今天用php做了个登录,判 ...
- button提交表单 a标签提交表单
<form name="searchForm" id="searchForm" method="get" action="/ ...
- python 动态修改 类和实例 的方法
相信很多朋友在编程的时候都会想修改一下已经写好的程序行为代码,而最常见的方式就是通过子类来重写父类的一些不满足需求的方法.比如说下面这个例子. class Dog: def bark(self): p ...
- vue中引入json数据，不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- 15.6.1 【Task使用】基于任务的异步模式
C# 5异步函数特性的一大好处是,它为异步提供了一致的方案.但如果在命名异步方法以及 触发异常等方面做法存在着差异,则很容易破坏这种一致性.微软因此发布了基于任务的异步模 式(Task-based A ...
- 非传统题初探——AtCoder Practice Contest #B - インタラクティブ練習 (Interactive Sorting)
原题: Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement This is an interac ...
- laravel-hprose(rpc框架)
Laravel-hprose 基于 hprose/hprose-php 开发的Laravel扩展:laravel-hprose 版本要求 Laravel>=5.2 安装 composer req ...
- CentOS7安装Kubernetes
CentOS7安装Kubernetes 安装Kubernetes时候需要一台机器作为管理机器,1台或者多台机器作为集群中的节点. 系统信息: Hosts: 请将IP地址换成自己环境的地址. cento ...
- 第一个go程序和基本语法
目录 第一个go程序和基本语法 一. 第一个go程序 二. 基础语法 1. 命名 2. 变量 3 常量与枚举 4. 数据类型 5. fmt包的使用 6. 类型别名 7. 类型转换 8. 运算符 第一个 ...