springboot中添加靜態(tài)頁面的三種實現(xiàn)方案與對比

更新時間：2025年11月05日 08:40:01 作者：悟能不能悟

這篇文章主要為大家詳細介紹了springboot中添加靜態(tài)頁面的三種實現(xiàn)方案與對比,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

方法1：使用Thymeleaf模板引擎（推薦）

1. 添加依賴

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. 創(chuàng)建HTML文件

在 src/main/resources/templates目錄下創(chuàng)建 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. 創(chuàng)建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：使用靜態(tài)HTML（無需模板引擎）

1. 創(chuàng)建靜態(tài)HTML

在 src/main/resources/static目錄下創(chuàng)建 index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>靜態(tài)頁面示例</title>
</head>
<body>
    <h1>歡迎來到Spring Boot應用</h1>
    <p>這是一個靜態(tài)HTML頁面</p>
    <a href="/hello" rel="external nofollow" >訪問動態(tài)頁面</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"; // 重定向到靜態(tài)頁面
    }
}

方法3：使用FreeMarker模板

1. 添加依賴

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

2. 創(chuàng)建FreeMarker模板

在 src/main/resources/templates創(chuàng)建 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  # 開發(fā)時關閉緩存

# 靜態(tài)資源路徑
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);
    }
}

訪問頁面：