SpringBoot+MySQL团队表搜索过滤遇阻，Thymeleaf方案失效求解决

Hey there! Let's work through your issue. First, let's quickly unpack that TemplateInputException: Error resolving template ****, template might not exist error you hit with Thymeleaf, then dive into the REST API + frontend filtering approach you're adopting.

分析Thymeleaf的模板解析错误 #

That error usually pops up for a few common reasons—even though you're switching approaches, it's worth noting these for anyone else stuck here:

• Check template path/name: Thymeleaf looks for templates in src/main/resources/templates by default. Make sure the template filename exactly matches what your controller returns (case-sensitive! If you return teamFilter, the file needs to be teamFilter.html).
• Verify dependencies: Double-check your pom.xml (or build.gradle) has the spring-boot-starter-thymeleaf dependency, and that its version is compatible with your Spring Boot version.
• Inspect template syntax: A tiny mistake in Thymeleaf tags (like a missing closing bracket or wrong attribute) can cause parsing failures too.

切换到REST API + 前端过滤的方案 #

Since you're moving to this approach, here's a concrete, step-by-step implementation to get your team table filtering working:

1. Backend: Build the REST API #

First, set up your backend to serve team data via a REST endpoint:

• Entity & Repository: Ensure your Team entity maps correctly to your MySQL table, then create a repository with a flexible query method:

public interface TeamRepository extends JpaRepository<Team, Long> {
    // Adjust the fields to match your team table's columns
    List<Team> findByTeamNameContainingIgnoreCaseOrDepartmentContainingIgnoreCase(String teamName, String department);
}

• REST Controller: Create a controller to handle filter requests and return team data as JSON:

@RestController
@RequestMapping("/api/teams")
public class TeamRestController {

    private final TeamRepository teamRepository;

    // Constructor injection (better than @Autowired for testability)
    public TeamRestController(TeamRepository teamRepository) {
        this.teamRepository = teamRepository;
    }

    @GetMapping("/filter")
    public ResponseEntity<List<Team>> filterTeams(@RequestParam(required = false) String keyword) {
        List<Team> teams;
        if (keyword == null || keyword.isBlank()) {
            teams = teamRepository.findAll();
        } else {
            teams = teamRepository.findByTeamNameContainingIgnoreCaseOrDepartmentContainingIgnoreCase(keyword, keyword);
        }
        return ResponseEntity.ok(teams);
    }
}

2. Frontend: Add Filtering Logic #

Now set up the frontend to call your API and update the table dynamically:

• HTML Structure: Add a search input and table (using Bootstrap for styling, if you prefer):

<div class="container mt-4">
    <input type="text" id="teamSearch" placeholder="Search team name or department..." class="form-control mb-3">
    <table id="teamTable" class="table table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Team Name</th>
                <th>Department</th>
                <th>Member Count</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be injected here -->
        </tbody>
    </table>
</div>

• JavaScript for Filtering: Use jQuery to handle search input events and refresh the table:

$(document).ready(function() {
    // Load all teams on page load
    refreshTeamTable("");

    // Trigger search on keyup
    $("#teamSearch").on("keyup", function() {
        const searchTerm = $(this).val().trim();
        refreshTeamTable(searchTerm);
    });

    function refreshTeamTable(keyword) {
        $.get("/api/teams/filter", { keyword: keyword }, function(teams) {
            const tableBody = $("#teamTable tbody");
            tableBody.empty();

            teams.forEach(team => {
                const row = `<tr>
                    <td>${team.id}</td>
                    <td>${team.teamName}</td>
                    <td>${team.department}</td>
                    <td>${team.memberCount}</td>
                </tr>`;
                tableBody.append(row);
            });
        });
    }
});

3. Test It Out #

Fire up your Spring Boot app, navigate to your frontend page, and start typing in the search box—you should see the table update in real-time with matching teams, no more Thymeleaf template errors!

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