闲来无事,研究了一下bootstrap框架,并把这个框架融入到我开发的一个项目中,在应用过程中发现了一些问题,经过潜心研究这个问题终于解决了,下面我就把整个过程分享给大家。
一、开发环境介绍
开发语言 | JDK1.8 |
IDE | ECLIPSE platform 4.6.0 |
WEB容器 | tomcat9 |
后端框架 | Spring+Spring MVC+Spring Data |
前端框架 | bootstrap3.3.7 |
二、问题回顾
1、项目说明
2、static.html文件(改成jsp文件也可以)
注意:红色框内容<link rel="stylesheet" href="css/bootstrap.min.css"/>,采用了相对路径
运行效果:
现象一:
现象二:
CSS样式表文件没有起作用。查看源代码,点击CSS连接,如下图:
三、解决方案
1、针对“现象一”的解决方案
在/OutSourcingManage/WebContent/WEB-INF/dispatcherServlet-servlet.xml文件中加入如下语句:
<mvc:default-servlet-handler/>
2、针对“现象二”的解决方案
方法一、在/OutSourcingManage/WebContent/WEB-INF/dispatcherServlet-servlet.xml文件中加入如下语句:
<mvc:resources mapping="/css/**" location="/bootstrap/css/"/>
方法二、修改static.html,将“<link rel="stylesheet" href="css/bootstrap.min.css"/>”修改为:
<link rel="stylesheet" href="/OutSourcingManage/bootstrap/css/bootstrap.min.css"/>
方法三、将static.html修改static.jsp,并增加如下语句:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>">
....
四、原理剖析
1、目标效果
2、内部原理剖析
(1)静态资源的处理
Spring MVC的拦截器DispatcherServlet默认是拦截所有请求,包括*.js、*.css、*.html、*.jpg、*.jsp等静态资源和动态资源,但是静态资源没有对应的handler,所以会出现上述警告。为了解决这个问题,需要为*.js、*.css、*.html、*.jpg等静态资源配置tomcat默认的拦截器。而<mvc:default-servlet-handler/>就是为此目的而生。
(2)绝对路径、相对路径
关于绝对路径、相对路径对于很多初学者感到迷惑,即使写出了可以运行的程序,也没有真正搞清楚原理,甚至对某些老手,也偶尔会犯迷糊。我总结了一些认识规则,与各位分享。
- URL的一般语法格式为:
- URL格式细分含义
http:/主机名:[端口号]/web应用根目录/资源名称[?query]。
下面以http://192.168.0.1:8080/OutSourcingManage/login?username=gaodianhua&password=123456为例
①服务器根地址(或称为tomcat服务器地址)规范为:
http:/主机名:[端口号]/,例如:http://192.168.0.1:8080/
②web应用根地址规范为:
http:/主机名:[端口号]/web应用根目录/,例如:http://192.168.0.1:8080/OutSourcingManage/
③资源根地址规范为:
http:/主机名:[端口号]/web应用根目录/资源名称,例如:http://192.168.0.1:8080/OutSourcingManage/login
请记住:上面三个概念,即:tomcat服务器根地址、web应用根地址、资源根地址
- 服务器端(tomcat)和客户端(浏览器)对URL地址的解析规则
对于请求的任何资源,均需要转化为绝对URL地址。
服务器端对URL地址的解析一般使用web应用根地址作为相对路径。例如页面跳转和重定向时使用的地址:
request.getRequestDispatcher("/WEB-INF/views/success.jsp").forward(request, res);//页面跳转,跳转成功
request.getRequestDispatcher("WEB-INF/views/success.jsp").forward(request, res);//页面跳转,跳转成功
response.sendRedirect("/hello.html");//重定向,重定向失败
response.sendRedirect("hello.html");//重定向,重定向成功
"/"在服务器端和客户端的处理规则是不同的,即:
- 在服务器端解析时,被认为是以web应用根地址为基准地址的相对路径。
- 在客户端解析时,被认为是tomcat服务器根地址。
相对路径即不带"/"时,在服务器端和客户端的处理规则则是相同的,即:
- 在服务器端解析时,被认为是web应用根的地址。
- 在客户端解析时,被认为是父页面请求时web应用根地址为基准地址的相对地址。
下面以hello.html测试可得:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<H1>Hello World</H1>
<a href="world.html">测试相对地址</a>
<a href="/world.html">测试绝对地址</a>
</body>
</html>
注:world.html和hello.html在相同目录下。
地址栏输入:http://localhost:8080/OutSourcingManage/hello.html,其中,"http://localhost:8080/OutSourcingManage/"为web应用根地址。
点击"测试相对地址"时,地址栏显示的是:http://localhost:8080/OutSourcingManage/world.html(请求成功)
点击"测试绝对地址"时,地址栏显示的是:http://localhost:8080/world.html(请求失败,此时要想成功需要手工补充web应用地址)
如果地址栏输入:http://localhost:8080/OutSourcingManage/springmvc/hello.html,其中,"http://localhost:8080/OutSourcingManage/"为web应用根地址。
点击"测试相对地址"时,地址栏显示的是:http://localhost:8080/OutSourcingManage/springmvc/world.html(请求成功)
点击"测试绝对地址"时,地址栏显示的是:http://localhost:8080/world.html(请求失败,此时要想成功需要手工补充web应用地址)
注意:①页面跳转(forward)是以web应用根地址为基准的,可以跳转到同应用下任意有效资源页面。
②WEB-INF只能被服务器端访问,不能被客户端访问。
③重定向(sendRedirect)是服务器向客户端响应的资源名称,由客户端重新向服务器端请求。
④重定向可以跨web应用。
⑤基准路径或者叫相对路径的基准:生手开车时,经常出现会问一个问题:"我的方向盘向左方(或向右方)打了半圈,还是一圈,还是打死了?",教练常常会告诉我,如果记不清了就把方向盘打死,然后回一圈半,方向盘就正了。同样,在操作系统中,可以使用命令"pwd"查看当前所处的目录。这些告诉我们基准路径很重要。
(3)一点建议
由于在日常开发过程中,相对地址维护起来非常复杂,容易混乱,建议统一采用绝对地址。在html/jsp中有<base>标签。利用该标签可以实现绝对地址访问。以JSP文件为例:(注意红色字体部分)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
....
五:总结
终于写完了,整整一天时间(国庆节第二天),虽有感觉有点累,但一想到知识传播会帮助很多初学者,我心里又是非常的高兴。自己鼓励一下自己吧。努力,加油。