这篇文章主要介绍了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”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
分享名称:springboot怎么用webjars集成jquery,bootstrap,layui
文章源于:https://www.cdcxhl.com/article10/jhesgo.html
成都网站建设公司_创新互联,为您提供全网营销推广、网站营销、自适应网站、网站策划、标签优化、营销型网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联