会員収入

会員加入(ajax使用)
jspファイルを使用した原価入力フォームの作成
(Never BarとPutterはincludeを受け入れます)

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

<%@ include file="../layout/hader.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="password">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
		<div class="form-group">
			<label for="email">Email</label> <input type="email" class="form-control" placeholder="Enter email" id="email">
		</div>
		
	</form>
		<button id="btn-save" class="btn btn-primary">회원가입</button>

</div>
<script src="/blog/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

user.js
()ではなく関数()を使用する場合は、initの前にlet this=thisという変数thisを作成します.このために作成した変数はsave()で使用する必要があります.

let index1 = {
	init: function() {
		$("#btn-save").on("click", () => {
			this.save();
		});
	},
    
  save: function() {
		//alert('save함수 실행');
		let data = {
			username: $("#username").val(),
			password: $("#password").val(),
			email: $("#email").val()
		};  
        
        //ajax통신을 이용해서 3개의 데이터를 json으로 변경 -> insert요청
		//ajax호출시 default가 비동기 호출
   		$.ajax({
			//통신수행(회원가입수행)
			type: "POST",
			url: "/blog/api/user",
			data:JSON.stringify(data),  //->데이터 형식은 json으로 변경해줌  http body 데이터
			contentType:"application/json;charset=utf-8", //body데이터가 어떤타입인지
			dateType:"json"  //응답이 왔을때 기본적으로 모든것이 문자열(jons형태의 문자열이라면=> 자바스크립트 오프젝드로 변환)
		}).done(function(resp) {
			//수행정상일때
			alert("회원가입이 완료되었습니다.");
			location.href="/blog";
		}).fail(function(error) {
			//실패일때
			alert(JSON.stringify(error));
		}); 


	}

}
index1.init();

なぜajaxを使うのですか?
1.html形式ではなくJSON形式のデータを受信するため(アプリケーションでもWebプログラムでも1台のサーバを使用)
->ex)会員入金要求->db->通常->データの送信->ホームページの呼び出し->ホームページの送信
2.非同期(<->)通信を行うために、

responsDto
(ajax応答のデータ(?)

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponsDto<T> {

	int status;
	T data;
}

service

//스프링이 컴포넌트 스캔을 통해서 Bean에 등록해 줌.Ioc를 해준다
@Service
public class UserService {

	@Autowired
	private UserRepository userRepository;
	
	//회원가입이 하나의 트랜잭션으로 묶임
	@Transactional
	public Integer 회원가입(User user) {
		try {
			userRepository.save(user);
			return 1;
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("회원가입(): "+ e.getMessage());
		}
		return -1;
	}
}

サービスとは?
サービスは、1つのトランザクションであってもよいし、1つ以上のトランザクションの組合せであってもよいし、1つのトランザクションであってもよい
ex)振込サービス(Aの通帳に-3万元update()、Bの通帳に+3万元update()=>2個update()、それを取引にする
**各取引の小単位(?)

controller

//데이터만 리터함으로
@RestController
public class UserApiController {

	@Autowired
	private UserService userService;
	
	
	@PostMapping("/api/user")
	public ResponsDto<Integer> save(@RequestBody User user) {
		System.out.println("save 호출됨");
		//실제 db에 insert 가 수행되고 return으로.
		user.setRole(RoleType.USER); //강제 입력
		int result = userService.회원가입(user); // 결과는 1 or -1  
		return new ResponsDto<Integer>(HttpStatus.OK.value(), result);
	}
}