thymeleaf标签的使用（传值到页面、弹窗；引入其他的html页面的部分页面）

最新推荐文章于 2024-05-16 17:28:54 发布

Hiber12

最新推荐文章于 2024-05-16 17:28:54 发布

阅读量6.9k

点赞数 1

本文链接：https://blog.csdn.net/Hiber12/article/details/108632669

版权

一、前端页面测试thymeleaf标签

1、测试取值、循环、判断、方框是否默认打勾

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
 sdafasfas
    <!--取值-->
    <br>
    <p th:text="${hello}"></p>

    <!--循环5次列表list并输出每1次的值-->
    <p th:each="str:${list}" th:text="${str}">

    </p>

    <!--循环5次标签里<p></p>的值111-->
    <p th:each="str:${list}">
        111
    </p>

    <!--循环5次标签里<p></p>的input标签，并且input里的数据是th:value的优先级更高！value原生语法不显示！-->
    <p th:each="str:${list}" >
        <input th:value="${str}" value="1111"/>
    </p>

    <!--判断-->
    <p th:if="1==1">我是正确的</p>

    <!--原生语法checked默认方框打勾-->
    <input type="checkbox" checked/>
 <br/>
    <!--使用th:checked语法做判断，是否在方框打勾-->
    <input type="checkbox" th:checked="${check}=='15'"/>
    <!--使用th:checked语法做判断，是否在方框打勾-->
    <input type="checkbox" th:checked="${check}=='1'"/>

</body>
</html>

2、Controller包下web前端传递测试数据给予html页面

@Controller
public class ItemController {

    @RequestMapping("index")
    public String index(ModelMap modelMap){

        List<String> list = new ArrayList<>();
        for (int i = 0; i <5 ; i++) {
            list.add("循环数据"+i);
        }
        modelMap.put("list",list);
        modelMap.put("check","1");   //为1，加入checked，方框打勾；    为其他值，不加入checked，故方框不打勾


        modelMap.put("hello","hello html");//key和value
        return "index";
    }
}

二、传值给弹窗使用

1、普通的href传值，只能在前端页面上传递字符串。

<a href="javascript:a('aaa');">点我1</a>

<script language="JavaScript">
    function a(hello) {
        alert("js函数被调用！"+hello);
    }
</script>

在这里插入图片描述
2、用thymeleaf的扩展标签，th:href，则可以接受web前端服务器传来的参数！！！

<a th:href="'javascript:a(\''+${hello}+'\');'">点我2</a>

<script language="JavaScript">
    function a(hello) {
        alert("js函数被调用！"+hello);
    }
</script>

在这里插入图片描述
因为用到了thymeleaf的扩展标签th，所以这里用到的JavaScript需要被转译，才能被thymeleaf所识别。好好理解下面的解释！！！

连接字符串：第1对单引号+${hello}+第2对单引号

传参字符串：斜杆\和单引号’ ${hello} 斜杆\和单引号’
在这里插入图片描述

三、引入其他html的部分页面：

IndexInner页面：

<body>

被引入的页面QAQ

<div th:fragment="innerPart">被引入页面的片段QWQ</div>

</body>

Index页面：

<!--引入页面-->
<div th:include="indexInner"></div>

<!--引入页面的片段-->
 <div th:include="indexInner::innerPart"></div>

在这里插入图片描述

四、引入静态页面：

在这里插入图片描述
在controller层：

@RequestMapping("{skuId}.html")
public String item(@PathVariable String skuId){
    return "item";
}

绑定skuId作为URL访问路径：
在这里插入图片描述
修改本地hosts文件变更本地地址为item.gmall.com，启动nginx代理端口8082
后边直接加skuId.html即可！完全模仿了京东QWQ

Hiber12

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf标签的使用（传值到页面、弹窗；引入其他的html页面的部分页面）

一、前端页面测试thymeleaf标签1、测试取值、循环、判断、方框是否默认打勾<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ><head> <meta charset="UTF-8"/> <title>Title</title></head&g
复制链接

扫一扫