如何在Thymleaf中使用多种布局解决问题?

时间:2018-11-15 13:10:39

标签: java html spring spring-boot thymeleaf

当我想从包含布局的一个布局页面中引入另一个片段时出现错误。一个用于标题,另一个用于发布表单。当我只包含第一个错误时,我会遇到问题,但是如果添加另一个错误,则会出现两个错误。

第一个是:

Error during execution of processor 'org.thymeleaf.spring4.processor.SpringInputGeneralFieldTagProcessor' (template: "fragments/header" - line 38, col 26)

第二个是

` ERROR 13400 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[.[dispatcherServlet]      
: Servlet.service() for servlet [dispatcherServlet] in context with path 
[/api] threw exception [Request processing failed; nested exception is 
org.thymeleaf.exceptions.TemplateProcessingException: Error during execution 
of processor 
'org.thymeleaf.spring4.processor.SpringInputGeneralFieldTagProcessor' 
(template: "fragments/header" - line 38, col 26)] with root cause

java.lang.IllegalStateException: Neither BindingResult nor plain target 
object for bean name 'tweet' available as request attribute`

第一个片段是导航栏,第二个片段是帖子形式。我正在用百里香和弹簧靴。

header.html是:

<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
 ...
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div class="container">
<div class="navbar-header">
  <a class="navbar-brand" href="#"><strong>Twitter</strong></a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li th:classappend="${module == 'home' ? 'active' : ''}">
      <a href="#" th:href="@{/}">My tweets</a>
    </li>
    <li th:classappend="${module == 'tasks' ? 'active' : ''}">
      <a href="#" th:href="@{/new}">Create a User</a>
    </li>
    <li th:classappend="${module == 'tasks' ? 'active' : ''}">
      <a href="#" th:href="@{/tweets}">Tweets</a>
    </li>
    <li th:classappend="${module == 'tasks' ? 'active' : ''}">
      <a href="#" th:href="@{/all}">Display all Users</a>
    </li>
    <li th:classappend="${module == 'tasks' ? 'active' : ''}">
      <a href="#" th:href="@{/overview}">Profile overview</a>
    </li>
  </ul>
</div>
</div>
</div>
<div th:fragment="post">
 <!--/*@thymesVar id="tweet" 
 type="com.javalanguagezone.interviewtwitter.domain.Tweet"*/-->
<form th:action="@{/tweets/}" th:object="${tweet}" method="post">
  <div class="form-group">
  <input type="text" th:field="*{content}" placeholder="What's happening? 
Tell us!">+
  <input type="submit" value="Submit" />
  </div>
</form>
</div>
</body>
</html>

我在其中调用布局片段的html文件如下所示:

    <!DOCTYPE html>
   <html lang="en"  xmlns:th="http://www.thymeleaf.org">
   <head><meta charset="UTF-8">
    <title>User overview</title>
   </head>
  <body>
  <div th:replace="fragments/header :: header"></div>
  <div th:replace="fragments/header :: post"></div>

 <div class="container-fluid" style="margin-top: 80px">
 <div class="row">
   <div class="col-md-12">
  <div class="panel panel-primary">

    <div class="panel-heading">
      <h1 class="panel-title">User profile overview</h1>
    </div>
    <div class="panel-body">
      <div class="table-responsive" th:if="${tweets}!=null">
        <table class="table table-hover">
          <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Number of tweets</th>
            <th>Number of followers</th>
            <th>Number of users following</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td th:text="${user.id}"></td>
            <td th:text="${user.getUsername()}"></td>
            <td th:text="${tweets}">1</td>
            <td th:text="${followers}">Hamdo</td>
            <td th:text="${following} "><br/>

            </td>
            </span>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
   </div>
  </div>
  </div>
  </body></html>

控制器看起来像这样:

 @PostMapping("/")
 @ResponseStatus(CREATED)
 public String tweet(@ModelAttribute("tweet") @Valid @RequestBody String 
 tweet, Principal principal, BindingResult result) {
 if(result.hasErrors()){
  return "error";
 }
   tweetService.createTweet(tweet, principal);

  return "index";
  }

非常感谢您的帮助,我是Thymleaf的新手。

1 个答案:

答案 0 :(得分:0)

您可以尝试使用以下代码将tweet对象作为变量向下传递给片段。

<div th:replace="fragments/header :: post" th:with="tweetFrag = ${tweet}"></div>

然后,只需使用新变量即可。

<form th:action="@{/tweets/}" th:object="${tweetFrag}" method="post">
  <div class="form-group">
  <input type="text" th:field="*{content}" placeholder="What's happening? Tell us!">+
  <input type="submit" value="Submit" />
  </div>
</form>