Thymeleaf介绍和基操(附截图和代码)

1.Thymeleaf 简介

Thymeleaf是一个Java XML / XHTML / HTML5 模板引擎 ,可以在Web(基于servlet )和非Web环境中工作。 它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5,但它甚至可以在脱机环境中处理任何XML文件。 它提供完整的Spring Framework。

在Web应用程序中,Thymeleaf旨在成为JavaServer Pages (JSP)的完全替代品,并实现自然模板的概念:模板文件可以直接在浏览器中打开,并且仍然可以正确显示为网页。

Thymeleaf是开源软件、许可下 Apache许可证2.0.

2. 快速创建Thymeleaf项目

1.先创建spring boot项目
在这里插入图片描述
2.勾选Spring web常见web工程,和模板引擎中的Thymeleaf。
在这里插入图片描述
3.idea自动将Thymeleaf的相关以来导入pom.xml文件中
在这里插入图片描述
Thymeleaf项目的创建完成!

3. Thymeleaf表达式

标准环境表达式和选择变量表达式

1.首先创建实体类(id,username,age)以及getter和setter方法
在这里插入图片描述
2.创建控制类,user对象,并为user对象赋值传给userDetail页面在这里插入图片描述
3.编写html页面
在这里插入图片描述

注意:
一定要在开头加上thymeleaf的命名空间"xmlns:th=“http://www.thymeleaf.org”",否则将无法识别下面的thyme leaf语句

4.访问后的界面
在这里插入图片描述

区别:
标准环境表达式使用"${ }“来传递参数
而选择变量表达式(又叫星号表达式)使用” *{ } "来传递参数
说明:
" *{ } “必须使用th:object属性来绑定这个对象
在div子标签中使用 " * " 来代替绑定的对象 ${user}
推荐使用” ${ } "而不推荐 " * "
也可以混合使用,不推荐。

路径表达式(不带参)

1.编写控制类
在这里插入图片描述
2.编写html界面
在这里插入图片描述
3.访问界面后
在这里插入图片描述

上面内容结束,注意事项如下:

说明

  1. 路径表达式格式为: a th:href=" @{ } "
    2.由于绝对路径的路径可能会更改,因此工作中更推荐使用相对路径。

路径表达式(带参)

单个参数

1.单个参数(采用拼接字符串形式),同时也可以用另一种方式,下面有介绍
在这里插入图片描述

2.控制类的方法
在这里插入图片描述3.结果界面在这里插入图片描述
在这里插入图片描述

后台获取多个参数

控制类界面
在这里插入图片描述
url.html界面
在这里插入图片描述
在这里插入图片描述

这里有两种方式获取后台数据
第一种仍为拼接字符串的做法,用"?“,”&"等符号拼接字符串
第二种需要在路径后面加上括号,括号里描述各个属性所对于的值,不需要拼接字符串,强烈推荐第二种。

所用到的代码
1.controller类

package com.springboot_thymeleaf;

import com.springboot_thymeleaf.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UserController {
    @RequestMapping("/user/detail")
    public ModelAndView userDetail(){
        ModelAndView modelAndView=new ModelAndView();
        User user=new User();
        user.setId(1);
        user.setUsername("liHua");
        user.setAge(23);
        modelAndView.setViewName("userDetail");
        modelAndView.addObject("user",user);
        return modelAndView;
    }
    @RequestMapping("/url")
    public String urlExpression(Model model){
        model.addAttribute("id",1001);
        model.addAttribute("age",20);
        model.addAttribute("username","zhaoliu");
        return "url";
    }


    @RequestMapping(value = "test")

    public @ResponseBody String test(String username){
        return "请求路径/test,参数是:"+username;
    }
    @RequestMapping(value = "/test1")
    @ResponseBody
    public String test1(Integer id,String username,Integer age){
        return "请求路径/test1,参数id:"+id+",username="+username+",age="+age;
    }
}




2.userDetail.html

```java

```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--推荐-->
<h2>标准环境表达式:${} </h2>
用户编号:<span th:text="${user.id}"></span><br>
用户姓名:<span th:text="${user.username}"></span><br>
用户年龄:<span th:text="${user.age}"></span><br>
<br>
<!--不推荐-->
<h2>选择变量表达式(星号表达式):*{}</h2>
<div th:object="${user}">
    用户编号:<span th:text="*{id}"></span><br>
    用户姓名:<span th:text="*{username}"></span><br>
    用户年龄:<span th:text="*{age}"></span><br>
</div>
</body>
</html>
3.url.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>URL路径表达式</title>
</head>
<body>
<h1>URL路径表达式:@{...}</h1>
<h2>a标签中的绝对路径(没有参数)</h2>
<a href="http://www.baidu.com">传统写法:跳转至百度</a><br>
<a th:href="@{http://www.baidu.com}">路径表达式:跳转到百度</a><br>
<a th:href="@{http://localhost:8080/user/detail}">跳到/user/detail</a>
<br>
<h2>URL路径表达式,相对路径(没有参数)</h2>
<a th:href="@{/user/detail}">跳转到:/user/detail</a><br>

<h2>URL绝对路径(带参)</h2>
<a th:href="@{http://localhost:8080/test?username='zhangsan'}">绝对路径,带参数/test,并带参数username</a>

<h2>URL相对路径</h2>
<a th:href="@{/test?username='lisi'}">相对路径,带参数/test,并带参数username</a>

<h2>相对路径(带参数:后台获取的参数值)</h2>
<a th:href="@{'/test?username='+${id}}">相对路径:获取后台参数值</a>

<h2>相对路径(带参数:后台获取的多个参数值)</h2>
<a th:href="@{'/test1?id='+${id}+'&username='+${username}+'&age='+${age}}">相对路径:获取后台参数值</a><br>
<a th:href="@{/test1(id=${id},username=${username},age=${age})}">第二种相对路径:获取后台参数值</a>
</body>
</html>```

  • 16
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
以下是使用Thymeleaf和MyBatis实现下拉框的前后端代码示例。 后端代码: **Java实体类** ``` public class User { private Integer id; private String name; private Integer gender; // 省略getter和setter方法 } ``` **MyBatis映射文件** ``` <select id="findAll" resultType="User"> select * from user </select> ``` **Controller** ``` @RequestMapping("/user") @Controller public class UserController { @Autowired private UserService userService; @GetMapping("/add") public String add(Model model) { List<User> userList = userService.findAll(); model.addAttribute("userList", userList); model.addAttribute("user", new User()); return "user/add"; } @PostMapping("/save") public String save(User user) { userService.save(user); return "redirect:/user/add"; } } ``` 前端代码: **HTML代码** ``` <form th:action="@{/user/save}" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="name" required="required" /> </div> <div> <label for="gender">Gender:</label> <select id="gender" name="gender"> <option value="">--Please select--</option> <option th:each="user : ${userList}" th:value="${user.id}" th:text="${user.name}"></option> </select> </div> <button type="submit">Save</button> </form> ``` 在这个例子中,我们首先在Controller中查询了所有的用户,并将它们作为一个列表传递给Thymeleaf模板。接着,在HTML模板中,我们通过Thymeleaf的each语法循环遍历用户列表,并将每个用户的id和name作为下拉框的value和text属性。当用户提交表单时,它将被发送到Controller的save方法中,最终保存到数据库中。 这是一个简单的例子,你可以根据你的实际需求进行修改和扩展。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小威要向诸佬学习呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值