##状況
layout:fragmentを用いてhtmlテンプレート機能を実装しようとしていました。
しかし、テンプレート部分のhtmlが画面に表示されず困っています。
##ソースコード
layout.html(テンプレート部分)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <title>layout</title> </head> <body> <div class="container"> <h1 class="text-center text-primary mt-5">顧客管理システム</h1> <div> </div> <div layout:fragment="content"> Fake Content </div> </div> </body> </html>
list.html(コンテンツ部分)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org/" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="~{layout}"> <head> <title>顧客一覧</title> </head> <body> <div layout:fragment="content" class="col-sm-12"> <form th:action="@{/customers/create}" th:object="${customerForm}" method="POST"> <dl> <dt><label for="lastName">姓</label></dt> <dd> <input type="text" id="lastName" name="lastName" th:field="*{lastName}" th:errorclass="error-input" value="山田" /> <span th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}" class="error-messages">error!</span> </dd> </dl> <dl> <dt><label for="firstName">名</label></dt> <dd> <input type="text" id="firstName" name="firstName" th:field="*{firstName}" th:errorclass="error-input" value="太郎" /> <span th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}" class="error-messages">error!</span> </dd> </dl> <input type="submit" value="作成"> </form> <table> <tr th:each="customer : ${customers}"> <td th:text="${customer.id}">100</td> <td th:text="${customer.lastName}">山田</td> <td th:text="${customer.firstName}">太郎</td> <td> <form th:action="@{/customers/edit}" method="GET"> <input type="submit" name="form" value="編集"> <input type="hidden" name="id" th:value="${customer.id}" /> </form> </td> <td> <form th:action="@{/customers/delete}" method="POST"> <input type="submit" value="削除"> <input type="hidden" name="id" th:value="${customer.id}" /> </form> </td> </tr> </table> </div> </body> </html>
Contoroller
Java
1package com.example.thymeleaf_test.web; 2 3import java.util.List; 4import org.springframework.beans.BeanUtils; 5import org.springframework.beans.factory.annotation.Autowired; 6import org.springframework.stereotype.Controller; 7import org.springframework.ui.Model; 8import org.springframework.validation.BindingResult; 9import org.springframework.validation.annotation.Validated; 10import org.springframework.web.bind.annotation.GetMapping; 11import org.springframework.web.bind.annotation.ModelAttribute; 12import org.springframework.web.bind.annotation.PostMapping; 13import org.springframework.web.bind.annotation.RequestMapping; 14import org.springframework.web.bind.annotation.RequestParam; 15 16import com.example.thymeleaf_test.domain.Customer; 17import com.example.thymeleaf_test.service.CustomerService; 18 19@Controller 20@RequestMapping("customers") 21public class CustomerController { 22 @Autowired 23 CustomerService customerService; 24 25 @ModelAttribute 26 CustomerForm steUpForm() { 27 return new CustomerForm(); 28 } 29 30 @GetMapping 31 String list(Model model) { 32 List<Customer> customers = customerService.findAll(); 33 model.addAttribute("customers", customers); 34 return "customers/list"; 35 } 36 37 @PostMapping(path = "create") 38 String create(@Validated CustomerForm form, BindingResult result, Model model) { 39 if (result.hasErrors()) { 40 return list(model); 41 } 42 Customer customer = new Customer(); 43 BeanUtils.copyProperties(form, customer); 44 customerService.create(customer); 45 return "redirect:/customers"; 46 } 47 48 @GetMapping(path = "edit", params = "form") 49 String editForm(@RequestParam Integer id, CustomerForm form) { 50 Customer customer = customerService.findOne(id); 51 BeanUtils.copyProperties(customer, form); 52 System.out.println(form); 53 return "customers/edit"; 54 } 55 56 @PostMapping(path = "edit") 57 String edit(@RequestParam Integer id, @Validated CustomerForm form, BindingResult result) { 58 if (result.hasErrors()) { 59 return editForm(id, form); 60 } 61 Customer customer = new Customer(); 62 BeanUtils.copyProperties(form, customer); 63 customerService.update(customer); 64 return "redirect:/customers"; 65 } 66 67 @PostMapping(path = "edit", params = "goToTop") 68 String goToTop() { 69 return "redirect:/customers"; 70 } 71 72 @PostMapping(path = "delete") 73 String delete(@RequestParam Integer id) { 74 customerService.delete(id); 75 return "redirect:/customers"; 76 } 77 78 79}
layout.htmlにあるh1やbootstrapが反映されるにはどうすれば良いのでしょうか。
エラーメッセージが出ない状況で原因が特定できないのでアドバイスお願いしたいです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。