vue게시판
-
(국비교육) 83 - Spring boot + vue 게시판 만들기 ( 아이디 유효성 검사 + 세션 + 수정/삭제버튼 비활성화 + index 페이지 만들기)개발/국비교육 2023. 10. 6. 14:34
■ 아이디 유효성 검사 v-if 가 참인 경우 해당 문구가 나오게 설정한다. 문구가 처음에는 안나오도록 false 처리 한다. Vue 인스턴스의 데이터 변경을 관찰 / 반응할 때 watch 기능을 쓴다. 입력 시 idInputCheck true 이기 때문에 문구가 뜬다. 길이가 5보다 작은 경우에는 문구가 뜨게 설정하고, 그렇지 않을 경우 문구가 없어지게 설정한다. exec 를 통해 reg 에 해당하는 값이 있는지를 체크한다. 비어있지 않은 경우 그 값을 나오게 설정해서 동작하는지 확인한다. 해당하는 값이 있는경우 slice 를 통해 더이상 입력하지 않게 설정 가능하다. /\s/ 공백을 찾아서 != -1 으로 공백이 있는 경우 문구가 뜨게 설정한다. https://v2.ko.vuejs.org/v2/gui..
-
(국비교육) 77 - Spring boot + vue 게시판 만들기 3 ( 수정하기 + 삭제하기)개발/국비교육 2023. 9. 21. 12:25
■ 수정 삭제 버튼 만들기 (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 구현 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 www.bottlehs.com 메소드에 deletepost() 메서드를 만들어준다. detail 에 있는 bno 값 제대로 불러지는 ..
-
(국비교육) 76 - Spring boot + vue 게시판 만들기 2 + Quill+ 12회차 시험개발/국비교육 2023. 9. 20. 12:32
■ 글쓰기 버튼 만들기 (sep19) 글쓰기 버튼을 만든다. 다음과 같이 만들어진다. write 메소드를 만들어주고 이동 확인하면 된다. WritePage.vue 생성해준다. index.js 에 Writepage 도 라우터에 넣어준다. 글쓰기 영역도 만들어준다. 글쓰기 부분도 꾸며준다. input : title content: textarea 로 설정한다. v 모델을 사용할 것이다. v 모델을 적으면 하단의 return 값이 들어간다. 우리가 입력한 값을 끌고 갈 것이다. write 글쓰기 메소드를 만들어주고 알람이 뜨게 한다. this.title 을 적어줘야 어떤 값인지 인식하고 가져온다. 제목에 입력한 값이 알람창으로 뜬다. saveData 로 저장한 값을 담는다. * 요청사항 vue 책 다 읽고 n..