目录
- 方法1：使用Thymeleaf模板引擎（推荐）
- 1. 添加依赖
- 2. 创建html文件
- 3. 创建Controller
- 方法2：使用静态HTML（无需模板引擎）
- 1. 创建静态HTML
- 2. 配置Controller（可选）
- 方法3：使用FreeMarker模板
- 1. 添加依赖
- 2. 创建FreeMarker模板
- 配置说明
- 应用配置（application.properties）
- 项目结构
- 启动应用
- 注意事项
在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:/jsindex.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 ├─www.devze.com─ 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添加静态页面内容请搜索编程客栈(www.devze.comjs)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程客栈(www.devze.com)！
加载中,请稍侯......
精彩评论