springboot使用thymeleaf完成数据的页面展示

上一篇介绍了使用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="提交" onclick="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>

springboot使用thymeleaf完成数据的页面展示相关推荐

springboot使用jsp完成数据的页面展示
上一篇文章介绍了使用JdbcTemplate完成对数据库的增删改查,使用了postman工具测试了功能是否实现,这一篇介绍如何调用springboot的后台接口,将数据真正展示出来.这里使用jsp进行 ...
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录 1.搭建环境 1.1直接从网上下载SpringB ...
SpringBoot(SpringMVC)拦截Druid数据监控页面
目标不暴露Druid内置的servlet到公网(防止被爆破.防止Druid出现 0 Day漏洞后被直接波及).拦截请求,使用自定义鉴权机制,再放行请求. 版本信息 Java 17 SpringBoo ...
springboot 全局异常处理自定义mvc错误页面展示
如下:所有的异常都会进入到这里.根据个人业务按需处理全局异常处理 @ControllerAdvice public class ErrorAdviceController {//指定捕获对象@Exc ...
qtp xml联合xsl输出html报表,通过xml和xsl实现数据和页面展示模板的解耦（简单完整网站代码示例）...
一.示例简介该示例通过xml配置数据源,在其xsl样式模板中配置数据源的展示模板,从而达到数据和页面模板解耦,降低前端和后端开发的依赖,相比于传统的HTML+CSS的实现页面模板展示,数据和模板解耦 ...
HTML/PHP/MySQL实现登录界面、连接数据库、数据库查询、数据在页面展示
应用场景帮女朋友做作业,需要用xampp实现网站建设,要求建立后台数据库.使用PHP实现页面查询.页面内容更新等功能. 本人自查自学,使用了较多的基础知识点,在此处记录下. 代码实现以下涉及数据库 ...
小程序如何用data的数据控制页面展示_17. 教你零基础搭建小程序：小程序事件绑定（1）
本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面,如下图: 再在页面的最上方放 ...
Date类型数据前台页面展示转换成yyyy-MM-dd hh:mm:ss
javaBean里面的数据类型与数据库相对应,但我在ajax请求获取数据的时候,前台展示成这个样子这是long类型的数据格式,这时候就需要将此date数据进行格式转换,在js写了函数用于将date数 ...
flask查询mysql数据展示_flask再学习-思考之怎么从数据库中查询数据在页面展示！...
看别人视频觉得很简单,要自己做蒙蔽了!这样子.NO! 1. 流程: 首先要有和数据库连接的驱动!一般有PYMySQL mysqlclient 等使用扩展Flask-SQLAlchemy 获得orm对 ...

springboot使用thymeleaf完成数据的页面展示

springboot使用thymeleaf完成数据的页面展示相关推荐

最新文章

热门文章