Mapping을 이용하여 띄우기
초기설정
application.properties
- 기본적으로 port 주소 설정해주자.
- jsp 파일을 사용하기 위해 spring framework의 servlet-context와 같이 설정해줘야 한다.
- 새로 고침 해주는 것도 반드시 기입해주자.
# 이게 주석이다
# server.port 먼저 해줘야한다. url port 지정하는 거니까..
server.port=9006
# 여기서 jsp 파일을 쓴다고 지정해줘야 한다.
# jsp setting
spring.mvc.view.prefix=/WEB-INF/today/ #기본실행 폴더 주소 설정
spring.mvc.view.suffix=.jsp # 어디서든 jsp파일 호출 가능. .jsp 생략가능
spring.devtools.livereload.enabled=true
# spring.devtools.livereload.enabled=true : 자동 새로고침 해주는 것.
SpringBootEx2Application.java
package boot.mvc.ex2;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
@SpringBootApplication
@ComponentScan({"boot.*"})
public class SpringBootEx2Application {
public static void main(String[] args) {
SpringApplication.run(SpringBootEx2Application.class, args);
}
}
예제 진행
초기화면 실행
TestController.java
package boot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class TestController {
@GetMapping("/")
public ModelAndView list() {
ModelAndView model=new ModelAndView();
model.addObject("name", "이효리");
model.addObject("addr", "서울시 강서구");
model.setViewName("list");
return model;
}
}
list.jsp
- 기본 경로설정. localhost:9006 입력하면 첫 page
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<h3 class="alert alert-warning">
이름: ${name } <br>
주소: ${addr }
</h3>
</body>
</html>

예제2
HomeController.java
package boot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/sist/home")
public String home() {
return "home";
}
}
home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>폼태그 읽기</h1>
<ul>
<li>
<a href="form1">폼데이터 각각 읽기</a>
</li>
<li>
<a href="form2">폼데이터 DTO 읽기</a>
</li>
<li>
<a href="form3">폼데이터 Map 읽기</a>
</li>
</ul>
</body>
</html>

data 각각 읽어오기
@Controller
public class FormController {
@GetMapping("/sist/form1")
public String form1() {
return "form/form1";
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>폼 데이터 각각 읽기</h1>
<form action="read1" method="post">
<table class="table table-bordered" style="width: 400px;">
<tr>
<th>이름</th>
<td>
<input type="text" name="irum" class="form-control">
</td>
</tr>
<tr>
<th>자바점수</th>
<td>
<input type="text" name="java" class="form-control">
</td>
</tr>
<tr>
<th>스프링점수</th>
<td>
<input type="text" name="spring" class="form-control">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="btn btn-info">서버에 전송</button>
</td>
</tr>
</table>
</form>
</body>
</html>

입력 값 받아오기
HomeContoller.java
@PostMapping("/sist/read1")
public String read1(@RequestParam String irum,
@RequestParam int java,
@RequestParam int spring,
Model model) {
model.addAttribute("irum", irum);
model.addAttribute("java", java);
model.addAttribute("spring", spring);
return "result/result1";
}
result1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<p class="alert alert-warning" style="margin: 20px 20px;">
이름: ${irum } <br>
자바점수: ${java } <br>
스프링점수: ${spring }<br>
총점: ${java+spring }<br>
평균: ${(java+spring)/2 }<br>
</p>
</body>
</html>

data Dto로 읽어오기
PersonDto.java
package boot.dto;
import lombok.Data;
@Data
public class PersonDto {
private String name;
private String addr;
private String hp;
}
@GetMapping("/sist/form2")
public String form2() {
return "form/form2";
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>폼 데이터 DTO 읽기</h1>
<form action="write2" method="post">
<table class="table table-bordered" style="width: 400px;">
<tr>
<th>이름</th>
<td>
<input type="text" name="name" class="form-control">
</td>
</tr>
<tr>
<th>주소</th>
<td>
<input type="text" name="addr" class="form-control">
</td>
</tr>
<tr>
<th>연락처</th>
<td>
<input type="text" name="hp" class="form-control">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="btn btn-info">서버에 전송</button>
</td>
</tr>
</table>
</form>
</body>
</html>

Dto값 받아오기
@PostMapping("/sist/write2")
public String read2(@ModelAttribute("pdto") PersonDto pdto) {
return "result/result2";
}
result2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<p class="alert alert-danger" style="margin: 20px 20px;">
이름: ${pdto.name } <br>
주소: ${pdto.addr } <br>
연락처: ${pdto.hp }<br>
</p>
</body>
</html>

data Map으로 읽어오기
@GetMapping("/sist/form3")
public String form3() {
return "form/form3";
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>폼 데이터 Map으로 읽기</h1>
<form action="myread" method="post">
<table class="table table-bordered" style="width: 400px;">
<tr>
<th>이름</th>
<td>
<input type="text" name="name" class="form-control">
</td>
</tr>
<tr>
<th>혈액형</th>
<td>
<input type="text" name="blood" class="form-control">
</td>
</tr>
<tr>
<th>나이</th>
<td>
<input type="text" name="age" class="form-control">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="btn btn-info">서버에 전송</button>
</td>
</tr>
</table>
</form>
</body>
</html>

값 읽어오기
- map으로 읽을경우 폼의 name이 key값으로 받고, 입력값은 value값으로 받는다.
@PostMapping("/sist/myread")
public String read3(Model model,@RequestParam Map<String, String>map) {
model.addAttribute("name", map.get("name"));
model.addAttribute("blood", map.get("blood"));
model.addAttribute("age", map.get("age"));
return "result/result3";
}
result3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300&family=East+Sea+Dokdo&family=Gamja+Flower&family=Gowun+Dodum&family=Nanum+Gothic+Coding&family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<p class="alert alert-danger" style="margin: 20px 20px;">
*** form3 결과값 보기 *** <br>
이름: ${name } <br>
혈액형: ${blood } <br>
나이: ${age }<br>
</p>
</body>
</html>
