Spring MVC中Thymeleaf解析JSP模板报错及JSP转HTML需求

Hey there! I totally get your frustration—switching template engines mid-project can throw a wrench in things. Let's break down why this is happening and how to convert your Chart.jsp to a Thymeleaf-compatible HTML file step by step.

Why You're Seeing This Error #

Thymeleaf is designed to parse HTML templates, not JSP files. When your Controller tries to return Chart.jsp, Thymeleaf looks for a file named Chart.jsp in its default template directory (usually src/main/resources/templates/) but can't process it because it doesn't understand JSP syntax. The fix is to convert that JSP to a Thymeleaf HTML file.

Step 1: Rename Your Template File #

First, rename Chart.jsp to chart.html and move it to the src/main/resources/templates/ folder (this is Thymeleaf's default lookup location).

Step 2: Replace JSP Syntax with Thymeleaf Syntax #

Thymeleaf uses natural HTML with custom attributes (prefixed with th:) instead of JSP scriptlets or directives. Here are the most common conversions you'll need:

Example JSP vs. Thymeleaf Code

Let's say your original Chart.jsp looks like this:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title><%= request.getAttribute("chartTitle") %></title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h2><%= request.getAttribute("chartHeader") %></h2>
    
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: '<%= request.getAttribute("chartType") %>',
            data: {
                labels: <c:out value="${chartLabels}" />,
                datasets: [{
                    label: '<%= request.getAttribute("datasetLabel") %>',
                    data: <c:out value="${chartData}" />,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            }
        });
    </script>
</body>
</html>

Here's the converted chart.html using Thymeleaf:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${chartTitle}">Default Chart Title</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h2 th:text="${chartHeader}">Default Chart Header</h2>
    
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>

    <script th:inline="javascript">
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: [[${chartType}]],
            data: {
                labels: [[${chartLabels}]],
                datasets: [{
                    label: [[${datasetLabel}]],
                    data: [[${chartData}]],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            }
        });
    </script>
</body>
</html>

Key conversions to note:

• Remove JSP directives like <%@ page ... %> and <%@ taglib ... %>
• Add the Thymeleaf namespace to the <html> tag: xmlns:th="http://www.thymeleaf.org"
• Replace <%= ... %> with th:text="${variable}" (for text content) or [[${variable}]] (for inline JavaScript, using th:inline="javascript" on the <script> tag)
• Replace JSTL tags like <c:out> with Thymeleaf's expression syntax

Step 3: Update Your Controller #

Make sure your Controller returns the correct view name (without the .html extension—Thymeleaf adds this automatically). For example:

@Controller
public class ChartController {

    @GetMapping("/chart")
    public String showChart(Model model) {
        // Add your chart data to the model (same as before)
        model.addAttribute("chartTitle", "Sales Data");
        model.addAttribute("chartHeader", "Monthly Sales");
        model.addAttribute("chartType", "bar");
        model.addAttribute("chartLabels", Arrays.asList("Jan", "Feb", "Mar", "Apr"));
        model.addAttribute("datasetLabel", "Revenue");
        model.addAttribute("chartData", Arrays.asList(1200, 1900, 3000, 5000));

        // Return the view name (matches chart.html in templates folder)
        return "chart";
    }
}

Step 4: Verify Thymeleaf Configuration #

If you're using Spring Boot, Thymeleaf is auto-configured by default—you just need the dependency in your pom.xml (Maven) or build.gradle (Gradle):
Maven:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Gradle:

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

For traditional Spring MVC, ensure you have a ThymeleafViewResolver configured in your Spring context.

Quick Tips #

• If your chart uses static JavaScript (no dynamic data), you can leave the script as-is—Thymeleaf won't interfere with it.
• Use th:attr to set HTML attributes dynamically (e.g., <img th:attr="src=${imageUrl}">).
• Test the template by running your app—Thymeleaf will show detailed errors if something's wrong with the syntax.

内容的提问来源于stack exchange，提问作者Grafik Krystian