SpringBoot + тимелеаф для каждой пошаговой записи

задняя часть Spring

«Это 12-й день моего участия в ноябрьском испытании обновлений, ознакомьтесь с подробностями события:Вызов последнего обновления 2021 г.".

Другими словами, так как фронтенд и бэкенд разделены, то сцен, где фронтенд и бэкенд соединяются вместе, очень мало.Недавно я писал простенький бэкенд, и вдруг наступил на яму. Я использовал шаблон theleaf для рендеринга и обнаружил, чтоth:eachЧтобы просмотреть сгенерированные данные формы, продолжайте генерировать исключения, запрашиваяProperty or field 'xxx' cannot be found on null

Посмотрим, в чем проблема

I. Строительство проекта

1. Зависимости проекта

Этот проект используетSpringBoot 2.2.1.RELEASE + maven 3.5.3 + IDEAразвивать

Откройте веб-сервис для тестирования

<dependencies>
    <!-- 邮件发送的核心依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

Файл конфигурации application.yml

server:
  port: 8080

spring:
  thymeleaf:
    mode: HTML
    encoding: UTF-8
    servlet:
      content-type: text/html
    cache: false

II. Повторение проблемы и решение

1. Воспроизведение сцены

Самая простая демонстрация для демонстрации проблемы

@Controller
public class IndexController {
  public Map<String, Object> newMap(String key, Object val, Object... kv) {
      Map<String, Object> map = new HashMap<>();
      map.put(key, val);
      for (int i = 0; i < kv.length; i += 2) {
          map.put(String.valueOf(kv[i]), kv[i + 1]);
      }
      return map;
  }

  @GetMapping(path = "list")
  public String list(Model model) {
      List<Map> list = new ArrayList<>();
      list.add(newMap("user", "yh", "name", "一灰"));
      list.add(newMap("user", "2h", "name", "2灰"));
      list.add(newMap("user", "3h", "name", "3灰"));
      model.addAttribute("list", list);
      return "list";
  }
}

Соответствующий html-файл выглядит следующим образом (обратите внимание, что он находится в каталоге ресурсовtemplatesВниз)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div>
    <div th:each="item: ${list}">
        <span th:text="${item.user}"></span>
        &nbsp;&nbsp;
        <span th:text="${item.name}"></span>
    </div>

    <hr/>

    <p th:each="item: ${list}">
        <p th:text="${item.user}"></p>
        &nbsp;&nbsp;
        <p th:text="${item.name}"></p>
    </p>
</div>
</body>
</html>

Обратите внимание на приведенный выше шаблон, на каждый обход приходится два, проблема во втором

2. Причины

Пользователю не предлагается выше, значит, это проблема с грамматикой? При изменении html на следующий

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div>
    <div th:each="item: ${list}">
        <span th:text="${item.user}"></span>
        &nbsp;&nbsp;
        <span th:text="${item.name}"></span>
    </div>
</div>
</body>
</html>

Тот же способ написания, вышеизложенное прекрасно.После многих попыток было установлено, что причина проблемы была на самом деле<p>этот тег

Проще говоря, это<p>теги нельзя использоватьth:each, и найден после тестирования других тегов<img>,<input>Ярлыки тоже не работают

Итак, вопрос в том, почему эти теги не могут использовать каждый?

По этой причине вам может понадобиться взглянуть на логику реализации, о ней может узнать любой, кто ее знает.

III. Исходный код и связанные с ним знания, которые нельзя пропустить

0. Проект

1. Публичный аккаунт WeChat: блог Yihuihui

Это не так хорошо, как письмо. Вышеупомянутое содержание чисто из семьи. Из-за ограниченных личных способностей неизбежно будут упущения и ошибки. Если вы обнаружите ошибки или у вас есть лучшие предложения, вы можете критиковать и поправьте их.

Ниже представлен серый личный блог, в котором записываются все посты в блоге по учебе и работе, приглашаю всех посетить

  • One Grey BlogПерсональный блогblog.hhui.top
  • Серый блог - специальный весенний блогspring.hhui.top
Категории