zoukankan      html  css  js  c++  java
  • (4)Spring Boot Web开发---静态资源


    使用之前将的快速创建项目的方法,勾选我们需要的场景,这里我需要 web --> websql --> mybatisnosql --> redis ,就勾选相关的场景;


    对静态资源的映射规则

    1. /webjars/**

      凡是访问 /webjars/** 都去 calsspath:/META-INF/resources/webjars 目录下面找资源;

      webjars 是通过 jar 包形式引入静态资源,可以去 http://www.webjars.org
      去看下都有哪些资源可以用过 jar 形式引入;

      通过 webjars方式引入的资源,它们的访问路径就是:

      在这里插入图片描述
      文件在 webjars 下面的路径;

    2. /** 访问当前项目的任何资源 (静态资源文件夹

      如果没有对应的处理器,处理请求,则去以下路径寻找 静态资源 (/ 代表当前项目的根路径):

      • classpath:/META-INF/resources/
      • classpath:/resources/
      • classpath:/static/
      • classpath:/public/
    3. 欢迎页

      静态资源文件夹下面的所有 index.html 页面,都会被映射为 / ;如果在多个地方配置了首页,则 static 下面的 index.html 脱颖而出,成为首页 ;

    4. 改变页面图标

      比如像下面这样,将网页的图标变为自定义的图片;

      在这里插入图片描述

      只需要在静态资源文件夹下面,放一张自己喜欢的图片,取名叫 facvicon.ico 即可 ;

    后记:我们也可以改变静态资源文件夹的位置,通过在配置文件里面配置 :

    spring.resources.static-locations=classpath:/,classpath:/yiaz (可配置多个,用逗号分隔)
    
    

    这样前面默认的几个静态资源文件夹就失效了 ;


    模板引擎

    在这里插入图片描述

    说到模板引擎,可能会感到陌生,其实我们之前使用的,现在感觉落后的 JSP 就是一个模板引擎;

    模板引擎的思路就是,在模板中使用一下特殊的语法,表示这里需要填充数据,然后后来传来数据,最后将数据和模板一起交给模板引擎,模板引擎进行解析,就成了最后的页面,如上图所示;

    Spring Boot 推荐使用的模板引擎是 thymeleaf,高级语言模板引擎;

    1. 引入 thymeleaf
    	<!--引入 thymeleaf 模板引擎-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
    

    然后在我们的类库中,可以看到:

    在这里插入图片描述

    这里Spring Boot为我们添加的是 3.0.11 版本,我们可以自己设置版本;

    在属性里面配置:

    		 <!--自定义 thymeleaf 版本-->
            <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
            <!-- 如果我们使用 3以上的thymeleaf,则需要 layout2以上,这是它的布局功能的支持-->
            <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
    

    这时候再看我们的类库,可以看到:

    在这里插入图片描述
    变为我们制定的版本了;

    这里我们一般不要瞎改,就使用默认版本的,因为涉及到版本匹配的问题;比如,博主使用的是 2.1.3Spring Boot ,经过上面的一通操作,代码成功的跑不起来了,提示版本不对;


    Thymeleaf 使用 & 语法

    只需要将我们的静态资源页面放在 classpath:/templates/ 下面就好了,thymeleaf 就会自动渲染;

    1. 引入名称空间

      使用之前最好在页面中引入名称空间,以便得到语法提示;

      <html xmlns:th="http://www.thymeleaf.org">
      
    2. 语法

      在这里插入图片描述

      但凡涉及到属性或者文本的操操作,th:xxx 会替换掉 xxx ,如果 th:xxx 没有值,则使用 xxx ,如果 th:xxx 有值,则使用 th:xxx

    3. 表达式

      参照 thymeleaf 文档


  • 相关阅读:
    4月7日工作日志
    5月4日工作日志
    4月7日工作日志
    4月1日工作日志
    3月31日工作日志
    3月31日工作日志
    对元素绑定事件方法
    css实现垂直居中的各种方法
    纯css写一个switch开关
    弹性盒模型flex布局
  • 原文地址:https://www.cnblogs.com/young-youth/p/11665581.html
Copyright © 2011-2022 走看看