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

本文介绍了项目中如何在前端使用绝对路径和相对路径引入静态资源,如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>


<!--    绝对路径写法:因为/就表示根路径,而springboot项目寻找静态资源就是从头static目录开始,因此不需要再重复写一遍static-->
    <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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值