thymeleaf使用-初体验记录

最新推荐文章于 2023-08-03 08:10:11 发布

码农桃子

最新推荐文章于 2023-08-03 08:10:11 发布

阅读量106

点赞数

文章标签： java spring boot spring 前端 intellij-idea

本文链接：https://blog.csdn.net/QQ727338622/article/details/127224573

版权

1、thymeleaf的项目搭建

首先创建springboot项目，相关博客有详细的创建教程，下方仅本人推荐示例(视频中也有相关项目创建教程)：

IDEA创建项目教程:https://www.jianshu.com/p/40422d484475

eclipse创建项目教程:https://blog.csdn.net/qq_35170365/article/details/80688484

项目搭建完成后,配置application.properties，配置如下，端口号只要不和本机当前口号冲突即可，本人用的是8001

server.port=8001 spring.thymeleaf.cache=false

创建thymeleaf网页模板，相关代码如下:

```

Title

```

2、第一个程序

项目结构如图：

第一个程序(基本使用)，实现前端标题的数据渲染，先上代码：

后台创建包controller以及类IndexController：

``` package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList; import java.util.Arrays; import java.util.Date;

　　前端创建html网页，index.html，代码如下：

```

默认的Title

```

　　结果实现如下：

3、常用方法

　　实现后台数据的前端实现，有关对象与类的数据传递：

　　后台创建实体类 User.java，代码如下：

``` package com.thym.thymdemo.view;

import lombok.Data;

import java.util.Date; import java.util.List;

/** * @author June * @date 2021/12/25 15:46 */ @Data public class User { 　　//其中lombok插件可实现创建get、set方法，所以此处并未创建get、set方法 private String username; private Integer age; private Integer sex; private Boolean isVip; private Date createTime; private List tags;

} ```

IndexController.java 有关代码修改如下;

``` package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList; import java.util.Arrays; import java.util.Date;

/** * @author June * @date 2021/12/25 15:35 */ @Controller public class IndexController { @GetMapping("/index") public String index(Model model){ model.addAttribute("title","传递的title"); model.addAttribute("keywords","传递的keywords"); model.addAttribute("description","传递的description"); return "index"; } @GetMapping("/basic") public String basic(Model model){//此处即为javaweb项目中的前后端传值行为 User user = new User(); user.setUsername("lookroot"); user.setAge(32); user.setSex(1); user.setIsVip(false); user.setCreateTime(new Date()); user.setTags(Arrays.asList("PHP","Java")); model.addAttribute("user",user); return "basic"; } } ```

前端创建html页面，basic.html 代码如下;

```

Title

会员

<!--规范话日期格式-->
<p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>

<!--选择结构实现数据的前端显示-->

男

女

默认

<!--replace com1-->
<div th:replace="~{component::com1}"></div>
<!--insert com1-->
<div th:insert="~{component::com1}"></div>
<!--id com2-->
<div th:insert="~{component::#com2}"></div>
<div th:insert="~{component::com3('传递的数据')}"></div>
<div th:insert="~{component::com4(~{::#message})}">
    <p id="message">替换的模块</p>
</div>

```

　　实现结果如下;

4、thymeleaf中JavaScript、css的应用

thymeleaf+css，首先在src\main\resources\static目录下，创建css文件，写入如下代码：

.app{ height: 300px; width: 300px; background-color: blue; }

前端basic页面中代码添加如下(由于所引用的css文件在根目录下，所以可以直接引用)：

```

　　显示效果如下：

　　在html页面内部直接写入css有关代码

　　前端添加代码如下：　

```

　　结果显示如下：

5、thymeleaf中组件的使用

　　创建component.html页面，写入如下代码：

<!DOCTYPE html> <html lang="ch" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <footer th:fragment="com1">  <h2 th:text="${user.username}"></h2> com1 </footer> <div id="com2"> com2 </div> <div th:fragment="com3(message)"> <p th:text="${message}"></p> </div> <div th:fragment="com4(message)"> <p th:replace="${message}"></p> </div> </body> </html>

　　前端页面basic页面代码修改如下;

```

Title rel="stylesheet" th:href="@{app.css}">

<!--replace com1-->
<div th:replace="~{component::com1}"></div>
<!--insert com1-->
<div th:insert="~{component::com1}"></div>
<!--id com2-->
<div th:insert="~{component::#com2}"></div>
<div th:insert="~{component::com3('传递的数据')}"></div>
<div th:insert="~{component::com4(~{::#message})}">
    <p id="message">替换的模块</p>
</div>

```

　　实现结果如下：

码农桃子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf使用-初体验记录

1、thymeleaf的项目搭建首先创建springboot项目，相关博客有详细的创建教程，下方仅本人推荐示例(视频中也有相关项目创建教程)：IDEA创建项目教程:https://www.jianshu.com/p/40422d484475eclipse创建项目教程:https://blog.csdn.net/qq_35170365/article/details/80688484...
复制链接

扫一扫