您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
# 怎么在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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。