<div id="article\_content" class="article\_content csdn-tracking-statistics tracking-click" data-mod="popu\_519" data-dsm="post" style="overflow: hidden;"> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">在SpringBoot中有默认的静态资源文件相关配置，需要通过如下源码跟踪：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">WebMvcAutoConfiguration-->configureResourceChain（method）-->ResourceProperties中配置了默认的静态资源路径：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106140713672?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">其默认的优先级：<span style="font-family:'Microsoft YaHei',STXihei; color:rgb(85,85,85)">META/resources > resources > static > public </span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">下面通过案例实践验证静态资源的应用</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="font-size:22px">章节要点</span>：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1、传统静态资源引入；</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2、WebJar使用；</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3、版本管理；</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">4、静态资源配置抽取；</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">5、WAR包常规容易部署；</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <hr style="clear:both"> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1、<span style="color:#FF0000"><strong>传统</strong></span>静态资源文件的引入：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1.1、在默认的路径下添加jquery.js:</div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106140720903?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1.2、修改原jsp目录下的home.jsp页面：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><%@ page contentType="text/html;charset=UTF-8" %></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><!DOCTYPE html></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><html></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><head lang="en"></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><meta charset="UTF-8" /></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><title>JSP</title></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"><script type="text/javascript" src="https://my.oschina.net/js/jquery/jquery-1.11.3.min.js"></script></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"><script type="text/javascript"></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">$(document).ready(function() {</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">var myDate = new Date();</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">$("#dateInput").val(myDate.toLocaleString());</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">});</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">function increase(){</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">var currentPage=$("#currentPage");</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">currentPage.val(Number(currentPage.val())+1);</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">alert($("#currentPage").val());</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">}</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"></script></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"></head></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><body></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><h1>Hello ${name} from JSP!</h1></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"><div></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"><label id="showLab">进入页面时间</label></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"><input type="text" id="dateInput" style="width: 200px"/> </span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"><input type="text" id="currentPage" style="width: 200px" value=1></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"><a href="#" onclick="increase()">增一</a></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000"></div></span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"></body></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"></html></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1.3、此时我们直接访问请求页面：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141201784?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">点击增一，执行js</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141208706?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">系统默认配置验证完成，能够正常加载使用。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1.4、下面我们开始验证自定义静态资源文件目录实现，尝试两种不同的方案（1、仍然在classpath目录下，新建非static目录；2、在WEB-INF目录下新建static/js目录），根据之前的实践，我们仅需在实现WebMvcConfigurerAdapter接口的配置类中添加addResourceHandlers方法即可（优先级为先添加的高于后添加的）。</div> <div style="white-space:pre-wrap; line-height:1.875; text-indent:28px; font-size:14px"> @Override</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">public void addResourceHandlers(ResourceHandlerRegistry registry) {</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">registry.addResourceHandler("/mystatic/\*\*").addResourceLocations("classpath:/mystatic/");</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">registry.addResourceHandler("/static/js/\*\*").addResourceLocations("/WEB-INF/static/js/");</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">}</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1.5、添加对应的静态文件目录以及文件：</div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="" alt="" style="font-size:12px"></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141215893?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141223237?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">如上目前在3个不同的路径下均有对应的js文件。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1.6、在页面中添加js的加载：</div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141231503?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1.7、我们发出请求查看，通过F12查看开发者模式下请求状态：</div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141242143?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141248347?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3种不同的配置均能够生效，均能够找到目前文件。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:rgb(255,0,0)">综上： </span></div> <div style="white-space:pre-wrap; line-height:1.875; text-indent:28px; font-size:14px"> 1、可以发现通过重写addResourceHandlers的方式添加静态资源请求映射不会覆盖系统原有默认映射，能够叠加使用；</div> <div style="white-space:pre-wrap; line-height:1.875; text-indent:28px; font-size:14px"> 2、通过配置对应的请求规则，映射值不同的资源文件目录。但采用默认的资源路径时，请求地址无需加入static，如上/js/jquery/jquery-1.11.3.min.js系统自动至默认的路径（目前为classpath:/static/）下查找，如果/static/js/jquery/jquery-1.11.3.min.js则默认情况下会在classpath:/static/路径下继续查找static目录，显然是没有的（当然本案例中已经将/static/js/\*\*请求重新映射资源路径）。</div> <div style="white-space:pre-wrap; line-height:1.875; text-indent:28px; font-size:14px"> 3、如果需要将系统默认的/\*\*默认资源路径更改，需要添加registry.addResourceHandler("/\*\*").addResourceLocations("/WEB-INF/static/");即可，通常无需此设置。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2、在springboot中静态资源文件的引用，可以通过<span style="color:#FF0000"><strong>webjars</strong></span>加载，WebJars将我们常用的js打包成了jar包。<span style="font-family:'Microsoft YaHei',STXihei; color:rgb(51,51,51)">WebJars：</span><a target="\_blank" href="http://www.webjars.org/"><span style="font-family:'Microsoft YaHei',STXihei; color:rgb(51,102,153)">http://www.webjars.org/</span></a><span style="font-family:'Microsoft YaHei',STXihei"> </span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="font-family:'Microsoft YaHei',STXihei">2.1、首先在POM文件中添加相关依赖：</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><!-- webjar依赖 --></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><dependency></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><groupId>org.webjars</groupId></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><artifactId>jquery</artifactId></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><version>1.11.3</version></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"></dependency></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2.2、在页面中添加js文件的加载：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141445506?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2.3、请求页面查看请求效果：</div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141454707?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141501256?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">能够如愿正常加载访问。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2.4、既然通过POM文件可以直接指定加载的目标js库的版本，那么如果我们修改版本，是不是可以不需要手动修改引入js的版本路径呢：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2.4.1、继续添加相关依赖：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><dependency></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><groupId>org.webjars</groupId></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><artifactId>webjars-locator</artifactId></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"></dependency></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2.4.2、新建一个控制器，如下：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">@Controller</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">public class WebJarController {</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">private final WebJarAssetLocator assetLocator = new WebJarAssetLocator();</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">@ResponseBody</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">@RequestMapping("/<span style="color:#FF0000">webjarslocator</span>/{webjar}/\*\*")</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">public ResponseEntity locateWebjarAsset(@PathVariable String webjar, HttpServletRequest request) {</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">try {</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">String mvcPrefix = "/webjarslocator/" + webjar + "/";</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">String mvcPath = (String) request.getAttribute(HandlerMapping.PATH\_WITHIN\_HANDLER\_MAPPING\_ATTRIBUTE);</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">String fullPath = assetLocator.getFullPath(webjar, mvcPath.substring(mvcPrefix.length()));</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">return new ResponseEntity(new ClassPathResource(fullPath), HttpStatus.OK);</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">} catch (Exception e) {</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">return new ResponseEntity<>(HttpStatus.NOT\_FOUND);</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">}</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">}</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">}</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2.4.3、在页面中添加引入：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="https://my.oschina.net/webjarslocator/jquery/jquery.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2.4.5、请求页面验证：</div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141603820?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141609598?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141615227?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">一切都很正常，仅仅在引入地址省去了版本路径。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3、版本管理</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">在项目中，<span style="font-family:'Microsoft YaHei',STXihei; color:rgb(51,51,51)">当我们资源内容发生变化时，由于浏览器缓存，用户本地的静态资源还是旧的资源，为了防止这种情况导致的问题，我们可能会手动在请求url的时候加个版本号或者其他方式。</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="font-family:'Microsoft YaHei',STXihei; color:rgb(51,51,51)">此时在springboot中，我们可以通过如下两种方式解决此问题。</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="font-family:'Microsoft YaHei',STXihei; color:rgb(51,51,51)">3.1</span>、资源名-md5 方式：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3.1.1、在application.properties文件中添加：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">spring.resources.chain.strategy.content.enabled=true</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">spring.resources.chain.strategy.content.paths=/\*\*</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3.1.2、通过paths的设置，所有的请求将均被处理，转换为相应的版本话地址，那么我们在jsp页面中引入的url需要简单处理，首先添加</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">package com.shf.springboot.controller;</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">import org.springframework.beans.factory.annotation.Autowired;</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">import org.springframework.web.bind.annotation.ControllerAdvice;</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">import org.springframework.web.bind.annotation.ModelAttribute;</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">import org.springframework.web.servlet.resource.ResourceUrlProvider;</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">/\*\*</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">\* 主要作用于版本话管理静态资源</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">\* @author song</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">\*/</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">@ControllerAdvice</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">public class ControllerConfig {</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">@Autowired</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">ResourceUrlProvider resourceUrlProvider;</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">@ModelAttribute("urls")</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">public ResourceUrlProvider urls() {</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">return this.resourceUrlProvider;</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">}</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">}</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">然后引入js：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141734005?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt="" style="width:921.734px"></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">将上述论证的引入js的多种模式均验证，验证结果如下：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141740026?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">可以发现，仅默认请求的/\*\*查找classpath：static以及webjars两种默认资源映射能够实现MD5版本化，自定义的/static/js/\*\*方式能够正常加载，而采用通过webjarslocator资源定位的则无法获取资源文件。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3.2：采用版本号方式</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3.2.1、在application.properties文件中配置：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">#</span>spring.resources.chain.strategy.content.enabled=true</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="color:#FF0000">#</span>spring.resources.chain.strategy.content.paths=/\*\*</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">spring.resources.chain.strategy.fixed.enabled=true</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">spring.resources.chain.strategy.fixed.paths=/\*\*</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">spring.resources.chain.strategy.fixed.version=v1.0.0</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3.2.2、再次请求验证查看验证结果：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141746442?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">可以发现，效果与md5方式差不多，仅默认请求的/\*\*查找classpath：static以及webjars两种默认资源映射能够实现版本化。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">综上：当请求的地址为md5方式时，会尝试url中的文件名中是否包含-，如果包含会去掉后面这部分，然后去映射的目录（如/static/）查找/js/common.js文件，如果能找到就返回。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">当请求的地址为版本号方式时，会在url中判断是否存在/v1.0.0 ，如果存在，则先从URL中把 /v1.0.0 去掉，然后再去映射目录查找对应文件，找到就返回。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">4、3中描述的版本话管理，其实在项目实际使用中，对于引入的第三方js相对还比较稳定，不会常有变化。版本化管理不一定是硬性需求，同时我们js引入通常抽取为公共的jsp页面，无需每个页面添加，修改也比较容易：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">4.1、新建一个head.jsp页面：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141937576?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><%@ page contentType="text/html;charset=UTF-8" %></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="https://my.oschina.net/mystatic/js/jquery/jquery-1.11.3.min.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="https://my.oschina.net/static/js/jquery/jquery-1.11.3.min.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="https://my.oschina.net/js/jquery/jquery-1.11.3.min.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="https://my.oschina.net/webjars/jquery/1.11.3/jquery.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="https://my.oschina.net/webjarslocator/jquery/jquery.js"></script> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${urls.getForLookupPath('/js/jquery/jquery-1.11.3.min.js')}"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${urls.getForLookupPath('/static/js/jquery/jquery-1.11.3.min.js')}"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${urls.getForLookupPath('/webjarslocator/jquery/jquery.js')}"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">4.2、在home.jsp中include：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141944662?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt="" style="width:915.245px"></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">4.3、请求验证，与上述效果一致：</div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106141950849?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">5、打成war部署自定义容易验证(jar模式启动无需验证，jar模式下无法读取WEB-INF目录)：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106142008506?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">此时部署非根路径部署，需要调整为如下：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">5.1、抽取一个公共jsp：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><c:set var="ctx" value="${pageContext.request.contextPath}"/></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">5.2、在home.jsp中添加include:</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><%@include file="/WEB-INF/jsp/include/taglib.jsp" %></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">5.3、在head.jsp中修改原引入：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><%@ page contentType="text/html;charset=UTF-8" %></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="<span style="color:#FF0000">${ctx }</span>/mystatic/js/jquery/jquery-1.11.3.min.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }/static/js/jquery/jquery-1.11.3.min.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }/js/jquery/jquery-1.11.3.min.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }/webjars/jquery/1.11.3/jquery.js"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }/webjarslocator/jquery/jquery.js"></script> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }${urls.getForLookupPath('/js/jquery/jquery-1.11.3.min.js')}"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }${urls.getForLookupPath('/static/js/jquery/jquery-1.11.3.min.js')}"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }${urls.getForLookupPath('/webjarslocator/jquery/jquery.js')}"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><script type="text/javascript" src="${ctx }${urls.getForLookupPath('/webjars/jquery/1.11.3/jquery.js')}"></script></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">5.4、此时我们现在开发环境启动验证：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106142015014?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt=""></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">5.5、部署war包验证：</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><img src="http://img.blog.csdn.net/20170106142020943?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2hhaWZlbmdzaHVhaWdl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br> </div> <div><img src="" alt="" style="width:850.849px"></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">此时可以发现两种环境下，JS的引入与之前的效果一致，仅webjarslocator无法正常加载。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><span style="font-size:24px; font-family:'Microsoft YaHei',STXihei; color:rgb(85,85,85)">总结</span></div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">有这么多方式来管理我们的资源文件，然而在实际应用中虽然也都有可能用到（存在就有存在的道理嘛）： </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">1. 我们使用第三方的库时，建议使用webjars的方式，通过动态版本号（webjars-locator 的方式）来使用（因为第三方库在项目开发中变动频率很小，即便是变动也是版本号的修改）。 </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">2. 我们使用自己存放在静态资源映射目录中的资源的时候，建议使用md5 资源文件名的方式来使用（项目开发中一些css、js文件会经常修改）。 </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">3. 项目素材文件建议放到 classpath:/static （或其他）目录中，打包在项目中，通过CMS维护的一些图片和资源，我们使用配置引用到具体的磁盘绝对路径来使用。 </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">4. 注意使用md5文件名方式的时候，Spring 是有缓存机制的，也就是说，在服务不重启的情况下，你去变动修改这些资源文件，其文件名的md5值并不会改变，只有重启服务再次访问才会生效。如果需要每次都获取实际文件的md5值，需要重写相关类来实现，我们不建议这样做，因为一直去计算文件md5值是需要性能代价的。</div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px"><br> </div> <div style="white-space:pre-wrap; line-height:1.875; font-size:14px">参考资料：<a target="\_blank" href="http://blog.csdn.net/isea533/article/details/50412212"><span style="color:rgb(0,0,255)">http://blog.csdn.net/isea533/article/details/50412212</span></a></div> </div>
