精华内容
下载资源
问答
  • 2020-10-14 17:41:20

    webJars使用

    官网地址:
    https://www.webjars.org/
    以maven项目为例
    选择对应的版本后,复制地址信息
    在这里插入图片描述

    在pom中引用
    在这里插入图片描述
    jquery引用格式:
    <script th:src ="@{/webjars/jquery/1.11.3/jquery.js}"></script>
    引用格式必须是webjars/
    在这里插入图片描述

    更多相关内容
  • webjars-定位器 该项目提供了一种在 WebJars 中定位资产的方法。 获取资产的完整路径 WebJarAssetLocator locator = new WebJarAssetLocator(); String fullPathToRequirejs = locator.getFullPath("require.js"); ...
  • 主要介绍了SpringBoot使用WebJars统一管理静态资源的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • webjars

    2020-09-09 18:23:24
    什么是WebJars 什么是WebJarsWebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理。WebJars的jar包部署在Maven中央仓库上。 为什么使用 我们在开发Java web项目的...

    什么是WebJars

    什么是WebJars?WebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理。WebJars的jar包部署在Maven中央仓库上。

    为什么使用

    我们在开发Java web项目的时候会使用像Maven,Gradle等构建工具以实现对jar包版本依赖管理,以及项目的自动化管理,但是对于JavaScript,Css等前端资源包,我们只能采用拷贝到webapp下的方式,这样做就无法对这些资源进行依赖管理。而spring boot则是以jar包的形式运行。那么WebJars就提供给我们这些前端资源的jar包形势,我们就可以进行依赖管理。

    Spring Boot 中使用WebJars

    WebJars是将Web前端Javascript和CSS等资源打包成Java的Jar包,这样在Java Web开发中我们可以借助Maven这些依赖库的管理,保证这些Web资源版本唯一性。

    1、使用 添加js或者css库 

    (1)在webjars官网寻找相应的jar包,选择相应的版本和版本依赖工具。

    https://www.webjars.org/

    (2)在pom.xml文件中引入WebJars依赖,若标红,则需要clean和install一下该项目。

    2、测试是否添加成功

    我们开启SpringBoot,然后访问一下Bootstrap的静态资源:

    http://localhost:8080/webjars/bootstrap/4.0.0/css/bootstrap.css

    该路径通过以下方式找到

    结果如下:

    使用SpringMVC,静态的js、css等文件都需要配置静态资源的映射;但在SpringBoot中不需要进行此项的配置,因为springboot的自动装配功能,已经为我们做了这一些工作了。

    @Configuration(
        proxyBeanMethods = false
    )
    @ConditionalOnWebApplication(
        type = Type.SERVLET
    )
    @ConditionalOnClass({Servlet.class, DispatcherServlet.class, WebMvcConfigurer.class})
    @ConditionalOnMissingBean({WebMvcConfigurationSupport.class})
    @AutoConfigureOrder(-2147483638)
    @AutoConfigureAfter({DispatcherServletAutoConfiguration.class, TaskExecutionAutoConfiguration.class, ValidationAutoConfiguration.class})
    public class WebMvcAutoConfiguration {
        public static final String DEFAULT_PREFIX = "";
        public static final String DEFAULT_SUFFIX = "";
        private static final String[] SERVLET_LOCATIONS = new String[]{"/"};
    
        public WebMvcAutoConfiguration() {
        }

    在WebMvcAutoConfiguration类中,进行了路径的映射。

     public void addResourceHandlers(ResourceHandlerRegistry registry) {
                if (!this.resourceProperties.isAddMappings()) {
                    logger.debug("Default resource handling disabled");
                } else {
                    Duration cachePeriod = this.resourceProperties.getCache().getPeriod();
                    CacheControl cacheControl = this.resourceProperties.getCache().getCachecontrol().toHttpCacheControl();
                    if (!registry.hasMappingForPattern("/webjars/**")) {
                        this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{"/webjars/**"}).addResourceLocations(new String[]{"classpath:/META-INF/resources/webjars/"}).setCachePeriod(this.getSeconds(cachePeriod)).setCacheControl(cacheControl));
                    }
    
                    String staticPathPattern = this.mvcProperties.getStaticPathPattern();
                    if (!registry.hasMappingForPattern(staticPathPattern)) {
                        this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{staticPathPattern}).addResourceLocations(WebMvcAutoConfiguration.getResourceLocations(this.resourceProperties.getStaticLocations())).setCachePeriod(this.getSeconds(cachePeriod)).setCacheControl(cacheControl));
                    }
    
                }
            }

    3、WebJars的使用

    在这里我用了Thymeleaf模板:

    <!-- Bootstrap core CSS -->
    		<link href="asserts/css/bootstrap.min.css"  rel="stylesheet">

    改为了

    <!-- Bootstrap core CSS -->
    		<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

    效果如下

    展开全文
  • dropwizard-webjars-bundle 一个捆绑软件,使使用更加容易。 常规的Java代码不需要知道或关心它使用的是哪个版本的依赖项。 它只是简单地按名称导入该类,然后继续其业务。 为什么前端开发不能以相同的方式工作? ...
  • 客户端web库——WebJars

    2020-04-06 01:06:42
    WebJars资源 WebJars官网地址:http://www.webjars.org/ WebJars官网 搭建WebJars的官方文档:http://www.webjars.org/contributing 搭建WebJars官方文档 使用WebJars官方文档:...

    WebJars资源
    WebJars官网地址:http://www.webjars.org/

    WebJars官网
    搭建WebJars的官方文档:http://www.webjars.org/contributing

    搭建WebJars官方文档
    使用WebJars官方文档:http://www.webjars.org/documentation

    使用WebJars官方文档
    下载WebJars的Maven插件地址:https://mvnrepository.com/search?q=webjars

    下载WebJarsMaven插件
    公共的CDN地址:https://www.jsdelivr.com/

    jsDelivr – Open Source CDN
    我的image-cut开源项目示例:https://gitee.com/zhangzhenyi/image-cut

    image-cut
    WebJars简介
    WebJars的特点:
    在基于jvm的web应用程序中显式地管理客户端依赖关系

    使用基于jvm的构建工具(如Maven、Gradle、sbt、…)来下载您的客户端依赖项

    了解您使用的客户端依赖关系

    传递依赖项会自动解析并可选地通过RequireJS加载

    部署在Maven中央仓库

    公共CDN由jsDelivr提供。

    为什么要使用WebJars
    传统的Web资源管理方式:
    现在的Javaweb项目大都是采用的Maven架构,在开发项目时,我们往往会将一个大项目拆分成许多分散的Maven模块,每个模块实现该项目的某一部分功能,当我们将各个模块开发完毕之后,直接将其组装到一起即可构成一个大的完整项目。

    它的优点:

    由于将一个大项目拆分成众多的小模块,这样大大降低了程序开发的难度。

    由于模块与模块间很多组件都是可以多个项目共用的,这样就降低了所要编写的代码量,提高了代码开发的速度与质量。

    不同的Maven模块都是有不同的版本号,我们可以通过对版本号的管理,方便程序后续的管理和升级。

    它的缺点:

      由于现在的项目是由众多的Maven模块组成的,其中含有Web前端资源的Maven就不在少数,而这些含有前端资源,比如说JS或CSS,诸如jQuery或者Bootstrap等的管理就成为了一个大问题。

      比如说通过人工的方式进行管理,这可能会产生版本号误差,拷贝版本错误,漏拷贝等诸多现象,而一旦该现象产生,那么导致前端页面无法正确显示,版本混乱,而且这样的错误往往会表现出一些莫名其妙的故障,导致后期的纠错也相当的麻烦。毕竟前端的开发人员往往不懂后端的程序和框架,诸如Java,Spring,Maven之类的;而后端的开发人员也不清楚前端到底是个什么情况,是bug?是版本错误?是文件混乱?还是设计如此,留待后期完善?等麻烦不断。

    WebJars的优点
      而我们采用WebJars的优点就是可以借助Maven工具,以jar包的形式,通过对Web前端资源进行统一依赖管理,保证这些Web资源版本的唯一性。

    创建WebJars项目
    WebJars的jar文件结构
      在看WebJars的jar文件结构时,我们以用途最广泛的jquery的WebJars为例来说明。如下就是jquery-3.2.1.jar的文件目录结构。

    META-INF
        └─maven
            └─org.webjars.bower
                └─jquery
                    └─pom.properties
                    └─pom.xml
        └─resources
            └─webjars
                └─jquery
                    └─3.2.1
                        └─(这里是静态资源文件)
     
    WebJars的静态资源文件存放位置
      从上面的文件结构可以看出,WebJars的静态资源存放位置与普通的Javaweb静态资源的存放位置是不同的,普通的Javaweb项目的静态资源文件往往是存放在webapp文件目录下,而当我们要将静态资源打进jar包时,我们就得采用WebJars的静态资源存放原则,那就是将静态资源文件存放到src.main.resources.META-INF.resources.webjars目录下。如下是我所创建的image-cut项目,该项目就是采用的WebJars的格式进行的封装。 

    è¿éåå¾çæè¿°
    WebJars必须遵守的命名规范
    WebJar的内容的路径必须是如下格式:
    META-INF/resources/webjars/${name}/${version}
    1
      该格式是由WebJars官网明文规定的,是必须要遵守的规范格式。之所以选择这个路径结构,是因为它可以得到Java Web框架的广泛支持,并且包含路径中的版本号,因此可以很容易地使用具有侵略性的缓存。

    版本号必须在WebJar路径中,而不是在文件中。

    版本号是上游版本,而不是WebJar版本。大多数情况下,这些都是一样的。但有时,WebJar中有一些包装错误,只会在WebJar版本中造成一个版本的颠簸。

    上游的源必须是一个版本化的工件。如果上游源没有提供发布版本,那么可以使用提交日期+git提交ID(例如。20140708-394bf29)或派生上游项目并应用语义版本控制。

    artifactId应该始终是小写的。它可以从(按优先顺序)构建:

    创建pom.xml文件
      pom.xml文件源码:

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
      <modelVersion>4.0.0</modelVersion>

      <properties>
        <projectName>image-cut</projectName>
        <projectVersion>1.0-RELEASE</projectVersion>
        <springframework.version>4.3.10.RELEASE</springframework.version>
      </properties>

      <groupId>com.lyc</groupId>
      <artifactId>${projectName}</artifactId>
      <version>${projectVersion}</version>

      <packaging>jar</packaging>
      <name>${projectName}</name>
      <url>http://maven.apache.org</url>

      <dependencies>
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-beans</artifactId>
          <version>${springframework.version}</version>
        </dependency>
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-context</artifactId>
          <version>${springframework.version}</version>
        </dependency>

        <!--Spring MVC + Spring web -->
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-web</artifactId>
          <version>${springframework.version}</version>
        </dependency>
        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>${springframework.version}</version>
        </dependency>

        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <version>4.12</version>
          <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->
        <dependency>
          <groupId>org.webjars.bower</groupId>
          <artifactId>jquery</artifactId>
          <version>3.2.1</version>
        </dependency>
        <!-- jsp api -->
        <dependency>
          <groupId>org.apache.tomcat</groupId>
          <artifactId>jsp-api</artifactId>
          <version>6.0.36</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
        <dependency>
          <groupId>org.webjars</groupId>
          <artifactId>webjars-taglib</artifactId>
          <version>0.3</version>
        </dependency>
      </dependencies>

      <build>
        <resources>
          <resource>
            <directory>${project.basedir}/src/main/resources/META-INF/resources/webjars/${projectName}</directory>
            <targetPath>META-INF/resources/webjars/${projectName}/${projectVersion}</targetPath>
          </resource>
        </resources>
      </build>
    </project>
     
    这里的注意点:

    由于我们是将静态资源文件打入到jar包中,所以说我们要将packaging定义为jar格式而非传统的war格式。

    由于WebJars的命名规范中,jar包的路径名中必须含有版本号${version},如下:

    META-INF/resources/webjars/${name}/${version}
    1
      我们在添加静态资源文件时,肯定不想将资源文件加入到含有${version}的路径中,因为随着项目的发展,项目的jar版本会出现版本号的不同。比如说从1.0-SNAPSHOT变更到2.0-SNAPSHOT,亦或是从1.0-RELEASE变更到2.0-RELEASE。假如说我们将静态文件资源存放到含有版本号的路径中,那么Maven的版本变动直接带来的结果就是项目的静态资源文件位置频繁的迁移,但是项目的jar中又明确的要求含有${version},我们的解决办法是在pom.xml文件中加入如下代码:

    <properties>
        <projectName>image-cut</projectName>
        <projectVersion>1.0-RELEASE</projectVersion>
        <springframework.version>4.3.10.RELEASE</springframework.version>
      </properties>
     
    <build>
        <resources>
          <resource>
            <directory>${project.basedir}/src/main/resources/META-INF/resources/webjars/${projectName}</directory>
            <targetPath>META-INF/resources/webjars/${projectName}/${projectVersion}</targetPath>
          </resource>
        </resources>
      </build>

      通过上面的properties来统一管理项目的项目名以及版本号。然后在下面的build中,我们将静态资源文件打入到含有${version}的jar包之中。

    在页面中访问静态资源文件
    在容器中的访问方式
    在Spring容器中访问静态资源文件
      由于我们想在的项目大都是采用的Spring框架,因而我就说说在Spring中的访问方法。

      在Spring容器中,我们如果要想成功的访问jar中的静态资源文件,那么我们得在访问的路径中加入CLASSPATH,所以说最终的访问路径如下:

    <mvc:resources location="classpath:/META-INF/resources/webjars/" mapping="/webjars/**"/>
    1
    在Servlet 3容器中访问静态资源文件
      如果是在Servlet 3容器中,那么其访问的路径如下:

    <mvc:resources mapping="/webjars/**" location="/webjars/"/>
    1
      或者在Java中加入如下配置信息

    @Configuration
    @EnableWebMvc
    public class WebConfig extends WebMvcConfigurerAdapter {

      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
      }

    }
     
      在Servlet 3容器中的registry.addResourceHandler的代码如下:

    registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/");
    1
      由于我这里采用的是第一个,这样一来我只需要一行代码就可以了,这样更加的简便。

    在页面中的访问方式
      在页面中的访问方式比较的简单,比如说我们访问jQuery的代码如下:

    <script src="<%=basePath %>/webjars/jquery/3.2.1/dist/jquery.js"></script>
    1
    在浏览器中的访问方式
      如果项目启动了的话,我们可以直接在浏览器中对jQuery进行相应的访问,其访问路径如下:

    http://localhost:8080/image-cut/webjars/jquery/3.2.1/dist/jquery.js
    1
      当然在Tomcat中我们也是可以直接访问该image-cut的Jar项目主页的,如下:

    è¿éåå¾çæè¿°

    Tomcat的类加载顺序
      Tomcat在加载静态资源的时候,其实是以文件流的形式进行加载的,而非以传统的目录方式进行加载,该文件流的加载其实是和java类的加载是一样的,这样我们就可以从Tomcat的类加载顺序得出jar包中静态资源文件的加载顺序。

      Tomcat在运行中,其类加载顺序如下所示:

    è¿éåå¾çæè¿°

      从上面我们不难看出其加载的顺序如下:

    Bootstrap引导类
      加载JVM启动所需的类,以及标准扩展类(位于jre/lib/ext下)

    System系统类
      加载tomcat启动的类,比如bootstrap.jar,通常在catalina.bat或者catalina.sh中指定。位于CATALINA_HOME/bin下。

    Common通用类
      加载tomcat使用以及应用通用的一些类,位于CATALINA_HOME/lib下,比如servlet-api.jar

    webapp应用类
      在这里,Tomcat会优先加载/WEB-INF/classes然后再加载/WEB-INF/lib/*.jar。

      也就是说,我们的静态资源文件其实是在最后Tomcat在加载jar包时才被加载进去的。
     

    展开全文
  • 自定义webjars

    2020-01-04 12:11:27
    https://www.webjars.org/ 提供了很多js 的jar,但是有时候有些js没有,我们也想打成jar,那怎么办?我们以jquery 3.4.1版本为例子开始 1.创建如下结构 pom文件内容如下: <?xml version="1.0" encoding=...

    https://www.webjars.org/

    提供了很多js 的jar,但是有时候有些js没有,我们也想打成jar,那怎么办?我们以jquery 3.4.1版本为例子开始

    1.创建如下结构

    pom文件内容如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.4.1</version>
    
        <name>jquery</name>
        <url>http://maven.apache.org</url>
    
        <properties>
            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
            <destDir>${project.build.outputDirectory}/META-INF/resources/</destDir>
        </properties>
        <build>
            <resources>
                <resource>
                    <directory>${project.basedir}/src/main/resources</directory>
                    <targetPath>${destDir}</targetPath>
                </resource>
            </resources>
    
            </build>
    </project>

    2.运行idea打包生成jquery-3.4.1.jar

    3.引入刚打包的文件,启动web服务,访问地址 http://localhost:8080/webjars/jquery/3.4.1/jquery.js

    注意:1. js不要创建java文件

               2.web需要引入如下依赖,可以访问不同的版本

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator-core</artifactId>
    </dependency>

    4.源码和测试代码

    展开全文
  • webjars-webfilter-resolver Webfilter可以自动解决不带版本的Webjar。 Webjars自动将webjar依赖项放到类路径上,该类路径允许通过简单地包含诸如webjars/bootstrap/4.1.0/css/bootstrap.min.css之类的文件来引用...
  • WebJars

    2017-10-10 19:53:00
    基于此,WebJars应运而生。 一、什么时WebJarswebjars是客户端网络库(如jQuery、Bootstrap)打包成jar(java文件存档)文件,通过maven进行统一管理。 二、如何使用? 在官网(http://www.webjars.o...
  • 文章目录前言一、WebJars是什么?二、使用步骤1.从WebJars官网查询依赖2.引入Maven仓库3.HTML中引用JS相关资源三、查询路径的过程等总结 前言 因为我们的工作大多数是向外提供接口那种类型的项目,前一段时间忽然要...
  • SpringBoot静态资源和WebJars

    热门讨论 2020-06-02 15:38:20
    示例 第一步:在WebJars官网查找对于的组件,比如jquery <dependency> <groupId>org.webjars.bower</groupId> <artifactId>jquery</artifactId> <version>3.5.1</version> </dependency> <dependency> <groupId>org...
  • 1、webjar使用 &lt;!-- 使用webjar管理前端资源,此处引入bootstrap和jquery方便演示 --&...org.webjars&lt;/groupId&gt; &lt;artifactId&gt;jquery&lt;/artifactId&gt; ...
  • spring boot 支持webjars 通过添加 ResourceHandlerRegistry 实现。参考WebMvcConfigurationSupport。 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=...
  • WebJars介绍及使用

    2020-07-04 07:46:02
    WebJars是一个很神奇的东西,可以让大家以jar包的形式来使用前端的各种框架、组件。 什么是WebJars 什么是WebJarsWebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理...
  • JavaWeb开发之WebJars

    2021-03-17 17:47:01
    Java Web前端通常需要使用JS或CSS技术,例如jQuery, Backbone.js,Twitter Bootstrap等等。以前我都是将这些Web资源拷贝到Java Web项目的...WebJars是将Web前端Javascript和CSS等资源打包成Java的Jar包,这样在Ja...
  • 1.引入pom <...org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.5.1</version> </dependency> 2. 自动映射 /webjars/** https:..
  • SpringBoot - WebJars

    千次阅读 2018-06-13 12:16:33
    WebJars是将web前端资源(js,css等)打成jar包文件,然后借助Maven工具,以jar包形式对web前端资源进行统一依赖管理,保证这些Web资源版本唯一性。WebJars的jar包部署在Maven中央仓库上。 官网地址 : ...
  • 一.webjars的作用 1.1 介绍 WebJars是将web前端资源(js,css等)打成jar包文件,然后借助Maven工具,以jar包形式对web前端资源进行统一依赖管理,保证这些Web资源版本唯一性。WebJars的jar包部署在Maven中央仓库...
  • 本文目录什么是webjars?通过gradle引入webjars依赖使用原理maven制作webjars通过gradle制作webjars并发布到本地大功告成!赶紧实现自己的webjars吧! 什么是webjars? Web前端使用了越来越多的JS或CSS,如jQuery,...
  • springboot和WebJars结合

    2020-03-07 17:00:01
    什么是WebJars? WebJars是一个很神奇的东西,可以让大家以jar包的形式来使用前端的各种框架、组件。 WebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理。WebJars的jar...
  • SpringBoot使用WebJars

    千次阅读 2018-03-22 22:59:37
    本人主要做的是java,但是从第一份工作开始,就一直在做一个写前端又写后端的程序员,...SpringBoot结合前端有很多种方法,比如在static里面直接加入css或js,又或者引入webjars,以jar包的形式加入项目,本文就是...
  • 文章目录WebJars与静态资源映射规则1️⃣ WebJars1.1 简介1.2 通过SpringBoot使用WebJars2️⃣ 静态资源映射规则2.1 WebJars访问支持2.2 项目静态资源访问支持2.3 首页映射2.4 自定义静态资源访问路径2.5 自定义图标...
  • 什么是webjars

    千次阅读 2020-10-02 15:57:41
    意思就是以maven的方式引入web的jar包 只要我们访问的是/**的路径springboot都可以我们映射到上面4个路径的地方。
  • WebJars介绍

    千次阅读 2018-05-30 10:08:18
    参考文章:WebJars——web端静态资源的jar包1、WebJars介绍Web前端使用了越来越多的JS或CSS,如jQuery,Backbone.js和Bootstrap。一般情况下,我们是将这些Web资源拷贝到Java Web项目的webapp相应目录下进行管理。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,603
精华内容 5,841
关键字:

WebJars