(국비교육) 77 - Spring boot + vue 게시판 만들기 3 ( 수정하기 + 삭제하기)

■ 수정 삭제 버튼 만들기 (sep19)

 

 

수정 삭제 버튼을 만들어준다. 

 

https://www.bottlehs.com/vue/vue-js-axios-%EB%B0%8F-rest-api-%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-crud-%EA%B5%AC%ED%98%84/

Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현

 

 

메소드에 deletepost() 메서드를 만들어준다.

detail 에 있는 bno 값 제대로 불러지는 지 확인한다. 

 

 

알람 확인 

 

 

confirm 으로 삭제여부 확인하고 알람창 띄우기

 

 

axios.post 처리한다.

url 적어주고  param 으로 값 담아서 보낸다.

 

※

전역변수처리하면 이후에 axios 도 매번 import 안해도 된다.

main.js 에서 나중에 처리할 것이다.

 

 

res 와 err 를 적어 통신 성공 및 실패 시 알람이 뜨게 설정한다.

 

 

아직 전역변수 처리하지 않아 다음과 같이 바꿔준다.

 

 

postmapping 처리하고 값이 오는지 확인한다. 

 

 

삭제하는 delete 함수 만들어 준다.

 

 

0 이 삭제처리임으로 update 로 설정해준다. 

 

 

json 에 result 로 바꿔준다.

 

 

값이 1로 넘어오면(영향받은 행이 있다면) /boardList 로 이동하게 설정해준다. 

 

 

requestBody로 값 설정한 것을 나중에 전달값으로 사용할 것이다.

 

 

여러개의 값을 담을 것이기 때문에 params 이며,

requestBody 에 점점 쌓을 것이다. 

 

 

main.js 에서 axios 를 전역변수 처리해준다.

이제 $axios 로 부르면 쓸 수 있다. 

 

 

서버도 마찬가지로 전역변수 처리해준다.

이제 $sever을 통해 간편하게 부르며 나중에 서버가 바뀌더라도 main.js 만 바꾸면 돼서 쉽게 변경할 수 있다.

 

 

이제 전역변수로 axios 와 server 를 부를 것이다.

다음과 같이 불러주고 import 했던 axios 를 삭제해준다. 

 

 

보드도 동일하게 바꿔준다. 

 

 

수정하는 메서드도 만들어준다.

수정확인을 누르면 update 로 넘어간다.

 

 

해당하는 UpdatePage 만들어준다.

 

 

index.js 에 라우터 설정을 해준다. 

 

 

수정하기 버튼 클릭 시 update url 로 이동한다. 

 

 

받아올 값들을 detail 객체를 만들어서 넣어줄 것이다.

 

 

이전에 detail 에 넣었던 값들을 담아서 쓰기 위해서 mounted 에 boardDetail을 넣는다.

 

 

첫번째는 서버에서 받아온 값을 detail 객체에 넣는다.

두번째 및 세 번째는 detail 에서 받은 btitle과 bcontent를 title 과 content 에 넣는다는 것이다. 

 

 

detailpage에서 수정 버튼 클릭 시 query 로 값을 가져간다.  

 

 

updatepage에서 해당 값을 사용하기 위함이다. 

 

 

template 에서 v-model에 title 과 content 를 넣었기 때문에 자동으로 글 가져온 것이다.

 

 

patch 로 설정해준다. 

난 여기서 server 앞에 $생략해서 오류떴다. 참고하자.

 

• 불러오기 : axios.get(url[, config])
• 입력하기 : axios.post(url[, data[, config]])
• 수정하기 : axios.patch(url[, data[, config]])
• 삭제하기 : axios.delete(url[, config])

 

https://ux.stories.pe.kr/138

Vue.js에서 axios를 사용하여 서버통신하는 방법

 

 

변경된 값이 들어오는 것 확인 가능하다. 

 

 

bno 값도 같이 담아준다. 

 

 

수정하기 버튼을 누르면 데이터베이스에 글이 새롭게 저장된다. 

 

* 요청사항

댓글 업로드하고 삭제하기 vue 로 만들어보기