遗留问题

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

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

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

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

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

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

  6. OpenCV入门学习笔记

    OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...

  7. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  8. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  9. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

随机推荐

  1. PHP连接数据库的方法

    mysql可通过两种方式通过PHP和web相连,一种通过php的mysql相关函数,另一种通过php的ODBC相关函数. 相关函数如下: MYSQL函数 mysql_affected_rows: 得到 ...

  2. sqlite升级--浅谈Android数据库版本升级及数据的迁移

    Android开发涉及到的数据库采用的是轻量级的SQLite3,而在实际开发中,在存储一些简单的数据,使用SharedPreferences就足够了,只有在存储数据结构稍微复杂的时候,才会使用数据库来 ...

  3. angularjs组件之input mask

    今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask.在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input m ...

  4. Linux下c++中的atoi、atol、atoll、atof函数调用实例

    本文中调用的四个函数如下: atoi函数:将字符串转化为int类型变量 atol函数:将字符串转化为long类型变量 atoll函数:将字符串转化为long long类型变量 atof函数:将字符串转 ...

  5. ubuntu虚拟环境virtualenv中djanggo连接mysql

    在ubuntu服务器上安装MYSQLDB,执行:sudo apt-get install python-mysqldb, 若提示: ---------------------------------- ...

  6. 关于我们DOM的知识点

    DOM的概念及子节点类型   前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析 ...

  7. java获取获得Timestamp类型的当前系统时间。

    java获取获得Timestamp类型的当前系统时间.   java获取取得Timestamp类型的当前系统时间 格式:2010-11-04 16:19:42 方法1: Timestamp d = n ...

  8. (转)PK系列之六:该不该读中文翻译的专业书

    本文引用地址:http://blog.sciencenet.cn/blog-2999994-956596.html 此文来自科学网王立新博客,转载请注明出处. 刘新建:这几天在读一本译著:投入产出分析 ...

  9. HDU-1011 Starship Troopers (树形DP+分组背包)

    题目大意:给一棵有根带点权树,并且给出容量.求在不超过容量下的最大权值.前提是选完父节点才能选子节点. 题目分析:树上的分组背包. ps:特判m为0时的情况. 代码如下: # include<i ...

  10. 006. C#使用WMI操作远程计算机

    1. 使用WMI CIM studio 查看\root\CIMV2 所有可使用的表/字段(类/属性) , 点击下载 WMI CIM studio 2. 安装完成后打开VMI CIM studio