Contents
구현 과정일단 구현이 된 형태는 JoinForm에 접속하여 ID, PW, E-mail을 입력하면 main으로 넘어가고 아닌 경우에는 error를 발생하는 웹 사이트를 구현하였다. 코드를 참고하면서 설명을 읽어보면 더욱 이해가 될 것이다. 참고로 톰캣과 스프링에서 디스패쳐를 구현 해주기 때문에 나는 유효성 검사와 컨트롤러만 구현하였다. 이제부터는 쭉 이렇게 구현이 될 것이니 참고하기 바란다!
- 코드 모음
Controller
UserController
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
//@RestController // 리턴시에 그 문자를 그대로 응답
@Controller // 리턴시에 파일을 응답 -> 파일을 찾아서 포워드(forword) 해줌
public class UserController {
@GetMapping("/joinForm")
public String joinForm() {
return "joinForm";
}
@PostMapping("/join")
public String join(String username, String password, String email) {
// String username = request.getParameter("username");
// String password = request.getParameter("password");
// String email = request.getParameter("email");
System.out.println("username : " + username);
System.out.println("password : " + password);
System.out.println("email : " + email);
// 1
if (username.length() > 10) {
return "error-404";
}
// 2
return "redirect:/main";
}
// @GetMapping("/joinForm/{id}")
// public String joinForm(@PathVariable int id) {
// System.out.println("id : " + id);
// return "joinForm";
// } // 이러면 뒤에 어떤 숫자를 넣든 같은 페이지가 나온다.
}BoardController
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class BoardController {
@GetMapping("/main")
public String main() {
return "main";
}
}mustache (템플릿 엔진)
mustache 파일 만드는법
템플릿 폴더 밑에 만든 확장자 파일을 mustache를 만들어서 찾으련는 클레스에 @controller로 어노테이션을 붙이면
main
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>main page</h1>
<hr>
</body>
</html>joinForm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>회원가입 페이지</h1>
<hr>
<form action="/join" method="post">
<input type="text" name="username" placeholder="username" required maxlength="10">
<input type="password" name="password" placeholder="password" required>
<input type="email" name="email" placeholder="email" required>
<button>
회원 가입
</button>
</form>
</body>
</html>error-404
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>에러 : 잘못된 요청을 하셨어요</h1>
</body>
</html>결국에는 코드를 보면 앞의 정리한 내용과 동일한 것이 대부분이다. 그러니 새롭게 알게 된 내용을 부분의 내용을 들고 와서 따로 정리하겠다. Controller-UserController 부분의 어느 코드인지 언급 하여 설명을 적어 두겠다.
구현 과정
mustache - joinForm
- input의 데이터를 Button 클릭 시 action(안에적은 내용으로 이동)을 받도록 하는 방법 (액션 발동) → Button을 submit 으로 type을 지정하면 가능한데 form 안의 Button은 기본 값으로 submit type을 가지고 있어서 생략이 가능하다!
HTML에서
<form> 태그는 사용자 입력을 받기 위한 폼을 정의하는 태그입니다. 폼은 웹 페이지에서 사용자가 데이터를 입력하고 서버로 제출할 수 있는 기능을 제공합니다.<form action="/join" method="post">
<input type="text" name="username" placeholder="username" required maxlength="10">
<input type="password" name="password" placeholder="password" required>
<input type="email" name="email" placeholder="email" required>
<button>
회원 가입
</button>
</form>프론트의 유효성 검사 방법
required → 입력 하기전에 넘어가지 않도록 한다. 값이 없으면 submit 안되도록maxlength="4" → 4이상으로 입력이 안됨
프론트의 유효성 검사하지만 비정상적인 접근으로 뚫릴 수 있으니까 백도 유효성 검사를 꼭 해야 한다.
required,maxlength="10"
Controller - UserController(코드 확인하기)
- “mustache - joinForm” 에서 입력 받는 키값의 데이터를 받는 방법
@PostMapping("/join")
public String join(HttpServletRequest request) {
String username = request.getParameter("username");
String password = request.getParameter("password");
String email = request.getParameter("email");
System.out.println("username : " + username);
System.out.println("password : " + password);
System.out.println("email : " + email);
return "main";
}@PostMapping("/join")
public String join(String username, String password, String email) {
System.out.println("username : " + username);
System.out.println("password : " + password);
System.out.println("email : " + email);
return "main";
}- 만들어 둔 컨트롤러가 있으면 “리다이렉션(Redirection)”을 해야 한다.
자르 파일: .java 실행파일
자르파일로 구워서 실행시키려고
많은 자바 파일들을 저장을 하면 .class로 바뀐다 실행이 되려면 jar파일로 바껴야 되는데.
Share article
