본문 바로가기
코딩/Spring

[Spring] 페이지 이동

by Leedius 2023. 3. 13.

기본세팅

우선 프로젝트를 만들때 기본적으로 TestApplication.java는 만들어지고

컨트롤러를 만들것이기 때문에 그 하위 폴더를 만들어서 TestController를 만든다.

그리고 페이지 이동을할 간단한 HTML페이지를 위 그림에서 HTML에 해당하는 경로에 페이지를 만든다.

 

그리고 application.properties 파일을 열어 다음과 같이 코드를 적어준다.

# tomcat port를 8081로 변경
server.port=8081

# thymeleaf로 그려진 화면이 변경되면
# 즉시 변경내용 적용!
spring.thymeleaf.cache=false

 

컨트롤러에는 다음과 같이 코드를 적는다

package com.study.test.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

//@Controller : 해당 클래스가 컨트롤러 역할을 하는 클래스임을 지정
@Controller
public class TestController {
	
	//첫 페이지
	//http://localhost:8081 주소입력
	@GetMapping("/")
	public String start() {
		return "index";
	}
	
	//테스트 페이지
	//http://localhost:8081/test 주소입력
	@GetMapping("/test")
	public String goMain() {
		//찾아가는 html파일명
		//.html이라는 확장자는 작성하지 않는다.
		return "main";
	}
	
	//로그인 페이지
	//http://localhost:8081/login 주소입력
	@GetMapping("/login")
	public String login() {
		
		return "login";
	}

}

HTML파일 명과 return하는 명을 일치시켜줘야 한다. 

리턴하는게 페이지를 리턴하는 것이기 때문에

 

이제 간단하게 HTML페이지는 내용을 간단히 적어두고 

프로젝트를 런한다. 프로젝트를 처음 런할때는 프로젝트 우클릭하여 런을 시켜준다.

그다음부터는 CNTL + F11로 런을 시켜주면 된다.(주의! 서버를 중지시킨다음에 런을 시켜주는게 좋다)

 

localhost:8081를 입력했을떄는 위의 컨트롤러 페이지에서 index페이지로 이동한다.

Insert title here 첫 페이지 입니다.

 

localhost:8081/test 를 입력했을떄는 위의 컨트롤러 페이지에서 main페이지로 이동한다.

Insert title here 메인 페이지 입니다.

 

localhost:8081/login 를 입력했을떄는 위의 컨트롤러 페이지에서 login페이지로 이동한다.

Insert title here
로그인 페이지입니다.

 

form태그로 데이터 받기 

방법1.

package com.study.test.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/board")
public class BoardController {
	
	//form태그의 method가 post이기 때문에 @PostMapping로 받는다.
	
	@GetMapping("/list")
	public String boardList() {
		return "board_list";
	}
	
	@GetMapping("/writeForm")
	public String writeForm() {
		return "board_write_form";
	}
	
	@PostMapping("/regBoard")
	public String regBoard(String title, String content, int age) {
		System.out.println("글등록실행");
		System.out.println(title);
		System.out.println(content);
		System.out.println(age);
		return null;
	}
}

컨트롤러 페이지 아래에서 title과 content라는 이름으로 데이터를 넘겨왔기때문에 regBoard에서 처럼 매개변수를

받아온 이름으로 만든다. 만약에 매개변수로 숫자가 넘어오면 자동적으로 매개변수를 바꿔서 받는다.

 

<form action="/board/regBoard" method="post">
	제목 : <input type="text" name="title"><br>
	내용 : <input type="text" name="content"><br>
	나이 : <input type="text" name="age"><br>
	<input type="submit" value="등록">
</form>

HTML form태그 부분 title과 content과 age라는 이름으로 데이터를 넘김

 

방법2.

우선 해당 그림처럼 boardVO라는 클래스 파일은 만든다

 

BoardVO ( 전에 썻던 BoardDTO와 같은 역할)

package com.study.test.vo;

public class BoardVO {
	private String title;
	private String content;
	private int age;
	
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	
	@Override
	public String toString() {
		return "BoardVO [title=" + title + ", content=" + content + ", age=" + age + "]";
	}
	
}

 

BoardController 페이지

	@PostMapping("/regBoard2")
	public String regBoard2(BoardVO boardVO) {
		System.out.println("글등록실행");
		System.out.println(boardVO);
		return null;
	}

매개변수로 VO로 받아 왔기때문에 title, content, age데이터를 함께 받는다.

해당 그림처럼 데이터가 받아와 졌다.

 

form태그로 데이터를 보내고 다른페이지에서 받아온 데이터를 표시

<span th:text="${boardVO.content}"></span>
<span th:text="${boardVO.title}"></span>
<span th:text="${boardVO.age}"></span>

컨트롤러 페이지에서 BoardVO boardVO라는 매개변수로 받아왔기떄문에 Spring에선 자동적으로 데이터가 넘어간다.

HTML에서 표시를 할 때는 th문을 쓸때는 위의 코드처럼 쓰는 방법이 있고,

다른 방법으로는 [[${boardVO.title}]] 이런식으로 작성하는 방법이 있다.

 

위의 방법으로 간단한 회원가입기능을 구현한 홈페이지를 만들기.

파일구성은 첫페이지인 index페이지

회원가입 기본정보를 입력할 reg_member_form페이지

회원가입 상세정보를 입력할 reg_member_detail_form페이지

회원가입후 상세정보를 볼수있는 member_info페이지

회원가입 기능을 구현할 MemberController 클래스

회원가입 기본정보를 저장할 MemberVO클래스

회원가입 상세정보를 저장할 MemberDetailVO클래스

 

우선 첫페이지를 만들었다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
	<div><h2>테 스 트</h2></div>
	<div><a href="/member/regmemberForm">회원가입하기</a></div>
</div>
</body>
</html>

회원가입하기를 클릭하면 회원가입 화면으로 이동한다.

 

다음은 회원가입화면

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
	<form action="/member/regMember" method="post">
		<div>
			<div>아이디</div>
			<div><input type="text" name="memId"></div>
		</div>
		<div>
			<div>비밀번호</div>
			<div><input type="password" name="memPw"></div>
		</div>
		<div>
			<div>이름</div>
			<div><input type="text" name="memName"></div>
		</div>
		<div>
			<div>연락처</div>
			<div>
				<select name="memTell">
					<option value="010">010</option>
					<option value="011">011</option>
					<option value="012">012</option>
				</select>
				<input type="text" name="memTell">
				<input type="text" name="memTell">
			</div>
		</div>
		<div>
			<div>이메일</div>
			<div><input type="email" name="memEmail"></div>
		</div>
		<div>
			<div>생일</div>
			<div><input type="date" name="memDate"></div>
		</div>
		<div>
			<input type="submit" value="회원가입">
		</div>
	</form>
</div>
</body>
</html>

Thymeleaf기능을 사용하기 위해 제일상단 HTML 태그에 xmlns:th="http://www.thymeleaf.org" 코드를 추가한다.

(다른페이지도)

 

 

Insert title here
아이디
비밀번호
이름
연락처
이메일
생일

 

정보를 입력하고 회원가입을 누르면 입력한 정보를 가지고 컨트롤러에 /regMember를 찾아간다.

//회원 상세 정보 입력페이지로 이동
	@PostMapping("/regMember")
	public String regMember(MemberVO memberVO) {
		System.out.println(memberVO);
		return "reg_member_detail_form";
	}

해당 코드를 보면 입력한정보를 MemberVO에 객체를  memberVO로 만들어서 매개변수로 받아온뒤에 자동으로

reg_member_detail_form페이지로 데이터를 리턴한다.(스프링이라서 자동으로 데이터 전달)

중요!(자꾸까먹음)

전화번호는 배열이라 MemberVO에서 다음과 같이 변수와 getter, setter를 작성한다.

 

다음은 회원가입 상세정보 입력페이지

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
	<!-- 기존과 같이 데이터를 hidden타입으로 넘기되 value는 thymeleaf를 사용하여 아래와 같이 전달 -->
	<form action="/member/regMemberDetail" method="post">
	<input type="hidden" name="memId" th:value="${memberVO.memId}">
	<input type="hidden" name="memPw" th:value="${memberVO.memPw}">
	<!-- <input type="hidden" name="memTell" th:value="${memberVO.memTell}"> 배열이라 이문법은 안됨 -->
	<input type="hidden" name="memEmail" th:value="${memberVO.memEmail}">
	<input type="hidden" name="memName" th:value="${memberVO.memName}">
	<input type="hidden" name="memDate" th:value="${memberVO.memDate}">
	<th:block th:each="e : ${memberVO.memTell}">
		 <input type="hidden" name="memTell" th:value="${e}">
	</th:block>
	<span th:text="${memberVO.memName}"></span>
	 회원님 가입을 환영합니다. [[${memberVO.memName}]]
	<div>
		<div>관심레슨</div>
		<div>
			<input type="checkbox" value="수영" name="lesson"> 수영
			<input type="checkbox" value="헬스" name="lesson"> 헬스
			<input type="checkbox" value="요가" name="lesson"> 요가
			<input type="checkbox" value="필라테스" name="lesson"> 필라테스
		</div>
	</div>
	<div>
		<div>레슨에 참여한 적 있나요</div>
		<div>
			<input type="radio" value="예" name="takeLesson"> 예 
			<input type="radio" value="아니오" name="takeLesson"> 아니오 
		</div>
	</div>
	<div>
		<div>추천인명</div>
		<div><input type="text" name="recomendName"></div>
	</div>
	<div>
		<div>자기소개</div>
		<div>
			<textarea rows="5" cols="60" style="resize: none;" name="intro"></textarea>		
		</div>
	</div>
	<div>
		<input type="submit" value="입력완료">
	</div>
	</form>
</div>
</body>
</html>

위에서 봤듯이 데이터를 html에 전달 받을때는 thymeleaf 사용해서 value값을 입력하는데

(중요!) 배열은 다음과 같은 문법을 사용한다. lesson도 배열이니 똑같은 문법을 사용한다.

	<th:block th:each="e : ${memberVO.memTell}">
		 <input type="hidden" name="memTell" th:value="${e}">
	</th:block>

 

Insert title here
회원님 가입을 환영합니다. [[${memberVO.memName}]]
관심레슨
수영 헬스 요가 필라테스
레슨에 참여한 적 있나요
예 아니오
추천인명
자기소개

 

회원가입후 회원상세 정보 페이지

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
	<div>
		<div>아이디</div>
		<div>[[${memberVO.memId}]]</div>
		<div>이름</div>
		<div th:text="${memberVO.memName}"></div>
	</div>
	<div>
		<div>연락처</div>
		<div>
    		<th:block th:each="e : ${memberVO.memTell}">
       			<span th:text="${e}"></span>
   			</th:block>
		</div>
		<div>이메일</div>
		<div th:text="${memberVO.memEmail}"></div>
	</div>
	<div>
		<div>생일</div>
		<div th:text="${memberVO.memDate}"></div>
		<div>추천인명</div>
		<div th:text="${memberDetailVO.recomendName}"></div>
	</div>
	<div>
		<div>관심레슨</div>
		<div>
			<th:block th:each="e : ${memberDetailVO.lesson}">
				[[${e}]]
			</th:block>
		</div>
	</div>
	<div>
		<div>자기소개</div>
		<div th:text="${memberDetailVO.intro}"></div>
	</div>
</div>
</body>
</html>

 

다음과 같이 입력한 정보들이 잘 출력된다.

 

추가사항들

데이터를 넘길때마다 f12를 눌러서(개발자 모드) 데이터가 잘넘어 갔는지 확인해준다

넘어온 데이터들

 

중요!

	//회원 상세 정보 입력페이지로 이동
	@PostMapping("/regMember")
	public String regMember(MemberVO memberVO) {
		System.out.println(memberVO);
		return "reg_member_detail_form";
	}

해당 코드에서 매개변수의 이름(클래스말구) memberVO든 member든 무슨이름을 쓰던간에 

데이터를 전달받은 HTML페이지 에서는 클래스명에서 앞글자만 소문자로 바꾼 이름을 써야한다.

예를들면 매개변수가 MemberVO member로 데이터를 넘겼으면 HTML페이지에서는  ${memberVO.memId} 이런식으로

클래스명에서 앞글자만 바꿔서 사용해야한다.

저작자표시 비영리 변경금지 (새창열림)

'코딩 > Spring' 카테고리의 다른 글

[Spring / Intercepter] Intercepter 사용하여 응집도 높이기  (0) 2023.03.29
[Spring] Spring을 이용한 회원관리 프로그램 만들기  (1) 2023.03.14
[Spring] IOC, DI  (0) 2023.03.14
[Spring / DB] Spring에서의 SQL DB연결  (0) 2023.03.14
[Spring] Lombok(getter, setter, toString 자동추가)  (0) 2023.03.14

관련글

댓글

티스토리툴바