Vue.js29 Vue.js [다중 파일 업로드 처리] 지난 포스팅에서 springboot로 다중파일 업로드 기능을 구현하면서 vue.js에 관한 얘기를 잠깐 하였는데 이번에 다뤄 보도록 하겠다. 우선 다중파일업로드이기때문에 파일을 1개이상 다중선택이 가능해야 한다. 이것은 input태그의 multiple속성을 사용하면 파일을 바로 여러개 선택가능해진다. ref명을 imageFile로 지정해두었다. @change를 통해 값이 들어오면 자동으로 메소드가 실행되도록 되는데 uplodad메소드에서 imgFile에 선택한 파일이 들어가야한다. 선택한 파일들을 imgFile배열에 넣어야 하는 부분에서 많은 시행착오가 있었다. for문을 사용하지 않아도 ref속성명을 지정해두고 이 값을 이용하면 쉽게 선택한 파일들을 imgFile변수에 넣어줄 수 있게 된다는것을 알게 .. 2022. 10. 31. Vue.js [게시판 카테고리별 검색기능] 게시판 카테고리별 검색기능에 대한 vue.js를 구현해보자 ui에서 검색조건을 추가하고 그에 해당하는 category를 받아와서 param으로 같이 넘겨주면 된다. v-select는 분류를 선택하는 태그이다. items인 keywords에는 카테고리로 사용할 [작성자, 차량명, 지역] 을 담아준다. 3개중 하나의 검색조건을 선택하면 해당하는 문자열이 category에 들어가게 된다. 헤더에 실을 param이 하나 늘어났으므로 키워드 입력후 검색 버튼을 누르면 실행되는 keywordSearch메서드에서 params에 category만 추가해주면 된다! url이 car/search로 바뀐것도 유의하도록 하자. ui에서 검색조건(category) '작성자'로 홍길동(keyword)이 쓴 글을 검색해 보자 홍길.. 2022. 9. 15. Vue.js [게시판 검색기능] Springboot에서 검색기능을 성공적으로 구현하였으니 vue.js로 frontend를 구현해 보도록 하겠다. template안에서 검색란, 검색버튼을 우선 만들어 보았다. 검색버튼을 누르면 keywordSearch라는 메서드가 실행이 된다. keywordSearch 메서드는 axios get호출로 params 3개를 받아오고 있고 v-model인 this.carName -> keyword, page는 초기값이 1인데 jpa 페이징에서는 page 0 값부터 시작이 되어야 하므로 this.page-1 -> page, size는 초기값 5로 지정하여서 그대로 this.size -> size 로 헤더에 param들을 실어준다. 그 후 this.totalpage값도 받아오고, this.users에 게시글 데이.. 2022. 9. 15. Vue.js [썸네일업로드 기능 추가] 지난번 포스팅에서 springboot 썸네일 기능을 추가 했으니 곧바로 Vue.js에도 추가하여 글을 쓰고 확인을 해보자. 우선 CarWrite.vue 템플릿에 썸네일 업로드 를추가한다. 글 추가하기 버튼을 누르면 실행되는 editImage메서드에 FormData안에 밑줄친 thumb를 추가. 여기까지 하면 글 추가하기 페이지에서 썸네일 파일을 올릴수 있게 되고 글 추가시 db에 해당파일명이 들어가게 된다. 그리고 thumb디렉토리에는 이미지파일이 추가가 된다. 직접 test글을 써보았다. 기존에는 url링크를 넣어 thumb를 보여줬었지만 이제 데이터테이블 안의 thumb컬럼에서 저장된 이미지 파일을 보여주기 위해 Car.vue에 assets/thumb경로를 넣어 살짝 수정해주면 된다. 자 이제 수정 .. 2022. 8. 1. Vue.js [회원가입 폼 생성 및 구현] 이번에는 회원가입을 vue.js로 구현해 보았다. 처음 member테이블을 만들때에 fullName컬럼이 없었는데 필요 할것 같아서 우선 컬럼을 추가하는것 부터 시작하였다. 회원가입시에는 FullName, email, Password, nickName, area 컬럼을 가지고 있는 member테이블을 이용하여 회원정보를 관리하도록 하고, 아래와 같이 폼을 만들어 주었다. Password는 check를 통하여 입력한 패스워드가 동일하면 회원가입이 등록되도록 하였다. 또한 아래의 정보들을 모두 입력하여야 회원가입이 되도록 하였고 입력을 하지않은 정보가 있으면 errorMessage가 나오게 하도록 하였다. SignUp.vue 취소 완료 submit 메서드에서 phoneNumber까지 입력이 되어야 axsio.. 2022. 8. 1. Vue.js [팝업창을 이용한 댓글 삭제 구현] 지난번 팝업창을 이용하여 댓글 수정을 구현하였는데 지난 게시글을 참고하면 매우 쉽게 삭제도 구현할 수 있다. 참고!! https://z00h.tistory.com/89 Vue.js [팝업창을 이용한 댓글 수정구현] vue.js로 ui를 구성할때 댓글 수정/삭제시에 기존에는 router를 이용해 수정/삭제 페이지로 이동하여 기능을 처리 하였지만 조금 더 깔끔하게 만들고 싶어서 팝업창을 이용하여 처리 하도록 만들어 z00h.tistory.com 지난 게시물에서 상세하게 다뤄 보았기 때문에 간단하게 보자면 마찬가지로 CarDetail.vue에 CarCommentDel의 댓글 삭제 dialog가 실행되도록 컴포넌트를 등록해주고 자식 컴포넌트 메서드를 호출해주는 부모 컴포넌트 메서드를 만든다. 부모 컴포넌트 메서.. 2022. 8. 1. Vue.js [팝업창을 이용한 댓글 수정구현] vue.js로 ui를 구성할때 댓글 수정/삭제시에 기존에는 router를 이용해 수정/삭제 페이지로 이동하여 기능을 처리 하였지만 조금 더 깔끔하게 만들고 싶어서 팝업창을 이용하여 처리 하도록 만들어 보았다. 팝업창을 이용하면 위와 같이 댓글 수정기능을 처리 할 수 있다. 팝업창을 만들기 위해서는 v-dialog를 사용하여야 하는데 v-dialog의 기본값을 false로 해놓으면 팝업이 없는 상태, true면 팝업창이 뜨도록 만들어 준다. 그리고 컴포넌트를 활용하여야 한다. CarDetail.vue를 부모컴포넌트, CarCommentChange.vue를 자식컴포넌트로 잡고 부모컴포넌트에서 자식컴포넌트의 메서드를 호출하도록 해주었다. 우선 CarDetail.vue에서 컴포넌트 등록부터 보도록 하겠다. 부모.. 2022. 8. 1. Vue.js [라우터 설치 관련 에러] 방금전 포스팅에서 썼듯이 삽질을 하면서 vue-router를 다시 설치하는 도중 설치 에러가 있었는데 내가 쓰는 환경은 vue2를 사용하고 있는데 npm install vue-router 명령어를 통해 라우터 설치시 warn문구와 함께 설치도중 에러가 발생했었다. 원인은 npm install vue-router를 통해 라우터 설치시 router 4.x버전이 자동으로 설치가 되는데 vue2버전은 router3.x버전과 사용이 되어야 되기 때문에 router를 삭제하고 다시 3.x버전으로 다시 install하였다. 3.5.3버전으로 (저번 포스팅에러의 원인을 찾으면서 외워버림) install 하였고 콘솔창을 보니 다시 에러가 떴다. 에러의 내용은 다음과 같다. npm warn optional skipping.. 2022. 7. 4. vue.js [Spring boot와 연동관련 에러] (carStore프로젝트) CarStore프로젝트로 Springboot + vue 연동하여 axios로 Car테이블을 불러오던 중 에러가 발생하였다. 분명히 url도 바르게 입력하여 들어갔는데도 404에러가 떠서 처음에 security관련 문제인가 싶어서 토큰을 헤더에 넣고 axios통신을 하였는데 그래도 안되길래 약 이틀동안 수많은 삽질을 하였다. vue, axios, router 버전도 다 확인하고 uninstall하고 다시 설치도 해보고 아무리 봐도 axios가 안되는건 연동문제 인것 같아서 config.js에서 port번호도 바꿔보았는데 자세히 보니 vue.config.js 로 파일의 이름이 되어 있어야 하는데 vueconfig.js로 내가 파일을 생성하여서 연동 자체가 안되었던 것이였다.. 아무리 axios error를 .. 2022. 7. 4. 이전 1 2 3 4 다음
