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

最新推荐文章于 2024-07-30 23:05:40 发布
最新推荐文章于 2024-07-30 23:05:40 发布
阅读量2.9w 收藏 52
点赞数 6
分类专栏： springboot springboot 文章标签： springboot介绍 springboot学习 springboot入门 springboot教程 springboot使用thymelea
版权声明：本文为博主原创文章，遵循 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
最低0.47元/天 解锁文章
Java知音_
关注
专栏目录
SpringBoot视图技术4：使用Thymeleaf完成数据的页面展示
qq_48457459的博客
05-10 7301
本文主要介绍：如何使用Thymeleaf在html页面上显示动态数据，也介绍了如何使用BootStrap文档中现成的HTML、CSS、JS进行前端开发
Spring Boot 实践之七 Spring Boot视图技术(Thymeleaf 基本语法/基本使用/使用Thymeleaf完成数据的页面展示/使用Thymeleaf配置国际化页面)
12-20
在一个Web应用中，通常会采用MVC设计模式来分别实现对应的模型、视图和控制器，其中，视图是用户看到并与之交互的界面。对最初的Web应用来说，视图是由HTML元素组成的静态界面，而后期的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发，对一些常用的视图技术也实现了整合支持，并主要推荐整合模板引擎技术来实现前端页面的动态化内容。本章将对Spring Boot支持的视图技术进行介绍，并使用Spring Boot整合其中常用的Thymeleaf模板引擎进行视图页面的实现。 1 spring Boot支持的视图技术
Thymeleaf（看这一篇就够了）
最新发布
m0_74436895的博客
07-30 1038
它可以轻易的与SpringMVC等Web框架进行集成作为Web应用的模板引擎。Thymeleaf在有服务和无服务的环境下皆可运行，它即可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。当有数据返回到页面时，Thymeleaf会动态地替换掉静态内容，使页面动态显示。Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。Thymeleaf提供了一些内置对象可以操作数据，内置对象可直接在模板中使用，这些对象是以#引用的。
SpringBoot页面展示Thymeleaf
weixin_45283443的博客
08-13 140
https://www.jianshu.com/p/a842e5b5012e
SpringBoot之Thymeleaf页面展示
熊凯瑞的博客
04-03 1140
使用Thymeleaf完成数据的页面展示 1、创建SpringBoot项目，引入Thymeleaf依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf<artifactId> </dependency> 2、编写配置文件，对thymeleaf模板的页面数据缓存进行设置 #
SpringBoot使用thymeleaf完成数据在页面循环展示
weixin_44648502的博客
06-16 2018
首先在pom.xml配置文件添加thymeleaf依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> controller数据处理并跳转页面 @GetMapping("list") public Mod
SpringBoot + thymeleaf 实现分页
weixin_30885111的博客
09-12 753
SpringBoot结合Thymeleaf实现分页，很方便。 效果如下 后台代码 项目结构 1. 数据库Config 由于hibernate自动建表字符集为latin不能插入中文，故需要在application.properties中指定：spring.jpa.properties.hibernate.dialect=com.ikeguang.paging.config.MysqlC...
springboot整合thymeleaf页面展示
qq_56793001的博客
12-21 457
这边可以参考一下springboot整合mybatis文件 controller层需要更改一些。增删改查操作 通过thymeleaf跳转页面展示信息。
一个基于SpringBoot+Thymeleaf渲染的图书管理系统
12-17
以上是基于SpringBoot+Thymeleaf实现图书管理系统的概述，实际项目中还可能涉及到更多的技术细节，如使用Maven或Gradle进行依赖管理，使用Git进行版本控制，以及单元测试、集成测试等最佳实践。通过这个系统，开发者...
2小时候学会SpringBoot整合Thymeleaf生成静态页面
06-18
 课程目标： - 了解Thymeleaf的基本使用 - 实现商品详情页的渲染 - 知道页面静态化的作用 - 实现页面静态化功能 - 使用线程池实现静态页面生成 现在，我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端。...
springboot整合thymeleaf模板
02-17
5. **Thymeleaf表达式**：在模板文件中，可以使用Thymeleaf的表达式来获取模型数据。如`[[${message}]]`用于显示`Model`中的`message`属性。 6. **条件语句和循环**：Thymeleaf提供了`th:if`、`th:unless`、`th:...
TspringBoot 中 Thymeleaf页面数据展示
weixin_43183496的博客
06-20 339
1 , 第一种 th:value="${对象**.**属性}" <div > 用户姓名：<input th:value="${user.name}"> <br/> 用户年龄：<input th:value="${user.age}"/> <br/> 用户生日：<input th:value="${user.birthday}"/> <br/> 时间转换 用户生日：<input th:
springboot分页展示功能_SpringBoot + thymeleaf 实现分页
weixin_39832965的博客
12-19 565
SpringBoot结合Thymeleaf实现分页，很方便。效果如下后台代码项目结构1. 数据库Config由于hibernate自动建表字符集为latin不能插入中文，故需要在application.properties中指定：spring.jpa.properties.hibernate.dialect=com.ikeguang.paging.config.MysqlConfig。MysqlC...
SpringBoot学习（二）thymeleaf写个前端页面展示数据
CKarl的博客
02-05 791
SpringBoot学习（二）thymeleaf写个前端页面展示数据 导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 我们从ThymeleafProperties类可以知道它会从templates文件夹下
Spring Boot项目开发实战:整合thymeleaf实现数据前端展示
xuemeng2016的专栏
11-13 734
传统的 JSP+JSTL 组合是已经过去了，Thymeleaf 是现代服务端的模板引擎，与传统的 JSP 不同，Thymeleaf 可以使用浏览器直接打开，因为可以忽略掉拓展属性，相当于打开原生页面，给前端人员也带来一定的便利。由于 thymeleaf 支持html 原型，也支持在 html 标签里增加额外的属性来达到 “模板+数据” 的展示方式，所以美工可以直接在浏览器中查看页面效果，当服务启动后，也可以让后台开发人员查看带数据的动态页面效果
springboot-Thymeleaf实现数据分页查询
m0_52433668的博客
06-14 1572
springboot-Thymeleaf实现数据分页查询话不多说直接上代码： 第一步：写一个分页查询的工具类 PageUtil.java，代码如下： 第二步：在 controller 层 TestController.java 中调用该工具类实现分页查询，代码如下： 第三步：前端 index.html 代码如下：...
Springboot整合Thymeleaf-分页查询
qq_60506984的博客
12-27 3487
Springboot整合Thymeleaf-分页查询 + MyBatis持久层框架 对 Mybatis的动态SQL有一定的了解！在做条件查询时，就会用到动态SQL！
springboot 使用thymeleaf 局部刷新页面怎么实现？
05-31
在Spring Boot中，要实现局部刷新页面，可以使用Thymeleaf配合Ajax来实现。具体步骤如下： 1. 首先，在页面中引入jquery和thymeleaf的相关库文件： ```html <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script th:src="@{/webjars/thymeleaf-layout-dialect/js/thymeleaf-layout-dialect.min.js}"></script> ``` 2. 在页面中定义一个div，用于显示要刷新的内容： ```html <div id="refreshContent"></div> ``` 3. 创建一个Controller处理Ajax请求，返回要刷新的内容： ```java @Controller public class AjaxController { @GetMapping("/ajax/refresh") public String refreshContent(Model model) { // 将要刷新的数据添加到模型中 model.addAttribute("content", "这是要刷新的内容"); // 返回要刷新的模板文件 return "ajax/refresh :: content"; } } ``` 4. 在页面中定义一个按钮，点击按钮时发送Ajax请求： ```html <button id="refreshBtn" type="button">刷新</button> ``` 5. 使用jquery监听按钮的点击事件，发送Ajax请求并将返回的内容显示到页面上： ```javascript $(function() { $('#refreshBtn').click(function() { $.ajax({ url: '/ajax/refresh', success: function(data) { $('#refreshContent').html(data); } }); }); }); ``` 这样，当用户点击按钮时，就会向服务器发送Ajax请求，返回的数据会被显示在页面上指定的div中，实现了局部刷新页面的效果。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值