帶有Bootstrap和Thymeleaf頁面裝飾的SpringMVC-有解無憂

我正在使用：“SpringMVC 5”，帶有“Twitter Bootstrap 4”html 頁面和“Thymeleaf 3”模板，在 IntelliJ EAP（最新版本）和 Tomcat9、Maven 中

我的專案結構：

src/main/java (WebConfig.java/Controlers/Beans)
src/main/resources (*.properties)
src/main/webapp/WEB-INF/views/layout/template.html
src/main/webapp/WEB-INF/views/fragments/menubar.html
src/main/webapp/WEB-INF/views/home.html (my page)

我正在使用這些教程：https : //www.baeldung.com/spring-thymeleaf-fragments https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout

我有我的頁面（home.html）。我有我的模板 (template.html)。根據第二個教程：

我將“選單欄”插入“模板”（此插入必須有效，因為我將選單欄直接插入“home.html”并且插入成功）
我無法從他們在第二個教程中所說的內容中解決的問題：我如何根據“template.html”“裝飾”我的“home.html”。我的意思是，我如何使用模板來裝飾我所有的頁面？我在“home.html”中使用了以下內容，但它不起作用：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/template}"

我的檔案是：

“主頁.html”

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<!-- These in the html-tag are not working
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/template}"
-->
<body>

<th:block th:fragment="page_content"> <!-- IntelliJ says I cannot recognise the th:block -->
    <h2>Home page</h2>
    <p>Hello home page</p>
</th:block>

</body></html>

“選單欄.html”

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light" th:fragment="menubar">
    <div class="container-fluid">
        <!-- bla-bla -->
    </div>
</nav>

</body></html>

“模板.html”

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <!-- Stylesheets (Bootstrap and mine) here -->
    <title>Template Title</title>
</head>
<body>

<div th:replace="fragments/menubar.html :: menubar"></div>

<!-- Page Content -->
<section class="page_content">
    <div layout:fragment="page_content"></div>
</section>

<!-- Javascript scripts (Bootstrap and mine) here -->

</body></html>

“WebConfig.java”

@Configuration
@ComponentScan(basePackages = {"packages"})
@EnableWebMvc
public class WebConfig {
/*
I have a seperate controler that GETs my "home.html" successfuly
*/
    @Bean
    public ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/views/");
        viewResolver.setSuffix(".html");
        viewResolver.setExposeContextBeansAsAttributes(true);
        return viewResolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        //templateEngine.addDialect(new LayoutDialect()); // This is not working at all
        templateEngine.setTemplateResolver(thymeleafTemplateResolver());
        return templateEngine;
    }

    @Bean
    public SpringResourceTemplateResolver thymeleafTemplateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setTemplateMode("HTML5");
        templateResolver.setPrefix("/WEB-INF/views/layout/");
        templateResolver.setSuffix(".html");
        return templateResolver;
    }

    @Bean
    public ThymeleafViewResolver thymeleafViewResolver() {
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        return viewResolver;
    }
}

在我的 pom 中（其中一些）：

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>${springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>${springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context-support</artifactId>
    <version>${springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-beans</artifactId>
    <version>${springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>${springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>${springframework.version}</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.12.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.12.RELEASE</version>
</dependency>
<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>3.0.0</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-springsecurity5</artifactId>
    <version>3.0.4.RELEASE</version>
</dependency>
<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-spring-environment-dialect</artifactId>
    <version>1.0.1</version>
</dependency>

請有人幫忙。提前致謝

uj5u.com熱心網友回復：

嘿，我終于找到了解決方案：

第1步

我將頁面和布局放在同一個檔案夾中：

src/main/webapp/WEB-INF/views/fragments/menubar.html
src/main/webapp/WEB-INF/views/template.html
src/main/webapp/WEB-INF/views/home.html (my page)

第2步

在“home.html”中，我添加了“layout:decorate”

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{template}">
...

在“template.html”中，我更改了“layout:fragment”

<div th:replace="fragments/menubar.html :: menubar"></div>

<!-- Page Content -->
<section layout:fragment="page_content">
    <p>Template content</p>
</section>

在“WebConfig.java”中，我洗掉了“viewResolver() 方法”并更改了其他方法，如下所示：

@Configuration
@ComponentScan(basePackages = {"packages"})
@EnableWebMvc
public class WebConfig {
    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.addDialect(new LayoutDialect()); // I added it again. Very important
        templateEngine.setTemplateResolver(thymeleafTemplateResolver());
        return templateEngine;
    }

    @Bean
    public SpringResourceTemplateResolver thymeleafTemplateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setTemplateMode("HTML");
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        return templateResolver;
    }

    @Bean
    public ThymeleafViewResolver thymeleafViewResolver() {
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        return viewResolver;
    }
}

但是……問題仍然存在。我無法將我的頁面和布局保存在不同的檔案夾中。如果我使用以前的結構并放置： layout:decorate="~{layout/template}" 頁面顯示為空白頁面。

你的任何解決方案和想法對我來說都是完美的。雖然找到了解決方案的一部分。

============ 更新：============

Solution in the last part is found. I had a mistake in the "template.html". I should put it as: "layout/fragments/menubar.html :: menubar" with the structure:

src/main/webapp/WEB-INF/views/layout/template.html
src/main/webapp/WEB-INF/views/fragments/menubar.html
src/main/webapp/WEB-INF/views/home.html (my page)

And the code will be:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <!-- Stylesheets (Bootstrap and mine) here -->
    <title>Template Title</title>
</head>
<body>
 
<div th:replace="layout/fragments/menubar.html :: menubar"></div>
 
<!-- Page Content -->
<section class="page_content">
    <div layout:fragment="page_content"></div>
</section>
 
<!-- Javascript scripts (Bootstrap and mine) here -->
 
</body></html>

I will put it as a solution, in some hours when the system will let me.

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/331668.html

標籤：爪哇 html 推特引导弹簧 mvc 百里香叶

上一篇：Spring控制器不適用于映射

下一篇：動態（復雜）查詢JPA/Hibernate上的動態引數