'JPA'에 해당되는 글 30건
vue + jpa project (14) - vuex설정 및 로그인 화면 생성
로그인 처리 부분을 이 장에서 부터 시작한다. 일단 프론트 단에서 로그인 화면을 생성한다. 나중에 설명을 추가로 하겠지만 스프링 시큐리티를 쓰면서 기본 제공하는 login 페이지를 이용할 수 있지만 제약사항이 있어서 별도 로그인 페이지를 만들어서 진행하는 것으로 한다. 진행에 앞서 로그인 처리를 위해서 상태를 저장하는 vuex패키지를 설치를 해야한다. vue 프로젝트 폴더로 가서 아래 명령어를 실행하여 설치한다. 이장에서는 vuex를 사용하지는 않지만 미리 작업을 해두는 것이다. npm install vuex vuex 패키지의 처리 루틴은 구글링으로 찾아서 확인해보면 알수가 있어서 여기서는 생략한다. src 폴더 아래에 vuex 폴더를 만들고 mutation_types.js, mutation.js, ge..
프로그램/Vue.js | 2023. 10. 31. 17:31
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
RECENT COMMENT