SpringBoot结合前端有很多种方法,比如在static里面直接加入css或js,又或者引入webjars,以jar包的形式加入项目,本文就是简单介绍一下这种方式。...然后在pom文件引入webjars的jar,pom文件代码如下: 0.0.1-SNAPSHOT jar springboot_webjars... springboot_webjars org.springframework.boot...至此SpringBoot结合WebJars成功就完成。 源码下载 :大老杨码云
在看springboot源码时候,看到了加载webjars目录下,我就好奇webjars是什么?...,所以找了一下资料 这里是webjars的网址 webjars介绍 这里我引入了我查找资料时的话 WebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理...WebJars的jar包部署在Maven中央仓库上 对于日常的web开发而言,像css、js、images、font等静态资源文件管理是非常的混乱的、比如jQuery、Bootstrap、Vue.js...所以找到了一个叫做WebJars的技术,下面我将介绍如何将静态资源打包成jar原本我们在进行web开发时,一般上都是讲静态资源文件放置在webapp目录下 在SpringBoot里面,一般是将资源文件放置在...也是利用了此功能,将所有前端的静态文件打包成一个jar包,这样对于引用放而言,和普通的jar引入是一样的,还能很好的对前端静态资源进行管理 WebJars是一个很神奇的东西,可以以jar包的形式来使用前端的各种框架和组件
依赖 org.webjars webjars-locator ${project.build.outputDirectory}/META-INF/resources/webjars... 使用模块中的静态资源 /webjars/xxx
-- 引入jquery-webjar--> org.webjars...jquery 3.3.1 1、webjars...是jar包的方式引入静态资源,所有/webjars/**,都去classpath:/META-INF/resources/webjars/资源 pom注入资源后启动应用可访问 ?
使用WebJars依赖 我们来创建一个SpringBoot项目,在项目的pom.xml文件内添加如下依赖: org.example webjars-sample...通过IDEA工具我们可以查看webjars-sample依赖内的资源文件,如下图所示: image 由于SpringBoot提供的spring.resources.static-locations参数默认值...总结 如果你有一些资源不希望被别人修改,让使用者更加便利的集成时,可以采用这种方式来封装自己的webjars,只需要添加依赖引用就可以访问到静态资源,也可以将静态HTML网页通过这种方式打包。
1 导入jQuery的webjars依赖 org.webjars 3.5.0 2 前端的HTML里面导入jQuery <script src="<em>webjars</em>
项目中使用的时候 在这里我用了Thymeleaf模板:css等其他资源不一 一演示了 <script type="text/javascript" th:src="@{/<em>webjars</em>/bootstrap
"> WebJars Demo org.webjars webjars-locator ... WebJars Demo -> WebJars Demo <link rel="stylesheet" href="/<em>webjars</em>/bootstrap
WebJars是打包到JAR(Java Archive)文件中的客户端Web库(例如jQuery和Bootstrap)。...-- https://mvnrepository.com/artifact/org.webjars/webjars-locator --> org.webjars webjars-locator 0.32...-1 org.webjars <artifactId...比如对于请求 http://localhost:8080/webjars/jquery/3.1.0/jquery.js省略版本号 3.2.1 直接使用http://localhost:8080/webjars
它就是Webjars[1]。...我们完全可以约定一套目录规则,把后端webjars的依赖版本,直接传递到后端。而负责完成维护管理这套目录规则的人就是webjars-locator。...我们要想使用webjars-locator,先要添加依赖: //Group: org.webjars.bower // https://mvnrepository.com/artifact.../org.webjars/webjars-locator compile group: 'org.webjars', name: 'webjars-locator', version: '0.32...本章节完整的工程代码: https://github.com/EasySpringBoot/h5perf 参考资料: 1.WebJars:http://www.webjars.org/
registry.hasMappingForPattern("/webjars/**")) { customizeResourceHandlerRegistration(...registry.addResourceHandler("/webjars/**") ....addResourceLocations( "classpath:/META-INF/resources/webjars/.../** ,都去 classpath:/META-INF/resources/webjars/ 找资源;== webjars:以jar包的方式引入静态资源; localhost:8080/webjars...--引入jquery-webjar-->在访问的时候只需要写webjars下面资源的名称即可 org.webjars<
/lib/jquery-1.8.0.min.js' type='text/javascript'>script> script> script> script> script> script>
DOCTYPE html> WebJars Demo <div...* User: a247292980 * Date: 2017/08/14 * * webjars-locator 包的作用是处理WebJars,省略 webjar 的版本。...* 比如对于请求 http://localhost:8080/webjars/jquery/3.1.0/jquery.js省略版本号 3.2.1 * 直接使用http://localhost:8080
("/webjars/**") .addResourceLocations("classpath:/META-INF/resources/webjars/") .setCachePeriod...("/webjars/**") .addResourceLocations("classpath:/META-INF/resources/webjars/") .setCachePeriod...(getSeconds(cachePeriod)).setCacheControl(cacheControl)); } 找项目里面的webjars目录,但是我们在我们的项目里面没有看到。...现在我们要解决的是什么是webjars?...已经解决了什么是webjars 解释3 获取静态资源的路径 String staticPathPattern = this.mvcProperties.getStaticPathPattern();
对于 Maven,您需要添加以下依赖项: org.webjars webjars-locator-core... webjars-locator-core org.webjars</groupId...:webjars-locator-core' implementation 'org.webjars:sockjs-client:1.0.2' implementation 'org.webjars:stomp-websocket...:2.3.3' implementation 'org.webjars:bootstrap:3.3.7' implementation 'org.webjars:jquery:3.1.1-1'复制 以下清单显示了完成的...:webjars-locator-core' 实施 'org.webjars:sockjs-client:1.0.2' 实现 'org.webjars:stomp-websocket:2.3.3'
spring-boot-starter-websocket org.webjars... webjars-locator org.webjars...>sockjs-client 1.0.2 org.webjars.../jquery/jquery.min.js"> ...
先说一下什么是webjars?...WebJars 就是将js, css 等资源文件放到 classpath:/META-INF/resources/webjars/ 中,然后打包成jar 发布到maven仓库中。...简单应用 以jQuery为例,文件存放结构为: META-INF/resources/webjars/jquery/2.1.4/jquery.js META-INF/resources/webjars/...webjars/jquery/2.1.4/webjars-requirejs.js Spring Boot 默认将 /webjars/** 映射到 classpath:/META-INF/resources...我们使用第三方的库时,建议使用webjars的方式,通过动态版本号(webjars-locator 的方式)来使用(因为第三方库在项目开发中变动频率很小,即便是变动也是版本号的修改)。
重学SpringBoot系列之整合静态资源与模板引擎 webjars与静态资源 spring boot静态资源 favicon.ico图标 欢迎页面 使用WebJars管理css&js 1.pom中引入依赖...---- 使用WebJars管理css&js 为什么使用 WebJars? 显而易见,因为简单。...关于webjars资源,有一个专门的网站https://www.webjars.org/,我们可以到这个网站上找到自己需要的资源,在自己的工程中添加入maven依赖,即可直接使用这些资源了。...1.pom中引入依赖 我们可以从WebJars官方查看maven依赖,如下图 例如:将bootstrap和jquery引入pom文件中 org.webjars...>0.30 引入 webjars-locator 值后可以省略版本号: <script src="/<em>webjars</em>/jquery/jquery.min.js
文章目录 1.问题 2.springboot的资源目录优先级 3.相关源码 3. webjars 1.问题 在通过spring项目官网生成的springboot project项目中,通常我们知道...3. webjars 另外,在看前面代码的过程中,发现了一个有趣的webjars。...addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/"); webjars是什么呢?...我们可以看其官网: https://www.webjars.org/ 这是一个将前端资源变成jar包的工具库。这样一来可以将前端的各种依赖都通过maven进行管理。 ?...我们可以访问: http://127.0.0.1:8084/webjars/jquery/3.5.1/jquery.js 就能请求到jquery的js文件了。 ?
-- import vue--> ...-- i18n --> 因为是通过webjars引入的前端依赖库,所有都是通过maven来管理的: org.webjars webjars-locator 0.32-1...这里要提到webjars-locator这样一个jar,帮助我们处理了所有版本问题,所以在引入的时候不会有相关的版本信息在路径中。
领取专属 10元无门槛券
手把手带您无忧上云