Chapter.09 : 게시판 기능 보완하기

"스프링부트와 AWS로 혼자 구현하는 웹 서비스" 라는 책을 바탕으로 학습목적의 프로젝트를 진행하고 있습니다. 

 

소스 : https://github.com/ironmask431/springboot_aws_01

 

Chapter.09 : 게시판 기능 보완하기

스프링부트 프로젝트를 AWS EC2 서버에 배포하고, 서버에서 구동및 기능 테스트도 완료되었으니, 

게시판 기능을 보완해보기로 했습니다. 

9.1 작성자명 text 입력방식 에서 로그인유저의 이름으로 자동입력 되도록 수정

1-1. IndexController.java

postsSave 에 "@LoginUser SessionUser user" 추가 

@GetMapping("/posts/save")
public String postsSave(Model model, @LoginUser SessionUser user){
    if(user != null){
        model.addAttribute("name",user.getName());
    }
    return "posts-save";
}

1-2. posts-save.mustache
작성자 부분 수정 value="{{userName}}" readonly 추가

<input type="text" class="form-control" id="author" value="{{name}}" readonly>

9.2 글 작성시 유효성 검사 추가

2-1. index.js 

function save, update에 유효성 검사 추가 

if(data.title == ''){
    alert('제목을 입력하세요');
    return;
}
if(data.content == ''){
    alert('내용을 입력하세요');
    return;
}

9.3 글 수정, 삭제는 자신이 쓴 글만 가능하도록 수정 

3-1. Posts.java

entity에 Long userId (작성자id)필드추가 

@Column(columnDefinition = "bigint(20)", nullable = false)
private Long userId;

@Builder //해당클래스의 빌더패턴 생성. 생성자 대신에 @Builder으로 값을 채워주는게 명확하게 인식가능
public Posts(String title, String content, String author, Long userId){
    this.title = title;
    this.content = content;
    this.author = author;
    this.userId = userId;
}

 

Posts 에 userId 필드가 추가되었으므로, Posts와 연관된 다른 파일들도 수정해준다.

PostsResponseDto.java
PostsSaveRequestDto.java
PostsRepositoryTest.java
PostsApiControllerTest.java

 

3-2. DB - posts 테이블에 userId (작성자id) 컬럼 추가

alter table posts add (user_id bigint(20) not null);

JPA Entity 의 필드명 userId 라면 
실 테이블 컬럼은 user_id 로 이름지어줘야함. (JPA 매핑규칙 인듯)

자료형은 user테이블의 id필드의 자료형인 bigint(20)과 일치시킴.

 

 

3-3. 글수정, 삭제시 글작성 userId 와 로그인한 사람의 id가 일치해야만 가능하도록 수정
sessionUser.java

"id" 항목 추가 (user.id)

private Long id;

public SessionUser(User user){
    this.name = user.getName();
    this.email = user.getEmail();
    this.picture = user.getPicture();
    this.id = user.getId();
}

 

PostsSaveRequestDto.java

@Setter추가. (PostService.save 시 userId 입력력용)

@Getter
@Setter
@NoArgsConstructor
public class PostsSaveRequestDto

PostsApiController.java

save,update,delete 에 @LoginUser SessionUser user 인자값추가

//게시글 저장, id return
@PostMapping("/api/v1/posts")
public Long save(@RequestBody PostsSaveRequestDto requestDto, @LoginUser SessionUser user){
    return postsService.save(requestDto, user);
}

//게시글 수정
@PutMapping("/api/v1/posts/{id}")
public Long update(@PathVariable Long id, @RequestBody PostUpdateRequestDto requestDto, @LoginUser SessionUser user){
    return postsService.update(id,requestDto, user);
}

//게시글 삭제
@DeleteMapping("/api/v1/posts/{id}")
public Long Delete(@PathVariable Long id, @LoginUser SessionUser user){
    return postsService.delete(id, user);
}

 

PostService.java

save,update,delete 에 sessionUser를 인자값으로 받아서
save 시에는 sessionUser.id를 posts.userId로 입력되도록함.
update,delete 시에는 posts.userId와 sessionUser.id가 일치할 경우는 update,delete 실행,
일치하지 않을 경우는 -1 return 하며, update,delete 실행하지않음.

@Transactional
public Long save(PostsSaveRequestDto requestDto, SessionUser user){
    if(user != null) requestDto.setUserId(user.getId());
    return postsRepository.save(requestDto.toEntity()).getId();
}

@Transactional
public Long update(Long id, PostUpdateRequestDto requestDto, SessionUser user){
    Posts posts = postsRepository.findById(id)
            .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id="+id));
    //글의 작성자id와 로그인유저의 id가 불일치하면 수정불가
    if(user != null && !posts.getUserId().equals(user.getId())){
        return -1L;
    }
    posts.update(requestDto.getTitle(), requestDto.getContent());
    return id;
}

@Transactional
public Long delete(Long id, SessionUser user){
    Posts posts = postsRepository.findById(id)
            .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id="+id));
    //글의 작성자id와 로그인유저의 id가 불일치하면 삭제불가
    if(user != null && !posts.getUserId().equals(user.getId())){
        return -1L;
    }
    postsRepository.delete(posts);
    return id;
}

index.js 

update, delete ajax 에서 response 값 < 0 일때 alert 노출

//update
$.ajax({
    type:'PUT'
    ,url:'/api/v1/posts/'+id
    ,dataType:'json'
    ,contentType:'application/json; charset=utf-8'
    ,data:JSON.stringify(data)
})
.done(function(res){
    console.log(res);
    if(res < 0){
        alert('자신의 글만 수정할 수 있습니다.')
    }else{
        alert('수정되었습니다.');
        location.href='/';
    }
})
.fail(function(error){
    alert(JSON.stringify(error));
})

//delete
$.ajax({
    type:'DELETE'
    ,url:'/api/v1/posts/'+id
    ,dataType:'json'
    ,contentType:'application/json; charset=utf-8'
})
.done(function(res){
    console.log(res);
    if(res < 0){
        alert('자신의 글만 삭제할 수 있습니다.')
    }else{
        alert('삭제되었습니다.');
        location.href='/';
    }
})
.fail(function(error){
    alert(JSON.stringify(error));
})

> 전체 테스트코드 실행 passed
> 로컬 - 브라우저테스트 정상
> local gradle 클린,빌드 정상
> 커밋,푸시 완료
> ec2 서버 git pull 
> ec2 서버 gradle 클린, 빌드 > 정상
> ec2 서버구동 정상

> 서버 - 브라우저테스트 정상