springboot中添加静态页面的三种实现方案与对比
作者：悟能不能悟
这篇文章主要为大家详细介绍了springboot中添加静态页面的三种实现方案与对比,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
在Spring Boot项目中添加HTML页面，我来为你详细介绍几种常见的方式：
方法1：使用Thymeleaf模板引擎（推荐）
1. 添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>2. 创建HTML文件
在 src/main/resources/templates目录下创建 hello.html：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Spring Boot HTML示例</title>
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.container { max-width: 800px; margin: 0 auto; }
.header { background-color: #f0f0f0; padding: 20px; border-radius: 5px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 th:text="'Hello, ' + ${name} + '!'">Hello, World!</h1>
</div>
<p>当前时间: <span th:text="${currentTime}">2023-01-01</span></p>
<button onclick="showAlert()">点击我</button>
</div>
<script>
function showAlert() {
alert('Hello from Spring Boot!');
}
</script>
</body>
</html>3. 创建Controller
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.time.LocalDateTime;
@Controller
public class HelloController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("name", "Spring Boot");
model.addAttribute("currentTime", LocalDateTime.now());
return "hello"; // 对应templates/hello.html
}
}方法2：使用静态HTML（无需模板引擎）
1. 创建静态HTML
在 src/main/resources/static目录下创建 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>静态页面示例</title>
</head>
<body>
<h1>欢迎来到Spring Boot应用</h1>
<p>这是一个静态HTML页面</p>
<a href="/hello" rel="external nofollow" >访问动态页面</a>
</body>
</html>2. 配置Controller（可选）
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("/")
public String index() {
return "forward:/index.html"; // 重定向到静态页面
}
}方法3：使用FreeMarker模板
1. 添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>2. 创建FreeMarker模板
在 src/main/resources/templates创建 welcome.ftl：
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Welcome, ${userName}!</h1>
<p>Email: ${email}</p>
</body>
</html>配置说明
应用配置（application.properties）
# Thymeleaf配置 spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.cache=false # 开发时关闭缓存 # 静态资源路径 spring.web.resources.static-locations=classpath:/static/
项目结构
src/main/
├── java/
│ └── com/example/demo/
│ └── DemoApplication.java
│ └── controller/
│ └── HelloController.java
└── resources/
├── static/
│ └── index.html
├── templates/
│ └── hello.html
└── application.properties
启动应用
运行主应用类：
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}访问页面：
- 静态页面：http://localhost:8080/index.html
- 动态页面：http://localhost:8080/hello
注意事项
- 模板位置：Thymeleaf模板默认放在
src/main/resources/templates/ - 静态资源：CSS、JS、图片等放在
src/main/resources/static/ - 热部署：开发时可关闭模板缓存以便实时查看修改
- 路径问题：使用Thymeleaf时注意用
th:前缀代替原生HTML属性
选择哪种方式取决于你的需求：
- 需要动态数据：使用Thymeleaf或FreeMarker
- 纯静态内容：直接放在static目录
- 简单页面：静态HTML足够
- 复杂页面：推荐Thymeleaf
到此这篇关于springboot中添加静态页面的三种实现方案与对比的文章就介绍到这了,更多相关springboot添加静态页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！