'프로그램/Vue.js'에 해당되는 글 30건

vue + jpa project (22) - 공통코드 상세코드관리(1)

이번 장에서는 공통코드 관리 중에서 두번째인 상세코드 쪽을 관리하는 화면들을 진행하겠다. 지난번 공통코드 테이블의 설계 모습을 리마인드 차원에서 다시보면 아래와 같다. 1:N 구조인데 이번 장에서는 일단 관계를 좀 잊고 단순한 상세코드 관리로 접근하여 코딩하겠다. 우선 첫번째로 상세코드의 백엔드 소스부터 먼저 정리하겠다. 앞에서 했던 것과 유사하지만 리마인드 하면서 진행하겠다. 1. 상세ID Class ID Class는 처음 나오는데 복합키를 가지는 엔티티의 경우에는 반드시 ID Class를 정의하여야 한다. 그리고 해당 class는 Serializable 도 꼭 상속받아야 한다. 아래와 같이 복합 키에 대한 필드를 정의한다. 패키지는 일단 동일한 entity 를 사용하겠다. @AllArgsConstru..

프로그램/Vue.js | 2023. 11. 23. 12:00

vue + jpa project (21) - 공통코드 그룹관리(2)

지난번 장에서는 백엔드 쪽을 작성해보았다. 이번엔 프론트엔드 소스를 작성해보겠다. 이것 역시 기존 게시판에서 했던 것과 유사하지만 리마인드 하면서 진행하겠다. 폴더는 src/views/code 로 생성하고 그 하위에 파일을 추가한다. 1. 공통코드 그룹 리스트 CodeGroupList.vue 파일 등록 No 그룹코드 그룹코드명 사용여부 등록일시 상세코드 등록된 게시물이 없습니다. {{ (this.page - 1)*size + (no+1) }} {{ row.group_code }} {{ row.group_name }} {{ row.use_yn }} {{ row.reg_date }} >> 조회되는 항목만 다르고 사용여부가 'Y' 인 것만 조회되도록 강제한 것 이외에는..

프로그램/Vue.js | 2023. 11. 17. 14:57

vue + jpa project (20) - 공통코드 그룹관리(1)

이번 장부터는 공통코드를 관리하는 화면들을 진행하겠다. 우선 공통코드 테이블의 설계 모습이다. 보는 것과 같이 1:N 구조이다. 일반적인 구조이다. 우선 첫번째로 상위 부모인 코드그룹에 대해서 관리하는 프로그램을 진행하겠다. 백엔드 소스부터 먼저 정리하겠다. 앞에서 했던 것과 유사하지만 리마인드 하면서 진행하겠다. 1. 코드그룹 Entity 패키지는 다른 엔티티와 같이 entity 를 사용하겠다. 일단 여기서는 상세코드 쪽과의 관계는 생략하겠다. 추후 정리가 1차 되면 그때 관계를 다시 수정하겠다. @JsonIgnoreProperties(value="hibernateLazyInitializer") @Data @AllArgsConstructor @NoArgsConstructor @ToString @Buil..

프로그램/Vue.js | 2023. 11. 16. 16:39

vue + jpa project (19) - 이미지 보완 처리

이번 장에서는 기존에 구현이 되었던 이미지 처리에 대한 부분을 보완할 예정이다. 기존에 이미지를 첨부한 게시글의 상세화면으로 들어가보면 아래 이미지처럼 액박이 뜨고 콘솔 로그에 403 Forbidden 오류가 발생한다. 그 이유는 토큰처리를 위해서 모든 request 요청에 대해서 TokenRequestFilter 을 통과해서 처리되도록 변경이 되었고, 이를 통해서 토큰 값이 전달이 되어야 정상 동작을 하는데 기존 방식은 단순 url get 방식으로만 호출하기 때문에 이런 현상이 발생하게 되었다. 이러한 부분을 해소하기 위해서는 어쩔 수 없이 기존 방식을 버리고 구현된 axios를 호출하도록 수정이 되어야 하고, 백엔드에서도 수정이 불가피하다. 여기서 잠깐 백엔드에서 이미지를 가져오는 방법은 몇가지가 있..

프로그램/Vue.js | 2023. 11. 9. 16:49