SpringBoot--Thymeleaf入门使用
一、概述
今天学习到了SpringBoot中的WEB开发，SpringBoot提供了spring-boot-stater-web为web开发给予支持，它里面内嵌了以下依赖：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
<version>2.1.0.RELEASE</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-json</artifactId>
<version>2.1.0.RELEASE</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<version>2.1.0.RELEASE</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.0.13.Final</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.1.2.RELEASE</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.1.2.RELEASE</version>
<scope>compile</scope>
</dependency>
</dependencies>
主要是Tomcat和Spring MVC的依赖，而web相关的自动配置则在spring-boot-autoconfigure.jar的org.springframework.boot.autoconfigure.web下，如下图所示：
springboot提供的模板引擎有：FreeMarker[fri'mɑːkə(r)]、Groovy['ɡruvi]、Thymeleaf[taɪm'lif]、Velocity[və'lɑsəti]、Mastache['mʌstæʃ]，为了准确读出，我加了它们的音标，springboot中推荐使用Thymeleaf作为模板引擎，因为它提供了完美的SpringMVC的支持。关于Thymleaf的语法可以通过官网进行学习https://www.thymeleaf.org/doc/articles/thymeleaf3migration.html
二、通过一个简单的实例举例说明
本例以Thymleaf为模板引擎，从服务端获取数据并展示在页面。
第一步：创建一个Javabean用来在模板页面展示数据person.java
/**
* 模板数据
*/
public class Person { private String userName; private int age; public Person(String userName, int age) {
this.userName = userName;
this.age = age;
} public String getUserName() {
return userName;
} public void setUserName(String userName) {
this.userName = userName;
} public int getAge() {
return age;
} public void setAge(int age) {
this.age = age;
}
}
第二步：创建Controller
@Controller
@SpringBootApplication
public class WebdemoApplication { @RequestMapping("/")
public String index(Model model) {
Person person = new Person("张三", 26); List<Person> people = new ArrayList<>();
Person p1 = new Person("李四", 27);
Person p2 = new Person("王五", 27);
Person p3 = new Person("赵六", 27);
people.add(p1);
people.add(p2);
people.add(p3); model.addAttribute("singlePerson", person);
model.addAttribute("people", people);
return "index";
} public static void main(String[] args) {
SpringApplication.run(WebdemoApplication.class, args);
}
}
上面红色加粗部分是将一个用户个一个用户列表设置到model中，传给前页面index.html，所以接下来再创建一个index.html。
第三步：创建页面index.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="@{bootstrap/css/bootstrap.css}" rel="stylesheet">
<link th:href="@{bootstrap/css/bootstrap-theme.css}" rel="stylesheet">
<link th:href="@{css/demo.css}" rel="stylesheet">
<title>Title</title>
</head>
<body> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">访问model</h3>
</div>
<div class="panel-body">
<label>姓名：</label><span th:text="${singlePerson.userName}"/>
<label>年龄：</label><span th:text="${singlePerson.age}"/>
</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>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<span class="span1">用户名</span>
<span class="span1">密码</span>
<span class="span3">操作</span>
</li>
<li class="list-group-item" th:each="person:${people}">
<span class="span2" th:text="${person.userName}"></span>
<span class="span2" th:text="${person.age}"></span>
<!--<button class="btn" th:onclick="'getName(\''+[[${person.userName}]]+'\');'">获取姓名</button>-->
<button class="btn btn-info" th:onclick="getName([[${person.userName}]],[[${person.age}]],this);">
获取用户信息
</button>
</li>
</ul>
</div>
</div>
<script th:src="@{jquery-1.8.3.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.js}" type="text/javascript"></script>
<script th:inline="javascript">
var single = [[${singlePerson}]];
console.log(single.userName + "--" + single.age); function getName(name, age, obj) {
var html = "My name is " + name + " and i am " + age + " years old.";
$(obj).parent().append(html);
}
</script>
</body>
</html>
创建完之后的目录结构如下：
红色方框中的是web文件的目录，都放在resource目录下了。至此，所有文件创建完成，页面访问效果如下：
这是一个简单的入门例子，主要是熟悉一下Thymeleaf模板的使用，这个例子中用到的主要知识点有以下几个：
1、引入Thymeleaf
- 通过<html xmlns:th="http://www.thymeleaf.org">命名空间，将静态页面转换为动态视图。需要进行动态处理的元素需要使用"th:"作为前缀；
- 通过“@{}”引用web静态资源，如js、css、image等文件；
2、访问model中的数据
- 通过${}访问：如这句<span class="span2" th:text="${person.userName}"></span>，通过“${}” 获取
- 通过[[${}]]访问：如下面这句
<button class="btn btn-info" th:onclick="getName([[${person.userName}]],[[${person.age}]],this);">
获取用户信息
</button>
这种方式一般用来在javascript中访问model中的数据
3、model中的数据迭代
使用th:each来循环迭代，如
<li class="list-group-item" th:each="person:${people}">
<span class="span2" th:text="${person.userName}"></span>
<span class="span2" th:text="${person.age}"></span>
<button class="btn btn-info" th:onclick="getName([[${person.userName}]],[[${person.age}]],this);">
获取用户信息
</button>
</li>
person作为迭代元素来使用，这样在下面的元素中就可以通过${person.*}来获取对象的属性了。
4、数据判断
<div th:if="${not #lists.isEmpty(people)}">
.........省略......
</div>
上面代码中，在div内部使用列表数据之前要先判断列表是否为空，就用了${not #list.isEmpty(people)}这样的句式。
Thymeleaf还支持>、<、>=、<=、==、!=等作为条件比较。
以上就是这个入门实例中用到的Thymeleaf中的相关知识，需要注意的是下面这两句：
1、<button class="btn" th:onclick="'getName(\''+[[${person.userName}]]+'\');'">获取姓名</button>
2、<button class="btn btn-info" th:onclick="getName([[${person.userName}]],[[${person.age}]],this);">获取用户信息</button>
这两句都是在HTML中调用js函数时传递model数据的写法，但是第一种会报错！！！
SpringBoot--Thymeleaf入门使用的更多相关文章
- springBoot从入门到源码分析
先分享一个springBoot搭建学习项目,和springboot多数据源项目的传送门:https://github.com/1057234721/springBoot 1. SpringBoot快速 ...
- SpringData 基于SpringBoot快速入门
SpringData 基于SpringBoot快速入门 本章通过学习SpringData 和SpringBoot 相关知识将面向服务架构(SOA)的单点登录系统(SSO)需要的代码实现.这样可以从实战 ...
- org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service() cannot be found on com.my.blog.springboot.thymeleaf.util.MethodTest type
前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 至于为什么已经写了一篇文章thymeleaf模板引擎调用java类中的方法,又多此一举的单独整 ...
- springboot+thymeleaf+pageHelper带条件分页查询
html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...
- springboot+thymeleaf简单使用
关于springboot想必很多人都在使用,由于公司项目一直使用的是SpringMVC,所以自己抽空体验了一下springboot的简单使用. 环境搭建 springbooot的环境搭建可以说很灵活, ...
- SpringBoot Docker入门，SpringBoot Docker安装
SpringBoot Docker入门,SpringBoot Docker安装 ================================ ©Copyright 蕃薯耀 2018年4月8日 ht ...
- SpringBoot thymeleaf使用方法，thymeleaf模板迭代
SpringBoot thymeleaf使用方法,thymeleaf模板迭代 SpringBoot thymeleaf 循环List.Map ============================= ...
- SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装
SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot thymeleaf模板页面没提示 SpringBoot t ...
- SpringBoot thymeleaf模板版本，thymeleaf模板更换版本
SpringBoot thymeleaf模板版本 thymeleaf模板更换版本 修改thymeleaf模板版本 ================================ ©Copyright ...
- Springboot+Thymeleaf框架的button错误
---恢复内容开始--- 在做公司项目时,遇到了一个Springboot+Thymeleaf框架问题: 使用框架写网站时,没有标明type类型的button默认成了‘submit’类型,每次点击按钮都 ...
随机推荐
- 8.Struts2拦截器
1. 拦截器的概述 * 拦截器就是AOP(Aspect-Oriented Programming)的一种实现.(AOP是指用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.) * ...
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoa
最近运行ssm项目遇到tomcat启动报错: 解决办法,右击项目选择properties 在Deployment Assembly add 选择maven dedependencies 项目成功运行 ...
- Java递归调用
6.递归调用 方法的递归调用就是方法自身调用自身. 以下程序因为递归没有结束的条件,所以一直压栈,没有弹栈,导致栈内存溢出错误!所以递归必须要有结束条件. public class Recursion ...
- 2018阿里云云数据库RDS核心能力演进
摘要: 2018年云数据库RDS发展上,不但针对MySQL.SQL Server.PostgreSQL提供了适合个人入门用户的基础版产品,以实惠的价格普惠广大中小用户.更加入最新的MariaDB TX ...
- Delphi中关于菜单的几个技巧
-- 1将菜单项移到菜单栏的最右边 在一些应用程序中,常把一些特殊的菜单项放在菜单栏的最右边(如WPS2000 中的"定制界面"菜单,一些应用程序的帮助菜单),这些菜单项放在菜单栏 ...
- NX二次开发-NXOPEN找相切面方法ScRuleFactory()->CreateRuleFaceTangent
#include <uf_defs.h> #include <uf_ui_types.h> #include <iostream> #include <NXO ...
- [JZOJ 5852] 相交
题意:求树上两条路径有无祖先. 思路: 瞎搞\(LCA\)啊... 可惜我\(LCA\)打错了,我居然调了半小时...qwq #include <bits/stdc++.h> using ...
- Python-爬虫之股转系统下载文件自动翻页
上次代码只能抓取一个网页上的链接,本次可以自主设定抓取的页面个数. 代码如下: from selenium import webdriver import os, time class Downloa ...
- VScode中写vue代码 Ctrl+/添加注释失效
1.点击列表的文件——>首选项——>键盘快捷方式,在里面查看 Ctrl+/ 是否有冲突 2.查看右下角的选择语言模式是否是Vue,如下图
- （转）python：Redirection is not supported
Redirection isnot supported. 不支持重定向 解决方法: cmd: 在CMD命令行中,输入 "python" + "空格",即 &qu ...