个人中心
gpt4 book ai didi

Spring 启动 : thymeleaf is not rendering fragments correctly

转载 作者：行者123 更新时间：2023-12-01 14:32:48 25 4
gpt4 key购买 nike

我正在创建 spring boot web 应用程序。出于模板目的，我正在使用 thymeleaf。我正在创建单独的 html 页面片段，我正在从这些片段创建两个不同的布局。但是，当我连接内容页面时，我没有得到正确的输出。

请检查代码片段/

查看解析器

@Configuration
@EnableAutoConfiguration
@PropertySource("classpath:application.properties")
public class WebConfig extends WebMvcConfigurerAdapter {

@Bean
public TemplateResolver templateResolver() {
    ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
    templateResolver.setPrefix("/WEB-INF/views/");
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("html5");
    return templateResolver;
}

@Bean
public SpringTemplateEngine setTemplateEngine() {
    SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
    springTemplateEngine.setTemplateResolver(templateResolver());
    return springTemplateEngine;
}

@Bean
public ViewResolver viewResolver(){
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(setTemplateEngine());
    viewResolver.setOrder(1);
    return viewResolver;
}

目录结构

src/
  main/
    webapp/
        WEB-INF/
            views/
                fragments/
                         header.html
                         footer.html
                         navBar.html
                layouts/
                         appLayout.html
                         baseLayout.html
                 welcome.html

appLayout.html

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

<head>
</head>
<body>

<div th:replace="/fragments/header :: header"></div>
<div th:replace="/fragments/navbar :: navbar"></div>
<div class="container">
    <div layout:fragment="content">
    <p>Content goes here...</p>
    </div>
    <footer>
    <div th:replace="/fragments/footer :: footer"></div>
    </footer>
</div>
</body>
</html>

页脚片段 footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
    <div th:fragment="footer">
    Footer
    </div>
</body>
</html>

使用此方法创建不同的片段。

主方法类又名启动

@ComponentScan(basePackages={"xyz.abc"})
@SpringBootApplication
public class AppApplication {

    public static void main(String[] args) {
        System.out.println("Started");
        SpringApplication.run(AppApplication.class, args);
    }
}

welcome.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/appLayout}">

<head>
</head>

<body>
<th:block layout:fragment="content">
    <div class="hero-unit">
    <h1>My Content</h1>
    </div>
</th:block>
</body>
</html>

现在，当我访问服务器时，我只获得了 welcome.html 而没有来自 appLayout 和 fragments

我错过了什么？
还有一个问题，我经历了很多项目，其中一些项目将 views 保存在 src/main/resource 下，而我将其保存在 src/main/web 下/WEB-INF这两种方式有什么区别？

最佳答案

这里有一个完整的例子。

Gradle 依赖:

compile('org.springframework.boot:spring-boot-starter-thymeleaf')

如果你想使用 spring-security 方言 [可选] 添加:

  compile("org.thymeleaf.extras:thymeleaf-extras-springsecurity4:2.1.2.RELEASE")

在 SpringBoot 上，您不需要 View 配置，所有 View 都应该转到:源/资源/模板

enter image description here

这是否意味着模板目录下的所有 View 都是公开的？
没有。

我应该在哪里放置可公开访问的静态文件(js 和 css)？
src/resources/templates/static

如何创建布局？

在 Thymleaf 中，可以轻松处理垂直和水平 View 片段关系。

1。垂直布局关系:

假设您有一个母版页 包括所有常见的 js 和 css 文件、侧边导航、应用栏导航 ..ETC。这种观点将被几乎所有的人垂直继承 views 所以在这种情况下你想以某种方式嵌入你所有的 View 在您的母版页中。假设您有 employee_list 页面；当用户请求 employee_list 页面时，employee_list 页面将被插入到您的主布局中，用户将看到 employee_list 页面 + 母版页元素。

母版页:
在此页面上，您只需添加 layout:fragment="content"。 content 是将嵌入此页面的 subview 片段的名称。 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.w3.org/1999/xhtml">
<head>

</head>

<body>

    <div id = "page_wrapper">

        <div id="side_menu">
            <!--side menu content-->
        </div>


        <div id="content_wrapper">

            <!--page content-->
            <div layout:fragment="content">

            </div>

        </div>

        <script type="text/javascript" th:inline="javascript">

           //common js here

            /* ]]> */

        </script>

    </div>

</body>

</html>

enter image description here

员工列表页面:
要将 employee_list 页面放入母版中，您需要做的就是将 layout:decorator="layouts/master" 添加到页面的 html 标记中。我已将所有布局放在 src/resources/templates/layouts 目录下，这就是为什么我使用 layouts/master 而只是说 master。还要注意 layout:fragment="content" 属性；此属性指示此 View 中的任何内容都将嵌入到母版页中。

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

    <body>

        <div id = "content" class = "content layout-list" layout:fragment="content">

            <div>

               <table>

              </table>

            </div>

        </div>

    </body>

    </html>

enter image description here
结果:

enter image description here

横向布局关系:

如果你想包含一个公共(public) View 而不是像我们在前面的例子中那样垂直继承它怎么办？在上面的例子中，你想在你的 employee_list 页面上包含一个分页 View ；在这种情况下，关系变为横向。

分页片段:
顺便说一句，这是一个工作示例； Page 类是我创建的用于包装分页响应的自定义类。这是一个非常简单的类，我所做的就是将响应列表和分页信息放入其中。片段名称使用 th:fragment="pagination"

表示 
<div th:if = "${page.totalNumberOfItems > 0 and page.numberOfItems > 0}" class = "pagination-wrapper" th:fragment="pagination" xmlns:th="http://www.thymeleaf.org">

    <div class = "valign-wrapper right">

        <div id = "items_per_page_wrapper">

            <div class="valign-wrapper">

                <span  th:text="#{ui.pagination.rows.per.page.label}" style="padding-right: 10px">Rows per page:</span>

                <select  id="items_per_page_select" name = "itemsPerPage">
                    <option th:each="items_per_page : ${page.ITEMS_PER_PAGE_OPTIONS_LIST}" th:text="${items_per_page}" th:value = "${items_per_page}" th:selected="${items_per_page} == ${page.itemsPerPage}">10</option>
                </select>

            </div>

        </div>

        <label  class="current_page_info"
                th:text="#{ui.pagination.current.page.info(${page.currentPageFirstItemNumber}, ${page.currentPageLastItemNumber}, ${page.totalNumberOfItems})}"></label>

        <ul class="pagination right">

            <li th:classappend="${page.pageNumber > 0 } ? '' : 'disabled'">
                <a id="previous_page_link" href="javascript:void(0)">
                    <i class="material-icons">navigate_before</i>
                </a>
            </li>

            <li th:classappend="${page.currentPageLastItemNumber == page.totalNumberOfItems} ? 'disabled' : ''">
                <a id="next_page_link"  href="javascript:void(0)">
                    <i class="material-icons">navigate_next</i>
                </a>
            </li>
        </ul>

    </div>

</div>

员工列表页面:
在 table 标签下添加此代码段。 

  <div th:replace="common/pagination :: pagination">
        <!--pagination content-->
    </div>

结果:
enter image description here

关于 Spring 启动 : thymeleaf is not rendering fragments correctly，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42995991/

25 4 0
文章推荐： java - 无法交换瓷砖位置 - gem 迷阵
文章推荐： java - 在没有 Runtime.exec() 的情况下执行 java prog？ "JavaExecutor"是否存在？
文章推荐： java - System.loadLibrary() 从静态 block 返回异常
文章推荐： java - vert.x 的logging.properties 中的含义是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com