什么是WebJars

WebJars以jar包的形式来使用前端的各种框架、组件,如jquery、bootstrap

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

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

而WebJars就提供给我们这些前端资源的jar包形式,我们就可以进行依赖管理。

今天用webjars时,bootstrap引入很顺利,但是jquery尝试了很久才成功,网上搜到的文章的例子都是错的,这里记录一下:

网上的写法基本都是这种:

  <script src="webjars/jquery/3.1.1/jquery.min.js"></script>

但实际上是错的,正确的应该是:

  <script th:src="webjars/jquery/3.1.1/dist/jquery.min.js"></script>和<script src="webjars/jquery/1.11.1/jquery.min.js"></script>

3.1.1多了一层dist

其实具体的看下jar包目录结构就一目了然了,如图

而bootstrap的jar包已经自动依赖jquery了,如图,bootstrap3.3.7-1就依赖了jquery1.11.1,不需要额外引入jquery依赖就可以直接引入:<script src="webjars/jquery/1.11.1/jquery.min.js"></script>

而如果想用新版本也可以再引入自己想要的jquery依赖,比如jquery3.1.1,然后引入js:<script th:src="webjars/jquery/3.1.1/dist/jquery.min.js">

webjars-jquery的引用的更多相关文章

  1. Jquery在线引用地址

    Jquery在线引用地址: 1. 很多网站都是使用这种方式引入,客户的浏览器可能已经缓存过了 jquery.可以直接调用本地的,速度更快… 2. Google code 使用了 cdn 技术在很多地方 ...

  2. webpack打包jquery并引用

    一,引入webpack插件 //打包第三方 const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlug ...

  3. Jquery在线引用地址:

    转自:http://www.cnblogs.com/lkf18/archive/2012/12/11/2813241.html 1. 很多网站都是使用这种方式引入,客户的浏览器可能已经缓存过了 jqu ...

  4. easyui中jquery重复引用问题(tab内存泄露问题)

    今天认真测试了下easyui的一些兼容性问题,发现在ie9 ie10 首次加载的时候,会出现如下bug.如图所示: 认真看了下,我估计是脚本重复引用的问题,我用的iframe框架的模式.登陆系统后,桌 ...

  5. 前台添加jquery的引用

    注意引用的顺序. 以下两个引用,因为bxCarousel.js引用了jquery.js所以jquery.js必须在bxCarousel.js的前面.一般来说对jquery.js的引用放在前面. < ...

  6. jQuery在线引用地址(全)

    转:https://www.cnblogs.com/lmyau/p/7736269.html 1.官网jquery压缩版引用地址: 3.1.1版本: <script src="http ...

  7. JQuery EasyUI 引用加载分析

    easyui是什么,就不介绍了,接触到前端的就算没用过,肯定也应该听说过.其次,本文不是介绍它提供如calendar.tree等这些功能如何使用的,这些官网上介绍都很详细,中文的网上也不少.本文是从e ...

  8. jquery远程引用地址大全

    jquery官方的引用地址,如图: <script typet="text/javascript" src="http://code.jquery.com/jque ...

  9. jquery在线引用

    转载:http://www.cnblogs.com/lzx-1024/p/7716615.html jquery-3.1.1(最新)官网jquery压缩版引用地址:<script src=&qu ...

  10. 百度jquery公共引用地址

    http://cdn.code.baidu.com/ http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js http://apps.bdimg.com/l ...

随机推荐

  1. 嵌入式文件系统构建工具 busybox / buildroot / openwrt

    1.busybox busybox最轻量 1) 修改Makefile CROSS_COMPILE ?= /usr/local/gcc-linaro-arm-linux-gnueabihf/bin/ar ...

  2. jenkins用户管理(Role-based Authorization Strategy插件使用)

    安装:Role-based Authorization Strategy插件 一.点击左侧的"系统管理"-->再点击绿色的"管理插件"  二.点击&quo ...

  3. Vi文本编辑

    vi 有3种工作模式,分别是命令行模式.插入模式.底行模式 . 命令行模式:最初进入的一般模式,该模式下可以移动光标进行浏览,整行删除,但无法编辑文字.插入模式:只有在该模式下,用户才能进行文字的编辑 ...

  4. 主成分分析PCA学习一条龙

    转自:https://yoyoyohamapi.gitbooks.io/mit-ml/content/%E7%89%B9%E5%BE%81%E9%99%8D%E7%BB%B4/articles/PCA ...

  5. 08 网络配置、shh服务、bash命令和元字符

    作业一:完成作业未做完的集群架构作业二:临时配置网络(ip,网关,dns)+永久配置 作业三:为集群内的机器设定主机名,利用/etc/hosts文件来解析自己的集群中所有的主机名,相应的,集群的配置应 ...

  6. 微信小程序组件slider

    表单组件slider:官方文档 Demo Code: var pageData = {} for (var i = 1; i < 5; i++) { (function (index) { pa ...

  7. npm使用淘宝镜像

    淘宝 npm 地址: http://npm.taobao.org/ 如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临时使用 ...

  8. ACM-ICPC 2018 南京赛区网络预赛 - L Magical Girl Haze (分层迪杰斯特拉)

    题意:N个点,M条带权有向边,求可以免费K条边权值的情况下,从点1到点N的最短路. 分析:K<=10,用dist[i][j]表示从源点出发到点i,免费j条边的最小花费.在迪杰斯特拉的dfs过程中 ...

  9. OpenStack学习(二)

    虚机安装成功后,,学习虚机的管理 虚机的管理主要使用以下命令 1. 虚机的管理 a. 创建 virt-install --name=wintest01 --ram 512 --vcpus=2 --di ...

  10. Lua 基础总结

    lua 数组下标从 1 开始, 不是 0 lua 逻辑运算符  与 或 非  就是英文  and  or  not local  局部变量 数据类型:lua是一门动态类型语言,变量没有类型,只有值才有 ...