Question

我想在我的Java Web应用程序中使用Thymeleaf作为模板引擎。我还想使用Bootstrap 4构建前端。我使用的是Intellij IDEA 2017.2.5 Ultimate，Spring Boot 1.5.7，Tomcat 8.5.13，Java 8，Thymeleaf 3.0.7和Gradle。我创建了一个简单的控制器：

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

@Controller
public class HomeController {
    @RequestMapping("/")
    public String homeScreen()
    {
        return "index";
    }
}

和两个HTML文件：base和index：

<!DOCTYPE html>
<html lang="pl_PL" xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="head">
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <title>Title</title>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
              integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"/>
    </head>
    <body>

        <header th:fragment="header">
            <div class="btn-group btn-group-lg" role="group">
                <button type="button" class="btn btn-secondary">Home</button>
                <button type="button" class="btn btn-secondary">Invoices</button>
                <button type="button" class="btn btn-secondary">Customers</button>
                <button type="button" class="btn btn-secondary">Products</button>
                <button type="button" class="btn btn-secondary">Warehouse</button>
            </div>
        </header>

        <div th:fragment="bootstrap-js-jquery-links">
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
                    integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
                    integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:insert="base :: head"></head>
    <body>
        <header th:insert="base :: header"></header>
        <div th:insert="base :: bootstrap-js-jquery-links"></div>
    </body>
</html>

当我运行此应用程序时，所有内容都正确构建和部署，但我在索引页面上看不到任何内容，例如th:insert无效。当我在控制器中将return "index"更改为return "base"时，这就是我得到的（以及我希望index作为返回字符串获得的内容）：

根据Thymeleaf's documentation我觉得我写得正确，所以我在哪里弄错了？我的build.gradle：

buildscript {
    ext {
        springBootVersion = '1.5.7.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

apply plugin: 'java'
apply plugin: 'eclipse-wtp'
apply plugin: 'org.springframework.boot'
apply plugin: 'war'

group = 'com.invoices-web'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
    mavenCentral()
}

configurations {
    providedRuntime
}

dependencies {
    compile('org.springframework.boot:spring-boot-starter-data-jpa'){
        exclude group: 'org.hibernate', name:'hibernate-core'
    }
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    runtime('org.postgresql:postgresql')
    providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
    testCompile('org.springframework.boot:spring-boot-starter-test')
    compile group: 'org.hibernate', name: 'hibernate-core', version: '5.2.11.Final'
    compile group: 'org.hibernate.javax.persistence', name: 'hibernate-jpa-2.1-api', version: '1.0.0.Final'
    compile group: 'org.thymeleaf', name: 'thymeleaf-spring4', version: '3.0.7.RELEASE'
    compile group: 'com.ibm.icu', name: 'icu4j', version: '59.1'
    compile group: 'org.apache.pdfbox', name: 'pdfbox', version: '2.0.7'
    compile group: 'com.google.guava', name: 'guava', version: '23.0'

}

我的项目结构：

Answer 1

你可以试试这个：

index.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="base :: head"></head>
    <body>
        <header th:replace="base :: header"></header>
        <div th:replace="base :: bootstrap-js-jquery-links"></div>
    </body>
</html>

Thymeleaf的3片段插入不起作用

1 个答案: