Search code examples
htmlspringspring-bootthymeleaf

Why I get 404 error in spring boot post request using Thymeleaf


I user spring boot to create an integral calculator. I got a strange 404 error while I try to handle post request. Here is my controller class that should handle my request. It's test version so doesn't mind that param function doesn't use(if I understand correctly, this should not affect my error).

@Controller
public class MainController {

    private final CalculatorService calculatorService;

    public MainController(WebCalculatorService calculatorService) {
        this.calculatorService = calculatorService;
    }

    @GetMapping(value = "/")
    public String index() {
        return "index";
    }

    @PostMapping(value = "/calculate")
    public String calculate(Model model, @RequestParam("function") String function, @RequestParam("numFrom") double numFrom,
                          @RequestParam("numTo") double numTo, @RequestParam("step") double step,
                          RedirectAttributes redirectAttributes) {

        double rectangleResult = calculatorService.integrateRectangleMethod(numFrom, numTo, step, x -> Math.pow(x, 2));
        double trapezoidalResult = calculatorService.integrateRectangleMethod(numFrom, numTo, step, x -> Math.pow(x, 2));

        model.addAttribute("rectangleResult", rectangleResult);
        model.addAttribute("trapezoidalResult", trapezoidalResult);

        redirectAttributes.addFlashAttribute("rectangleResult", rectangleResult);
        redirectAttributes.addFlashAttribute("trapezoidalResult", trapezoidalResult);

        return "redirect:/";
    }
}

Here is my html page using Thymeleaf with post form for my params to solve equations.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header>Integral Calculator</header>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
    <title>Integral Calculator</title>
    <link href="/static/main.css" th:href="@{/main.css}" rel="stylesheet"/>
</head>

<body>
<div class="container">
    <section class="container">

        <form method="POST" th:action="@{/calculate}">

            <label><span class="label-text">Enter integrand f(x): </span><input class="input-cb" type="text"
                                                                                name="function"></label>
            <fieldset>
                <legend>Enter range:</legend>
                <label><span class="label-text">From: </span><input class="input-range-from" type="number"
                                                                    name="numFrom"></label>
                <label><span class="label-text">To: </span><input class="input-range-to" type="number" name="numTo"></label>
            </fieldset>
            <label><span class="label-text">Enter step: </span><input class="input-step" type="number" value="0.01"
                                                                      step="0.1" min="0" name="step"></label>
            <p class="error-message is-hidden"></p>

            <button type="submit" name="submit" value="value" class="link-button">Calculate</button>
        </form>

        <div class="results is-hidden">
            <p class="result">Results:</p>
            <p class="result-rect">${rectangleResult}</p> <br/>
            <p class="result-trap">${trapezoidalResult}</p> <br/>

        </div>

    </section>
    <section class="chart-container">
        <p class="chart-info is-hidden">The chart is only available for real number results</p>
        <canvas id="myChart"></canvas>
    </section>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.0.2/math.js"></script>
</html>

After I push my button calculate a get 404 error, that here's what it looks like enter image description here

with path like: http://localhost:8080/calculate

I have already tried changing the paths, change my form in the html page, but it did not help, honestly do not understand what I have here error, please help and thanks in advance


Solution

  • I solved my problem just recompiled my project and after that this stupid error was gone. But thanks everyone for yours answers.