【SpringBoot教程】SpringBoot Thymeleaf 基于HTML5的现代模板引擎

作者简介:大家好,我是撸代码的羊驼,前阿里巴巴架构师,现某互联网公司CTO

联系v:sulny_ann(17362204968),加我进群,大家一起学习,一起进步,一起对抗互联网寒冬

# 序言


Thymeleaf 是Java服务端的模板引擎,与传统的JSP不同,前者可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开原生页面,给前端人员也带来一定的便利。如果你已经厌倦了JSP+JSTL的组合,Thymeleaf或许是个不错的选择!

# 开始使用

1.引入依赖

SpringBoot默认提供了Thymeleaf的Starter,只需简单引入依赖即可。

        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-thymeleaf</artifactId>        </dependency>
 

目前默认版本是2.1,如果想升级版本到3.0,可以这样修改。

​​​​​​​

    <properties>        <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>    </properties>
 

为了方便开发,项目案例采用了热部署工具dev-tools ,这样我们在修改页面之后,IDEA会自动加载,从而达到实现热更新的效果。

​​​​​​​

     <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-devtools</artifactId>            <scope>runtime</scope>        </dependency>
 

注:由于IDEA默认关闭了热部署,需要做一些设置才能使其生效。解决方法:首先按住Ctrl+Shift+Alt+/ 然后进入 Registry (或者双击Shift搜索Registry...),然后勾选compiler.automake.allow.when.app.running 即可。另外,Build->Compiler 也要勾选上Build Project automatically .

2. 添加相关配置

Thymeleaf默认开启了页面缓存,在开发的时候,应该关闭缓存。此外,通常我们还会指定页面的存放路径。(默认是classpath:/templates/)

​​​​​​​

application.yml 配置如下:spring:  thymeleaf:    cache: false #关闭缓存    prefix: classpath:/views/ #添加路径前缀

3.编写HTML

编写Thymeleaf和书写HTML5页面没有什么不同,最大的转变就是使用拓展属性(th:xx)去跟服务端进行数据交互,保留原始页面风格,也是Thymeleaf的推崇的风格。例如下面这个简单的案例,启动项目,我们发现页面跳转的是简书的连接,这一点也验证了Thymeleaf覆盖原生页面数据的极佳能力。

​​​​​​​

页面代码:<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head>    <title>Thymeleaf</title></head><body>    <h2>欢迎使用Thymeleaf!!</h2>    <a href="http://www.baidu.com" th:href="${info}">戳我有惊喜</a></body></html>
后端代码:
@Controllerpublic class UserController {
    @GetMapping("/")    public String index(Model model) {        model.addAttribute("info", "user/list");        return "index";    }
    @GetMapping("/user")    public String hehe(Model model) {        model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));        return "user";    }
    @GetMapping("/user/list")    public String userlist(Model model) {        List<User> userList = new ArrayList<>();        userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));        userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));        userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));        model.addAttribute("userList", userList);        return "userList";    }
}
 

现在我们尝试回填一个表单,展示单个用户信息。

​​​​​​​

<!-- 使用th:object 搭配*{} 可以省略对象名  --><form action="/" th:object="${user}" >    <input type="hidden" name="userId" th:value="*{userId}" />    <input type="text" name="username" th:value="*{username}" />    <input type="text" name="password" th:value="*{password}" /></form>
 

接下来,我们进入一个更复杂的案例,例如展示一个用户列表信息,
不需要编写新的标签,就可以完成对批量用户的遍历。

​​​​​​​

<h2>用户列表</h2><!--说明:th:each="obj,stat:${objects}" 分别代表单个实例,状态(可省略),待遍历对象--><div th:each="user:${userList}">    <input type="hidden" name="userId" th:value="${user.userId}"/>    用户姓名:<input type="text" name="password" th:value="${user.username}"/>    登录密码:<input type="text" name="username" th:value="${user.password}"/></div>

好了,Thymeleaf简单介绍到这里

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

error:move_base_msgs

CMake Warning at /opt/ros/kinetic/share/catkin/cmake/catkinConfig.cmake:76 (find_package): Could not find a package configuration file provided by “move_base_msgs” with any of the following names: move_base_msgsConfig.cmake move_base_msgs-config.cmake …

鼠标光标不见了怎么办?速速get这4个方法!

“非常奇怪&#xff0c;我的鼠标光标用着用着就不见了&#xff0c;这是为什么呢&#xff1f;有什么方法可以解决这个问题吗&#xff1f;” 在电脑使用过程中&#xff0c;有时候会遇到鼠标光标突然消失的情况&#xff0c;这无疑会给我们日常操作带来很大的不便。那么&#xff0c…

Linux bin包生成

需求背景&#xff1a; 在实际项目时我们很少把源码用个tar给到客户&#xff0c;这样显得很不专业&#xff0c;且有的时候我们提供补丁&#xff0c;那么这个时候我们提供一个补丁的bin包可以直接安装运行就显得很高大上了。 物料准备 准备一台liunx&#xff0c;虚拟机亦可&am…

自定义插件vue-router简单实现hashRouter设计思路

步骤 1.挂载 vue.prototype.$router 2.声明两个组件 router-view this.$router.current>component > h(component) router-link h(a,{attrs:{href:#this.to}},this.$slots.default) 3.url的监听&#xff1a;window hashchange的改变 4.定义响应式current&#xff0…

使用Python提取PDF文件中指定页面的内容

在日常工作和学习中&#xff0c;我们经常需要从PDF文件中提取特定页面的内容。在本篇文章中&#xff0c;我们将介绍如何使用Python编程语言和两个强大的库——pymupdf和wxPython&#xff0c;来实现这个任务。 1. 准备工作 首先&#xff0c;确保你已经安装了以下两个Python库&…

JavaScript深拷贝和浅拷贝

对于原始数据类型&#xff0c;并没有深浅拷贝的区别&#xff0c;深浅拷贝都是对于引用数据类型而言&#xff0c;如果我们要赋值对象的所有属性都是引用类型可以用浅拷贝 浅拷贝&#xff1a;只复制一层对象&#xff0c;当对象的属性是引用类型时&#xff0c;实质复制的是其引用&…

【办公软件】Outlook启动一直显示“正在启动”的解决方法

早上打开电脑Outlook2016以后&#xff0c;半个多小时了&#xff0c;一直显示这个界面&#xff1a; 解决办法 按WIN R键打开“运行”&#xff0c;输入如下命令&#xff1a; outlook.exe /safe 然后点击“确定” 这样就进入了Outlook的安全模式。 点击“文件”->“选项”-…

第6节:Vue3 调用函数

在Vue3中&#xff0c;你可以使用setup函数来调用函数。 <template><button click"handleClick">点击我</button> </template><script> import { ref } from vue;export default {setup() {// 创建一个响应式的引用const count ref(0…

nbcio-vue下载安装后运行报错,diagram-js没有安装

更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代码&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在线演示&#xff08;包括H5&#xff09; &#xff1a; http://122.227.135.243:9888 根据…

047:vue加载循环倒计时 示例

第047个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

基于java web的网上书城系统的设计与实现论文

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff0c;商品交易当然也不能排除在外&#xff0c;随着商品交易管理的不断成熟&#xff0c;它彻底改变了过去传统的经营管理方式&#xff0c;不仅使商品…

32、Bean的生产顺序是由什么决定的?

Bean的生产顺序是由什么决定的? BeanDefinition的注册顺序是有什么决定的? Bean在生产之前有个临时状态:BeanDefinition;存储着bean的描述信息。由BeanDefinition决定着Bean的生产顺序。会按照BeanDefinition的注册顺序来决定Bean的生产顺序。因为所有的BeanDefinition存…

Lua字符串(包含任意字符,如中文)任意位置截取

常规的截取只需要lua自带的api就可以解决问题:如 string.sub 但是当字符串之中含有中文或者符号的时候,这些接口就麻爪了,当然lua后续更新有可能支持,至少本少当前的Lua版本是不支持的。 废话少说,直接上代码和测试用例 -- 判断utf8字符byte长度 function stringTool.ch…

统信UOS_麒麟KYLINOS上跨架构下载离线软件包

原文链接&#xff1a;统信UOS/麒麟KYLINOS上跨架构下载离线软件包 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在统信UOS/麒麟KYLINOS上跨架构下载离线软件包的实用教程。在我们的日常工作中&#xff0c;可能会遇到这样的情况&#xff1a;需要为不同架构的设备下…

【总结】机器学习中的15种分类算法

目录 一、机器学习中的分类算法 1.1 基础分类算法 1.2 集成分类算法 1.3 其它分类算法&#xff1a; 二、各种机器学习分类算法的优缺点 分类算法也称为模式识别&#xff0c;是一种机器学习算法&#xff0c;其主要目的是从数据中发现规律并将数据分成不同的类别。分类算法通…

鸿蒙OS应用开发之数据类型

前面学习了一个简单的例子,这是多年来学习应用程序开发的经典路径,在这里也是这种待遇,通过这样的学习明白了一个简单应用是怎么样构成的,知道它是怎么运行输出的。在这个基础之上,你还是不会开发应用程序的,因为你还没有学习鸿蒙应用的开发语言基础,所以在这里要学习一…

nvue页面用法uniapp

1.介绍 Nvue是一个基于weex改进的原生渲染引擎&#xff0c;它在某些方面要比vue更高性能&#xff0c;在app上使用更加流畅&#xff0c;但是缺点也很明显&#xff0c;没有足够的api能力&#xff0c;语法限制太大&#xff0c;所以nvue适用于特定场景&#xff08;需要高性能的区域…

排序算法——桶排序/基数排序/计数排序

桶排序 是计数排序的升级版。它利用了函数的映射关系&#xff0c;高效与否的关键就在于这个映射函数的确定。桶排序 (Bucket sort)的工作的原理&#xff1a; 假设输入数据服从均匀分布&#xff0c;将数据分到有限数量的桶里&#xff0c;每个桶再分别排序&#xff08;有可能再使…

pve(proxmox)宿主机奔溃无法进入系统,lxc容器和虚拟机迁移,无备份,硬盘未损坏,记录数据找回过程及思考

pve的主机突然CPU满载,然后远程断电后pve就无法启动了,之前一直上面的虚拟机和容器也没有备份,折腾了两天总算找回来了记录一下处理过程和思路,方便后续查找。 一、隐患分析 1.周四突然手欠,由于之前家里的pve主机老给我发邮件,提示我硬盘有问题,但可以正常使用,我从…

【使用apache snakeyaml 管理yml文件】

使用apache snakeyaml 管理yml文件 1. 一个Yaml工厂2.Yaml工具类3. 测试类4. 完成 &#xff01; OK 1. 一个Yaml工厂 public class YamlFactory {public static YamlUtil get(){return new YamlUtil();} }2.Yaml工具类 Slf4j public class YamlUtil {private Yaml yaml;publi…