Spring/spring_old

06./ Spring Web MVC

slow333 2023. 1. 12. 16:58

화면을 구성하고 내용을 적용

홈화면 추가 -> 등록 화면 -> 조회 화면 구현 후에 spring과 연동함

templates 폴더 밑에 원하는 html 파일을 생성

class에서

 

@GetMapping("/경로") ==> 경로에 url 경로를 적어줌(localhost:8080/경로)

return "html 파일 이름";

@Controller
public class HomeController {

  @GetMapping("/")
  public String home(){
    return "home";
  }
}

@Controller에 member를 생성하기 위한 method를 생성(templates/members/createMemberForm)

@GetMapping("/members/new")
public String createForm(){
  return "members/createMemberForm";
}

데이터를 입력 받을 HTML 파일을 만듦(templates/members/createMemberForm.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Member Form</title>
</head>
<body>
<div class="container">
  <form action="/members/new" method="post">
    <div class="form-group">
      <label for="name"> 이름</label>
      <input type="text" id="name" name="memberName" placeholder="이름을 입력">
    </div>
  </form>
</div>
</body>
</html>

MemberForm 파일생성(controller 밑에) 왜하는지는 ????

package com.myvms.controller;

public class MemberForm {
  private String memberName;

  public String getMemberName() {
    return memberName;
  }

  public void setMemberName(String memberName) {
    this.memberName = memberName;
  }
}

@Controller에 @PostMapping으로 createMemberForm.html에서 보내준 값을 처리할 method를 생성

이때 MemberForm의 객체를 활용해서 값을 받음..(중간에 class를 두고 간접적으로 받는 이유를 모르겠음. ????)

@PostMapping("/members/new")
public String create(MemberForm form) {
  Member member = new Member();
  member.setName(form.getMemberName());

  System.out.println("member : "+member.getName());

  memberService.join(member);
  return "redirect:/";
}

 

@Controller에 전체 member list를 출력하기 위한 method를 생성

@GetMapping("/members")
public String list(Model model) {
  List<Member> members = memberService.findMembers();
  model.addAttribute("membersList", members);
  return "members/memberList";
}

member list 출력을 위한 화면(html)을 생성(members/memberList.html)

==> 이때 thymeleaf를 사용해서 for 문을 돌면서 전체 내용을 출력함..

<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
  <meta charset="UTF-8">
  <title>Member List</title>
  <style>
      table {
          width: 100%;
          border: 1px solid #444444;
          border-collapse: collapse;
      }
      th, td {
          border: 1px solid #444444;
          text-align: center;
      }
  </style>
</head>
<body>

<div class="container">
  <div>
    <table>
      <thead>
      <tr>
        <th>#No</th>
        <th>이름</th>
        <th>등록 일자</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="member : ${membersList}">
        <td th:text="${member.id}"></td>
        <td th:text="${member.name}"></td>
        <td th:text="${member.regDate}"></td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
</body>
</html>