引言：为什么选择Bootstrap 4与Spring Boot的组合？
在现代Web开发中，
响应式设计
和
快速开发
是两个核心需求。Bootstrap 4作为最流行的前端框架之一，提供了丰富的UI组件和响应式网格系统；而Spring Boot作为Java生态中最受欢迎的后端框架，以其”约定优于配置”的理念大大简化了企业级应用的开发。将这两者结合，可以让我们快速构建出现代化的、美观且功能强大的Web应用。
本文将带你从零开始，完整地创建一个Spring Boot应用，并整合Bootstrap 4实现响应式界面。我们会涵盖项目搭建、依赖管理、视图层配置、静态资源处理、表单验证、AJAX交互等核心内容，并提供详细的代码示例和常见问题的解决方案。
第一部分：环境准备与项目初始化
1.1 开发环境要求
在开始之前，请确保你的开发环境满足以下要求：
JDK 8+
（推荐JDK 11或17）
Maven 3.6+
（或Gradle）
IDE
（推荐IntelliJ IDEA或Eclipse）
Node.js
（可选，用于管理前端依赖）
1.2 使用Spring Initializr创建项目
Spring Initializr是创建Spring Boot项目的最快方式。我们可以通过以下两种方式之一来初始化项目：
方式一：使用Spring Initializr网站
访问
https://start.spring.io
填写项目元数据：
Project
: Maven Project
Language
: Java
Spring Boot
: 选择稳定版本（如3.1.x）
Group
: com.example
Artifact
: bootstrap-demo
Packaging
: Jar
Java
: 17
添加依赖：
Spring Web
: 提供Web开发支持
Thymeleaf
: 作为模板引擎
Spring Boot DevTools
: 开发时热部署
Lombok
: 简化Java代码（可选）
点击”Generate”下载项目压缩包
方式二：使用IDE创建（以IntelliJ IDEA为例）
打开IDEA，选择
File > New > Project
左侧选择
Spring Initializr
填写项目信息，选择依赖
点击Finish完成创建
1.3 项目结构概览
创建完成后，项目结构应该如下：
bootstrap-demo/
├── src/
│ ├── main/
│ │ ├── java/
│ │ │ └── com/
│ │ │ └── example/
│ │ │ └── bootstrappdemo/
│ │ │ └── BootstrapDemoApplication.java
│ │ └── resources/
│ │ ├── static/
│ │ ├── templates/
│ │ └── application.properties
│ └── test/
├── pom.xml
└── .gitignore
1.4 添加Bootstrap 4依赖
虽然我们可以通过CDN引入Bootstrap，但为了更好的离线支持和版本控制，推荐使用
WebJars
来管理前端依赖。
在
pom.xml
中添加以下依赖：


org.webjars
webjars-locator-core

org.webjars
bootstrap
4.6.2

org.webjars
jquery
3.6.0

org.webjars
popper.js
1.16.1

为什么使用WebJars？
版本管理清晰，通过Maven/Gradle统一管理
自动处理依赖关系
无需手动下载和放置静态文件
与Spring Boot的静态资源机制完美集成
第二部分：Spring Boot基础配置
2.1 配置静态资源处理器
Spring Boot默认已经配置了静态资源处理器，但我们需要确保它能正确处理WebJars资源。在
application.properties
中添加：
# 静态资源路径配置
spring.web.resources.static-locations=classpath:/static/,classpath:/public/,classpath:/resources/,classpath:/META-INF/resources/

# WebJars路径前缀
spring.webjars.path=/webjars/

# 缓存配置（开发时建议关闭）
spring.web.resources.cache.period=0
2.2 创建基础控制器
创建一个简单的控制器来测试整合是否成功：
package com.example.bootstrappdemo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

@GetMapping(“/”)
public String home() {
return “index”; // 返回templates/index.html
}

@GetMapping(“/about”)
public String about() {
return “about”; // 返回templates/about.html
}
}
2.3 创建基础视图模板
在
src/main/resources/templates/
目录下创建
index.html
：

2.4 启动应用并测试
运行
BootstrapDemoApplication.java
的main方法，然后访问
http://localhost:8080
。你应该能看到一个带有Bootstrap 4样式的页面。
第三部分：整合Thymeleaf模板引擎
3.1 为什么选择Thymeleaf？
Thymeleaf是Spring Boot官方推荐的模板引擎，相比JSP有以下优势：
自然模板
：HTML文件可以直接在浏览器中预览
强大的表达式语言
：支持多种表达式语法
与Spring MVC深度集成
：完美支持Spring的模型数据
良好的IDE支持
：提供语法高亮和自动补全
3.2 配置Thymeleaf
在
application.properties
中配置Thymeleaf：
# Thymeleaf配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
# 开发时关闭缓存，实时生效
spring.thymeleaf.cache=false
3.3 创建复杂的数据展示页面
让我们创建一个展示用户列表的页面，演示Thymeleaf的循环和条件判断功能。
1. 创建实体类 User.java
package com.example.bootstrappdemo.model;

import lombok.Data;
import lombok.AllArgsConstructor;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Long id;
private String name;
private String email;
private String role;
private boolean active;
}
2. 创建控制器 UserController.java
package com.example.bootstrappdemo.controller;

import com.example.bootstrappdemo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

@Controller
@RequestMapping(“/users”)
public class UserController {

// 模拟数据库数据
private static final List USER_LIST = Arrays.asList(
new User(1L, “张三”, “zhangsan@example.com”, “ADMIN”, true),
new User(2L, “李四”, “lisi@example.com”, “USER”, true),
new User(3L, “王五”, “wangwu@example.com”, “USER”, false),
new User(4L, “赵六”, “zhaoliu@example.com”, “MANAGER”, true),
new User(5L, “钱七”, “qianqi@example.com”, “USER”, true)
);

@GetMapping
public String listUsers(Model model) {
model.addAttribute(“users”, USER_LIST);
model.addAttribute(“title”, “用户管理”);
return “user-list”;
}

@GetMapping(“/active”)
public String activeUsers(Model model) {
List activeUsers = USER_LIST.stream()
.filter(User::isActive)
.collect(Collectors.toList());
model.addAttribute(“users”, activeUsers);
model.addAttribute(“title”, “活跃用户”);
return “user-list”;
}
}
3. 创建用户列表视图 user-list.html

第四部分：表单处理与数据验证
4.1 创建表单实体类
package com.example.bootstrappdemo.model;

import lombok.Data;
import javax.validation.constraints.Email;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Size;

@Data
public class UserForm {

@NotBlank(message = “用户名不能为空”)
@Size(min = 2, max = 20, message = “用户名长度必须在2-20个字符之间”)
private String name;

@NotBlank(message = “邮箱不能为空”)
@Email(message = “邮箱格式不正确”)
private String email;

@NotBlank(message = “密码不能为空”)
@Size(min = 6, max = 20, message = “密码长度必须在6-20个字符之间”)
private String password;

@NotBlank(message = “请选择角色”)
private String role;
}
4.2 创建表单控制器
package com.example.bootstrappdemo.controller;

import com.example.bootstrappdemo.model.UserForm;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.validation.Valid;
import java.util.Arrays;
import java.util.List;

@Controller
@RequestMapping(“/form”)
public class FormController {

@GetMapping
public String showForm(Model model) {
model.addAttribute(“userForm”, new UserForm());
model.addAttribute(“roles”, getRoles());
return “user-form”;
}

@PostMapping
public String processForm(
@Valid @ModelAttribute UserForm userForm,
BindingResult bindingResult,
Model model,
RedirectAttributes redirectAttributes) {

// 如果有验证错误，返回表单页面并显示错误信息
if (bindingResult.hasErrors()) {
model.addAttribute(“roles”, getRoles());
return “user-form”;
}

// 处理成功（这里只是演示，实际应该保存到数据库）
System.out.println(“收到用户数据: ” + userForm);

// 添加成功消息到重定向属性
redirectAttributes.addFlashAttribute(“successMessage”,
“用户 ” + userForm.getName() + ” 注册成功！”);

return “redirect:/form/success”;
}

@GetMapping(“/success”)
public String success() {
return “form-success”;
}

private List getRoles() {
return Arrays.asList(“USER”, “ADMIN”, “MANAGER”);
}
}
4.3 创建表单视图 user-form.html

4.4 成功页面 form-success.html

第五部分：AJAX与JSON数据交互
5.1 创建REST API控制器
package com.example.bootstrappdemo.controller;

import com.example.bootstrappdemo.model.User;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.*;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicLong;
import java.util.stream.Collectors;

@RestController
@RequestMapping(“/api/users”)
public class UserApiController {

// 模拟数据库
private final Map userDatabase = new ConcurrentHashMap<>();
private final AtomicLong idGenerator = new AtomicLong(1);

public UserApiController() {
// 初始化一些数据
userDatabase.put(1L, new User(1L, “张三”, “zhangsan@example.com”, “ADMIN”, true));
userDatabase.put(2L, new User(2L, “李四”, “lisi@example.com”, “USER”, true));
userDatabase.put(3L, new User(3L, “王五”, “wangwu@example.com”, “USER”, false));
}

// 获取所有用户
@GetMapping
public List getAllUsers() {
return new ArrayList<>(userDatabase.values());
}

// 获取单个用户
@GetMapping(“/{id}”)
public ResponseEntity getUserById(@PathVariable Long id) {
User user = userDatabase.get(id);
if (user != null) {
return ResponseEntity.ok(user);
}
return ResponseEntity.notFound().build();
}

// 创建用户
@PostMapping
public ResponseEntity createUser(@RequestBody User user) {
user.setId(idGenerator.getAndIncrement());
userDatabase.put(user.getId(), user);
return ResponseEntity.ok(user);
}

// 更新用户
@PutMapping(“/{id}”)
public ResponseEntity updateUser(@PathVariable Long id, @RequestBody User user) {
if (userDatabase.containsKey(id)) {
user.setId(id);
userDatabase.put(id, user);
return ResponseEntity.ok(user);
}
return ResponseEntity.notFound().build();
}

// 删除用户
@DeleteMapping(“/{id}”)
public ResponseEntity deleteUser(@PathVariable Long id) {
if (userDatabase.remove(id) != null) {
return ResponseEntity.ok().build();
}
return ResponseEntity.notFound().build();
}

// 搜索用户
@GetMapping(“/search”)
public List searchUsers(@RequestParam String keyword) {
return userDatabase.values().stream()
.filter(user -> user.getName().contains(keyword) || user.getEmail().contains(keyword))
.collect(Collectors.toList());
}
}
5.2 创建AJAX测试页面 ajax-demo.html

5.3 在控制器中添加AJAX页面映射
@GetMapping(“/ajax”)
public String ajaxDemo() {
return “ajax-demo”;
}
第六部分：响应式布局进阶技巧
6.1 Bootstrap 4网格系统详解
Bootstrap 4的网格系统基于12列布局，通过行（row）和列（col）的组合实现响应式设计。
示例：响应式卡片布局

第七部分：常见问题与解决方案
7.1 静态资源404问题
问题描述
：整合后CSS/JS文件无法加载，返回404错误。
原因分析
：
WebJars路径配置不正确
Thymeleaf表达式语法错误
静态资源目录结构问题
解决方案
：
检查WebJars依赖
：


org.webjars
webjars-locator-core

正确的Thymeleaf引用方式
：
“`html
3. **验证资源路径**：
启动应用后访问：
– [http://localhost:8080/webjars/bootstrap/4.6.2/css/bootstrap.min.css](http://localhost:8080/webjars/bootstrap/4.6.2/css/bootstrap.min.css)
– 如果能访问，说明WebJars配置正确

4. **自定义静态资源路径**：
如果需要自定义路径，在 `application.properties` 中：
“`properties
spring.web.resources.static-locations=classpath:/static/
spring.mvc.static-path-pattern=/static/**
7.2 Thymeleaf缓存导致页面不更新
问题描述
：修改HTML后刷新页面，内容没有变化。
解决方案
：
# application.properties
spring.thymeleaf.cache=false
如果使用Spring Boot DevTools
：
确保依赖已添加：

org.springframework.boot
spring-boot-devtoolstrue

在IDE中启用”Build project automatically”
按
Ctrl+F10
或
Cmd+Shift+F9
重新构建
7.3 表单验证错误信息不显示
问题描述
：表单提交后，验证错误信息没有在页面显示。
检查清单
：
实体类是否有验证注解
：
@NotBlank(message = “用户名不能为空”)
private String name;
控制器方法参数顺序
：
// 正确顺序：@Valid 对象 -> BindingResult
public String processForm(@Valid @ModelAttribute UserForm userForm,
BindingResult bindingResult)
视图中是否有错误显示逻辑
：

检查是否添加了验证依赖
：

org.springframework.boot
spring-boot-starter-validation

7.4 AJAX请求CSRF问题
问题描述
：POST/PUT/DELETE请求返回403 Forbidden。
解决方案
：
Spring Security默认启用CSRF保护。需要在AJAX请求中添加CSRF Token。
方法一：禁用CSRF（不推荐用于生产）
：
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable();
}
}
方法二：在AJAX中添加CSRF Token
：

7.5 响应式布局在移动端显示异常
问题描述
：在手机上页面显示不正常，内容被截断或重叠。
检查清单
：
确保viewport meta标签存在
：

使用正确的容器类
：
“`html
3. **避免固定宽度**：
“`html

使用响应式图片
：

测试不同屏幕尺寸
：
使用浏览器开发者工具的设备模拟器
检查断点：xs(<576px), sm(≥576px), md(≥768px), lg(≥992px), xl(≥1200px) 7.6 WebJars版本冲突 问题描述 ：多个WebJars依赖包含相同库的不同版本，导致冲突。 解决方案 ： 统一版本管理 ： 在 pom.xml 的 中定义版本：
“`xml
4.6.2
3.6.0

org.webjars
bootstrap
${bootstrap.version}

2. **排除冲突依赖**：
“`xml

org.webjars
bootstrap
4.6.2


org.webjars
jquery



7.7 生产环境优化
问题描述
：开发环境正常，但生产环境资源加载慢。
优化方案
：
启用资源缓存
：
# application-prod.properties
spring.web.resources.cache.period=31536000
spring.thymeleaf.cache=true
使用CDN作为备选
：

资源压缩
：
添加Maven插件： com.github.adrianosbezerra
minify-maven-plugin
2.0.0


minify

使用HTTP/2
：
在Spring Boot 2.x+中默认支持，确保使用HTTPS。
第八部分：最佳实践与性能优化
8.1 项目结构最佳实践
src/main/resources/
├── static/
│ ├── css/
│ │ └── custom.css # 自定义样式
│ ├── js/
│ │ └── app.js # 自定义JavaScript
│ └── images/ # 图片资源
├── templates/
│ ├── fragments/ # 可重用模板片段
│ │ ├── header.html
│ │ ├── footer.html
│ │ └── sidebar.html
│ ├── layout/ # 布局模板
│ │ └── base.html
│ ├── partials/ # 页面组件
│ └── *.html # 页面模板
└── application.properties
8.2 创建可重用的模板片段
fragments/header.html
：

fragments/footer.html
：

layout/base.html
：

使用布局
：

我的页面内容

这里的内容会自动插入到布局中

8.3 性能优化技巧
1. 图片优化

2. CSS和JavaScript优化
/* 自定义CSS放在static/css/custom.css */
/* 避免使用过于复杂的选择器 */
.container {
max-width: 1200px;
}

/* 使用CSS变量便于主题切换 */
:root {
–primary-color: #007bff;
–secondary-color: #6c757d;
}

.btn-primary {
background-color: var(–primary-color);
}
3. JavaScript模块化
// static/js/app.js
const App = {
init: function() {
this.bindEvents();
this.loadInitialData();
},

bindEvents: function() {
// 事件绑定
$(‘#searchBtn’).on(‘click’, this.handleSearch.bind(this));
},

handleSearch: function() {
// 搜索逻辑
},

loadInitialData: function() {
// 初始数据加载
}
};

// 页面加载时初始化
$(document).ready(function() {
App.init();
});
8.4 安全最佳实践
输入验证
：
前端验证（用户体验）
后端验证（安全性）
XSS防护
：
“`html
安全显示
3. **CSRF防护**：
– 使用Spring Security的CSRF保护
– 在AJAX请求中包含Token

4. **内容安全策略（CSP）**：
“`java
@Configuration
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.headers()
.contentSecurityPolicy(“script-src ‘self’ ‘unsafe-inline’; object-src ‘none’;”);
return http.build();
}
}
第九部分：完整项目示例
9.1 项目依赖完整配置

4.0.0

org.springframework.boot
spring-boot-starter-parent
3.1.5

com.example
bootstrap-demo
1.0.0
bootstrap-demo
Bootstrap 4 + Spring Boot 整合示例

17
4.6.2
3.6.0

org.springframework.boot
spring-boot-starter-web

org.springframework.boot
spring-boot-starter-thymeleaf

org.springframework.boot
spring-boot-starter-validation

org.webjars
webjars-locator-core

org.webjars
bootstrap
${bootstrap.version}

org.webjars
jquery
${jquery.version}

org.webjars
popper.js
1.16.1

org.springframework.boot
spring-boot-devtools
runtimetrue

org.projectlombok
lomboktrue

org.springframework.boot
spring-boot-starter-test
test

org.springframework.boot
spring-boot-maven-plugin



org.projectlombok
lombok


9.2 主控制器完整代码
package com.example.bootstrappdemo.controller;

import com.example.bootstrappdemo.model.User;
import com.example.bootstrappdemo.model.UserForm;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import javax.validation.Valid;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicLong;

@Controller
public class MainController {

// 模拟数据库
private final Map userDatabase = new ConcurrentHashMap<>();
private final AtomicLong idGenerator = new AtomicLong(1);

public MainController() {
// 初始化数据
userDatabase.put(1L, new User(1L, “张三”, “zhangsan@example.com”, “ADMIN”, true));
userDatabase.put(2L, new User(2L, “李四”, “lisi@example.com”, “USER”, true));
}

// 首页
@GetMapping(“/”)
public String home() {
return “index”;
}

// 关于页面
@GetMapping(“/about”)
public String about() {
return “about”;
}

// 用户列表
@GetMapping(“/users”)
public String users(Model model) {
model.addAttribute(“users”, userDatabase.values());
model.addAttribute(“title”, “用户管理”);
return “user-list”;
}

// 表单页面
@GetMapping(“/form”)
public String showForm(Model model) {
model.addAttribute(“userForm”, new UserForm());
model.addAttribute(“roles”, Arrays.asList(“USER”, “ADMIN”, “MANAGER”));
return “user-form”;
}

// 处理表单
@PostMapping(“/form”)
public String processForm(@Valid @ModelAttribute UserForm userForm,
BindingResult bindingResult,
Model model,
RedirectAttributes redirectAttributes) {
if (bindingResult.hasErrors()) {
model.addAttribute(“roles”, Arrays.asList(“USER”, “ADMIN”, “MANAGER”));
return “user-form”;
}

// 保存到”数据库”
Long id = idGenerator.getAndIncrement();
User user = new User(id, userForm.getName(), userForm.getEmail(),
userForm.getRole(), true);
userDatabase.put(id, user);

redirectAttributes.addFlashAttribute(“successMessage”,
“用户 ” + userForm.getName() + ” 注册成功！”);
return “redirect:/form/success”;
}

// 表单成功页面
@GetMapping(“/form/success”)
public String formSuccess() {
return “form-success”;
}

// AJAX演示页面
@GetMapping(“/ajax”)
public String ajaxDemo() {
return “ajax-demo”;
}

// 响应式布局演示
@GetMapping(“/responsive”)
public String responsiveDemo() {
return “responsive-demo”;
}

// API控制器（内部类，实际项目应分开）
@RestController
@RequestMapping(“/api/users”)
class UserApiController {
@GetMapping
public List getAllUsers() {
return List.copyOf(userDatabase.values());
}

@GetMapping(“/{id}”)
public User getUserById(@PathVariable Long id) {
return userDatabase.get(id);
}

@PostMapping
public User createUser(@RequestBody User user) {
user.setId(idGenerator.getAndIncrement());
userDatabase.put(user.getId(), user);
return user;
}

@PutMapping(“/{id}”)
public User updateUser(@PathVariable Long id, @RequestBody User user) {
user.setId(id);
userDatabase.put(id, user);
return user;
}

@DeleteMapping(“/{id}”)
public void deleteUser(@PathVariable Long id) {
userDatabase.remove(id);
}

@GetMapping(“/search”)
public List searchUsers(@RequestParam String keyword) {
return userDatabase.values().stream()
.filter(u -> u.getName().contains(keyword) || u.getEmail().contains(keyword))
.collect(java.util.stream.Collectors.toList());
}
}
}
9.3 应用主类
package com.example.bootstrappdemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BootstrapDemoApplication {
public static void main(String[] args) {
SpringApplication.run(BootstrapDemoApplication.class, args);
}
}
9.4 配置文件
application.properties
：
# 服务器配置
server.port=8080

# Thymeleaf配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false

# 静态资源配置
spring.web.resources.static-locations=classpath:/static/,classpath:/public/
spring.web.resources.cache.period=0

# 日志配置
logging.level.com.example.bootstrappdemo=DEBUG
logging.level.org.springframework.web=INFO

# 国际化
spring.messages.basename=messages
spring.messages.encoding=UTF-8
第十部分：部署与生产环境
10.1 打包部署
Maven打包
# 开发环境打包（包含DevTools）
mvn clean package

# 生产环境打包（排除DevTools）
mvn clean package -DskipTests
运行应用
# 使用Maven运行
mvn spring-boot:run

# 使用JAR文件运行
java -jar target/bootstrap-demo-1.0.0.jar

# 指定配置文件运行
java -jar target/bootstrap-demo-1.0.0.jar –spring.profiles.active=prod
10.2 生产环境配置
application-prod.properties
：
# 生产环境配置
server.port=8080
server.servlet.context-path=/app

# 生产环境启用缓存
spring.thymeleaf.cache=true
spring.web.resources.cache.period=31536000

# 关闭DevTools
spring.devtools.restart.enabled=false

# 日志级别
logging.level.root=WARN
logging.level.com.example.bootstrappdemo=INFO

# 压缩
server.compression.enabled=true
server.compression.mime-types=text/html,text/xml,text/css,application/javascript,application/json
server.compression.min-response-size=1024
10.3 Docker部署
Dockerfile
：
# 使用OpenJDK 17作为基础镜像
FROM openjdk:17-jdk-slim

# 设置工作目录
WORKDIR /app

# 复制JAR文件
COPY target/bootstrap-demo-1.0.0.jar app.jar

# 暴露端口
EXPOSE 8080

# 运行应用
ENTRYPOINT [“java”, “-jar”, “app.jar”]
构建和运行
：
# 构建镜像
docker build -t bootstrap-demo:1.0 .

# 运行容器
docker run -d -p 8080:8080 –name demo-app bootstrap-demo:1.0

# 查看日志
docker logs -f demo-app
10.4 Nginx反向代理配置
nginx.conf
：
server {
listen 80;
server_name your-domain.com;

# 静态资源缓存
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control “public, immutable”;
proxy_pass http://localhost:8080;
}

# 应用代理
location / {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

# WebSocket支持（如果需要）
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
}
}
总结
通过本文的详细指导，你已经学会了如何从零开始创建一个完整的Bootstrap 4与Spring Boot整合的响应式Web应用。我们涵盖了：
✅
项目初始化
：使用Spring Initializr和WebJars管理依赖
✅
基础配置
：静态资源处理、Thymeleaf模板引擎配置
✅
视图层开发
：创建响应式页面、使用Bootstrap组件
✅
表单处理
：数据绑定、验证、错误显示
✅
AJAX交互
：REST API、异步数据处理
✅
响应式布局
：网格系统、断点、工具类
✅
常见问题
：404错误、缓存、验证、CSRF等
✅
最佳实践
：项目结构、性能优化、安全性
✅
生产部署
：打包、Docker、Nginx配置
关键要点回顾
WebJars
是管理前端依赖的最佳方式
Thymeleaf
提供了强大的模板功能和Spring集成
Bootstrap 4
的网格系统是响应式设计的核心
表单验证
需要前后端双重保障
AJAX
可以提升用户体验，但要注意CSRF防护
生产环境
需要启用缓存、压缩等优化措施
下一步建议
添加Spring Security
：保护你的应用
集成数据库
：使用Spring Data JPA连接真实数据库
引入前端构建工具
：如Webpack或Vite管理更复杂的前端资源
添加单元测试
：编写控制器和服务的测试用例
监控和日志
：集成Actuator和ELK栈
希望这篇详细的指南能帮助你成功构建现代化的Web应用！如果有任何问题，欢迎在实际开发中参考本文的各个章节。