如何在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">访问动态页面</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
