Basic_MVC6(Ajax)

environment-> intelij(Ultimate)+springInitialize+templateEngine(Mustache)
fronted : bootstrap

 

GIT-HUB      ▶github.com/KBY-TECH/SpringBasic_MVC2
#SpringBasic_MVC5

 

 

기능 구현 :

{

1.AJax 처리(댓글 달기 및 댓글 제거)

2.리펙토링(중복 코드 제거.)

   domain >> class들의 부모 객체만들기(ex: @MappedSuperclass)

    중복제거요소 : equlas Override method 제거 및 id 값 , create,modify time 공통적 관리

 

}

 

 

 

1.AJax 처리(댓글 달기 및 댓글 제거)

 

댓글추가)

detail page <script>   /    $ "". 해당 classname 해당속성[해당속성의 속성].눌렀을때(함수를실행)"

e.prventDefault는 해당 값이 서버로 전달되는 것을 잠시 일시 중지하는 것으로 생각하면 된다.

const x에는 해당 클래스 네임을 가지고 있는 것을 가지고와 해당 속성값중 action이라는 속성의 값을 가져와 해당 서버로 넘겨주고 success를 통하여 밑에 코드에서 만들어 놓은 html 자바스크립트 파일을 가지고와 format을 통해 해당 {0} {1} .. 등에 값을 채워 넣어준 후! qna-comment-slipp-articles의 class명을 가진 태그에 해당 자바스크립트로 정의 html 소스를 앞에 붙어준다는 prepand를 사용하였다. 하지만 실질적으로 정렬은 domain class에 board 부분의 orderBy를 오름차순 또는 내리차순으로 정의해야 실질적으로 바뀌게 된다. 네트워크 탭을 활용하여 서버로 넘어가기 전에 값들을 console.log로 확인할 수 있다. format method 를 재정의 하는 코드는 가져와서 사용하였다.

 

**format OverRide

<script>

String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match
;
});
};

</script>

 

 

해당 html을 삽입한다.

{0},{1} ... 은 인자이다. 해당 인자의 0번째에는 1번쨰 인자값이...,{1}에는 2번쨰 인자값이.. 들어간다. 머스테치 문법과 비슷하며 { } 괄호를 한번만 써야한다.

 

 

 

domain answer controller

*해당 주석 처리의 부분은 기존의 ajax전의 코드이다.

현재 세션을 할당받은 로그인 사용자인지 판별 후 해당 해당 세션을 가진 사용자정보와 해당 댓글에 남기는 게시판의 인스턴스를 가져와 해당 정보를 Answer 에 저장한다(생성자를 통하여 저장) board.addAnswer() 메소드는 해당 댓글이 몇개나 적혀있는지 알기위해 추가한 메소드 이며 해당 board클래스에 public Integer counterOfanswer=0; 추가한 것이다. 이전과는 다르게 String 을 반화하는 template url 을 매핑해 주었으며 redirect를 통해 페이지를 새로고침한 것에서 벗어나 사용자와 더 빠르게 비동기적으로 통신할 수 있게 된 것이다. return 값은 해당 템플릿 url 이 아닌 answer 객체 자체이므로 return 값은 answerRepository.save(answer)을 함으로써 해당 DB에 정보를 저장함과 동시에 반환 값은 Answer 이다.

 

댓글제거)

detail page <script>

이전 ajax추가와 비슷하게 적용되지만 this의 사용유무를 짚고 넘어가야 한다. this는 각 위치에 따라 가져오는 값이 달라지므로 주의해야 한다. 맨 처음 도입부터 this라는 객체의 정보를 변수에 저장하여 해당 this 위치에 가장 가까운 artle이라는 태그를 지움으로써 비동기적인 처리방식이 적용되는 것이다.

AnswerController

저번 시간에 구현하였던 Result 를 통해 서버에 도착한 것들이 정상적인 상태인지 비정상적인지만을 체크하는 것이다. 만약 다르다면 서버에 모든 코드가 수행되지 않고 일부 수행만을 하게 될겄이다. 해당 게시물의 아이디와 해당 댓글의 번호를 인자로 가져오며 우선 로그인 여부를 판단 후 해당 댓글 작성자가 로그인한 사용자와 같은지 판별 후 해당 댓글을 제거한다 그리고 return 으로는 Result.ok() 를 반환하여 해당 상태가 잘 전달되었음을 뜻한다.

추가적으로 deleteAnswer는 해당 게시글의 답변의 수를 제거하기 위한 메소드로 위해 addAnswer가 동일하며 boardRepository에 저장하는 이유는 해당 게시글의 답변의 수가 DB에는 반영이 되지 않으므로 직접 저장을 해줘야 한다.

 

json 형식의 데이터들은 각 도메인 안에 있는 여러 클래스 들은 toString 으로 데이터가 표시 될 것이다.

 

※Jsonproperty는 해당 프로퍼티는 json 형식으로 보일수 있는 속성을 표시한 것이다. pw나 지극히 개인적인 정보들은 걸어두어선 안되며 공개적으로 확인할 때에서 이 애노테이션을 기재한다.

 

 

2.리펙토링(중복 코드 제거.)

 

 

Domail package 안에 class 생성.

이것은 각 domain 디렉토리 안에있는 중복된 코드를 제거하기 위한 상위 개념 즉 부모 클래스 이다. 해당 id 값을 설정하는 것부터 해당 생성날짜 수정날짜 그리고 equlas 함수의 재정의 등이 겹쳐 코드를 보다 더 간편하기 위해서 이다.

@MappedSuperclass 어노테이션을 사용함으로 부모객체라는 것을 알려주는 것이다. 스프링부트에서 알아서 생성해주는 것이 있어 일일히 코드를 다 작성하지 않아도 되는 편리함을 갖다준다 그리고 해당 main 메소드에 @EnableJpaAuditing // mapped 애노테이션의 자동 생성날짜,수정날짜가 적용된다.

을 추가한다. 그래야 이 JPA가 적용이 된다.

해당 중복되는 id 그리고 생성날짜 수정날짜를 만들어주므로 중복된 코드를 모두 모아 이 클래스를 상속하기만 하면 된다.