Cooper's devlog

6-2. AJAX를 활용한 답변 추가 2 본문

Programming/Spring-boot

6-2. AJAX를 활용한 답변 추가 2

cooper_dev 2020. 8. 3. 01:18

1. 강의 링크

https://www.youtube.com/watch?v=WGYnF0F2ifY&list=PLqaSEyuwXkSppQAjwjXZgKkjWbFoUdNXC&index=49

2. 학습 목표

AJAX를 활용해 답변을 추가하는 기능 구현 두번째 동영상

3. 과정

> 사용자의 정보를 조회하는 contorller를 작성할 예정 + 결과값을 json형태로 입력받을 예정

 

1. apiUserController 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package net.slipp.web;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import net.slipp.domain.User;
import net.slipp.domain.UserRepository;
 
@RestController
@RequestMapping("/api/users")
public class ApiUserController {
    @Autowired
    private UserRepository userRepository;
    
    @GetMapping("/{id}")
    public User show(@PathVariable Long id) {
        return userRepository.findById(id).get();
    }
}
 
  

-@RestController : data를 json형태로 받아오겠다는 의미.

2. json형태로 출력하는 방법

(1) 객체에 getter로 선언된 경우

(2) @JsonProperty로 선언된 경우(@JsonIgnore를 이용하면 무시가능)

 

question.java
answer.java
user.java

3. chrome 개발자 도구 console 내용 확인

chrome 개발자 도구 console 내용

 

4. 작성 내용 비동기 통신 작동 기능 완성하기

(1)동적 작동 가능 js script 다운받기

https://github.com/slipp/web-application-server/blob/master/webapp/js/scripts.js

https://github.com/slipp/web-application-server/blob/master/webapp/qna/show.html

하단 js scripts

 

-script.js에 내용 추가

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function onSuccess(data, status){
    console.log(data);
    var answerTemplate = $("#answerTemplate").html();
    var template = answerTemplate.format(data.writer.userId, data.formattedCreateDate, data.contents, data.id, data.id); 
    //해당 결과값 : {0},{1},{2}... 위치로 이동
    //answerTemplate : 해당 선언된 js script id
    //format : 하단에 선언한 메소드
    
    $(".qna-comment-slipp-articles").prepend(template);//최근 값을 위에 올리고 싶을 때 : prepend
    $("textarea[name=contents]").val("");//작성 창 초기화
}
 
String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) {
    return typeof args[number] != 'undefined'
        ? args[number]
        : match
        ;
  });
};
 cs
  • var template : #answerTemplate(show.html id)를 불러와서 format에 데이터를 입력하겠다. (ex.data.write.userId = {0}) 
  • $(.qna-commnet-slipp-articles").prepend(template) : 최근의 값을 위에 올리고 싶을 때 사용
  • $("textarea[name=contents]").vale("") : 작성 창 초기화

-show.html 내용 추가

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
<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>
                <form class="delete-answer-form" action="/api/questions/{3}/answers/{4}" method="POST">
                    <input type="hidden" name="_method" value="DELETE">
                     <button type="submit" class="delete-answer-button">삭제</button>
                </form>
            </li>
        </ul>
        </div>
    </article>
</script>
 cs

 

 

 

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

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