这篇文章主要介绍了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",
{},
function(data){
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").html(productlist);
});
});
$(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;
}
}