[0242-06].第06节:SpringBoot中的Web开发

SpringBoot学习大纲


一、静态资源访问分析:

1.1.静态资源默认路径:

a.官网说明:

b.测试访问 :

  • 1.创建存放静载资源的文件目录,
  • 2.访问测试:当前项目根路径/ + 静态资源名,即http://localhost:8080/timg.png就可以看到静态图片了

1.2.静态资源访问流程:

  • 1.静态映射/** 是拦截所有的请求;所以当请求进来后,先去所有的Controller层查找,看能不能处理。如果找到的话,就会响应请求了;
  • 2.如果不能处理的话,所有请求又都交给静态资源处理器。静态资源也找不到就会响应404页面

1.3.添加静态资源访问前缀:

a.为什么添加静态资源前缀:

  • 1.之所以添加静态资源访问前缀,是因为想把静态资源的请求和动态资源的请求区分开,避免拦截器拦截所有请求,将静态资源单独的过滤出来,更好地配置拦截器,只拦截一些动态资源的访问
  • 2.所以我们要改变默认的静态资源路径,更改方式是需要在配置文件中进行配置。下面方式更改后,浏览器访问静态资源,在所有的静态资源访问都加上了一个前缀:res前缀,所以静态资源的访问的的形式变成:http://localhost:8080/res/50.png

b.配置静态资源访问前缀:

  • 1.官网说明:
  • 2.配置文件更改:

1.4.指定静态资源存放目录:

a.目录配置说明:

  • 1.我们可以指定静态文件存放的路径,配置静态资源存放目录后,其他的静态资源目录就会失效,springBoot将不会读取到

b.底层源码说明:

  • 2.指定的路径也可以写多个,这个属性的底层的代码可以看出在其底层其实是定义的一个数组:

c.配置文件配置多个路径:

  • 1.这个属性的底层是数组类型的,所以可以配置多个值,以逗号分割

1.5.访问webjars

  • 1.webjars:就是一些静态资源jquery等做成了jar包,当需要使用的时候,引入依赖,添加依赖后,就会自动映射

    xml 复制代码
    	<dependency>
    		 <groupId>org.webjars</groupId>
    		 <artifactId>jquery</artifactId>
    		 <version>3.5.1</version>
    	</dependency>
  • 2.自动映射:/webjars/** ,我们可以在webjars官网查看具体依赖

  • 3.添加依赖后,访问静态资源:jquery.js

1.6. 禁用所有静态资源规则:

  • 1.配置:add-mappings: false 禁用所有静态资源规则

    bash 复制代码
    spring:
    #  mvc:
    #    static-path-pattern: /res/**
      resources:
        add-mappings: false   禁用所有静态资源规则

二、欢迎页支持

  • 1.默认配置下:如果在静态资源路径下,如果有 index.html,会默认访问这个页面来作为欢迎页

  • 2.在配置文件中,如果配置了静态资源路径不影响欢迎页index.html的默认访问

  • 3.在配置文件中如果配置了静态资源访问前缀,就不能自动跳转到欢迎页上了

    yml 复制代码
    spring:
    #  mvc:
    #    static-path-pattern: /res/**   这个会导致welcome page功能失效
    
      resources:
        static-locations: [classpath:/haha/]

三、自定义 Favicon

  • 1.`favicon.ico 放在静态资源目录下即可

  • 2.如果配置了静态资源访问前缀肯定会影响图标的出现,所以注释静态资源访问前缀,否则也会影响Favicon小图标的出现

    yml 复制代码
    spring:
    #  mvc:
    #    static-path-pattern: /res/**   这个会导致 Favicon 功能失效

相关推荐
Byron070717 分钟前
从 0 到 1 搭建 Vue 前端工程化体系:提效、提质、降本实战落地
前端·javascript·vue.js
哆啦code梦21 分钟前
前端存储三剑客:localStorage、sessionStorage与Cookie解析
前端·前端存储
徐小夕@趣谈前端34 分钟前
Web文档的“Office时刻“:jitword共建版2.0发布!让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6
Data_Journal1 小时前
如何使用 Python 解析 JSON 数据
大数据·开发语言·前端·数据库·人工智能·php
德育处主任Pro1 小时前
纯前端网格路径规划:PathFinding.js的使用方法
开发语言·前端·javascript
墨笔.丹青1 小时前
基于QtQuick开发界面设计出简易的HarmonyUI界面----下
开发语言·前端·javascript
董世昌411 小时前
深度解析浅拷贝与深拷贝:底层逻辑、实现方式及实战避坑
前端·javascript·vue.js
扶苏10021 小时前
vue使用event.dataTransfer实现A容器数据拖拽复制到到B容器
前端·vue.js·chrome
David凉宸1 小时前
Vue 3 项目的性能优化策略:从原理到实践
前端·vue.js·性能优化
小马_xiaoen1 小时前
Proxy 与 Reflect 从入门到实战:ES6 元编程核心特性详解
前端·javascript·ecmascript·es6