【WEEK9】 【DAY5】Web开发静态资源处理【中文版】

news2024/12/26 22:05:47

2024.4.26 Friday

目录

  • 7.Web开发静态资源处理
    • 7.1.Web开发探究
      • 7.1.1.简介
      • 7.1.2.使用SpringBoot的步骤：
        • 7.1.2.1.创建一个SpringBoot应用，选择我们需要的模块，SpringBoot就会默认将我们的需要的模块自动配置好
        • 7.1.2.2.手动在配置文件中配置部分配置项目就可以运行起来了
        • 7.1.2.3.专注编写业务代码，不需要考虑以前那样一大堆的配置了。
    • 7.2.静态资源处理
      • 7.2.1.静态资源映射规则
        • 7.2.1.1.新建springboot-03-web project
        • 7.2.1.2.删除无关文件
        • 7.2.1.3.新建HelloController.java
        • 7.2.1.4.找到WebMvcAutoConfiguration（快捷键shift+shift）
      • 7.2.2.什么是webjars呢？
        • 7.2.2.1.第一种静态资源映射规则
        • 7.2.2.2.第二种静态资源映射规则
        • 7.2.2.3.自定义静态资源路径
      • 7.2.3.总结
        • 7.2.3.1.在springboot，我们可以使用一下方式处理静态资源
        • 7.2.3.2.优先级：resources > static（默认） > public
    • 7.3.首页处理
      • 7.3.1.首页如何定制
        • 7.3.1.1.进入WebMvcAutoConfiguration.java
        • 7.3.1.2.修改图标

7.Web开发静态资源处理

7.1.Web开发探究

7.1.1.简介

接下来开始学习SpringBoot与Web开发，从这一章往后，就属于实战部分的内容了；
其实SpringBoot的东西用起来非常简单，因为SpringBoot最大的特点就是自动装配。

7.1.2.使用SpringBoot的步骤：

7.1.2.1.创建一个SpringBoot应用，选择我们需要的模块，SpringBoot就会默认将我们的需要的模块自动配置好
7.1.2.2.手动在配置文件中配置部分配置项目就可以运行起来了
7.1.2.3.专注编写业务代码，不需要考虑以前那样一大堆的配置了。

要熟悉掌握开发，之前学习的自动配置的原理一定要搞明白！
比如SpringBoot到底帮我们配置了什么？我们能不能修改？我们能修改哪些配置？我们能不能扩展？

  • 向容器中自动配置组件 ：*** Autoconfiguration
  • 自动配置类，封装配置文件的内容：***Properties
    没事就找找类，看看自动装配原理！
    我们之后来进行一个单体项目的小项目测试，让大家能够快速上手开发！

7.2.静态资源处理

7.2.1.静态资源映射规则

  • 写请求非常简单，那我们要引入我们前端资源，我们项目中有许多的静态资源，比如css，js等文件，这个SpringBoot怎么处理呢？
  • 如果我们是一个web应用，我们的main下会有一个webapp，我们以前都是将所有的页面导在这里面的，对吧！但是我们现在的pom呢，打包方式是为jar的方式，那么这种方式SpringBoot能不能来给我们写页面呢？当然是可以的，但是SpringBoot对于静态资源放置的位置，是有规定的！
7.2.1.1.新建springboot-03-web project

在这里插入图片描述
在这里插入图片描述
新建后会出现反常离奇的问题->删除再新建
添加maven支持（在Project Structure->Modules点击加号添加对应项目），
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
记得修改添加的名称为需要的名称
在这里插入图片描述

按照惯例修改settings中的maven，jdk和Java版本，Project Structure中的jdk和Java版本。重新加载Maven再运行。

7.2.1.2.删除无关文件

在这里插入图片描述

7.2.1.3.新建HelloController.java

在这里插入图片描述

package com.P14.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello(){
        return "hello world";
    }
}

测试一下
http://localhost:8080/hello
在这里插入图片描述

7.2.1.4.找到WebMvcAutoConfiguration（快捷键shift+shift）

SpringBoot中，SpringMVC的web配置都在 WebMvcAutoConfiguration 这个配置类里面
静态资源放在static文件夹下（还可以放哪得看源码）
WebMvcAutoConfigurationAdapter（line188）
找到addResourceHandlers（line333）添加资源处理器

public void addResourceHandlers(ResourceHandlerRegistry registry) {
   if (!this.resourceProperties.isAddMappings()) {
      logger.debug("Default resource handling disabled");
      return;
   }//如果被自定义了就直接return，怎么自定义？
   addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");
   addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
      registration.addResourceLocations(this.resourceProperties.getStaticLocations());
      if (this.servletContext != null) {
         ServletContextResource resource = new ServletContextResource(this.servletContext, SERVLET_LOCATION);
         registration.addResourceLocations(resource);
      }
   });
}

怎么自定义：找到@EnableConfigurationProperties({ WebMvcProperties.class, WebProperties.class })（line186）中的WebMvcProperties，点击进入可以自己配置。
读一下源代码：比如所有的 /webjars/** ， 都需要去 classpath:/META-INF/resources/webjars/ 找对应的资源。

7.2.2.什么是webjars呢？

Webjars本质就是以jar包的方式引入我们的静态资源 ， 我们以前要导入一个静态资源文件，直接导入即可。

7.2.2.1.第一种静态资源映射规则

使用SpringBoot需要使用Webjars
https://www.webjars.org/
在这里插入图片描述

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.4.1</version>
</dependency>

将该段代码放入pom.xml文件中的dependencies部分内

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.7.13</version>
      <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.example</groupId>
   <artifactId>springboot-03-web2</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>springboot-03-web2</name>
   <description>springboot-03-web2</description>
   <properties>
      <java.version>8</java.version>
   </properties>
   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>

      <dependency>
         <groupId>org.webjars</groupId>
         <artifactId>jquery</artifactId>
         <version>3.4.1</version>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>

</project>

导入完毕，查看webjars目录结构，并访问Jquery.js文件！
在这里插入图片描述
重启并访问：只要是静态资源，SpringBoot就会去对应的路径寻找资源，我们这里访问：
http://localhost:8080/webjars/jquery/3.4.1/jquery.js
在这里插入图片描述

7.2.2.2.第二种静态资源映射规则

那我们项目中要是使用自己的静态资源该怎么导入呢？我们看下一行代码；
7.2.2.2.1.WebMvcAutoConfiguration.java->getStaticPathPattern（line339）->WebMvcProperties.java中的getStaticPathPattern方法：点击staticPathPattern（line184）->private String staticPathPattern = “/**”;（line92）该语句的意思是在目录下的所有都可以识别
7.2.2.2.2.WebMvcAutoConfiguration.java中的WebMvcProperties（line186）->resourceProperties点进去看一下分析

关于看源码建议打开结构看比较清晰，alt+7快捷键

7.2.2.2.3.WebMvcProperties.java

private String[] staticLocations = CLASSPATH_RESOURCE_LOCATIONS;

（line95）
点击进入CLASSPATH_RESOURCE_LOCATIONS

private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-INF/resources/",
      "classpath:/resources/", "classpath:/static/", "classpath:/public/" };

（line88）
ResourceProperties 可以设置和我们静态资源有关的参数；这里面指向了它会去寻找资源的文件夹，即上面数组的内容。
所以得出结论，以下四个目录存放的静态资源可以被我们识别：

"classpath:/META-INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/"

在这里插入图片描述
在以上子文件夹内创建的js文件都可以被访问
7.2.2.2.4.测试
新建3个1.js，分别位于public文件夹，resources文件夹和static文件夹内，内容分别写hello_public，hello_resources，hello_static，重启并访问
http://localhost:8080/1.js
在这里插入图片描述
比较得出位于resources文件夹下的js文件优先级高于其他两个文件夹的
在这里插入图片描述

删除resources中的1.js文件，比较得出static文件夹下的优先级比public的高
在这里插入图片描述

7.2.2.3.自定义静态资源路径

我们也可以自己通过配置文件来指定一下，哪些文件夹是需要我们放静态资源文件的，在application.properties中配置
如：spring.resources.static-locations=classpath:/coding/,classpath:/kuang/
一旦自己定义了静态文件夹的路径，原来的自动配置就都会失效了！->非常不推荐

7.2.3.总结

7.2.3.1.在springboot，我们可以使用一下方式处理静态资源
  • webjars localhost:8080/webjars/
  • public，static，/**，resources localhost:8080/
7.2.3.2.优先级：resources > static（默认） > public

7.3.首页处理

7.3.1.首页如何定制

7.3.1.1.进入WebMvcAutoConfiguration.java

找到WelcomePageHandlerMapping欢迎页的处理映射方法（line439）

@Bean
public WelcomePageHandlerMapping welcomePageHandlerMapping(ApplicationContext applicationContext,
      FormattingConversionService mvcConversionService, ResourceUrlProvider mvcResourceUrlProvider) {
   return createWelcomePageHandlerMapping(applicationContext, mvcConversionService, mvcResourceUrlProvider,
         WelcomePageHandlerMapping::new);
}

@Bean
public WelcomePageNotAcceptableHandlerMapping welcomePageNotAcceptableHandlerMapping(
      ApplicationContext applicationContext, FormattingConversionService mvcConversionService,
      ResourceUrlProvider mvcResourceUrlProvider) {
   return createWelcomePageHandlerMapping(applicationContext, mvcConversionService, mvcResourceUrlProvider,
         WelcomePageNotAcceptableHandlerMapping::new);
}

private <T extends AbstractUrlHandlerMapping> T createWelcomePageHandlerMapping(
      ApplicationContext applicationContext, FormattingConversionService mvcConversionService,
      ResourceUrlProvider mvcResourceUrlProvider, WelcomePageHandlerMappingFactory<T> factory) {
   TemplateAvailabilityProviders templateAvailabilityProviders = new TemplateAvailabilityProviders(
         applicationContext);
   String staticPathPattern = this.mvcProperties.getStaticPathPattern();
   T handlerMapping = factory.create(templateAvailabilityProviders, applicationContext, getIndexHtmlResource(),
         staticPathPattern);
   handlerMapping.setInterceptors(getInterceptors(mvcConversionService, mvcResourceUrlProvider));
   handlerMapping.setCorsConfigurations(getCorsConfigurations());
   return handlerMapping;
}

其中line459的getIndexHtmlResource指向line492这段

private Resource getIndexHtmlResource() {
   for (String location : this.resourceProperties.getStaticLocations()) {
      Resource indexHtml = getIndexHtmlResource(location);
      if (indexHtml != null) {
         return indexHtml;
      }
   }
   ServletContext servletContext = getServletContext();
   if (servletContext != null) {
      return getIndexHtmlResource(new ServletContextResource(servletContext, SERVLET_LOCATION));
   }
   return null;
}

再向后可见

private Resource getIndexHtmlResource(String location) {
   return getIndexHtmlResource(this.resourceLoader.getResource(location));
}

private Resource getIndexHtmlResource(Resource location) {
   try {
      Resource resource = location.createRelative("index.html");
      if (resource.exists() && (resource.getURL() != null)) {
         return resource;
      }
   }
   catch (Exception ex) {
   }
   return null;
}

Resource resource = location.createRelative(“index.html”);说明index.html会被映射到首页。
删除原有的所有1.js文件，新建index.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>first page</h1>

</body>
</html>

重启并访问
http://localhost:8080/
在这里插入图片描述

7.3.1.2.修改图标

选择图片导入IDEA，命名为favicon.ico
原理：与其他静态资源一样，Spring Boot在配置的静态内容位置中查找 favicon.ico。如果存在这样的文件，它将自动用作应用程序的favicon。
在这里插入图片描述
重启并访问（Chrome没加载出来，换成edge可以了）
http://localhost:8080/

在这里插入图片描述
也有可能需要关闭SpringBoot默认图标（我并没有修改这个就能刷新出图标了）
2.2.x之后的版本（如2.3.0）都不需要这步

#关闭默认图标
spring.mvc.favicon.enabled=false

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1627605.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

.NET Core Swagger运行异常

.NET Core Swagger运行异常

遇到的问题 因为新增了一个控制器方法&#xff0c;从而导致在运行Swagger的时候直接报错&#xff0c;异常如下&#xff1a; SwaggerGeneratorException: Conflicting method/path combination "POST api/UserOperationExample" for actions - WebApi.Controllers.Us…
阅读更多...
OpenSceneGraph

OpenSceneGraph

文章目录 关于 OpenSceneGraphScreenshots - OpenMW 关于 OpenSceneGraph 官网&#xff1a;https://openscenegraph.github.io/openscenegraph.io/github : https://github.com/openscenegraph/OpenSceneGraphClasses : https://podsvirov.github.io/osg/reference/opensceneg…
阅读更多...
汽车新智能图谱里：理解腾讯的AI TO B路径

汽车新智能图谱里：理解腾讯的AI TO B路径

将自身的C2B产品和产业理解充分AI化&#xff0c;在自身内部场景率先验证跑通后&#xff0c;进而释放给产业伙伴&#xff0c;对应到具体的需求痛点&#xff0c;一起打磨对应的行业AI模型。 这也恰是腾讯“实用”标签背后的AI产业路径。 作者|皮爷 出品|产业家 成本、性价…
阅读更多...
用NuGet安装 Oracle ODP.NET

用NuGet安装 Oracle ODP.NET

oracle官网原文&#xff1a;Using NuGet to Install and Configure Oracle Data Provider for .NET Using NuGet to Install and Configure Oracle Data Provider for .NET In this section, you will install ODP.NET NuGet packages from nuget.org. Select View > Solut…
阅读更多...
CARLA (I)--Ubuntu20.04 服务器安装 CARLA_0.9.13服务端和客户端详细步骤

CARLA (I)--Ubuntu20.04 服务器安装 CARLA_0.9.13服务端和客户端详细步骤

目录 0. 说明0.1 应用场景&#xff1a;0.2 本文动机&#xff1a; 1. 准备工作2. 安装 CARLA 服务端软件【远程服务器】3. 安装 CARLA 客户端【远程服务器】3.1 .egg 文件安装&#xff1a;3.2 .whl 文件安装&#xff1a;3.3 从Pypi下载Python package 4. 运行服务端程序5. 运行客…
阅读更多...
分布式版本控制系统——Git

分布式版本控制系统——Git

分布式版本控制系统——Git 一、Git安装二、创建版本库三、将文件交给Git管理四、Git的工作区和暂存区1.工作区&#xff08;Working Directory&#xff09;2.版本库 五、版本回退和撤销修改1.版本回退2.撤销修改 六、删除文件七、常用基础命令总结八、参考 分布式版本控制系统&…
阅读更多...
快手面试算法真题

快手面试算法真题

按照html中的标签层数遍历节点名。 例如&#xff1a;html代码如下&#xff1a;(上面的数字表示层数) <!-- 1 --><div class"div1"><!-- 2 --><span class"span1"></span><!-- 2 --><p class"p1"><…
阅读更多...
Chrome 网络调试程序 谷歌网络调试 network

Chrome 网络调试程序 谷歌网络调试 network

目录 1.网络面板总览2.概况了解3.Waterfall接口排队等待时间4.关注请求接口的Size,可能是占据内存溢出的接口5.过滤器一栏 fetch/xhr 什么意思6. Stalled 什么意思7.Queueing 什么意思8.Queueing和Stalled之间什么关系9.为什么会有阻塞状态10.Time列是pending 什么意思 1.网络面…
阅读更多...
【03-掌握Scikit-learn：深入机器学习的实用技术】

【03-掌握Scikit-learn：深入机器学习的实用技术】

文章目录 前言数据预处理缺失值处理数据缩放 特征选择模型训练参数调整模型评估总结 前言 经过了对Python和Scikit-learn的基础安装及简单应用&#xff0c;我们现在将更深入地探究Scikit-learn的实用技术&#xff0c;以进一步提升我们的数据科学技能。在本文中&#xff0c;我们…
阅读更多...
江苏开放大学2024年春《机电设备安装与调试 050095》第三次形成性考核作业参考答案

江苏开放大学2024年春《机电设备安装与调试 050095》第三次形成性考核作业参考答案

电大搜题 多的用不完的题库&#xff0c;支持文字、图片搜题&#xff0c;包含国家开放大学、广东开放大学、超星等等多个平台题库&#xff0c;考试作业必备神器。 公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#…
阅读更多...
【React】CSS 局部样式

【React】CSS 局部样式

书写 CSS 的时候&#xff0c;如果 CSS 文件名包含 module&#xff0c;那么说明该 CSS 是一个局部 CSS 样式文件&#xff0c;类似于 vue 中的 scoped。 .avatarContainer {width: 40px;height: 40px;border-radius: 50%;background: rgb(213, 226, 226); }import styles from ..…
阅读更多...
tcp服务器端与多个客户端连接

tcp服务器端与多个客户端连接

如果希望Tcp服务器端可以与多个客户端连接&#xff0c;可以这样写&#xff1a; tcpServernew QTcpServer(this);connect(tcpServer,SIGNAL(newConnection()),this,SLOT(onNewConnection())); void MainWindow::onNewConnection() {QTcpSocket *tcpSocket;//TCP通讯的Sockettcp…
阅读更多...
分布式WEB应用中会话管理的变迁之路

分布式WEB应用中会话管理的变迁之路

Session一词直译为“会话”&#xff0c;意指有始有终的一系列动作&#xff0f;消息。Session是Web应用蓬勃发展的产物之一&#xff0c;在Web应用中隐含有“面向连接”和“状态保持”两个含义&#xff0c;同时也指代了Web服务器与客户端之间进行状态保持的解决方案。 在Web应用…
阅读更多...
从单按键状态机思维扫描引申到4*4矩阵按键全键无冲扫描，一步一步教，超好理解，超好复现（STM32程序例子HAL库）

从单按键状态机思维扫描引申到4*4矩阵按键全键无冲扫描，一步一步教，超好理解，超好复现（STM32程序例子HAL库）

目前大部分代码存在的问题 ​ 单次只能对单个按键产生反应&#xff1b;多个按键按下就难以修改&#xff1b;并且代码耦合度较高&#xff0c;逻辑难以修改&#xff0c;对于添加长按&#xff0c;短按&#xff0c;双击的需求修改困难。 解决 16个按键按下无冲&#xff0c;并且代…
阅读更多...
微信小程序开发:2.小程序组件

微信小程序开发:2.小程序组件

常用的视图容器类组件 View 普通的视图区域类似于div常用来进行布局效果 scroll-view 可以滚动的视图&#xff0c;常用来进行滚动列表区域 swiper and swiper-item 轮播图的容器组件和轮播图的item项目组件 View组件的基本使用 案例1 <view class"container"&…
阅读更多...
LT9611UXC双端口 MIPI DSI/CSI 转 HDMI2.0，带音频

LT9611UXC双端口 MIPI DSI/CSI 转 HDMI2.0，带音频

1. 说明 LT9611UXC 是一款高性能 MIPI DSI/CSI 至 HDMI2.0 转换器。MIPI DSI/CSI 输入具有可配置的单端口或双端口&#xff0c;具有 1 个高速时钟通道和 1~4 个高速数据通道&#xff0c;工作速率最高为 2Gbps/通道&#xff0c;可支持高达 16Gbps 的总带宽。 LT9611UXC 支持突发…
阅读更多...
Fluent.Ribbon创建Office的RibbonWindow菜单

Fluent.Ribbon创建Office的RibbonWindow菜单

链接&#xff1a; Fluent.Ribbon文档 优势&#xff1a; 1. 可以创建类似Office办公软件的复杂窗口&#xff1b; 2. 可以应用自定义主题风格界面
阅读更多...
视频滚动字幕一键批量轻松添加，解锁高效字幕编辑，提升视频质量与观众体验

视频滚动字幕一键批量轻松添加，解锁高效字幕编辑，提升视频质量与观众体验

视频已成为我们获取信息、娱乐休闲的重要渠道。一部成功的视频作品&#xff0c;除了画面精美、音质清晰外&#xff0c;字幕的添加也是至关重要的一环。字幕不仅能增强视频的观感&#xff0c;还能提升信息的传达效率&#xff0c;让观众在享受视觉盛宴的同时&#xff0c;更加深入…
阅读更多...
SpringCloud系列（18）--将服务提供者Provider注册进Consul

SpringCloud系列（18）--将服务提供者Provider注册进Consul

前言&#xff1a;在上一章节中我们把服务消费者Consumer注册进了Zookeeper&#xff0c;并且成功通过服务消费者Consumer调用了服务提供者Provider&#xff0c;而本章节则是关于如何将服务提供者Provider注册进Consul里 准备环境&#xff1a; 先安装Consul&#xff0c;如果没有…
阅读更多...
mac资源库的东西可以删除吗？提升Mac运行速度秘籍 Mac实用软件

mac资源库的东西可以删除吗？提升Mac运行速度秘籍 Mac实用软件

很多小伙伴在使用mac电脑处理工作的时候&#xff0c;就会很疑惑&#xff0c;电脑的运行速度怎么越来越慢&#xff0c;就想着通过删除mac资源库的东西&#xff0c;那么mac资源库的东西可以删除吗&#xff1f;删除了会不会造成电脑故障呢&#xff1f; 首先&#xff0c;mac资源库…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023