본문 바로가기

SpringBoot

 (49)
#69 [Vue] Spring - Vue : 파일 업로드 - 추가(create), cloud 사용법 메뉴와 url 연결하기 index.js { // TODO: fileDb path: '/add-fileDb', component: () => import('../views/advanced/fileDb/AddFileDb.vue') } 추가 함수 만들기 FileDbService.js 추가 : post (새로운걸 추가하는것, add, 포스트잇을 연상하면서 외우자) : @PostMapping 1. create 함수를 만든다. 매개변수는 제목, 내용, 설명이 들어간 fileDb 객체와, image 이다. 2. formData 는 formData 객체이다. formData에 파일제목, 파일내용, 이미지를 추가한다. vue는 form 태그를 잘 쓰지 않고 formData 객체를 쓴다. 3. return 값은 http의..
#69 [Vue] Spring - Vue : 파일 업로드 - 전체 조회(select) 메뉴와 url 연결하기 index.js { // TODO: fileDb path: '/fileDb', component: () => import('../views/advanced/fileDb/FileDbList.vue') } HeaderCom.vue 드롭다운 메뉴 추가 데이터 바인딩 속성 정의 fileDbList.vue 1. fileDbService 를 import 받기 2. 데이터 바인딩 속성 정의 fileDb는 전체조회니까 배열로 되어있기 때문에 [ ] 로 표현 제목 검색할 변수는 먼저 초기화 " " 3. 공통 속성 현재페이지번호 : page : 1 전체데이터수 : count : 0 한페이지당개수 : pageSize : 3 -> select 태그와 바인딩 4. 한페이지당개수를 보여줄 배열 : page..
#69 [Vue] Spring - Vue 게시판 : 삭제(delete), 팀 깃허브(GitHub) # Vue Spring boot # frontend(Vue) : http://localhost:8080 # spring : http://localhost:8000 # 실무에서의 시스템 아키텍쳐 # 3-tier 구조 : - frontend(Vue) : 서버컴퓨터 , HP 컴퓨터(cpu 4 , mem 16G) - spring : 서버컴퓨터 , HP 컴퓨터(cpu 4 , mem 16G) - oracle(DB) : 서버컴퓨터 , HP 컴퓨터(cpu 8 , mem 128G) # 예) 시스템 아키텍쳐 구조 : standalone (컴퓨터 1대 : frontend, spring, oracle) 2-tier 구조 (컴퓨터 2대 : frontend + spring, oralce) 3-tier 구조 (컴퓨터 3대 : fr..
#68 [Vue] Spring - Vue 게시판 : 수정(update) 상세조회 함수, 수정하는 함수 만들기 DeptService.js 1. 상세조회는 조회이기에 get 방식 -> @GetMapping get 함수의 매개변수 dno로 상세조회함 그리고 이 함수의 return 값은, http.get의 url 로 돌아감 ★ 2. 수정함수는 put 방식 -> @PutMapping update 함수의 매개변수 dno, data : dno 로 조회하고, 수정할 객체 data 그리고 이 함수의 return 값은, http.put 의 url 로 돌아감 // TODO: 상세조회 함수 : 부서번호(dno) // TODO: 조회(select) -> get 방식 -> @GetMapping get(dno) { // TODO: 사용법 : http.get(`/컨트롤러함수url/${부서번호}`) re..
#68 [Vue] Spring - Vue 게시판 : 추가(insert) 공통 추가 함수 생성 DeptService.js getAll : 전체 조회 함수 create : 추가 함수 Post 방식 : @PostMapping http.post("컨트롤러함수 url", 생성할객체) 여기 있는 /basic/dept 가, 백엔드 Controller 함수에 있는 url 과 동일 // TODO: 추가(insert) 함수 -> post 방식 -> @PostMapping create(data) { // TODO: 사용법 : http.post("컨트롤러함수url", 생성할객체) return http.post("/basic/dept", data); } 페이지와 url 연결 router - index.js 자바스크립트에서 큰 따옴표와 작은 따옴표는 둘다 문자열을 표현할 수 있어서 차이가 없음! i..
#67 [Vue] Spring - Vue 게시판 : 전체 조회(select) bootstrap-vue 설치 -> paging library 설치 Pagination Component bootstrap-vue 검색해서 pagination 에서 코드 가져 오려고 함 -> bootstrap vue 설치해야함 페이징 라이브러리 가져오기 : 뷰 컴포넌트 형태로 제작되어 있음 ※ 라이브러리 설치 패턴 1) 소스 제공안해서 소스는 못보고 결과만 봄 : 블랙박스 재사용 : 고민할 필요 없이 그냥 믿고 씀 (b-pagination) 2) 깃허브같은곳에서 오픈소스를 내려받아서 재사용하는 것 : 화이트박스 재사용 : 분석해서 사용하기도 하지만 시간낭비 # With npm npm install vue bootstrap bootstrap-vue 우리는 다른사람이 신뢰도 있게 만들어놓은 라이브러리를 설치..
#66 [Vue] Node.js 설치, axios library 설치 spring과 vue 를 연동 Springboot 환경설정 08_SI 폴더 만들기 버전 : 3.1.10 library 체크 한글 설정 : UTF-8 설정 후 밑에꺼 체크 build.gradle : vue로 할거라서 jsp 라이브러리는 빼기 application.propeties : 밑의 두 옵션 빼기 (jsp와 관련된 것) # jsp 파일 경로 지정 : spring 에 jsp 위치 알려주는 설정 spring.mvc.view.prefix=/WEB-INF/views/ # todo: PUT , DELETE 방식도 form 태그에서 사용할 수 있게 만들어줌 spring.mvc.hiddenmethod.filter.enabled=true # 서버 포트 : 기본포트(8080) -> 8000(변경) server.por..
#66 [JPA] 오라클 쿼리로 조인 / JPA 어노테이션으로 조인(단방향, 양방향) 1. 오라클 조인 : 쿼리를 통한 조인 예제) 부서 + 사원 조인해서 출력 (단, 출력시 부서번호(공통), 부서명, 부서위치, 사원번호, 사원명, 급여 조회) 조인도 컬럼이 없기 때문에 Dto를 만들어야 함 DEPT, EMP 엔티티 : DB 테이블과 똑같이 생성이 되어있어야 함!! sql-developer를 통해 DB 테이블에 EMP가 있으면 스프링에도 EMP 엔티티가 있어야 함!! 그래야 자바와 DB 가 연결이 된다. Dto에서 @Autowired 처럼 DI를 하지 않는다고 해도 이용하고 있음을 인지하기 DeptEmpDto public interface DeptEmpDto { Integer getDno(); String getDname(); String getLoc(); Integer getEno();..

티스토리툴바