springboot中的thymeleaf中的表达式（路径表达式）

路径表达式有两种，一种是相对路径，一种是绝对路径，绝对路径表达式与<a href=""></a>所产生的效果是一样的，一般开发中主要使用的相对路径，这样调试环境发生变化，也不会影响项目的运行。

先创建controller.java

package com.example.control;

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

@Controller
public class MyController {

    @RequestMapping("/hehe")
    public ModelAndView hehe(){
        User user=new User();
        user.setId(1001);
        user.setUsername("zhang san");
        user.setAge(23);
        ModelAndView mv=new ModelAndView();
        mv.setViewName("show");
        mv.addObject("user",user);
        return mv;
    }

    @RequestMapping("/url")
    public String urlexpression(Model model){
        User user=new User();
        user.setId(1001);
        user.setUsername("zhangsan");
        user.setAge(23);
        model.addAttribute("user",user);
        return "url";
    }

    @RequestMapping("/test")
    public @ResponseBody String test(Integer id,String username){
        return "测试编号: "+id+"  测试名称: "+username;
    }

    @RequestMapping("/test1/{id}")
    public @ResponseBody String test1(@PathVariable("id")Integer id){
        return "测试编号: "+id;
    }

    @RequestMapping("/test2/{id}/{username}")
    public @ResponseBody String test2(@PathVariable("id")Integer id,@PathVariable("username")String username){
        return "测试编号: "+id+" 测试名称: "+username;
    }

    @RequestMapping("/url2")
    public String url2(){
        return "url2";
    }

    @RequestMapping("/property")
    public String property(){
        return "property";
    }

}

再创建两个页面文件show.html、url.html、url1.html、property.html。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户的信息：</h1>
<h3>用户编号：<em th:text="${user.getId()}"></em>&nbsp&nbsp
    用户名：<span th:text="${user.getUsername()}"></span>&nbsp&nbsp
    用户年纪：<em th:text="${user.getAge()}"></em>
</h3>
<h1>选择变量表达式(星号表达式):*{}（不推荐）</h1>
<!--
    *{}必须使用th:object属性来绑定这个对象
    在div子标签中来使用*来代替绑定的对象${user}
-->
<div th:object="${user}" >
    用户编号：<span th:text="*{getId()}"></span>&nbsp&nbsp&nbsp&nbsp
    用户性名：<span th:text="*{getUsername()}"></span>&nbsp&nbsp&nbsp&nbsp
    用户年龄：<span th:text="*{getAge()}"></span>
</div>

<h1>标签变量表达式与选择变量表达式的混合使用(这种用法不推荐)</h1>
用户编号：<span th:text="*{user.getId()}"></span>&nbsp&nbsp&nbsp&nbsp
用户性名：<span th:text="*{user.username}"></span>&nbsp&nbsp&nbsp&nbsp
用户年龄：<span th:text="*{user.getAge()}"></span>
</body>
</html>

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.qq.com}">绝对路径跳转到腾迅</a><br/><br/>
<h3><a th:href="@{/hehe}">相对路径跳转到hehe的指向[没有参数](实际开发中推荐使用)</a></h3><br/>
<h2>标准路径带参数</h2><br/>
<a href="/test?id=1001">标准相对路径</a><br/>
<a href="http://127.0.0.1:8080/test?id=1002">标准绝对路径</a><br/>
<h2>url路径表达式路径带参数</h2><br/>
<a th:href="@{/test(id=${user.getId()},username=${user.getUsername()})}">url相对路径(从后台得到编号)</a><br/>
<a th:href="@{http://127.0.0.1:8080/test(id=1002,username='aaaaa')}"}>url绝对路径</a><br/>
小括号代表的是问号，所以想用RESTful方式，只能是在超链接里拼接。<br/>
比如：/test/a/b，只能写成th:href="@{'/test/'+${getA()}+'/'+${getB()}}"
<a th:href="@{'/test1/'+${user.getId()}}"}>RESTful方式超链接带一个参数</a><br/>
<a th:href="@{'/test2/'+${user.getId()}+'/'+${user.getUsername()}}"}>RESTful方式超链接带两个参数</a><br/>
</body>
</html>

url2.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--这种是普通的html5的写法-->
    <!--<script type="text/javascript" src="js/style.js"></script>-->
    <!--这是用的thymeleaf表达式的方式-->
    <script type="text/javascript" th:src="@{js/style.js}"></script>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">

</script>
<br/>
<img src="/img/1.gif"/><br/>
<img th:src="@{/img/1.gif}"><br/>
<p>
<input type="text" id="username" value="999"><br/>
<button type="button" onclick="myFunction()">测试一(引用外部文件)</button><br/>
<button type="button" onclick="ff()">测试二</button><br/>
</p>
</body>
</html>

property.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>常见属性</title>
</head>
<body>
<form method="get" action="/test">
    用户编号:<input type="text" name="id"><br/>
    用户名:<input type="text" name="username"><br/>
    <input type="submit" value="提交"><input type="reset" value="清空">
</form>
<form method="get" th:action="@{/test}">
    用户编号:<input type="text" name="id"><br/>
    用户名:<input type="text" name="username"><br/>
    <input type="submit" value="提交"><input type="reset" value="清空">
</form>
</body>
</html>

还有一个style.js文件。

function myFunction() {
    var a = 4;
    document.getElementById("demo").innerHTML = a * a;
}

function ff() {
    alert(document.getElementById("username").value)
}

这几个页面里的转向方式就是@{}的转向方式，当有多个变量导入时，就在后面加逗号分开就行了。

本文项目地址：https://gitee.com/gangliao/springdemo/tree/master/spring031-thymeleaf-expression

发表于 2022-06-08 20:43 启升阅读(266) 评论(0) 编辑收藏举报

刷新页面返回顶部

springboot中的thymeleaf中的表达式（路径表达式）

公告