这篇文章主要介绍了springboot怎么用webjars集成jquery,bootstrap,layui，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
仓库中搜索坐标：https://mvnrepository.com/ 
必须要放：webjars-locator这个依赖来加载后面引入的jquery等库
<!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator --> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.40</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery --> <dependency> <groupId>org.webjars.bower</groupId> <artifactId>jquery</artifactId> <version>3.6.0</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap --> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>5.0.0</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars/layui --> <dependency> <groupId>org.webjars</groupId> <artifactId>layui</artifactId> <version>2.5.7</version> </dependency>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/static/favicon.ico}"/>
<script src="/webjars/jquery/dist/jquery.js"></script>
<!--bootstarp基于jquery,所以放在前面-->
<script src="/webjars/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css"/>
<!-- layui引入-->
<script src="/webjars/layui/layui.js"></script>
<link rel="stylesheet" href="/webjars/layui/css/layui.css"/>
</head>
<body>
<div class="con">
名称（jquery）：
<select data-placeholder="请选择商品" name="productid2" id="productid2" required>
</select>
layui时间：
<input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss"/>
bootstrap 分页效果：
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<script>
$function){
//调用后端接口
$.get"/product/getProductList",
{},
functiondata){
debugger;
let productlist = '<option value="" selected>-请选择商品-</option>';
for let i = 0; i < data.length; i++) {
let product = data[i];
productlist += '<option value="'+product.id+'" selected>'+product.productname+'</option>';
}
//所有的书的列表
$"#productid2").htmlproductlist);
});
});
$function){
// alert"jq main_xs ready");
layui.use'laydate', function){
var laydate = layui.laydate;
//日期时间选择器
laydate.render{
elem: '#test5'
,type: 'datetime'
});
});
});
</script>
</body>
</html>
package com.example.springboot_jxc_0511.jxc.controller; import com.example.springboot_jxc_0511.jxc.entity.Product; import com.example.springboot_jxc_0511.jxc.service.IProductService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import java.util.List; /** * <p> * 前端控制器 * </p> * * @author gongxl * @since 2021-05-11 */ @Controller @RequestMapping"/product") public class ProductController { @Autowired private IProductService iProductService; @RequestMapping"getProductList") @ResponseBody public List<Product> getProductList){ //视图名 List<Product> productList = iProductService.list); return productList; } }