约束:
- 相对路径概念-
./
代表当前目录、../
代表上级目录- 示例的所有文件都基于
http://127.0.0.1:8080/test
路径开放,test为对应的contextPath
前端
HTML
标签的img
、link
、script
、form
标签- css文件的
background
属性- js文件的ajax请求,这里特指
Jquery
插件
HTML标签
img标签的src属性
绝对路径-语法为/
开头,其绝对路径是基于[scheme]://[serverName]:[port]
此路径
相对路径-语法为./
或者../
开头,相对的是当前html文件的路径示例:
javascript <img src="/test/info/img/1234.png",即正确的引用需要带上contextPath
- link标签的href属性
相对路径是相对于当前html文件的路径,绝对路径是相对于[scheme]://[serverName]:[port]
此路径,示例如下
<link ref="/test/css/default.css">,即也必须带上`contextPath`
- script标签的src属性
此处路径约束类同link标签,示例如下
<script type="text/script" src="/test/js/default/js"> //即也必须带上contextPath
- form标签的action属性
此处路径约束类同link标签,示例如下
<form action="${basePath}/info/get"></form> //必须携带contextPath
CSS
- background/background-img属性
此处路径类同HTML标签的img/link/script标签,示例如下
background:url(/test/info/img/1234.png) no-repeat center;//即必须带上contextPath
Jquery
- ajax请求的url路径
- 绝对路径的写法与上述的标签写法类同,即必须带上
contextPath
,示例如下
$.ajax({ url:"/test/info/msg/get", type:"get", data:{}, callback:function(data){ } });
- 相对路径是相相对于当前html引入文件的路径,示例如下
test.html文件引入下述js文件,其中test.html对应的绝对路径为http://127.0.0.1:8080/test/info/msg/test.html <script src="/test/static/info/msg/manager.js"></script> $.ajax({ url:"list" //请求的路径为`http://127.0.0.1:8080/test/info/msg/list` //url:"./list" //同上 //url:"../../info/content/get" //请求为`http://127.0.0.1:8080/test/info/content/get` });
- 绝对路径的写法与上述的标签写法类同,即必须带上
前台使用小结
HTML
标签的img
、link
、script
、form
标签以及css文件中的background
属性均遵循以下规则:
/
开头,此路径均是相对于[scheme]://[serverName]:[port]
此路径,在本文中便是http://127.0.0.1:8080
,所以如果在Tomcat/Jetty这样的web容器中,倘若contextPath
不为空,则务必带上contextPath
属性所有的资源加载路径建议均转换为绝对路径加载,以免不必要的404错误
Jquery
的ajax api
中的url路径
绝对路径的概念与第一点一致并建议使用绝对路径来进行访问,其中的
contextPath
可以通过前端模板视图工具,比如freemarker:<#assign basePath='${Application["basePath"]}'/>
来建立全局变量- 相对路径的编写则需要注意
I. html文件或者JSP页面在Tomcat/Jetty等web容器中的绝对访问路径是什么,比如spring mvc会对html页面的映射有一定的配置,所以所有的访问路径均需要转化为访问controller层的路径,即关注@Controller
中的@RequestMapping()
注解II. 在明白上述第一点的情况下,在上述绝对路径的基础上使用相对路径的规则即可
后端
这里只罗列下servlet关于路径的api以及spring mvc的路径使用
Servlet获取路径
示例路径为http://127.0.0.1:8080/test/info/msg/manager.html
request.getContextPath()
返回上下文路径,此处为/test
request.getServletPath()
返回servlet对应的路径,此处为/info/msg/manager.html
,即不包含contextPath
request.getRequestURI()
返回请求的完整路径,此处为/test/info/msg/manager.html
,即包含contextPath
spring mvc的路径配置
<!-- 静态资源映射 -->
<mvc:resources mapping="/static/**" location="/static/"/>
<!-- 视图配置 即对html页面的映射-->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
<property name="cache" value="true" />
<property name="prefix" value="pages/" />
<property name="suffix" value=".html" />
<property name="contentType" value="text/html;charset=UTF-8" />
<!-- 设置requestContext变量的名称 -->
<property name="requestContextAttribute" value="request" />
<!-- 配置是否在生成模板内容之前把HTTPsession中的数据放入model中 -->
<property name="exposeSessionAttributes" value="true" />
<!-- 配置是否在生成模板内容之前把HTTPrequest中的数据放入model中 -->
<property name="exposeRequestAttributes" value="true" />
<!-- 使用spring lib时 是否暴露 RequestContext 变量 默认为true -->
<property name="exposeSpringMacroHelpers" value="true" />
</bean>
<bean id="freemarkerConfig"
class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer>
<property name="templateLoaderPath" value="/WEB-INF/views/" />
<property name="freemarkerSettings">
<props>
<prop key="template_update_delay">0</prop>
<prop key="default_encoding">utf-8</prop>
<prop key="number_format">0.##########</prop>
<prop key="datetime_format">yyyy-MM-dd HH:mm:ss</prop>
<prop key="classic_compatible">true</prop>
<prop key="template_exception_handler">ignore</prop>
</props>
</property>
</bean>
简单看下其相关的Controller层对页面的路径映射,前台的ajax请求的相对路径便可针对此处的@RequestMapping()
注解来完成相应的编写
@Controller
public class HtmlPageControl {
@RequestMapping(value="/**/*.html")
public void redirect(HttpServletRequest request){
String contextPath = request.getContextPath() ;
//设置basePath让前台获取
if(request.getSession().getServletContext().getAttribute("basePath")==null){}
request.getSession().getServletContext().setAttribute("basePath",contextPath) ;
}
//返回为**/*的模式
String requestURI = request.getRequestURI() ;
int start = contextPath.length() + 1;
int end = requestURI.lastIndexOf(".html") ;
return requestURI.substring(start,end) ;
}
}
小结
- 此点切记:前台对于后台spring mvc需要确认html/jsp资源在其Controller层的映射,因为js文件只是被HTML/JSP文件所包含,所以ajax请求中的
url
属性如果采用相对路径则是针对HTML/JSP文件在Controller中的路径- 前台所有的请求路径均建议使用绝对路径来完成