springboot项目内引入静态资源的路径写法

最新推荐文章于 2024-05-07 16:05:09 发布

装着二筒的包

最新推荐文章于 2024-05-07 16:05:09 发布

阅读量1.3k

点赞数 31

文章标签：后端 html spring boot

本文链接：https://blog.csdn.net/Jtyazs/article/details/136185707

版权

本文介绍了项目中如何在前端使用绝对路径和相对路径引入静态资源，如CSS、JavaScript文件，以及在Thymeleaf模板中动态引入资源的方法。特别强调了在SpringBoot项目中使用相对路径的常见实践。

摘要由CSDN通过智能技术生成

关于项目中静态资源的引入路径写法

区分绝对路径和相对路径：绝对路径从根目录开始，开头必须是根路径/ 而相对路径是以目标自身（html）为基准寻找静态资源
相对路径写法：以页面文件自身为基准寻找资源位置，

其中 ~/表示根层级, ../表示上一层级 ./ 或者是不写表示当前层级本身
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css">
<link href="../themes/icon.css" rel="stylesheet" type="text/css">
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../locale/easyui-lang-zh_CN.js" type="text/javascript"></script>


<link href="/themes/default/easyui.css" rel="stylesheet" type="text/css">
<link href="/themes/icon.css" rel="stylesheet" type="text/css">
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

前端的静态资源引入只需要引入一遍，重复引入或者少引入都会报错

项目内的静态资源层级关系如下：

运行代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="shortcut icon" href="#"/>-->


<!--    关于项目中静态资源的引入路径写法-->
<!--    区分绝对路径和相对路径：绝对路径从根目录开始，开头必须是根路径/ 而相对路径是以目标自身（html）为基准寻找静态资源-->
<!--    相对路径写法：以页面文件自身为基准寻找资源位置，其中 ~/表示根层级,  ../表示上一层级   ./或者是不写表示当前层级本身-->
    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css">
    <link href="../themes/icon.css" rel="stylesheet" type="text/css">
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

</head>


<body>
<table id="dg" class="easyui-datagrid" style="width:700px;height:250px"
       url="data.json" toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="name" width="50">Name</th>
        <th field="age" width="50">Age</th>
        <th field="email" width="80">Email</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add">Add</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit">Edit</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove">Remove</a>
    <a href="#" class="easyui-linkbutton">Remove</a>
</div>

<a href="#" class="easyui-linkbutton" >按钮</a>

</body>

关于使用Thymeleaf 模板引入静态资源文件

例如，如果有一个 CSS 文件位于 static/css/style.css，那么在 Thymeleaf 模板中引入此 CSS 文件的写法为

<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
这样就会在渲染页面时动态地解析出正确的静态资源路径，使得页面能够正确引入该 CSS 文件。
同时页面开头需要加上<html lang="en" xmlns:th="http://www.thymeleaf.org">

在 HTML 或 XML 文档中定义 Thymeleaf 命名空间的声明。通过声明可以在文档中使用 Thymeleaf 模板引擎提供的属性和语法。
具体而言，xmlns:th="http://www.thymeleaf.org" 的作用包括：

允许在标签中使用以 th: 开头的 Thymeleaf 属性，如 th:href、th:src 等。
启用 Thymeleaf 模板引擎解析页面中的 Thymeleaf 表达式和逻辑。
让 Thymeleaf 标签和属性在页面中得到正确的识别和处理。

一般用相对路径会比较多，希望能帮到大家

装着二筒的包

关注

31
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
springboot项目内引入静态资源的路径写法

例如，如果有一个 CSS 文件位于 static/css/style.css，那么在 Thymeleaf 模板中引入此 CSS 文件的写法为。写法：因为/就表示根路径，而springboot项目寻找静态资源就是从头static目录开始，因此不需要再重复写一遍static-->同时页面开头需要加上<html lang="en" xmlns:th="http://www.thymeleaf.org">：绝对路径从根目录开始，开头必须是根路径/ 而相对路径是以目标自身（html）为基准寻找静态资源。
复制链接

扫一扫