SpringBoot结合前端有很多种方法,比如在static里面直接加入css或js,又或者引入webjars,以jar包的形式加入项目,本文就是简单介绍一下这种方式。 然后在pom文件引入webjars的jar,pom文件代码如下: <?xml version="1.0" encoding="UTF-8"? </artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>springboot_webjars </name> <description>springboot_webjars</description> <parent> <groupId>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包的形式来使用前端的各种框架和组件
WebJars是一个开源项目,旨在将客户端的Web库(如JavaScript和CSS库)打包成JAR文件,以便在Java项目中更方便地管理和使用。 展开代码语言:TXTAI代码解释<dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version> <scriptsrc="/<em>webjars</em>/bootstrap/5.3.0/js/bootstrap.min.js"></script>要点在页面导入的时候,需要指定版本号。
-- 引入jquery-webjar--> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> 1、webjars 是jar包的方式引入静态资源,所有/webjars/**,都去classpath:/META-INF/resources/webjars/资源 pom注入资源后启动应用可访问 ?
依赖 <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version resources/static</directory> <targetPath>${project.build.outputDirectory}/META-INF/resources/webjars </targetPath> </resource> </resources> </build> 使用模块中的静态资源 /webjars/xxx
使用WebJars依赖 我们来创建一个SpringBoot项目,在项目的pom.xml文件内添加如下依赖: <dependencies> <! spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.example</groupId> <artifactId>webjars-sample 通过IDEA工具我们可以查看webjars-sample依赖内的资源文件,如下图所示: image 由于SpringBoot提供的spring.resources.static-locations参数默认值 总结 如果你有一些资源不希望被别人修改,让使用者更加便利的集成时,可以采用这种方式来封装自己的webjars,只需要添加依赖引用就可以访问到静态资源,也可以将静态HTML网页通过这种方式打包。
1 导入jQuery的webjars依赖 <dependency> <groupId>org.webjars</groupId> <artifactId artifactId> <version>3.5.0</version> </dependency> 2 前端的HTML里面导入jQuery <script src="<em>webjars</em>
项目中使用的时候 在这里我用了Thymeleaf模板:css等其他资源不一 一演示了 <script type="text/javascript" th:src="@{/<em>webjars</em>/bootstrap
WebJars是打包到JAR(Java Archive)文件中的客户端Web库(例如jQuery和Bootstrap)。 -- https://mvnrepository.com/artifact/org.webjars/webjars-locator --> <dependency> <groupId >org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.32 -1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId 比如对于请求 http://localhost:8080/webjars/jquery/3.1.0/jquery.js省略版本号 3.2.1 直接使用http://localhost:8080/webjars
"></script> <title>WebJars Demo</title> <link rel="stylesheet" href="/<em>webjars</em>/bootstrap/3.3.7-1 <dependency> <groupId>org.<em>webjars</em></groupId> <artifactId><em>webjars</em>-locator</artifactId> </script> <title><em>WebJars</em> Demo</title> <link rel="stylesheet" href="/<em>webjars</em>/bootstrap/3.3.7-1/css/bootstrap.min.css " /> -> <script src="/<em>webjars</em>/jquery/jquery.min.js"></script> <script src="/<em>webjars</em>/bootstrap/js /bootstrap.min.js"></script> <title>WebJars Demo</title> <link rel="stylesheet" href="/<em>webjars</em>/bootstrap
/lib/jquery-1.8.0.min.js' type='text/javascript'>script> <script src='<em>webjars</em>/springfox-swagger-ui /lib/handlebars-4.0.5.js' type='text/javascript'>script> <script src='<em>webjars</em>/springfox-swagger-ui /lib/lodash.min.js' type='text/javascript'>script> <script src='<em>webjars</em>/springfox-swagger-ui/lib/ ' type='text/javascript'>script> <script src='<em>webjars</em>/springfox-swagger-ui/lib/jsoneditor.min.js' '>script> <script src='<em>webjars</em>/springfox-swagger-ui/springfox.js' type='text/javascript'>script>
它就是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下面资源的名称即可 <dependency> <groupId>org.webjars<
("/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,您需要添加以下依赖项: <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core </groupId> <artifactId>webjars-locator-core</artifactId> </依赖> <依赖> <groupId>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'
<artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.webjars </groupId> <artifactId>webjars-locator</artifactId> </dependency> <dependency> <groupId>org.webjars >sockjs-client</artifactId> <version>1.0.2</version> </dependency> <dependency> <groupId>org.webjars /jquery/jquery.min.js"></script> <script src = "/<em>webjars</em>/sockjs-client/sockjs.min.js"></script> <script src = "/<em>webjars</em>/stomp-websocket/stomp.min.js"></script> <script src = "/app.js">
DOCTYPE html> <html> <head> <script src="/<em>webjars</em>/jquery/3.1.1/jquery.min.js"></script> <script src="/<em>webjars</em>/bootstrap/3.3.7-1/js/bootstrap.min.js"></script> <title>WebJars Demo</title> < link rel="stylesheet" href="/<em>webjars</em>/bootstrap/3.3.7-1/css/bootstrap.min.css" /> </head> <body> <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? 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文件中 <dependency> <groupId>org.webjars >0.30</version> </dependency> 引入 webjars-locator 值后可以省略版本号: <script src="/<em>webjars</em>/jquery/jquery.min.js
p=4 什么是WebJars 什么是WebJars?WebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理。 WebJars的jar包部署在Maven中央仓库上。 那么WebJars就提供给我们这些前端资源的jar包形式,我们就可以进行依赖管理。 关于webjars资源,有一个专门的网站http://www.webjars.org/,我们可以到这个网站上找到自己需要的资源,在自己的工程中添加入maven依赖,即可直接使用这些资源了。 1、 WebJars主官网 查找对于的组件,比如Vuejs <dependency> <groupId>org.webjars.bower</groupId> <artifactId>vue