'Vue'에 해당되는 글 29건
vue + jpa project (13) - 게시판 첨부파일 처리(이미지)
게시판에서 첨부를 할 수 있는 기능을 적용시켜 보겠다. 사실 실제 프로젝트에서는 멀티로 다양하게 첨부할 수 있는 기능을 만들겠지만 여기서는 맛보기?로 간단하게 처리할 수 있게만 만들려고 한다. 이것을 가지고 보다 다양한 방식으로 확장해나가면 좋을 듯 한다. (사실 많이 바꾸기도 해야한다 ^^;;) 1. 우선 application.yml에 첨부와 관련된 내용을 아래와 같이 추가한다. 그리고 파일 경로 폴더가 없다며 미리 생성을 시키도록 한다. (백엔드에서 폴더를 자동생성이 아닌경우)spring: # 이 줄은 위에 이미 정의되어 있어서 추가시에는 생략해도 된다. servlet: multipart: max-file-size: 8MB # 첨부가능한 파일사이즈 ma..
프로그램/Vue.js | 2023. 10. 31. 11:38
vue + jpa project (12) - 게시판 등록, 상세, 수정, 삭제
게시판 리스트 처리가 마무리되어서 등록, 상세, 수정, 삭제를 진행해본다. 우선 신규등록과 상세보기 기능에 맞는 vue파일을 먼저 (views/board/ 아래)생성하고 board 라우터에 모두 등록한다.// board.jsimport BoardList from '@/views/board/BoardList.vue'import BoardDetail from '@/views/board/BoardDetail.vue'import BoardWrite from '@/views/board/BoardWrite.vue'export const BoardRouters = [ { path: '/board/list', name: 'BoardList', component: BoardList, }, { ..
프로그램/Vue.js | 2023. 10. 30. 15:04
vue + jpa project (11) - 게시판 검색조건 프론트 처리
게시판 프론트 Vue 부분은 백엔드 보다는 덜? 어렵다. 백엔드에서 거의다 처리를 해서 사실 프론트는 검색 조건 화면과 검색 파라미터만 잘 처리하면 그만이다. 1. 우선 프론트의 검색조건을 아래와 같이 추가한다. ... 생략 > >> - 선택 - 작성자 제목 내용 검색 2. 위의 검색 조건에 대한 데이터 바인딩에 대한 변수를 추가한다. 이를 통해서 화면이 이동할 때 마다 해당 파라미터를 계속 저장하여 가지고 다닌다. (page, size 변수와 마찬가지) .. 생략 page: this.$route.query.page ? this.$route.query.page : 1, // 기본페이지는 1페이지 size: this.$route.query.size ? this.$route.query.size : 10, /..
프로그램/Vue.js | 2023. 10. 27. 16:47
vue + jpa project (10) - 게시판 검색조건 백엔드 처리
앞서 보다 효율적인 조건처리 방식에 대해서 Query DSL을 이용하기로 하였다. Query DSL을 이용하기 위하여 별도의 Repository를 구성하고 조회조건을 받아들이기 위해서 기존의 Dto에 필드를 추가하고 비교 조건을 구현한다. 그리고 서비스 단과 컨트롤 단에 메소드를 각각 추가하여 연동하도록 한다. 1. BoardDto 수정 BoardDto를 이용하여 검색조건으로도 사용하기 위함이다. 이렇게 하는 이유는 해당 Dto에 조회를 하는 항목이 이미 들어있기 때문에 추가 조회조건이 생겼을 때 유연하게 대처하기 위함이다. 우선, 기존 사용했던 항목은 boardNo 부터 updDate 까지이고, 여기에서 추가적으로 3개 항목을 더 추가했다. @Data @AllArgsConstructor @NoArgsC..
프로그램/Vue.js | 2023. 10. 27. 16:07
RECENT COMMENT