springboot引入jqeury(所有方式)

static下放资源,templates下放html
所以就用了thymeleaf
若是一起放在static下的,路径上用相对路劲就可以了(路径上不一样,下面有样例)

【注意】方式二、三需要部署后才能加载使用

方式一:直接加载static下的文件

  1. 将所引用的版本下载好
  2. 引入jar包
//使用thymeleaf
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>

//一起放在static下
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

方式二:导入jar包

<!-- jquery-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>
<!--	引入jQuery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>

在这里插入图片描述

方式三:在线引入

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js}"></script>

所有版本链接


【推荐其他整合或是引用】

  • 6
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
## 基于Springboot+SpringSecurity+Thymeleaf+Mysql的网上书城 ### 主要用到的技术 - 使用 **Springboot**+**Mysql** 搭建整个系统 - 使用 **Springsecurity** 管理用户登录权限 - 使用 **Thymeleaf** 模板实现页面静态化 - 使用 **Bootstrap+Jquery** 框架开发前端界面 - 使用 **Hibernate** 自动生成数据库 ### 功能模块 - **用户模块** - [x] 用户注册、登录 - [x] 个人信息修改 - [x] 密码修改 - [x] 注销登录 - **商品模块** - [x] 首页轮播图 - [x] 全部书籍展示 - [x] 分类展示 - [x] 书籍详细信息 - **购物车模块** - [x] 加入购物车 - [x] 查看购物车 - [ ] 结算购物车 ### 部分功能展示 ![](image/1.png) ![](image/2.png) ![](image/3.png) ![](image/4.png) ![](image/5.png) ![](image/6.png) > 引入超好看的layer.js组件 ![](image/7.png) ### 成功提交订单 ![](image/8.png) ### 完成展示待发货商品功能 ![](image/9.png) ### 完成订单详情 ![](image/10.png) ### 确认收货 ![](image/11.png) ### 商品评价 ![](image/12.png) ### 加入图片评价,解决显示上传图片问题 ![](image/15.png) ### 在商品详情页展示所有评价 ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
### 回答1: 在Spring Boot引入jQuery可以通过以下步骤实现: 1. 在Maven或Gradle中添加jQuery的依赖: Maven: ```xml <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.6.</version> </dependency> ``` Gradle: ```groovy implementation 'org.webjars:jquery:3.6.' ``` 2. 在HTML页面中引入jQuery: ```html <script src="/webjars/jquery/3.6./jquery.min.js"></script> ``` 3. 在JavaScript代码中使用jQuery: ```javascript $(document).ready(function() { // jQuery代码 }); ``` 这样就可以在Spring Boot中使用jQuery了。 ### 回答2: Spring Boot是一个开源的Java框架,可以快速构建Web应用程序。尽管Spring Boot可以轻松创建基本的Web应用程序,但许多应用程序都需要使用JavaScript库(例如JQuery)。在本文中,我们将了解如何在Spring Boot引入jQuery。 首先,我们需要在Spring Boot应用程序中添加jQuery的依赖项。Spring Boot使用Maven或Gradle管理依赖项,因此添加jQuery方式取决于您选择的工具。例如,在Maven中,您可以在pom.xml文件中加入以下依赖项: ``` <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.6.0</version> </dependency> ``` 这将向Spring Boot中添加WebJars jQuery库的依赖项。 接下来,在您的HTML文件中导入jQuery。您可以在HTML中添加以下代码: ``` <script src="/webjars/jquery/3.6.0/jquery.min.js"></script> ``` 在这个例子中,我们使用WebJars的路径来导入jQuery。这确保了jQuery文件可以正确下载并在我们的应用程序中使用。 最后,检查是否成功引入jQuery库。您可以将以下代码添加到HTML的头部: ``` <script> $(document).ready(function() { alert('Hello from jQuery!'); }); </script> ``` 这段代码将在页面加载完成时弹出一个"Hello from jQuery!"的消息框。如果您看到此消息框,则表示成功引入jQuery库。 在Spring Boot应用程序中引入jQuery非常简单。通过添加jQuery的依赖项,导入jQuery的路径,然后检查是否已成功引入jQuery库,您将能够在应用程序中轻松使用jQuery来开发复杂的Web应用程序。 ### 回答3: Spring Boot是一个快速开发的框架,它提供了很多便利性,可以大大减少开发的时间和复杂度。在实际开发中,前端开发不可避免的会用到jquery。本文将介绍如何在Spring Boot引入jquery。 一般来说,我们可以在html页面中通过script标签引入jquery的js文件,但在Spring Boot中,我们可以通过Maven或Gradle来引入jquery的依赖。这样可以让我们的工程更加的清晰和规范,同时也可以避免由于文件引用路径不正确导致的问题。 以Maven为例,我们可以在pom.xml中添加以下依赖: ``` <!--引入jquery--> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.6.0</version> </dependency> ``` 这样我们就成功引入jquery的依赖。在html页面中,我们可以通过以下方式引入jquery的js文件: ``` <!-- 引入jQuery --> <script src="/webjars/jquery/3.6.0/jquery.min.js"></script> ``` 在Gradle中,我们可以在build.gradle中添加以下依赖: ``` dependencies { // 引入jquery implementation 'org.webjars:jquery:3.6.0' } ``` 在html页面中同样可以通过以下方式引入jquery的js文件: ``` <!-- 引入jQuery --> <script src="/webjars/jquery/3.6.0/jquery.min.js"></script> ``` 以上就是在Spring Boot项目中引入jQuery的基本步骤。当然,我们也可以通过CDN等方式引入jquery的js文件,这里只是一个简单的示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值