带有Bootstrap和thymleaf页面装饰的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-fragmentshttps://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html模板布局

我有我的页面(home.html)。我有我的模板(template.html)。根据第二教程:

我插入了菜单栏;放入"模板"中(这个插入必须工作，因为我将菜单栏直接插入到"home.html"并且插入成功)
我无法从他们所说的第二个教程中解决的问题:我如何"装饰"?我的"home.html"根据"template.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}"

我的文件是:

"home.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>

"menubar.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>

"template.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;
}
}

在我的诗里(其中一些):

<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>

请找人帮忙。提前感谢

嘿，我终于找到解决办法了:

步骤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"我改变了"布局: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: decoration ="~{layout/template}"页面显示为空白页。

你的任何解决方案和想法对我来说都是完美的。尽管如此，我们还是找到了部分解决方案。

=========== 更新 : ===========

找到了上一部分的解决方案。我在"template.html"中有一个错误。我应该把它写成:layout/fragments/menubar.html:: menubar">，结构为:

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)

代码将是:

<!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>

我会把它作为一个解决方案，在几个小时内当系统会让我。

相关内容

最新更新

热门标签：