您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
# 怎么在SpringBoot中整合jQuery和Bootstrap框架
## 前言
在现代Web开发中，前端框架与后端技术的整合已成为标配。本文将详细介绍如何在SpringBoot项目中整合jQuery和Bootstrap这两个流行的前端工具，实现前后端分离开发的基础配置。
---
## 一、环境准备
### 1. 创建SpringBoot项目
通过以下任一方式创建项目：
- 使用[Spring Initializr](https://start.spring.io/)生成
- IDEA直接创建SpringBoot项目
- Maven/Gradle手动配置
### 2. 基础依赖
确保`pom.xml`包含web依赖：
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- Bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.3.0</version>
</dependency>
<!-- jQuery -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.0</version>
</dependency>
确保资源文件能被正确访问：
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**")
.addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}"/>
</head>
<body>
<!-- 页面内容 -->
<!-- jQuery -->
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<!-- Bootstrap JS -->
<script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
将下载的jQuery和Bootstrap文件放入：
src/main/resources/static/
├─ js/
│ ├─ jquery.min.js
│ └─ bootstrap.min.js
└─ css/
└─ bootstrap.min.css
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
@Controller
public class DemoController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute("message", "Hello Bootstrap!");
return "index";
}
}
<div class="container mt-5">
<div class="alert alert-success" th:text="${message}"></div>
<button id="demoBtn" class="btn btn-primary">点击测试jQuery</button>
</div>
<script>
$(document).ready(function(){
$("#demoBtn").click(function(){
alert("jQuery工作正常！");
});
});
</script>
开发时建议配置：
# application.properties
spring.thymeleaf.cache=false
spring.resources.cache.period=0
通过本文介绍的两种整合方案，可以快速在SpringBoot项目中引入jQuery和Bootstrap。WebJars方案更适合依赖管理，而本地资源方案则更灵活。根据项目需求选择合适的方式，能显著提升开发效率。 “`
本文共约1200字，包含了从环境搭建到功能验证的完整流程。实际开发中建议根据项目需求调整具体实现方式。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。