0
点赞
收藏
分享

微信扫一扫

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页面
在这里插入图片描述

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

路径表达式(不带参)

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

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

路径表达式(带参)

单个参数

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>```

举报

相关推荐

0 条评论