IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法

      上一篇文件 我们介绍了 IntelliJ  IEDA工具创建 SpringBoot 以及 模板引擎 thymeleaf的简单用法。今天这篇 介绍 如何使用 thymeleaf 访问静态资源 如css,js,图片之类的。

       这次我们打算写一个登录页面,那么我们需要导入css,js之类的东西。首先静态资源默认放在哪呢?

       IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法_第1张图片

       默认static放资源,如css,js,图片等。 templates放html。这些都是 springboot默认配置。我们这里不做修改,默认就默认呗。你改了位置也不见得有多了不得。

       我们知道html文件如果引用css或者js,通常是采用相对路径,如下:

href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

               效果图就是下面这样:

IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法_第2张图片

但是如果是web应用,我们用localhost的形式访问,又会发生什么呢。

IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法_第3张图片

这说明什么,说明在web应用中,static就是根路径了,所以不能出现static。

  那这又怎么解决呢。 thymeleaf是这样解决的。

href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
补上th:href
th:href="@{/bootstrap/css/bootstrap.min.css}"/>

就相当于所有的关于路径都有前面加上 th: 什么的。事实上还有 th:src,th:attr什么的。

那么接下来又发生什么呢。

IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法_第4张图片

如果是本地打开html,识别不了的th:href就直接展示,因为html元素的属性是可以任意拓展的,识别不了就直接展示。那接下来看localhost:8080访问是怎样的呢

IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法_第5张图片

    完美解决。当然js同样道理

href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
href="../../static/layer/skin/layer.css" rel="stylesheet" type="text/css" th:href="@{/layer/skin/layer.css}"/>
href="../../static/login/form-elements.css" rel="stylesheet" type="text/css" th:href="@{/login/form-elements.css}"/>
href="../../static/login/style.css" rel="stylesheet" type="text/css" th:href="@{/login/style.css}"/>



IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法_第6张图片

IntelliJ IDEA 学习SpringBoot(2) thymeleaf 资源访问和路径写法_第7张图片

那么资源访问,这块感觉使用thymeleaf模板引擎是要比jsp引擎要好,至少可以做到本地可以直接浏览页面效果,做到前段和后端的分离。

   那么是不是所有问题都解决了呢。我原本也这样以为,但突然我用了一个插件jquery.backstretch.min.js。用来让图片全屏作为背景的。那么这个是要在脚本中访问图片url。我们看看遇到怎样的难题。


                    
                    

你可能感兴趣的:(IntelliJ,IDEA)