【SpringBoot】转载 springboot使用thymeleaf完成数据的页面展示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36380516/article/details/78668199
上一篇介绍了使用jsp完成数据的页面展示 ，但是springboot并不推荐使用jsp，会产生很多问题。官方推荐使用thymeleaf，这里我们将上一篇的jsp页面展示修改为使用thymeleaf，通过对比来熟悉thymeleaf，其实改动的地方并不大。
第一篇springboot入门时介绍了项目的大致结构，当时图省事所有的类都放在一个包中，这里略做调整，然后再resource下新建文件夹存放thymeleaf模板，使用springboot生成工程时应该会默认有这几个文件夹，此时项目结构大致如下：
为thymeleaf添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
查询接口（接上一篇，基本没变）
/**
* @return
* 查询全部信息
*/
@RequestMapping("/list")
public ModelAndView itemsList() {
String sql = "select * from items";
List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);
ModelAndView mav = new ModelAndView("items");
mav.addObject("list", list);
return mav;
}
对应thymeleaf 模板页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>springboot学习</title>
</head>
<body>
<div th:each="item : ${list}">
<h1 th:text="${{item.title}}"></h1>
<p><a th:text="${{item.name}}"></a></p>
<p><a th:text="${{item.detail}}"></a></p>
</div>
</body>
</html>
此时我们运行http://localhost:8080/items/list，和jsp输出结果无异
代码很便捷，和上一篇的jsp遍历list数据差别不大，通过对比也能很好的掌握thymeleaf 的用法，这里用 th:each 放入需要遍历的内容，以及定义变量名；在其他标签中用th:text来展示内容，写法也很容易理解。
新增接口
/**
* 新增数据
* @param items
* @return
*/
@RequestMapping("/add")
public @ResponseBody boolean addItems(Items items) {
String sql = "insert into items (title,name,detail) value (?,?,?)";
Object args[] = {items.getTitle(),items.getName(),items.getDetail()};
int temp = jdbcTemplate.update(sql, args);
if(temp > 0) {
return true;
}
return false;
}
对应的thymeleaf 模板页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>springboot学习</title>
<script th:src="@{/js/jquery-1.8.3.js}"></script>
</head>
<body>
<div>
<form name="addItems">
<input type="text" name="title" />
<input type="text" name="name" />
<input type="text" name="detail" />
<input type="button" value="提交" οnclick="return add()"/>
</form>
</div>
</body>
<script type="text/javascript">
function add(){
var title = addItems.title.value;
var name = addItems.name.value;
var detail = addItems.detail.value;
$(document).ready(function(){
$.post("add",
{"title":title,"name":name,"detail":detail},
function(data){
if(data == true){
alert("新建成功");
}
if(data == false){
alert("新建失败");
}
});
});
}
</script>
</html>
表单提交方式的写法（更多可以参考：http://itutorial.thymeleaf.org；很全面）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 12</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Solution for exercise 12: forms</h1>
<h2>Customer edition</h2>
<form action="saveCustomer.html" th:action="@{/exercise12/saveCustomer.html}" th:object="${customer}" method="post">
<input type="hidden" th:field="*{id}" />
<label for="firstName">First name:</label>
<input type="text" th:field="*{firstName}" value="John" />
<label for="lastName">Last name:</label>
<input type="text" th:field="*{lastName}" value="Wayne" />
Genre:
<div th:each="gender : ${genders}" class="radio">
<input type="radio" th:value="${gender}" th:field="*{gender}" />
<label th:for="${#ids.prev('gender')}" th:text="${gender.description}">Male</label>
</div>
<div th:remove="all" class="radio">
<input type="radio" />
<label>Female</label>
</div>
<label for="paymentMethod">Payment method:</label>
<select th:field="*{paymentMethod}" th:remove="all-but-first">
<option th:each="paymentMethod : ${paymentMethods}"
th:value="${paymentMethod}" th:text="${paymentMethod.description}">Credit card</option>
<option>Another payment method</option>
<option>Another payment method</option>
</select>
<label for="balance">Balance (dollars):</label>
<input type="text" th:field="*{balance}" size="10" value="2500" />
<input type="submit" />
</form>
</body>
</html>
这里列举常见用法：
1、在html页面中引入thymeleaf命名空间：<html xmlns:th=http://www.thymeleaf.org></html>，此时在html模板文件中动态的属性使用th:命名空间修饰 ；
2、引用静态资源文件：比如CSS和JS文件，语法格式为“@{}”，比如引用resource/static/js下的jquery文件：<script th:src="@{/js/jquery-1.8.3.js}"></script>；
3、页面显示时将时间的格式化： ${#dates.format(worker.updateTime,'yyyy-MM-dd HH:mm:ss')} 表示将时间格式化为”yyyy-MM-dd HH:mm:ss”；
4、字符串拼接：比如拼接这样一个URL:/items/delete/{itemId} 写法是：th:href="'/items/delete/' + ${items.id }"
5、for循环遍历出数据，以上查询全部中已有例子：<div th:each="item : ${list}"><h1 th:text="${{item.title}}"></h1></div>
————————————————
版权声明：本文为CSDN博主「阿木侠」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_36380516/article/details/78668199
【SpringBoot】转载 springboot使用thymeleaf完成数据的页面展示的更多相关文章
- SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染
在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...
- flask再学习-思考之怎么从数据库中查询数据在页面展示！
看别人视频觉得很简单,要自己做蒙蔽了!这样子.NO! 1. 流程: 首先要有和数据库连接的驱动!一般有PYMySQL mysqlclient 等 使用扩展Flask-SQLAlchemy 获得orm对 ...
- springboot框架中集成thymeleaf引擎，使用form表单提交数据，debug结果后台获取不到数据
springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...
- SpringBoot整合Jsp和Thymeleaf (附工程)
前言 本篇文章主要讲述SpringBoot整合Jsp以及SpringBoot整合Thymeleaf,实现一个简单的用户增删改查示例工程.事先说明,有三个项目,两个是单独整合的,一个是将它们整合在一起的 ...
- SpringBoot学习笔记(4)----SpringBoot中freemarker、thymeleaf的使用
1. freemarker引擎的使用 如果你使用的是idea或者eclipse中安装了sts插件,那么在新建项目时就可以直接指定试图模板 如图: 勾选freeMarker,此时springboot项目 ...
- SpringBoot页面展示Thymeleaf
https://www.jianshu.com/p/a842e5b5012e 开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.Spring ...
- SpringBoot 使用JPA+MySQL+Thymeleaf 总结 二
SpringBoot 使用JPA+MySQL+Thymeleaf 总结 一 SpringBoot 使用JPA+MySQL+Thymeleaf 总结 二 方法一 使用原生sql查询 或者 为方法名增加 ...
- SpringBoot 使用JPA+MySQL+Thymeleaf 总结 一
SpringBoot 使用JPA+MySQL+Thymeleaf 总结 一 SpringBoot 使用JPA+MySQL+Thymeleaf 总结 二 pom引用 <?xml version=& ...
- java框架之SpringBoot(4)-资源映射&thymeleaf
资源映射 静态资源映射 查看 SpringMVC 的自动配置类,里面有一个配置静态资源映射的方法: @Override public void addResourceHandlers(Resource ...
随机推荐
- 最全排序算法原理解析、java代码实现以及总结归纳
算法分类 十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此称为非线性时间比较类排序. 线性时间非比较类排序:不通过 ...
- MySQL数据库的二进制安装、源码编译和基础入门操作
一.MySQL安装 (1)安装方式: 1 .程序包yum安装 优点:安装快,简单 缺点:定死了各个文件的地方,需要修改里边的相关配置文件,很麻烦 2 .二进制格式的程序包:展开至特定路径,并经过简单配 ...
- 判断一个ip地址是动态的还是静态的
要确定计算机的IP是静态IP还是动态IP,请执行以下步骤: 通过单击开始打开命令提示符并搜索CMD,然后单击cmd.exe 键入ipconfig / all. 找到“以太网本地连接”列表.找到“ I ...
- Ubuntu系统---安NVIDIA 驱动后 CUDA+cuDNN 安装
Ubuntu系统---安NVIDIA 驱动后 CUDA+cuDNN 安装 --------------------------------------------@20190726--------- ...
- css超链接
超链接的代码<a href="http://www.divcss5.com/" target="_blank" title="关于div css ...
- MySQL之profiling性能分析（在5.6.14版本被丢弃）
官方建议使用information_schema.profiling. 原因是show profile 输出了查询执行的每个步骤及其花费的时间,但是结果很难快速确定哪个步骤花费的时间最多,因为输出是按 ...
- JavaScript 页面渲染
1. 从输入url到得到html的详细过程 1.1 加载资源的形式 输入 URL 或跳转页面 加载 html 1.2 加载一个资源的过程 浏览器根据DNS服务器得到域名的IP地址 向这个IP ...
- Docker常用命令行
原文出处:https://blog.csdn.net/qq_29303759/article/details/87639016 启动docker 启动docker systemctl start do ...
- JavaScript, JQuery事件委托
1.引言 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工 ...
- maven 安装第三方jar到本地 出现 The goal you specified requires a project to execute but there is no POM in this directory 错误
原因是因为操作系统的差异导致,把所有参数加上引号即可. 如下所示: mvn install:install-file "-Dfile=cobra.jar" "-Dgrou ...