溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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;
}
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“springboot怎么用webjars集成jquery,bootstrap,layui”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
