遗留问题

在上一节课的作业中,我们一定遇到了一点问题——虽然将页面内容正确的返回给了浏览器,但是浏览器显示的样式却是不正确的,这是因为在HTML的\标签中我们这样引入了CSS资源:

<link rel="stylesheet" href="css/footer.css"/>

那么浏览器会如何去获取这个资源呢?假设当前访问的URL是http://localhost:8080/posts/create,那么CSS资源就是该URL的相对路径——http://localhost:8080/posts/css/footer.css,我们的应用中并没有配置或声明如何处理这个URL,所以自然也就会得到404 Not Found的返回码。

外部资源文件

在编写HTML代码的过程中,我们会遇到几类外部资源:

  • CSS文件:\
  • JavaScript文件:\
  • 图像:\

在之前的课程学习里,这些外部资源都是通过HTTP协议访问得到——也就是说,当我们用浏览器打开我们编写的HTML页面(无论是通过本地文件直接打开,还是访问Spring Boot服务器),在获取页面内容本身之外,还需要像外部服务器(例如maxcdn.bootstrapcdn.com)发起HTTP请求以获取我们需要的CSS/JavaScript资源。

但是在我们开发过程中,如果某个时刻不能访问Internet,那我们的页面也就无法正确的展现出它应有的样式。另一方面,除了使用第三方库,我们自己还会编写大量的CSS/JavaScript文件,这就要求我们必须有一种很快的方式能够在修改之后立马在本地看到结果。

本地资源文件

首先我们抛开本地HTTP服务器,简单来看在本地编写一个HTML文件以及使用CSS资源,那么我们可以这样组织项目结构:

.
├── index.html
├── css
└── style.css
└── js
└── main.js

在index.html文件中可以这样引用它们:

<link rel="stylesheet" href="css/style.css"/>
<script src="js/main.js"></script>

css/style.css和js/main.js都是使用相对路径描述,当我们在浏览器中打开index.html,URL应该类似file:///Users/luoruici/app/index.html,此时当浏览器解释到上述引用外部资源的代码,会以当前访问的URL为基准,根据相对路径计算出完整的HTTP请求地址:

Base: file:///Users/luoruici/app/index.html
CSS: file:///Users/luoruici/app/css/style.css
JavaScript: file:///Users/luoruici/app/js/main.js

服务器中的静态资源文件

如果我们需要讲index.html放在服务器中呢?index.html位于templates目录下,通过http://localhost:8080/可以访问首页内容,但是CSS和JavaScript外部资源呢?因为我们的HTTP服务器根本没有处理它们,所以不可能通过类似http://localhost:8080/css/style.css这样的方式来访问它们使得我们的页面正确显示。

所以,在这一节中我们将学习如何处理这些静态资源文件。默认情况下,Spring Boot会将类路径上的/static/目录的内容Serve起来,意思就是所有访问http://localhost:8080/static/**的请求,都会返回/static/目录中对应路径的文件内容,于是我们可以这样组织文件目录结构来处理静态资源(以下是src/main/resources目录结构,这个目录经过编译后会被添加到类路径上):

.
├── static
├── css
└── style.css
└── js
└── main.js
└── templates
└── index.html

这样,当我们经过以上布局,重启应用后,就可以通过访问http://localhost:8080/css/style.csshttp://localhost:8080/js/main.js来获取CSS和JavaScript资源了。

在HTML中引入资源

之前在index.html中我们这样引入CSS和JavsScript资源:

<link rel="stylesheet" href="css/style.css"/>
<script src="js/main.js"></script>

现在如果不修改它我们直接访问http://localhost:8080,css和js文件都被正确加载了。但是这样真的正确吗?实际上,当我们访问根路径时,之前提到的相对路径计算的结果却是恰好就是正确的访问地址。但是如果我们访问的路径是/123/456/789.html呢?根据相对路径规则得到的结果就会完全错误了。在Web开发中,我们往往需要一种介于相对路径和绝对路径之间的资源访问方式——Context路径:

<link rel="stylesheet" href="/css/style.css"/>
<script src="/js/main.js"></script>

这里只是简单的在URL的最前面加上了/,但是意义和相对路径就完全不同了,此时服务器会将其视为访问当前host中的“绝对路径”——也就是自动在这个路径之前添加上协议、主机名和端口(都是当前服务器的相同信息),那么无论我们访问的是当前网站下的任何路径,它都会给出统一的结果。

[Spring入门学习笔记][静态资源]的更多相关文章

  1. 08-Node.js学习笔记-静态资源访问

    静态资源 服务器端不需要处理,可以直接响应给客户端的资源就是静态资源,例如css,javaScript,image文件 动态资源 相同的请求地址不同的响应资源,这种资源就是动态资源 http://ww ...

  2. [Spring入门学习笔记][创建网站URL]

    设计网站的URL 现代的Web站点都会设计一套拥有明确意义,方便用户记忆的URL,不论是域名还是路径,以天码营为例: http://tianmaying.com/courses表示网站下所有的课程列表 ...

  3. [spring入门学习笔记][spring的IoC原理]

    什么叫IoC 控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其中最常见的方式叫做依赖注入(Dependency ...

  4. Spring入门学习笔记(1)

    目录 Spring好处 依赖注入 面向面编程(AOP) Spring Framework Core Container Web Miscellaneous 编写第一个程序 IoC容器 Spring B ...

  5. [Spring入门学习笔记][Spring的AOP原理]

    AOP是什么? 面向切面编程 软件工程有一个基本原则叫做“关注点分离”(Concern Separation),通俗的理解就是不同的问题交给不同的部分去解决,每部分专注于解决自己的问题.这年头互联网也 ...

  6. [Spring入门学习笔记][Spring Boot]

    什么是Spring Boot Spring Boot正是在这样的一个背景下被抽象出来的开发框架,它本身并不提供Spring框架的核心特性以及扩展功能,只是用于快速.敏捷地开发新一代基于Spring框架 ...

  7. Spring入门学习笔记(4)——JDBC的使用

    目录 Spring JDBC框架概览 JdbcTemplate类 配置数据源 数据访问对象(Data Access Object,DAO) 执行SQL命令 Spring JDBC框架概览 使用传统的J ...

  8. Spring入门学习笔记(3)——事件处理类

    目录 Spring中的事件处理 Spring内建事件 监听Context事件 Example 自定义Spring事件 Spring中的事件处理 ApplicationContext 是Spring的核 ...

  9. Spring入门学习笔记(2)——基于Java的配置

    目录 基于Java的配置 @Configuration & @Bean Annotations Example 注入Bean依赖 @Import注解 Lifecycle Callbacks(声 ...

随机推荐

  1. KVO的概述的使用

    一,概述 KVO,即:Key-Value Observing,它提供一种机制,当指定的对象的属性被修改后,则对象就会接受到通知.简单的说就是每次指定的被观察的对象的属性被修改后,KVO就会自动通知相应 ...

  2. [Editor(typeof(ImageUrlEditor), typeof(UITypeEditor))]无效的可能原因

    开发的用户控件封存在dll中,其他都很顺利,就是这个图片弹出选择路径怎么也搞不出来!(浪费了我半天*2,o(︶︿︶)o 唉,犟脾气拗不过 看了很多搜索信息都说加: [Editor(typeof(Ima ...

  3. 调用百度地图API实现手机自动定位 (逆地址解析)

    //声明地址解析器 var geoc = new BMap.Geocoder(); //自动定位 var autoLocation = function () { if (navigator.geol ...

  4. MVC4过滤器(转)

    先来看看一个例子演示过滤器有什么用: public class AdminController : Controller { // ... instance variables and constru ...

  5. css导航条

    #nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}

  6. unity音频组件

    unity 支持的四种音频格式: .AIFF  适用于较短的音乐文件可用作游戏打斗音效 .WAV  适用于较短的音乐文件可用作游戏打斗音效 .MP3  适用于较长的音乐文件可用作游戏背景音乐 .OGG ...

  7. hdu1087 简单DP

    I - 简单dp 例题扩展 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:32768KB     ...

  8. 空值排序(oracle/sqlserver)

    oracle认为 null 最大. 升序排列,默认情况下,null值排后面. 降序排序,默认情况下,null值排前面. 改变空值办法: (1)用nvl函数或decode函数将null转换为一特定值 替 ...

  9. JavaWeb学习笔记--HttpServletRequest、HttpServletResponse对象常用方法

    HttpServletRequest HttpSession session = request.getSession(true); //获取会话对象 Cookie[] cookies = reque ...

  10. FMDB官方使用文档-GCD的使用-提高性能(翻译)

    FMDB官方使用文档-GCD的使用-提高性能(翻译) 发布于:2013-08-19 10:01阅读数:13395 由于FMDB是建立在SQLite的之上的,所以你至少也该把这篇文章从头到尾读一遍.与此 ...