Cooper's devlog

6-3. AJAX를 활용해 답변 삭제 기능 구현 본문

Programming/Spring-boot

6-3. AJAX를 활용해 답변 삭제 기능 구현

cooper_dev 2020. 8. 3. 16:56

1. 강의 링크

https://www.youtube.com/watch?v=xKjEmoUYNC8&list=PLqaSEyuwXkSppQAjwjXZgKkjWbFoUdNXC&index=50

2. 강의 목표

  • AJAX를 활용해 답변을 삭제하는 기능 구현

 

3. 과정

1. show.html : js.script 부분 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/template" id="answerTemplate">
    <article class="article">
        <div class="article-header">
            <div class="article-header-thumb">
                <img src="https://graph.facebook.com/v2.3/1324855987/picture" class="article-author-thumb" alt="">
            </div>
            <div class="article-header-text">
                <a href="#" class="article-author-name">{0}</a>
                <div class="article-header-time">{1}</div>
            </div>
        </div>
        <div class="article-doc comment-doc">
            {2}
        </div>
        <div class="article-util">
        <ul class="article-util-list">
            <li>
                <a class="link-modify-article" href="/api/qna/updateAnswer/{3}">수정</a>
            </li>
            <li>
                <a class="link-delete-article" href="/api/questions/{3}/answers/{4}">삭제</a>
            </li>
        </ul>
        </div>
    </article>
</script>
  

 

  • 21line, a tag 변경 및 href 수정

 

2. show.html : html tag 변경

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<article class="article" id="answer-1405">
<div class="article-header">
<div class="article-header-thumb">
<img src="https://graph.facebook.com/v2.3/1324855987/picture" class="article-author-thumb" alt="">
     </div>
     <div class="article-header-text">
     <a href="/users/1/자바지기" class="article-author-name">{{writer.userId}}</a>
        <a href="#answer-1434" class="article-header-time" title="퍼머링크">
         {{formattedCreateDate}}
        </a>
     </div>
  </div>
  <div class="article-doc comment-doc">
  <p>{{contents}}</p>
  </div>
  <div class="article-util">
  <ul class="article-util-list">
     <li>
        <a class="link-modify-article" href="">수정</a>
        </li>
        <li>
        <a class="link-delete-article" href="/api/questions/{{question.id}}/answers/{{id}}">수정</a>
        </li>
     </ul>
  </div>
</article>
  
  • 25line : a tag 변경 및 href 수정

 

3. scripts.js 부분 변경

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(".link-delete-article").click(deleteAnswer);
 
$(document).on('click', '.link-delete-article', deleteAnswer);
 
function deleteAnswer(e) {
    
    e.preventDefault();
 
    var deleteBtn = $(this);
 
    var url = $(this).attr("href");
    console.log("url :"+url);
 
    $.ajax({
 
        type : 'delete',
        url : url,
        dataType : 'json',
 
        error : function (xhr, status) {
            console.log("error");
 
        },
        success : function (data, status) {
            console.log(data);
 
            if(data.valid) {
                deleteBtn.closest("article").remove();
            }
        }
 
    });
 
}
  

 

  • $(".link-delete-article").click(deleteAnswer);
    • link-delete-article class를 클릭 → deleteAnswer method 호출
  • e.prevenDefault(); : 페이지 전환 방지
  • $(this) : 이벤트가 발생한 요소의 정보들이 Object로 표시
  • $.ajax 부분 설명
    • type : 요청하는 타입 형태(ex. GET, POST, PUT, DELETE)
    • url : 요청하는 url 종류
    • dataType : 통신하고자 하는 데이터 타입(ex. json)
    • error : 에러 시, 작동 
    • success : 요청 성공 시, 작동

 

4. ApiAnswerController 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
package net.slipp.web;
 
import javax.servlet.http.HttpSession;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import net.slipp.domain.Answer;
import net.slipp.domain.AnswerRepository;
import net.slipp.domain.Question;
import net.slipp.domain.QuestionRepository;
import net.slipp.domain.Result;
import net.slipp.domain.User;
 
@RestController
@RequestMapping("/api/questions/{questionId}/answers")
public class ApiAnswerController {
    
    @Autowired
    private QuestionRepository questionRepository; 
    
    @Autowired
    private AnswerRepository answerRepository; 
    
    @PostMapping("")
    public Answer create(@PathVariable Long questionId, String contents, HttpSession session) {
        if(!HttpSessionUtils.isLoginUser(session)) {
            return null;
        }
        
        User loginUser = HttpSessionUtils.getUserFromSession(session);
        Question question = questionRepository.findById(questionId).get();
        Answer answer = new Answer(loginUser, question ,contents);
 
        return answerRepository.save(answer);
    }
    
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Long questionId,@PathVariable Long id,HttpSession session) {
                    
            if(!HttpSessionUtils.isLoginUser(session)) {
                        
                        return Result.fail("로그인 해야합니다");
                    }
            User loginUser = HttpSessionUtils.getUserFromSession(session);
            Answer answer = answerRepository.findById(id).get();
            
            if(!answer.isSameWriter(loginUser)) {
                return Result.fail("본인 글만  삭제할수있습니다");
            }
            answerRepository.delete(answer);
            
            return Result.ok();
            
            
    }  
}
 
  
  • create : 댓글 작성 method
  • delete : 댓글 삭제 method

 

'Programming > Spring-boot' 카테고리의 다른 글

6-5. 도메인 클래스에 대한 중복 제거 및 리팩토링  (0) 2020.08.03
6-4. 질문 목록에 답변 수 보여주기 기능 추가  (0) 2020.08.03
6-2. AJAX를 활용한 답변 추가 2  (0) 2020.08.03
6-1. AJAX를 활용한 답변 추가 1  (0) 2020.08.03
5-6. QuestionController 중복 코드 제거 리팩토링  (0) 2020.07.23
'Programming/Spring-boot' Related Articles more
Comments