ข้อผิดพลาดเมื่อพยายามจัดการเทมเพลตด้วย Thymeleaf

สวัสดีตอนเช้าทุกคน! ฉันกำลังพยายามทำให้ส่วน Thymeleaf ของเทมเพลตและแฟรกเมนต์ทำงานได้ แต่ไม่มีอะไรเกิดขึ้นบนเพจ...

ฉันทดสอบการกำหนดค่าหลายอย่างแล้ว แต่ฉันไม่สามารถทำอะไรที่จะทำให้ส่วนนี้ของ th:block ทำงานหรือทำให้ layout.html ถูกต้องได้

ใครสามารถช่วยฉันหน่อยได้ไหม? ดูรหัสด้านล่าง:

โครงสร้าง

new.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"     
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout">

    <th:block layout:fragment="content">
        <ul>
            <li th:each="name : ${list}">
                <p th:text="${name}"></p>
            </li>
        </ul>
    </th:block>
    </html>

layout.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"    
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="ISO-8859-1" />
    <title>Insert title here</title>
    <link rel="stylesheet" th:href="/th@{/css/bootstrap.min.css}" />
</head>
<body>

    <th:block layout:replace="fragments/header"></th:block>

    <div class="container-fluid">
        <div class="row">
            <th:block layout:fragment="content"></th:block>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>

</body>
</html>

header.html:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/th" class="navbar-brand">Spring App</a>

    <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a href="/th" class="nav-link">Home</a>
            </li>
            <li class="nav-item active">
                <a href="/th" class="nav-link">About</a>
            </li>
        </ul>
    </div>
</nav>

ตัวควบคุมเริ่มต้น:

package com.example.teste.controller;

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/")
public class InicioController {

    @GetMapping("/new")
    public String newPath(Model model) {
            List<String> list = new ArrayList<String>();

        list.add("Teste 1");
        list.add("Teste 2");
        list.add("Teste 3");
        list.add("Teste 4");
        list.add("Teste 5");

        model.addAttribute("list", list);

        return "new";
    }

}

ฉันพบว่ามันแปลกที่ Thymeleaf xmlns ไม่ปรากฏขึ้น... เป็นเรื่องปกติหรือไม่?

ป้อนคำอธิบายรูปภาพที่นี่

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.example</groupId>
    <artifactId>teste</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>teste</name>
    <description>Demo project for Spring Boot</description>

    <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>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
                <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

ฉันแทรกรูปภาพอื่นที่แสดงส่วนว่างและยังไม่ปรากฏ xmlns: th = "http://www.thymeleaf.org" ฉันไม่รู้ว่านี่เป็นเรื่องปกติแค่ไหน

new.html:

ป้อนคำอธิบายรูปภาพที่นี่


person sounobre    schedule 17.06.2018    source แหล่งที่มา


คำตอบ (1)


อัปเดต

ปัญหานี้เกิดจากปัญหาการพึ่งพา เมื่อคุณเพิ่มสิ่งต่อไปนี้ลงใน pom.xml ก็จะใช้งานได้:

<dependency>
  <groupId>nz.net.ultraq.thymeleaf</groupId>
  <artifactId>thymeleaf-layout-dialect</artifactId>
  <version>2.0.5</version>
</dependency>

คำตอบเก่า

คุณอาจขาดการประกาศส่วนย่อยใน header.html ของคุณ ซึ่งควรจะเป็นดังนี้:

<div th:fragment="header">    
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/th" class="navbar-brand">Spring App</a>

    <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a href="/th" class="nav-link">Home</a>
            </li>
            <li class="nav-item active">
                <a href="/th" class="nav-link">About</a>
            </li>
        </ul>
    </div>
</nav>
</div>

ฉันยังสังเกตเห็นว่าคุณมีการประกาศส่วนย่อยแบบเดียวกับใน new.html ในlayout.html ฉันคิดว่าหนึ่งในนั้นจำเป็นต้องเป็นแท็กทดแทนหรือไม่

person Sven Hakvoort    schedule 17.06.2018
comment
แต่หน้าใหม่ไม่ได้รับเค้าโครงหน้าlayout.html - person sounobre; 17.06.2018
comment
ถูกต้อง คุณต้องล้อมส่วนของเค้าโครงที่คุณต้องการใช้เป็นส่วนย่อย จากนั้นจึงเรียกการแทนที่ใน new.html เพื่อรับส่วนย่อยเหล่านั้นในหน้าใหม่ของคุณ - person Sven Hakvoort; 17.06.2018
comment
ฉันทำแบบทดสอบนี้ตามที่คุณแนะนำ แต่มันก็ยังคงเหมือนเดิม ฉันอัปโหลดมันไปที่ GitHub ถ้าฉันสามารถดูได้ https://github.com/sounobre/thymeleaf ฉันแทรกรูปภาพอื่นที่แสดง ‹Link› ว่างเปล่า ส่วนหนึ่งและยังไม่ปรากฏ xmlns: th = thymeleaf.org ฉันไม่รู้ว่านี่เป็นเรื่องปกติแค่ไหน - person sounobre; 18.06.2018
comment
ฉันได้เพิ่มการอัปเดตด้วยสิ่งที่แก้ไขโคลนของ repo ของคุณสำหรับฉัน @sounobre - person Sven Hakvoort; 18.06.2018
comment
เพื่อนของฉัน มันทำงานได้อย่างสมบูรณ์แบบ คุณมาถึงข้อสรุปนั้นได้อย่างไร? เอกสารบางอย่างที่ฉันไม่สามารถตรวจสอบได้? ขอบคุณสำหรับความช่วยเหลือ สำหรับบางคนอาจดูเหมือนเล็กน้อย แต่ฉันรู้สึกขอบคุณมากสำหรับความสนใจและความเต็มใจของคุณที่จะช่วยฉัน ขอบคุณ! - person sounobre; 18.06.2018
comment
ยินดีต้อนรับ :) ฉันพบมันที่นี่: thymeleaf.org/doc/articles/ layouts.html#configuration - person Sven Hakvoort; 18.06.2018