Как правильно передать параметры в thymeleaf?
Пишу веб-приложение, которое будет рисовать график. На страницe index ввожу три значения, которые нужно передать на страницу chart, на которой будет отрисовываться график, но вылетает ошибка: Resolved [org.springframework.web.bind.MissingServletRequestParameterException: Required request parameter 'x0' for method parameter type double is not present]
index:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Index Page</title> </head> <body> <h1>Enter Parameters</h1> <form method="get"> <!--<form th:action="@{'/chart'}" method="get">--> <label for="n">n:</label> <input type="number" id="n" name="n" required><br><br> <label for="epsilon">Epsilon:</label> <input type="number" id="epsilon" name="epsilon" required><br><br> <label for="x0">x0:</label> <input type="number" id="x0" name="x0" required><br><br> <!--<button type="submit">Generate Chart</button>--> <button type="submit" th:href="@{/chart(n=${#fields.danger('n').value}, epsilon=${#fields.danger('epsilon').value}, x0=${#fields.danger('x0').value})}">Generate Chart</button> </form> </body> </html> |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Index Page</title> </head> <body> <h1>Enter Parameters</h1> <form method="get"> <!--<form th:action="@{'/chart'}" method="get">--> <label for="n">n:</label> <input type="number" id="n" name="n" required><br><br> <label for="epsilon">Epsilon:</label> <input type="number" id="epsilon" name="epsilon" required><br><br> <label for="x0">x0:</label> <input type="number" id="x0" name="x0" required><br><br> <!--<button type="submit">Generate Chart</button>--> <button type="submit" th:href="@{/chart(n=${#fields.danger('n').value}, epsilon=${#fields.danger('epsilon').value}, x0=${#fields.danger('x0').value})}">Generate Chart</button> </form> </body> </html>
chart
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Chart</title> </head> <body> <h1 th:text="${chartName}"></h1> <img th:src="${imageSrc}" alt="Chart"> </body> </html> |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Chart</title> </head> <body> <h1 th:text="${chartName}"></h1> <img th:src="${imageSrc}" alt="Chart"> </body> </html>
ChartController:
package eugene.practice; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartUtils; import org.jfree.chart.JFreeChart; import org.jfree.data.xy.XYSeries; import org.jfree.data.xy.XYSeriesCollection; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpServletResponse; import java.awt.*; import java.io.IOException; import java.util.List; import java.util.function.Function; @Controller public class ChartController { @GetMapping("/") public String index() { return "index"; } @GetMapping("/chart") public String generateChart(@RequestParam int n, @RequestParam int epsilon, @RequestParam int x0, HttpServletResponse response, Model model) throws IOException { // Определяем функцию, которую аппроксимируем Function<Double, Double> f = Math::sin; // Пример функции, замените на нужную // Создаем набор данных для графика XYSeries series = new XYSeries("Taylor Polynomial"); List<Double> coefficients = TaylorApproximation.taylorPolynomial(x0, n, f); for (int i = 0; i < coefficients.size(); i++) { series.add(i, coefficients.get(i)); } XYSeriesCollection dataset = new XYSeriesCollection(); dataset.addSeries(series); // Создаем график JFreeChart chart = ChartFactory.createXYLineChart( "Taylor Polynomial Approximation", "n", "Coefficient", dataset ); // Настраиваем стиль графика chart.getPlot().setBackgroundPaint(Color.WHITE); chart.getXYPlot().getRenderer().setSeriesPaint(0, Color.BLUE); // Выводим график в формате PNG response.setContentType("image/png"); ChartUtils.writeChartAsPNG(response.getOutputStream(), chart, 800, 600); // Передаем данные о графике на HTML-страницу model.addAttribute("chartName", "Taylor Polynomial Approximation"); model.addAttribute("imageSrc", "/chart?x0=" + x0 + "&epsilon=" + epsilon + "&n=" + n); return "chart"; } } |
package eugene.practice; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartUtils; import org.jfree.chart.JFreeChart; import org.jfree.data.xy.XYSeries; import org.jfree.data.xy.XYSeriesCollection; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpServletResponse; import java.awt.*; import java.io.IOException; import java.util.List; import java.util.function.Function; @Controller public class ChartController { @GetMapping("/") public String index() { return "index"; } @GetMapping("/chart") public String generateChart(@RequestParam int n, @RequestParam int epsilon, @RequestParam int x0, HttpServletResponse response, Model model) throws IOException { // Определяем функцию, которую аппроксимируем Function<Double, Double> f = Math::sin; // Пример функции, замените на нужную // Создаем набор данных для графика XYSeries series = new XYSeries("Taylor Polynomial"); List<Double> coefficients = TaylorApproximation.taylorPolynomial(x0, n, f); for (int i = 0; i < coefficients.size(); i++) { series.add(i, coefficients.get(i)); } XYSeriesCollection dataset = new XYSeriesCollection(); dataset.addSeries(series); // Создаем график JFreeChart chart = ChartFactory.createXYLineChart( "Taylor Polynomial Approximation", "n", "Coefficient", dataset ); // Настраиваем стиль графика chart.getPlot().setBackgroundPaint(Color.WHITE); chart.getXYPlot().getRenderer().setSeriesPaint(0, Color.BLUE); // Выводим график в формате PNG response.setContentType("image/png"); ChartUtils.writeChartAsPNG(response.getOutputStream(), chart, 800, 600); // Передаем данные о графике на HTML-страницу model.addAttribute("chartName", "Taylor Polynomial Approximation"); model.addAttribute("imageSrc", "/chart?x0=" + x0 + "&epsilon=" + epsilon + "&n=" + n); return "chart"; } }
Подскажите, в чем проблема? Вроде все передаю правильно, но при этом даже точка останова на generateChart не срабатывается.
Дополнительно:
так вы вызываете "/chart" или нет ? закомментроовано
неправильный синтаксис
<button type="submit" th:href="@{/chart(n=${#fields.danger('n').value}, epsilon=${#fields.danger('epsilon').value}, x0=${#fields.danger('x0').value})}">Generate Ch |
<button type="submit" th:href="@{/chart(n=${#fields.danger('n').value}, epsilon=${#fields.danger('epsilon').value}, x0=${#fields.danger('x0').value})}">Generate Ch
уберите скобки поставьте вопросительные знаки, "&", "=" и т .д.
если помогло - я положу в ответы вы отметите решением
/chart?n=...&epsilon=...&x0=...
Ответы:
Добрый день.
1) Графики можно рисовать средствами js на стороне фронта без участия бэкенда.
Например, https://www.chartjs.org/
2) Для графиков помимо JFreeChart, еще могу посоветовать XChart -
https://knowm.org/open-source/xchart/
3) Вы получаете следующее исключение -
Required request parameter 'x0' for method parameter type double is not present
В контроллере принимаете int, а в форме возможно передаете число с запятой (тип double)
Попробуйте это @RequestParam int x0, поменять на @RequestParam double x0,, либо посмотрите почему фронт не отправляет целочисленный тип. Например, можно поэкспериментировать с атрибутом step тега input
- Здравствуйте, большое спасибо за Ваш подробный ответ, обязательно ознакомлюсь с другими способами отрисовки графиков. К сожалению изменение параметров не помогло решить проблему. В любом случае, большое спасибо за информацию
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для передачи параметров в Thymeleaf вам необходимо использовать атрибуты th:attr или th:with.
Например, если у вас есть контроллер Spring MVC, который возвращает модель с данными, которые вы хотите передать в Thymeleaf, вы можете использовать следующий код:
@Controller public class MyController { @GetMapping("/mypage") public String myPage(Model model) { model.addAttribute("name", "John"); model.addAttribute("age", 30); return "mypage"; } }
Затем в вашем HTML-файле Thymeleaf вы можете получить эти параметры следующим образом:
<title>My Page</title> <h1></h1> <p></p><title>My Page</title> <h1></h1> <p></p>
Таким образом, параметры "name" и "age" будут переданы из контроллера в Thymeleaf и отображены на странице.
Вы также можете использовать атрибут th:attr для передачи параметров в теги HTML, например:
<title>My Page</title> <div></div><title>My Page</title> <div></div>
Таким образом, вы можете передавать параметры из контроллера в Thymeleaf и использовать их для динамической генерации контента на вашей странице.