Question

我尝试第一次使用thymeleaf将引导程序导航栏和javascript分离到它自己的独立html文件中，而不是我的主要html页面。我具有与thymeleaf教程完全相同的设置，但是在运行Spring时无法正确显示内容。

index.html <-我网站的主页 *已更新

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />

<body>
    <div th:replace="common/header :: navbar" />

    <div class="container">
        <div class="row">
            <!-- carousel -->
            <div class="col-xs-8">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div id="carousel-example-generic" class="carousel slide"
                            data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0"
                                    class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="item active">
                                    <img
                                        src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"
                                        alt="..." />
                                    <div class="carousel-caption">
                                        <h4>First Thumbnail Label</h4>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply
                                            random text. It has roots in a piece of classical Latin
                                            literature from 45 BC, making it over 2000 years old.</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img
                                        src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"
                                        alt="..." />
                                    <div class="carousel-caption">
                                        <h4>First Thumbnail Label</h4>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply
                                            random text. It has roots in a piece of classical Latin
                                            literature from 45 BC, making it over 2000 years old.</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img
                                        src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"
                                        alt="..." />
                                    <div class="carousel-caption">
                                        <h4>First Thumbnail Label</h4>
                                        <p>Contrary to popular belief, Lorem Ipsum is not simply
                                            random text. It has roots in a piece of classical Latin
                                            literature from 45 BC, making it over 2000 years old.</p>
                                    </div>
                                </div>
                                ...
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-example-generic"
                                role="button" data-slide="prev"> <span
                                class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a> <a class="right carousel-control"
                                href="#carousel-example-generic" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"
                                aria-hidden="true"></span> <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <img src="/image/logo.png" class="img-responsive" />
            </div>
        </div>

        <hr />

        <div class="row">
            <div class="col-xs-4">
                <div clas="panel panel-default">
                    <div class="panel-body">
                        <img src="/image/bestseller.png" class="img-responsive" />
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div clas="panel panel-default">
                    <div class="panel-body">
                        <img src="/image/hours.png" class="img-responsive" />
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div clas="panel panel-default">
                    <div class="panel-body">
                        <img src="/image/faq.png" class="img-responsive" />
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="home-headline">
                <span>Featured Books</span>
            </div>
            <hr style="margin-top: -15px;" />
        </div>


        <div class="row">
            <div id="featured-books" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#featured-books" data-slide-to="0" class="active"></li>
                    <li data-target="#featured-books" data-slide-to="1"></li>
                    <li data-target="#featured-books" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="/image/shelf.png" class="img-responsive" />
                        <div class="carousel-caption">
                            <div class="row">
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="/image/shelf.png" class="img-responsive" />
                        <div class="carousel-caption">
                            <div class="row">
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="/image/shelf.png" class="img-responsive" />
                        <div class="carousel-caption">
                            <div class="row">
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                                <div class="col-xs-2">
                                    <img class="img-responsive" src="/image/book1.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="##featured-books"
                    role="button" data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a> <a class="right carousel-control" href="##featured-books"
                    role="button" data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    </div>
    <!-- end of container -->


    <div th:replace="common/header :: body-bottom-scripts" />
</body>
</html>

header.html <-Thymeleaf文件，我在其中遇到问题 *已更新

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head th:fragment="common-header">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Alexander's Bookstore</title>

<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" />

<link href="/css/non-responsive.css" rel="stylesheet" />

<!-- Custom styles for this template -->
<link href="/css/style.css" rel="stylesheet" />

<link rel="icon" href="/image/applie-touch-icon.png" />
</head>

<body>
    <div th:fragment="navbar">
        <div class="page-top"
            style="width: 100%; height: 20px; background-color: #f46b42;"></div>
        <!-- Static navbar -->
        <nav class="navbar navbar-default navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">ALEXANDER'S BOOKSTORE</a>
                </div>
                <div id="navbar">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">BOOKS <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Browse the bookshelf</a></li>
                                <li><a href="#">Store hours &#38; Directions</a></li>
                                <li><a href="#">FAQ</a></li>

                            </ul></li>
                        <form class="navbar-form">
                            <div class="form-group">
                                <input type="text" name="keyword" class="form-control"
                                    placeholder="Book title" />
                            </div>
                            <button type="submit" class="btn btn-default">Search</button>
                        </form>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">SHOPPING CART</a></li>
                        <li><a href="#">MY ACCOUNT</a></li>
                        <li><a href="#">LOGOUT</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container-fluid -->
        </nav>
    </div>

    <div th:fragment="body-bottom-scripts">
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    </div>
</body>
</html>

HomeController.java

package com.bookstore.controller;

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

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

pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.bookstore</groupId>
  <artifactId>bookstore</artifactId>
  <version>0.1.0</version>
  <packaging>war</packaging>

  <name>Bookstore</name>
  <description>frontend part for our bookstore project</description>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.10</maven.compiler.source>
    <maven.compiler.target>1.10</maven.compiler.target>
  </properties>

  <dependencies>

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

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

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

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>com.bookstore</groupId>
      <artifactId>bookstore</artifactId>
      <version>0.1.0</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>bookstore</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.0.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.7.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.20.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
        <plugin>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

我的项目文件结构

我试图通过重建项目并清理我的.m2存储库来进行故障排除，但这给了我同样的问题，因此我将其四舍五入为百里香。任何帮助表示赞赏！

Answer 1

您应该从index.html中删除所有与navbar有关的内容，并在所需位置添加th：replace。

我这样做的方式是这样的：

结构：
- index.html
- 片段/
  - header.html

index.html：

<!DOCTYPE html>
<html lang="pl">   
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title th:text="${title}">Thyme</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/assets/stylesheets/main.css" />    
</head> 
<body>
    <section th:replace="fragments/navbar :: navbar" role="navbar">
        <div class="container">
            <div class="jumbotron">
                <h1>NAVBAR</h1></div>
        </div>
    </section>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></sript>
</body>
</html>

fragments / header.html：

<!doctype html>
<html>
<head>
</head>
<body>
    <section th:fragment="navbar">
        <nav class="navbar">
            <!-- Contents of navbar -->
        </nav>
    </section>
</body>
</html>

这是一个古老的项目，由Thymeleaf 2完成，但我认为在Thymeleaf 3中并没有改变。

如果某些内容无法正常工作，请查看有关片段here的文档

Answer 2

我找到了解决问题的方法。我与Spring Boot同时运行Apache Tomcat，而我的IDE仅运行Tomcat而未检查Spring Boot。该问题导致我的开发运营服务器发生冲突，导致Thymeleaf无法运行。问题不只是我的代码，而不仅仅是我的IDE环境。

感谢所有帮助！

使用引导程序，胸腺无法正常工作（th：fragment / th：replace）

2 个答案: