Thymeleaf是一个XML / XHTML / HTML5模板引擎(可扩展到其他格式),可以在Web和非Web环境中工作。它更适合在Web应用程序的视图层提供XHTML / HTML5,它甚至可以在脱机环境中处理任何XML文件。它提供了一个可选模块,用于与Spring MVC集成,因此您可以在使用此技术的应用程序中将其用作JSP的完全替代,即使使用HTML5也是如此。
我的配置运行良好: @配置 @EnableWebSecurity @EnableMethodSecurity(securedEnabled = true, jsr250Enabled = true) 公共类 MvcConfig 实现 WebMvcConfigur...
SpringBoot +Thymeleaf - 无法将类型“String”的值转换为所需类型“long”;对于输入字符串:“favicon.ico”
这是一个模拟工作注册系统的简单代码。当我尝试注册新职位空缺时,“运行”选项卡中出现以下消息 2024-04-13T18:42:03.089-03:00 警告 14...
我有这个片段: 我有这个片段: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head th:fragment="common-header-imports"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport" <!-- Other meta tags --> <meta content="" name="ZRTHEMES"/> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet"> <!-- Vendor CSS Files --> <link href="assets/vendor/aos/aos.css" rel="stylesheet"> <link href="assets/stylesheets/font-awesome.min.css" rel="stylesheet"> <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet"> <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet"> <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> <!-- Main CSS File --> <link href="assets/stylesheets/styles.css" rel="stylesheet"> <link rel="stylesheet" th:href="@{/css/style-links.css}"/> <link rel="stylesheet" th:href="@{/css/responsive.css}"/> </head> </html> 还有这个: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <header th:fragment="common-header" id="header" class="header d-flex align-items-center sticked stikcy-menu"> <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> <a href="index.html" class="logo d-flex align-items-center"> <img src="assets/images/logo.png" alt="logo"> </a> <nav id="navbar" class="navbar"> <ul> <li><a href="/" class="">Home</a></li> <!--li><a href="services.html" class="">Services</a></li> <li><a href="portfolio.html" class="">Portfolio</a></li> <li><a href="testimonials.html" class="">Testimonials</a></li> <li><a href="team.html" class="">Team</a></li> <li class="dropdown"><a href="#"><span>Menu</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a> <ul> <li><a href="about.html">About</a></li> <li><a href="packages.html">Pricing</a></li> <li><a href="faqs.html">FAQs</a></li> <li><a href="privacy-policy.html">Terms & Conditions</a></li> <li><a href="privacy-policy.html">Privacy Policy</a></li> <li><a href="blogs.html">Blogs</a></li> <li><a href="blog-details.html">Blog Detail Page</a></li> </ul> </li--> <li><a href="/blogs">News</a></li> </ul> </nav><!-- .navbar --> <!--a href="contact.html" class="btn-get-started hide-on-mobile">Get Quotes</a--> <button id="darkmode-button"><i class="bi bi-moon-fill"></i></button> <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i> <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i> </div> </header> </html> 还有这个: <!DOCTYPE html> <html lang="zxx"> <head th:replace="~{common/headerImports :: common-header-imports}"> <title>title</title> </head> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-RWXQZB9MDJ'); </script> <body> <header th:replace="~{common/header :: common-header}"> .... </html> 但我只看到一个白色页面,没有加载任何内容 每当您遇到此类问题时,从浏览器检查页面源并查看实际生成的内容以及请求的响应以查看从服务器接收到的内容非常有意义。 确保您的脚本位于 head 或 body 内,因此移动此: <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-RWXQZB9MDJ'); </script> 进入 Google 指示您移动的位置,大概位于 head 标签的末尾(在其内部)。根据您共享的内容,您似乎已将 html 嵌入到另一个 html 中,并且您已将内容放在 head 和 body 之外。解决这些问题。 此外,很可能发生了一些服务器端错误,因此您需要检查请求的状态以及可能的服务器日志。您也可以检查客户端控制台是否存在客户端问题。 并确保正确嵌入片段。 如果以上所有内容都经过仔细检查并修复,那么它应该可以工作。
模板解析出错。 (Spring Boot + Thymeleaf)
我有一个用于提供图像的 Spring Boot。我的模型包含在我的 ImageController.java 中。 ImageService 包含 findPage 方法。 运行我的 Spring Boot 应用程序时,我收到此错误。 2...
springBoot + Thymeleaf:比较模板中的值
我有这段代码: 我有这段代码: <div th:text="${#locale}"></div> <div class="language-picker js-language-picker"> <form action="" class="language-picker__form"> <select th:id="language-picker-select" name="language-picker-select"> <option th:value="es" th:selected="${#locale=='es'}">Español</option> <option th:value="fr" th:selected="${#locale=='fr'}">Français</option> <option th:value="pt" th:selected="${#locale=='pt'}">Português</option> <option th:value="en" th:selected="${#locale=='pt'}">English</option> </select> </form> 但是select中选择的值始终是第一个即使${#locale}有其他值 还尝试过: <select th:id="language-picker-select" name="language-picker-select"> <option th:value="es" th:selected="${locale=='es'}">Español</option> <option th:value="fr" th:selected="${locale=='fr'}">Français</option> <option th:value="pt" th:selected="${locale=='pt'}">Português</option> <option th:value="en" th:selected="${locale=='en'}">English</option> </select> 结果相同 看起来 #locale 不是一个字符串,而是一个 java.util.Locale——而且由于您将 String 与 Object 进行比较,所以它总是错误的。这对我有用: <form action="" class="language-picker__form" th:with="language=${#locale.language}"> <select th:id="language-picker-select" name="language-picker-select"> <option th:value="es" th:selected="${language=='es'}">Español</option> <option th:value="fr" th:selected="${language=='fr'}">Français</option> <option th:value="pt" th:selected="${language=='pt'}">Português</option> <option th:value="en" th:selected="${language=='en'}">English</option> </select> </form>
我正在使用 IntelliJ IDEA,但 thymeleaf 命名空间有问题。我创建了员工表单,并将其包含到其他模板中,因此我没有指定命名空间,但它工作正常...
如何使用 ThymeLeaf 生成包含“#”的 href 链接?
在我的模板中,我必须生成一个类型的链接 。 。 . “12345”是可变部分。 该链接是“深层链接”...
我正在制作一个应用程序,标题中是一个搜索栏,您可以在其中写入一些内容,然后进行搜索并给出结果。 现在,在包含结果的页面上,我有另一个表格,您可以在其中
我想用 thymeleaf 在 Spring Boot 中设置国际化。 我创建了这个类: @配置 公共类 MvcConfig 实现 WebMvcConfigurer { 私有最终消息源
在SpringBoot应用程序中设置WebSecurityConfig
我正在SpringBoot应用程序中设置WebSecurityConfig。 @配置 @EnableWebSecurity 公共类 WebSecurityConfig 扩展 WebSecurityConfigurerAdapter { .. } 但我有这个错误无法解决
我以前很熟悉 JSTL,而 thymeleaf 对我来说是个新东西。 我想要的是检查当前 URL 是否是索引页 (/index),如果是,则使 div 可见。 这是 JSTL 等效项
Thymeleaf th:each - 如何禁用生成 div 标签
<div class="question" th:each="question : ${questions}"> <h2 id="question" class="description" th:text="${question.description}">Question goes here</h2> <div id="answer-buttons"> <button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(0).content}" th:classappend="${question.correctAnswer == 1 ? 'correct-answer' : ''}">Answer 1</div></button> <button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(1).content}" th:classappend="${question.correctAnswer == 2 ? 'correct-answer' : ''}">Answer 2</div></button> <button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(2).content}" th:classappend="${question.correctAnswer == 3 ? 'correct-answer' : ''}">Answer 3</div></button> <button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(3).content}" th:classappend="${question.correctAnswer == 4 ? 'correct-answer' : ''}">Answer 4</div></button> </div> <button id="next-btn">Next</button> </div> 如果我没猜错的话,上面代码中的th:each会为问题中的每个问题进行新的划分,类似于: <div class="quiz"> <div class="question"> <h2 id="question" class="description">Question</h2> <div id="answer-buttons"> <button class="btn"><div class="answer">Answer 1</div></button> <button class="btn"><div class="answer correct-answer">Answer 2</div></button> <button class="btn"><div class="answer">Answer 3</div></button> <button class="btn"><div class="answer">Answer 4</div></button> </div> <button id="next-btn">Next</button> </div> </div> 问题来自数据库,我有 js 文件来处理它们,但为了做到这一点,我不想创建额外的 html 正文。 所以我的问题是,Thymeleaf 是否有一些针对上述问题的禁用机制,或者我是否需要更改代码结构? 对于任何用途,以下是我的脚本处理数据的方式: const questionsFromDb = document.querySelectorAll('.question'); // Template const questions = [ { question: "Which is the largest animal on the planet?", answers: [ {text: "Shark", correct: false}, {text: "Blue whale", correct: true}, {text: "Elephant", correct: false}, {text: "Giraffe", correct: false} ] }, { question: "Which is the smallest country on the planet?", answers: [ {text: "Vatican City", correct: true}, {text: "Bhutan", correct: false}, {text: "Nepal", correct: false}, {text: "Shri Lanka", correct: false} ] }, { question: "Which is the largest desert on the planet?", answers: [ {text: "Kalahari", correct: false}, {text: "Gobi", correct: false}, {text: "Sahara", correct: false}, {text: "Antarctica", correct: true} ] }, { question: "Which is the smallest continent on the planet?", answers: [ {text: "Asia", correct: false}, {text: "Australia", correct: true}, {text: "Arctic", correct: false}, {text: "Africa", correct: false} ] } ]; // Parsing Data questionsFromDb.forEach(questionFromDb => { const questionDescription = questionFromDb.querySelector('.description').innerText; const answerElements = questionFromDb.querySelectorAll('.answer'); const answers = []; answerElements.forEach((answerElement, index) => { const answerText = answerElement.innerText; const isCorrect = answerElement.classList.contains('correct-answer'); answers.push({ text: answerText, correct: isCorrect }); }); questions.push({ question: questionDescription, answers: answers }); }); // ... Non-relative code below 添加新的 div 是一种有效的方法,你可以有额外的没有样式的 div,但是如果你想删除标签,你可以使用 th:remove="tag" 或 th:inline 机制,但这不是样式测试的好方法,尊重表达式语言方法,添加 html id 也不是正确的方法,您可以向 id 添加其他数据,例如:th:id="${'question_'+ status.id}" . 而且你的模板似乎是json! 如果你问我,我认为最好的方法是不要在这样的列表 ui 中使用 thymleaf,你可以使用 js 数据表,例如 tabulator 休息并玩 js 来代替
Thymeleaf 或 JSP:Spring Boot 哪个更好?
Thymeleaf 与 Spring Boot 结合比 JSP 更好吗? 他们的表现又如何呢? 是否有任何关于替代 UI 框架的建议 春季启动?
我试过这个: 我试过这个: <p class="post-date"> <time datetime="2023-01-01" th:text="${#temporals.format(item.getCreatedDate(), 'dd-MM-yyyy HH:mm')}">Oct 5, 2023</time> </p> 但我收到此错误: 2024-03-30 17:15:58.620 ERROR [] o.a.c.c.C.[.[.[.[dispatcherServlet]@log(175) - Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "#temporals.format(item.getCreatedDate(), 'dd-MM-yyyy HH:mm')" (template: "blog-details" - line 109, col 49)] with root cause org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method format(java.sql.Timestamp,java.lang.String) cannot be found on type org.thymeleaf.expression.Temporals at org.springframework.expression.spel.ast.MethodReference.findAccessorForMethod(MethodReference.java:237) at org.springframework.expression.spel.ast.MethodReference.getValueInternal(MethodReference.java:147) at org.springframework.expression.spel.ast.MethodReference$MethodValueRef.getValue(MethodReference.java:400) 您的方法item.getCreatedDate()返回一个Instant。 这意味着一些事情: 这是一个可怕的名字。您确实应该重命名该方法。或者,让它返回一个 LocalDate,那么这个名字就可以了。日期不是时间戳。返回哪种时间概念的混乱是有害的:许多地方允许在实际上无法隐式转换的类型之间进行隐式转换,从而导致错误。您在测试中找不到的错误类型,因为它们只发生在时区或夏令时不匹配的情况下。 时间无法格式化Instant,因为你不应该这样做:瞬间是时间中的一个时刻,正如宇宙所测量的那样:它并不意味着代表、交互或适合任何基于人类的操作时间计算(天/月/年/小时/时区:这是人类计算。“自纪元以来的毫秒”,这是计算机计算)。例如,Instant 根本不编码时区。他们只是及时编码一个时刻。因此,用人类的语言来呈现它“不可能”!为此,您必须首先有一个时区; “那个瞬间是哪一个月?”无法回答。只有这样的问题:“阿姆斯特丹……的那个瞬间是哪一个月?” ——这个可以回答。您必须为其指定一个时区才能完成其工作 - 您可以通过 将您的 Instant 转换为例如一个ZonedDateTime。 does包含以人类计算术语呈现它所需的所有信息,并且事实上,时间的format可以处理ZDT(或LocalDateTime实例,您的选择)就好。 修复您的 getCreatedDate() 方法以返回更适合该作业的内容,或者使用以下方法将其返回的 Instant 转换为 ZDT:.getCreatedInstant().atZone(ZoneId.of("Europe/Amsterdam")); // or .getCreatedInstant().atZone(ZoneOffset.UTC);
CSS 应用于 Thymeleaf 中的一个端点,但不适用于另一个端点
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Flashcards</title> <link rel="stylesheet" th:href="@{css/style.css}"> </head> <body> <div class="game_container"> <!-- TITLE --> <h1>Flashcards</h1> <!-- CARDS CONTAINER --> <div class="cards_container"> <!-- FIRST CARD --> <div class="cards"> <div class="card"> <div class="front"><p>France</p></div> <div class="back"><p>Francoise Meyers</p></div> </div> </div> <!-- ...OTHER CARDS --> </div> </div> <!-- SCRIPT FOR CARD ROTATION --> <script> // Select all elements with the class "card" const cards = document.querySelectorAll('.card'); cards.forEach(card => { // Add event listener for click card.addEventListener('click', () => { // Toggle styles on click if (card.style.transform === 'rotateY(180deg)') { // If already rotated, revert back to original state card.style.transform = 'rotateY(0deg)'; } else { // Otherwise, rotate the card card.style.transform = 'rotateY(180deg)'; } }); }); </script> </body> </html> 如您所见,我在上面的 html 文件中为 css 提供了一些 href,它适用于默认端点 - localhost:8080。但是,如果我尝试指示自定义端点 ("api/v1/flashcards"),则不再应用 css,尽管抽认卡列表仍然以纯文本形式存在。这就是为什么我评论了@RequestMapping。 @RequiredArgsConstructor @Controller //@RequestMapping(path = "api/v1/flashcards") public class FlashcardController { private final FlashcardService flashcardService; public String listFlashcards(Model model) { List<FlashcardDto> flashcards = flashcardService.getFlashcards(); model.addAttribute("flashcards", flashcards); return "flashcards-list"; } } 我尝试将 @GetMapping(path = "api/v1/flashcards", produces = "text/html") 放在上面 listFlashcards()功能,但没有帮助。有什么想法吗? 我通过在 href 开头添加 / 来使用 css 文件的绝对路径。 之前: <link rel="stylesheet" href="css/style.css"> 之后: <link rel="stylesheet" href="/css/style.css"> 我不太明白为什么它会起作用。
th:样式在我的项目中不起作用,具体取决于情况 true:false
我的文本必须使用 Thymeleaf 根据 true:false 情况改变颜色,但无论我做什么都不起作用。 我的文本必须使用 Thymeleaf 根据 true:false 情况改变颜色,但无论我做什么,它都不起作用。 <table th:each="book : ${assignedBooks}"> <tr th:style="${book.getExpired()? 'color: red;' : 'color: blue;'}" th:text="${book.getName() + ', ' + book.getAuthor() + ', ' + book.getYear()}">'someBook'</tr> </table> 我已经检查了 .getExpired == true,但我不明白为什么它仍然不起作用。 您的 <table> HTML 包含一个或多个 <tr> 行 - 但这些行不包含任何 <td> 单元格。将文本(来自 th:text="...")放在 <td> 内。 <table th:each="book : ${assignedBooks}"> <tr th:style="${book.getExpired()? 'color: red;' : 'color: blue;'}"> <td th:text="${book.getName() + ', ' + book.getAuthor() + ', ' + book.getYear()}">'someBook'></td> </tr> </table> 您可以通过查看 Thymeleaf 生成并显示在浏览器中的 HTML 自行解决此类问题。请记住:Thymeleaf 在服务器上生成 HTML,然后将该 HTML 发送到浏览器。因此,您可以准确地看到 Thymeleaf 生成的内容(除非它在服务器上引发错误/异常)。 通常您的浏览器中有一个“查看源代码”菜单项(取决于您使用的浏览器)。 在您的情况下,使用问题中的方法,您可能会看到类似以下内容: The Adventures of Tom Sawyer, Mark Twain, 1876 <table> <tbody> <tr style="color: red;"></tr> </tbody> </table> 了解缺少任何 <td> 单元格如何导致文本呈现在表格之外。每个浏览器如何尝试渲染不完整/无效的 HTML 取决于每个浏览器 - 因此您可能会看到类似但不同的内容。 有关如何创建有效/完整 HTML 表格的更多详细信息,请参阅 table。
如何在 ThymeLeaf(非 Web 环境)中为类型注册格式化程序
我有一个基于SpringBoot的应用程序(SpringBoot 3.2.3)。该应用程序不是 Web 应用程序,即它不使用 servlet、视图等。 在应用程序中,我想以 HTML 格式创建报告
我有这段代码: h1 {颜色...</desc> <question vote="0"> <p>我有这段代码:</p> <pre><code><h2 class="title" > <a th:href="${blogItem.getLink()}" th:text="${blogItem.getTitle()}"><style>h1 {color:'${blogItem.getTitleColor()}';} Title</style></a> </h2> </code></pre> <p>但是我有这个错误:<pre><code>Mismatched property value (<color> | [initial | inherit | unset | revert])</code></pre></p> </question> <answer tick="false" vote="0"> <p>假设您希望链接样式为标题,您可以用 <pre><code><h1></code></pre> 包围链接并使用 Thymeleaf 的 <pre><code>th:style</code></pre> 来实现您想要的:</p> <pre><code><h1><a th:href="${blogItem.getLink()}" th:text="${blogItem.getTitle()}" th:style="'color: ' + ${blogItem.getTitleColor()} + ';'">Title</a></h1> </code></pre> </answer> </body></html>
Thymeleaf 模板无法处理并抛出 NoSuchMethodError
我的 Thymeleaf 模板中的 th:href 属性遇到问题。我正在使用 Thymeleaf 版本 3.1.2.RELEASE 以及 Thymeleaf Spring5 集成。尽管设置了 th:href
我无法使用 Thymeleaf 重定向到 Spring Boot 3 中的更新页面
我遇到的问题是模板解析期间发生错误(模板:“类路径资源[templates/update-customer.html]”) org.thymeleaf.exceptions.TemplateInputException:呃...