У меня есть база данных рецептов, и у нее есть 3 таблицы - Структура базы данных
Я создаю веб-приложение для рецептов, где пользователь вводит в меню «имя», «Имя ингредиента»и «Описание ингредиента» и чем оно будет показано в виде списка.Проблема в том, что я добавил кнопку с javascript, которая добавляет новые «Имя ингредиента» и «Описание ингредиента» в addRecipePage (чтобы сделать его динамичным для разных продуктов), но эти новые ингредиенты не отображаются в Mysql как разные строки. Они получаютдобавлено как 1 строка -
Контроллер:
@GetMapping("/addNew")
public String addRecipe(Model model){
Menu menu = new Menu();
model.addAttribute("menu", menu);
return "add-recipe";
}
@PostMapping("/postAddNew")
public String postAddRecipe(@ModelAttribute("menu")Menu menu,
@RequestParam String ingName,
@RequestParam String ingDesc){
menu.getIngredient().add(new Ingredients(ingName,ingDesc));
menuRepository.save(menu);
//ingredientRepository.save(ingredient);
return "redirect:/recipeList";
}
add-recipe.html:
<form action = "#" th:action="@{/postAddNew}" th:object="${menu}" method="post">
<p>Menu Name: <input type="text" th:field="*{name}"></p>
<div id="wrapper">
<label for="ingredientName"></label>
<p>Ingredient Name: <input id="ingredientName" type="text" name="ingName"></p>
<label for="ingredientDescription"></label>
<p>Ingredient Description: <input id="ingredientDescription" type="text" name="ingDesc"></p>
</div>
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />
<input type="submit" th:value="Submit">
</form>
Javascript:
function add_fields() {
document.getElementById('wrapper').innerHTML += "<br><label for = 'ingredientName'></label><p>Ingredient Name: <input id = 'ingredientName' type = 'text' name='ingName'></p><label for = 'ingredientDescription'></label><p>Ingredient Description: <input id = 'ingredientDescription' type = 'text' name = 'ingDesc'></p>";
}
Как вы можете видеть, Javascript добавляет только новые входы с такими же атрибутами "name", и я думаю, что это проблема, мне нужно как-то выяснить,как создать новые входные данные с различными полями атрибута «name», которые метод обработчика контроллера получит через @RequestParam, и сохранить их в базе данных.
Страница списка:
<div th:object="${menu}" class="content">
<a th:href="@{/recipeList}">Go Back To List</a>
<h1 th:text = "${menu.name}" class="menuName">Menu Name</h1>
<div th:each="ing : ${menu.ingredient}" class="listItems">
<ul>
<li th:text = "${ing.ingredientName}">Food Description</li>
<ul>
<li th:text="${ing.ingredientDescription}"></li>
</ul>
</ul>
</div>
</div>
Добавить страницу рецепта
После нажатия кнопки «Добавить больше»
После отправки
Как это добавляется в базу данных