[Spring入门学习笔记][静态资源]
遗留问题
在上一节课的作业中,我们一定遇到了一点问题——虽然将页面内容正确的返回给了浏览器,但是浏览器显示的样式却是不正确的,这是因为在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.css
和http://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入门学习笔记][静态资源]的更多相关文章
- 08-Node.js学习笔记-静态资源访问
静态资源 服务器端不需要处理,可以直接响应给客户端的资源就是静态资源,例如css,javaScript,image文件 动态资源 相同的请求地址不同的响应资源,这种资源就是动态资源 http://ww ...
- [Spring入门学习笔记][创建网站URL]
设计网站的URL 现代的Web站点都会设计一套拥有明确意义,方便用户记忆的URL,不论是域名还是路径,以天码营为例: http://tianmaying.com/courses表示网站下所有的课程列表 ...
- [spring入门学习笔记][spring的IoC原理]
什么叫IoC 控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其中最常见的方式叫做依赖注入(Dependency ...
- Spring入门学习笔记(1)
目录 Spring好处 依赖注入 面向面编程(AOP) Spring Framework Core Container Web Miscellaneous 编写第一个程序 IoC容器 Spring B ...
- [Spring入门学习笔记][Spring的AOP原理]
AOP是什么? 面向切面编程 软件工程有一个基本原则叫做“关注点分离”(Concern Separation),通俗的理解就是不同的问题交给不同的部分去解决,每部分专注于解决自己的问题.这年头互联网也 ...
- [Spring入门学习笔记][Spring Boot]
什么是Spring Boot Spring Boot正是在这样的一个背景下被抽象出来的开发框架,它本身并不提供Spring框架的核心特性以及扩展功能,只是用于快速.敏捷地开发新一代基于Spring框架 ...
- Spring入门学习笔记(4)——JDBC的使用
目录 Spring JDBC框架概览 JdbcTemplate类 配置数据源 数据访问对象(Data Access Object,DAO) 执行SQL命令 Spring JDBC框架概览 使用传统的J ...
- Spring入门学习笔记(3)——事件处理类
目录 Spring中的事件处理 Spring内建事件 监听Context事件 Example 自定义Spring事件 Spring中的事件处理 ApplicationContext 是Spring的核 ...
- Spring入门学习笔记(2)——基于Java的配置
目录 基于Java的配置 @Configuration & @Bean Annotations Example 注入Bean依赖 @Import注解 Lifecycle Callbacks(声 ...
随机推荐
- Asp.Net HttpApplication请求管道与Session(一)
1.请求处理顺序执行事件 /********************请求处理顺序执行事件**********************/ /// <summary> /// 请求入站 /// ...
- Windows服务简单实例
1.定时器使用 partial class TimerService : ServiceBase { public TimerService() { InitializeComponent(); } ...
- "客户端无法连接到远程计算机"错误的解决方法
问题: 客户端无法连接到远程计算机. 可能没有启用远程连接或者计算机太忙不能接受新的连接. 也可能是网络问题阻止连接.请稍后重新尝试连接. 如果问题仍然存在 请与管理员联系. 解决方法: 1.首先确认 ...
- cellForRowAtIndexPath方法不执行的那些坑
今天用到了uitableview,是xib形式的.不过cellForRowAtIndexPath方法死活不执行,检查了返回的row数量,section的数量,数据源,代理都没问题,不过cellForR ...
- Android studio快捷键Mac版本
为了方便大家记住这些小技巧和快捷键,我把它写成了一个插件,欢迎大家下载使用:http://chunsheng.me/EasyShortcut/ 快捷键 描述 通用------------------- ...
- Pyhon之常用操作符 - 零基础入门学习Python006
Pyhon之常用操作符 让编程改变世界 Change the world by program 今天我们来谈谈Python之常用操作符,在此之前的一些例子中,大家已经看到Python可以完成简单的算术 ...
- html 作业1
<body bgcolor="#000000" topmargin="200px" leftmargin="200px" text=& ...
- C语言中的字符串截取函数
/*======================================================== 子数整数 源程序名 num.??? (pas,c,cpp) 可执行文件名 num. ...
- Effective Java2读书笔记-对于所有对象都通用的方法(二)
第10条:始终要覆盖toString 这一条没什么好讲的,就是说默认的toString方法打印出来的是类名+@+十六进制哈希码的值.我们应该覆盖它,使它能够展示出一些更为详细清晰的信息,这个看实际情况 ...
- Effective Java实作Comparable - 就是爱Java
当集合或数组内的对象需要排序时,会利用Collections.sort或Arrays.sort来进行排序,通常会implement Comparable,来实现自定义排序,透过回传值来表示排序的大小. ...