[Spring-boot] 회원가입

회원가입 form태그의 action 옵션이 아닌 js을 이용해서 회원가입을 만들어 보겠다.

✅joinForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>


<div class="container">
	<form>
		<div class="form-group">
			<label for="username">Username:</label> <input type="text" class="form-control" placeholder="Enter username" id="username">
		</div>
		<div class="form-group">
			<label for="email">Email :</label> <input type="email" class="form-control" placeholder="Enter email" id="email">
		</div>
		<div class="form-group">
			<label for="password">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
	</form>
	<button id="btn-save" class="btn btn-primary">회원가입완료</button>
</div>

<script src="${pageContext.request.contextPath}/js/user.js"></script>

<%@ include file="../layout/footer.jsp"%>

form태그의 옵션을 사용하지 않고, js(ajax)을 사용하여 회원가입을 진행 해보겠다.

✅user.js

let index = {
    init: function(){
		$("#btn-save").on("click", () => { // function(){} , ()=>{} this를 바인딩하기 위해서!!
			this.save();
		});
	},
	
	save: function(){
		// alert('user의 save함수 호출 됨')
		let data = {
			username: $("#username").val(),
			password: $("#password").val(),
			email: $("#email").val()
			
		};
		// console.log(data);
		
		//ajax호출 시 default가 비동기 호출
		//통신을 이용해서 3개의 데이터를 json으로 변경하여 insert를 요청!!
		$.ajax({
			//회원가입 수행 요청
			type: "POST",
			url: "/blog/api/user",
			data: JSON.stringify(data), //JSON 문자열 http body데이터
			contentType: "application/json; charset=utf-8", // body 데이터가 어떤 타입인지 (MIME)
			dataType: "json" // 요청을 서버로해서 응답이 왔을 때 기본적으로 모든 것이 문자열 (생긴게 json이라면 ) => javascript 오브젝트
		}).done(function(resp){
			alert("회원가입이 완료되었습니다." + resp);
			console.log(resp);
			location.href = "/blog";
		}).fail(function(error){
			alert(Json.stringify(error));
		});  
		
	}
	
}

index.init();

✅ResponseDto

package com.cos.blog.dto;

import org.springframework.http.HttpStatus;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDto<T> {
   
	HttpStatus status;
	T data;
}

✅UserApiController

package com.cos.blog.controller.api;

import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.cos.blog.dto.ResponseDto;
import com.cos.blog.model.User;

//데이터만 
@RestController
public class UserApiController {
    
	@PostMapping("/api/user")
	public ResponseDto<Integer> save(@RequestBody User user) {
		
		System.out.println("APIController");
		
		// 실제로 DB에 insert를 하고 아래에서 return이 되게 한다
		return new ResponseDto<Integer>(HttpStatus.OK, 1); // 자바오브젝트를 JSON으로 변환해서 리턴 (Jackson)
		
		//return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
	}
}