遗留问题

在上一节课的作业中,我们一定遇到了一点问题——虽然将页面内容正确的返回给了浏览器,但是浏览器显示的样式却是不正确的,这是因为在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. [Spring入门学习笔记][创建网站URL]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. [Spring入门学习笔记][maven]

    什么是maven? 我的理解: 一个项目有一大堆依赖包的时候,没必要下下来,可以利用maven中的pom.xml 指定需要那些依赖包,让maven去本地中央库(如果没找到)->网上仓库库帮你调用 ...

随机推荐

  1. 基于Ruby的Watir-WebDriver自动化测试框架

    基于Ruby的watir-webdriver自动化测试方案与实施(五)   基于Ruby的watir-webdriver自动化测试方案与实施(四)   基于Ruby的watir-webdriver自动 ...

  2. 【1】JAVA---地址App小软件(AddressApp.class)(初步接触项目开发的分层思想)(表现层)

    这个是表现层的main方法. 实现的地址信息有: 姓名,性别,年龄,电话,地址. 实现的功能有: 增加地址: 删除地址: 修改地址: 查找地址:其中年龄的查找为年龄段的查找. 数据存储的方式为文件存储 ...

  3. qt获取本机网络信息

    networkinformation.h #include<QtGui/QWidget> #include<QLabel> #include<QPushButton> ...

  4. mfc---ActiveX控件

    AvtiveX控件可看做是一个极小的服务器应用程序,不能独立运行,必须嵌入到某个容器程序中 容器应用程序:可以嵌入或链接对象的应用程序 服务器应用程序:创建对象并且当对象被双击时,可以被启动的应用程序 ...

  5. 1635: [Usaco2007 Jan]Tallest Cow 最高的牛

    1635: [Usaco2007 Jan]Tallest Cow 最高的牛 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 383  Solved: 211 ...

  6. 201521123056 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源代码 1.3 结合1. ...

  7. 插件开发之360 DroidPlugin源码分析(三)Binder代理

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52138483 Hook机制中Binder代理类关系图 Hook机制中Binder代理时 ...

  8. [SQL Server] 时间处理:获取今天的00:00:00/获取今天的23:59:59

    获取今天的00:00:00 SELECT CONVERT(DATETIME,CONVERT(VARCHAR(10),GETDATE(),120)) 获取今天的23:59:59 1.SELECT DAT ...

  9. pycharm的简介

    pycharm使用 集成开发环境(IDE,Integrated Development Environment ) VIM #经典的linux下的文本编辑器 Emacs #linux 文本编辑器, 比 ...

  10. 虚拟机console基础环境配置——系统镜像站点配置

    1. 概述2. 部署HTTP服务器2.1 YUM安装httpd2.2 配置httpd2.3 启动httpdf2.4 测试httpd3. 部署FTP服务器3.1 YUM安装vsftpd3.2 配置vsf ...