Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

홈 화면 추가 & 웹 기능 본문

Spring Boot

홈 화면 추가 & 웹 기능

Seung__ 2021. 7. 22. 23:32

1. HomeController

@Controller
public class HomeController {

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

엇? welcome page에 들어가지 않고 home.html로 연결된다.

그 이유는 해당 url에 Mapping된 controller가 static보다 우선순위가 높기 때문이다.

 

2. home.html

<!DOCUTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>

    <div class="container">
        <h1>Hello Spring</h1>
        <p>회원 기능</p>
        <p>
            <a href="members/new">회원 가입</a>
            <a href="/members">회원 목록</a>
        </p>
    </div>
</body>
</html>

3. 실행화면

4. createMembersForm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</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="name" placeholder="이름을 입력하세요">
      </div>
      <button type="submit">등록</button>
    </form>
  </div>

</body>
</html>
<form> 입력 양식 전체를 감싸는 태그
<form> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시.
  • <input>의 name은 spring에 전달 시 key역할을 함.
  • input에 text를 입력하고 등록 버튼을 누르면 
  • <form>의 action에 의해 해당 url에 data전달됨.
  • name이라는 이름의 key, value에 해당하는 입력된 text가 spring으로 넘어가게됨.

 

5. MemberForm class

@Data
public class MemberForm {

    private String name;
}

 html의 input bod의 name인 "name"과 MemberForm의 name과 일치해야 받아올 수 있음.

 

6. MemberController

 

createMembersForm.html에서 확인 할 수 있듯이 input box에 text를 입력하면

 

해당 값이 K & V 형태로 post method를 통해 스프링으로 전달이 된다.

  • k = input의 name인 "name", MemberForm의 name과 일치
  • v = input에 입력된 text --> memberForm의 name에 value가 맵핑됨.

따라서 해당 memberForm 객체를 받아 join하는 로직이 동작할 수 있게 된다.

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

        memberService.join(member);

        return "redirect:/"; //home 화면으로
    }

 

7. 조회, MemberController

Get method를 통해 members를 조회하는 코드를 작성해 보자.

return으로 "members/memberList" 반환한다. 해당 html작성이 필요하다.

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

        return "members/memberList";
    }

8. memberList.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
  <div class="container">
    <div>
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>이름</th>
          </tr>

        </thead>
        <tbody>
        <tr th:each="member: ${members}">
          <td th:text="${member.id}"></td>
          <td th:text="${member.name}"></td>
        </tr>
        </tbody>
      </table>

    </div>
  </div>

</body>
</html>

일단 실행시켜 보자!

여기서 thymleaf가 본격적으로 작동된다.

  • th:each는 루프
  • ${}는 model안에 있는 값을 꺼내올 수 있다.
 <tbody>
     <tr th:each="member: ${members}">
        <td th:text="${member.id}"></td>
        <td th:text="${member.name}"></td>
     </tr>
</tbody>

Controller를 보면 model에 Attribute를 추가했다. 

 

model 객체를 통해 view에 data를 전달할 수 있다.

 

model.addAttribute("members", members)를 하면

model객체에 k&v형태로 "members"&members를 view에 전달할 수 있다.

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

        return "members/memberList";
    }

9. GitHub : 210722,home, function

 

 

GitHub - bsh6463/SpringBootClass

Contribute to bsh6463/SpringBootClass development by creating an account on GitHub.

github.com

 

'Spring Boot' 카테고리의 다른 글

Jdbc활용하여 Application에서 DB로 넘겨보자.  (0) 2021.07.23
H2 Database 설치 및 사용 법  (0) 2021.07.23
Spring Bean과 의존관계(JAVA로 직접 등록)  (0) 2021.07.22
Spring Bean과 의존관계(@Component 스캔)  (0) 2021.07.22
회원 서비스 개발 & Test  (0) 2021.07.22
'Spring Boot' Related Articles more
Comments