Springboot-thymeleaf URL用法

步骤 1 : 可运行项目

本知识点是建立在 上一个知识点 的基础上进行的改进

首先下载一个简单的可运行项目作为演示：网盘链接：http://t.cn/A6Al5mmq

下载后解压，比如解压到 E:\project\springboot 目录下

步骤 2 : css 文件

在 webapp 目录下新建 static/css 目录，然后新建 style.css 文件

复制div.showing{
    width:80%;
    margin:20px auto;
    border:1px solid grey;
    padding:30px;
}
 
.even{
    background-color: red; 
}
.odd{
    background-color: green;
}

步骤 3 : js 文件

在 webapp 目录下新建 static/js 目录，然后新建 thymeleaf.js 文件

function testFunction(){
    alert("test Thymeleaf.js!");
}

步骤 4 : 修改 hello.html

通过 th:href="@{/static/css/style.css}" 和 th:src="@{/static/js/thymeleaf.js}" 引入 css 和 js 文件

<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>

注意几点：

  1. 使用 @ 这种方式引入，在渲染后的 html 里会自动生成 上下文路径，既如图所示的 /thymeleaf 这个路径
  2. 如果使用浏览器直接打开当前的 hello.html, 依然可以看到 css 和 js 效果，因为如下代码起作用：
href="../../webapp/static/css/style.css"
src="../../webapp/static/js/thymeleaf.js"

所以这样就非常方便前端开发和测试

  1. 在 header 标签里有这么一段：
<script>
testFunction();
</script>

用以表示访问 thymeleaf.js 里的 testFunction函数

完整 hello.html：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
     
    <script>
    testFunction();
    </script>
         
</head>
<body>
<div class="showing">
 
<p th:text="${name}" >name</p>
<p th:text="'Hello！ ' + ${name} + '!'" >hello world</p>
<p th:text="|Hello！ ${name}!|" >hello world</p>
 
</div>
 
</body>
 
</html>

步骤 5 : 测试

运行 Application, 然后访问如下地址进行测试：

http://127.0.0.1:8080/thymeleaf/hello

如图所示，可以看到 一个 js 的对话框，以及灰色的边框效果。
这两个效果是通过 @URL 外部引用 css 文件和 js 文件得到的。

更多关于 Springboot-thymeleaf-url 详细内容，点击学习： https://t.cn/A6Ag8wtM

posted @   梦却了无影踪  阅读(1370)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示

目录