URL Mapping
URL이란 사용자가 서버에 접속해서 서비스를 받기 위한 주소를 말한다.
URL 작성 위치)
- 브라우저의 주소 입력 칸에 직접 작성
- a 태그의 href 속성
- form 태그의 action 속성
- 자바스크립트
URL Mapping은 사용자가 요구하는 기능과 controller 클래스의 메소드를 연결하는 것이다.
인터넷에서의 전송은 form 태그의 method 속성을 사용하며, 두 가지가 있다.
| 정의 | 어노테이션 | |
| GET 방식 | 전송하는 데이터(주소칸)가 노출됨 | @GetMapping("url") |
| POST 방식 | 전송하는 데이터를 숨김 => form 태그에서 method를 post로 지정한 경우 => 자바스크립트에서 post로 지정한 경우 |
@PostMapping("url") |
상황처리
0. 첫 페이지
Controller를 거쳐 처리되어야 하며, http://localhost:8080 이 뒤에 '/'가 생략된다.
=> '/' = root url(시작 경로) / 시작 페이지 = jsp 페이지로 작성
시작 페이지로 사용하는 파일명)
- index.jsp(html)
- default.jsp(html)
- home.jsp(html) - spring에서 주로 사용
- index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>처음</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>시작 페이지</h1>
<p>환영합니다~~</p>
<p>JSP로 만든 페이지 입니다~</p>
</body>
</html>
- package.controller.HomeController.java
package com.jsframe.sringjsp01.controller;
import lombok.extern.java.Log;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
@Log
public class HomeController {
// 사용자 요청 url과 메소드 매핑
@GetMapping("/")
public String start(){
log.info("start()"); // 정상 작동되었는지 확인할 수 있음
//System.out.println("start()"); // 쓰지 않음
String viewName = "index"; // jsp 파일의 이름
return viewName;
}
} // class end
1. 페이지(jsp) -> 페이지(jsp)
두 개의 jsp를 준비해 전환 처리용 메소드를 작성한다.
- index.jsp
mypage.jsp 파일 추가한 후 내용을 채운 뒤 <body> 태그 안에 아래 코드 추가
<a href="mp">[내페이지]</a>
- package.controller.HomeController.java
// 사용자 요청 url과 메소드 매핑
// => index.jsp 파일의 <a> 태그에 연결된 값과 같게 작성
@GetMapping("mp")
public String mypageMethod(){
log.info("mypageMethod()");
return "mypage"; // mypage.jsp 반환
}
2. 페이지(jsp) - [데이터] -> 페이지(jsp)
사용자의 입력값을 프로그램에서 받는다. => form 태그와 input 태그를 사용한 데이터 입력
- 개별 데이터의 전달 => jsp에서 전송하는 모든 데이터는 문자열이며, input 태그의 name 속성에 작성한 값(키워드)가 변수명이 됨
- 묶음 데이터의 전달(Dto 활용) => jsp 페이지에서 처리하는 부분은 개별 데이터 처리와 동일하며, 전송할 데이터(입력 태그)에 해당하는 Dto 클래스가 필요함
개별 데이터 전달 방식)
- inputFrm.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>입력 화면</title>
</head>
<body>
<h1>사용자 입력</h1>
<form action="inputProc">
<input type="text" name="str" placeholder="문자열 입력"><br>
<input type="number" name="num" placeholder="숫자 입력"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
- package.controller.HomeController.java
// 1번 방식을 이용해 페이지 연결
@GetMapping("inputFrm")
public String inputFrm(){
log.info("inputFrm()");
return "inputFrm";
}
@GetMapping("inputProc")
public String inputProc(String str, String num){
log.info("inputProc()");
log.info("str : " + str);
log.info("num : " + num);
int n = Integer.parseInt(num); // 문자열 => 정수 변환
// jsp는 숫자도 String
int data = n + 30; // 다양한 산술 연산 처리
return "index";
}
묶음 데이터 전달 방식)
- joinFrm.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>회원가입 양식</title>
</head>
<body>
<h1>회원 가입</h1>
<form action="joinProc" method="post">
<table>
<tr>
<th width="100">ID</th>
<td width="200">
<input type="text" name="id" placeholder="아이디를 입력하세요.">
</td>
</tr>
<tr>
<th>PASS</th>
<td>
<input type="password" name="pwd" placeholder="비밀번호를 입력하세요.">
</td>
</tr>
<tr>
<th>NAME</th>
<td>
<input type="text" name="name" placeholder="이름을 입력하세요.">
</td>
</tr>
<tr>
<th>AGE</th>
<td>
<input type="number" name="age" placeholder="나이를 입력하세요.">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="가입">
</td>
</tr>
</table>
</form>
</body>
</html>
- package.dto.MemberDto.java
package com.jsframe.sringjsp01.dto;
import lombok.Data;
@Data
public class MemberDto {
private String id;
private String pwd;
private String name;
private int age;
// jsp에서는 문자열이지만 string이 자동으로 정수 변환
}
- package.controller.HomeController.java
@GetMapping("joinFrm")
public String joinFrm(){
log.info("joinFrm()");
return "joinFrm";
}
@PostMapping("joinProc")
public String joinProc(MemberDto member){
log.info("joinProc()");
log.info("id : " + member.getId());
log.info("pwd : " + member.getPwd());
log.info("name : " + member.getName());
log.info("age : " + member.getAge());
return "index";
}
3. (jsp -> ) controller - [데이터] -> 페이지(jsp)
Model 객체 사용 방법)
보낼 데이터만 처리 => Model
보낼 페이지 지정 => return String
데이터 입령용 명령어 : addAttribute("이름표", 데이터);
=> 첫 번째는 데이터의 이름표 값을 넣고, 두 번째는 보낼 데이터를 넣음 + Dto 객체(묶음 데이터)도 담을 수 있음
- output.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>출력 화면</title>
</head>
<body>
<h1>전송받은 데이터</h1>
<p>data1 : ${data1}</p>
<p>data2 : ${data2}</p>
<p>msg : ${msg}</p>
<hr>
<h1>회원 정보</h1>
<!-- 입력용 메소드에서 지어준 이름표를 지정 연걸 -->
<p>아이디 : ${mem.id}</p>
<p>비밀번호 : ${mem.pwd}</p>
<p>이름 : ${mem.name}</p>
<p>나이 : ${mem.age}</p>
</body>
<script>
let message = '${msg}';
alert(message);
</script>
</html>
- package.controller.HomeController.java
@GetMapping("output")
public String output(Model model){
log.info("output()");
model.addAttribute("data1", "첫번째 데이터");
model.addAttribute("data2", 1000);
String m = "보내는 메시지";
model.addAttribute("msg", m);
// Dto를 활용한 데이터 묶음 전달
MemberDto member = new MemberDto();
member.setId("test");
member.setPwd("1234");
member.setName("홍길동");
member.setAge(30);
model.addAttribute("mem", member); // 데이터 입력용 메소드
return "output"; // 데이터가 가야 할 목적지
}
참고) 외부 CSS나 이미지를 프로젝트에 포함시키는 방법
application.properties에 static resources 설정
- spring.web.resources.static-locations
- 값 = classpath:static/
resources > static 폴더에 해당 폴더 생성 ex) 이미지는 images 폴더, 스타일시트는 css 등
jsp 문서에서 작성한 '폴더'/'파일명'으로 입력
