SpringBoot) 블로그 프로젝트_10. 글 수정, 삭제, 회원 수정

 

 

글 수정, 삭제 및 회원 수정 구현하기!

 

---

1. 글 수정하기

 

• updateForm

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>

<div class="container">
	<form>
	<input type="hidden" id="id" value="${board.id }"/>
		<div class="form-group">
			 <input value="${board.title}"  type="text" name="username" class="form-control" placeholder="Enter title" id="title">
		</div>

		<div class="form-group">
			<textarea class="form-control summernote" rows="5" id="content">${board.content }</textarea>
		</div>
	</form>
	<button id="btn-update" class="btn btn-primary">글수정 완료</button>
</div>

<script>
	$('.summernote').summernote({
		tabsize : 2,
		height : 300
	});
</script>
<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp"%>

 

• BoardRepository

public interface BoardRepository  extends JpaRepository<Board, Integer>{}

 

• BoardApiController

@PutMapping("/api/board/{id}") //요청 method가 다르기 때문 mapping 주소 같아도 상관 없음
public ResponseDto<Integer> update(@PathVariable int id, @RequestBody Board board) {
    boardService.글수정하기(id, board);
    return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
}

 

• BoardService

@Transactional
public void 글수정하기(int id, Board requestBoard) {//수정하기 위해 영속성 필요
    Board board = boardRepository.findById(id)
            .orElseThrow(()-> {
                return new IllegalArgumentException("글 찾기 실패: 아이디를 찾을 수 없습니다.");			
            }); //영속화 완료
    board.setTitle(requestBoard.getTitle());
    board.setContent(requestBoard.getContent());
    //해당 함수로 종료시 (service 종료시) 트랜잭션이 종료된다.
    //이때 더티체킹 - 자동업데이트가 됨 - db flush 
}

 

 

2. 글 삭제하기

 

 

• BoardApiController

@DeleteMapping("/api/board/{id}")
public ResponseDto<Integer> deleteById(@PathVariable int id){
    boardService.글삭제하기(id);
    return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);	// 200 : http 전송 성공
}

 

• BoardService

@Transactional
public void 글삭제하기 (int id) {
    boardRepository.deleteById(id);
}

 

 

 

 

3. 회원 수정하기

 

 

• UserApiController

@PutMapping("/user")
public ResponseDto<Integer> update(@RequestBody User user) {
    userService.회원수정(user);
    //여기서 트랜잭션이 종료되기 때문에 DB값은 변경이 되었음.
    //하지만 세션값은 변경되지 않은 상태이기 때문에 우리가 직접 세션값을 변경해줌
    Authentication authentication = authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(user.getUsername(), user.getPassword()));
    SecurityContextHolder.getContext().setAuthentication(authentication);

    return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
}

 

• UserService

@Transactional
public void 회원수정(User user) {
    // 수정시, 영속성 컨텍스트 User 오브젝트를 영속화시키고 영속화된 User 오브젝트를 수정
    // select를해서 User 오브젝트를 DB로 부터 가져오는 이유는 영속화를 하기 위함
    // 영속화된 오브젝트를 변경하면 자동으로 DB에 update문을 날려주기 때문!!
    User persistance = userRepository.findById(user.getId()).orElseThrow(() -> {
        return new IllegalArgumentException("회원찾기 실패");
    });

    // Validate 체크 => oauth 필드에 값이 없으면 수정 가능
    if (persistance.getOauth() == null || persistance.getOauth().equals("")) {
        String rawPassword = user.getPassword();
        String encPassword = encoder.encode(rawPassword);
        persistance.setPassword(encPassword);
        persistance.setEmail(user.getEmail());
    }
    // 회원 수정 함수 종료시 = 서비스 종료 = 트랜잭션 종료 = commit 자동으로 됨
    // 영속화된 persistance 객체의 변화가 감지되면 더티체킹되어 update문을 날려줌
}

 

 

 

• 회원 수정. js

$("#btn-update").on("click", () => {
        this.update();
    });

js 페이지 상단에 위치

//회원수정
update: function() {

    let data = {
        id: $("#id").val(),
        username: $("#username").val(),
        password: $("#password").val(),
        email: $("#email").val()
    };

    $.ajax({
        type: "PUT",
        url:"/user",
        data: JSON.stringify(data), 
        contentType: "application/json; charset=utf-8", 
        dataType:"json"
    }).done(function(resp){
        alert("회원수정이 완료되었습니다.");
        location.href="/";
    }).fail(function(error){
        alert(JSON.stringify(error));
    });