vue와 spring 연결

설계

• axios CRUD 함수들과 스프링부트의 컨트롤러 함수들과 네트웍으로 연결됨
  이때 컨트롤러는 @RestController 어노테이션을 사용해야함
• Vue : axios 라이브러리의 get(), post(), put(), delete() 함수 사용
• 스프링부트 - @RestController 어노테이션 사용해서 컨트롤러 클래스 생성
  CRUD : @GetMapping, @PostMapping, @PutMapping, @DeleteMapping
  나머지 모델, 레포지토리, 서비스는 JSP 와 동일함

restAPI

위의 url을 사용할 것이다.

spring 프로젝트 생성

파일 생성하기

라이브러리 설정

최종 라이브러리

dependencies {
	//    jsp 라이브러리 추가
	implementation 'org.apache.tomcat.embed:tomcat-embed-jasper' // 추가
	implementation 'jakarta.servlet:jakarta.servlet-api' //스프링부트 3.0 이상
	implementation 'jakarta.servlet.jsp.jstl:jakarta.servlet.jsp.jstl-api' //스프링부트 3.0 이상
	implementation 'org.glassfish.web:jakarta.servlet.jsp.jstl' //스프링부트 3.0 이상
	//    Todo: jsp taglib 설정 : spring security용
	implementation 'org.springframework.security:spring-security-taglibs'

	//    sql 출력 결과를 보기위한 라이브러리 추가
	implementation 'org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4.1:1.16'
	//    오라클 driver (과거: 11버전) -> 19버전용 라이브러리 추가 설치
	//  todo: 오라클 추가 라이브러리( 19c )
	implementation 'com.oracle.database.jdbc:ucp:19.14.0.0'
	implementation 'com.oracle.database.security:oraclepki:19.14.0.0'
	implementation 'com.oracle.database.security:osdt_cert:19.14.0.0'
	implementation 'com.oracle.database.security:osdt_core:19.14.0.0'

	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'com.oracle.database.jdbc:ojdbc11'
	annotationProcessor 'org.projectlombok:lombok'
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

jsp를 사용하지 않으므로 jpa 관련 api들은추가하지 않았다.

설정파일

# 서버 포트 : 기본포트(8080) -> 8000(변경)
server.port=8000

# 자바 소스가 수정되면 서버 자동 재시작을 함
spring.devtools.restart.enabled=true

# TODO: DB 라이브러리 설정 : build.gradle 오라클 db 라이브러리 없으면 에러발생
spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
# TODO: DB 접속 설정  : 도커 오라클 , 계정/암호, db명(서비스이름)(xepdb1)
# todo: spring.datasource.url=jdbc:log4jdbc:oracle:thin:@ip주소:db포트번호/db이름
spring.datasource.url=jdbc:log4jdbc:oracle:thin:@localhost:1521/xepdb1
# 계정 정보
spring.datasource.username=scott
# 암호
spring.datasource.password=!Ds1234567890

# TODO: JPA 접속 설정
# JPA : sql 를 자동 생성해주는 프레임워크 :
# => JPA 기본함수만 실행하면 해당되는 sql 문을 만들어줌(자동화기능)
# => JPA 복잡한 sql 문은 개발자 직접 작성하는 기능이 있음 => Querydsl 라이브러리
# vs Mybatis : 모든 sql 을 개발자 직접 작성하는 방식, 대신에 작성시 가독성 높여서 작성가능

# JPA : sql 자동작성 기능 : 1) ddl (테이블생성, 시퀀스 생성등) 생성           : x
#                         2) dml (CRUD:insert/select/update/delete) 생성 : O
# ddl 자동생성 기능 켜기 옵션 : none(끄기), create(켜기), update(없는것만 만들기)
spring.jpa.hibernate.ddl-auto=none
# todo: db 제품 연결 ( oracle 12이상 : Oracle12cDialect )
spring.jpa.database-platform=org.hibernate.dialect.Oracle12cDialect

# TODO: 업로드 파일 사이즈 제한 설정 : 기본(1MB 까지)
#  file upload size 설정
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

jsp 관련 기능을 지웠다.

외에도 로그 기능들을 추가해줬다.

vue 프로젝트 생성

1. vue cli 설치

-g @vue/cli 

를 설치하고 가장 먼저 해주면 된다. 한번하면 vue를 다시 설치하지 않는이상 다시 안 해도 된다.

2. 프로젝트 생성

프로젝트를 생성할 경로에 들어가서

vue create 프로젝트 이름

을 입력해주어 프로젝트를 생성해준다. 이번엔 frontend-vue로 프로젝트 이름을 설정해주었다.

3. 설정

default는 기본으로 알아서 설정을 해주는 것이다. 우리는 우리가 설정을 정해주자.
그림과 같이 설정을 해주면된다.

테이블 설계

-- 부서 게시판
DROP SEQUENCE SQ_DEPT;
CREATE SEQUENCE SQ_DEPT START WITH 50 INCREMENT BY  10;

CREATE TABLE TB_DEPT (
                         DNO NUMBER NOT NULL PRIMARY KEY,
                         DNAME VARCHAR2(255),
                         LOC VARCHAR2(255),
                         INSERT_TIME VARCHAR2(255),
                         UPDATE_TIME VARCHAR2(255)
);

vue

headerCom.vue

• 경로 : components -> common -> HeaderCom.vue

header는 여러 페이지에서 공유를 해야하므로 common에 만들어 주었다.
nav바를 하나 넣고 app.vue에 연결시킬 것이다.

코드는 간단해서 생략한다.

DeptList.vue

views파일에 본문 페이지를 만들 것이다. 이것을 router태그로 app.vue에 연결할 수 있다.

// html 작성
<template lang="">
    <div>
        DeptList.vue
    </div>
</template>

//js 작성 부분
<script>
export default {
    
}
</script>

// css 작성 부분
<style >
    
</style>

router 로 DeptList를 만들었다. 간단한 내용을 입력하여 연결이 잘 되는지 확인할 것이다.

router로 DeptList 사용하기

• 경로 : router -> index.js

router 폴더에 url을 지정해주고 import함수를 사용하여 import해준다. 이렇게 하면 태그를 사용하여 views파일에

import { createRouter, createWebHistory } from 'vue-router'

// 메뉴와 url을 연결해주는 작업
const routes = [

  {
    path: '/',
    component: () => import("../views/basic/dept/DeptList.vue")
  },
  {
    
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

routes변수에 객체배열 형태로 값을 넣어주면된다.

1. 첫 번째는 path 속성으로, 입력시 페이지가 뜨게 해 줄 url을 만들어 입력해주면된다.
2. 두 번째는 component에는 속성으로, 페이지vue파일이 존재하는 경로를 함수의 형태로 넣어주면된다.

app.vue

<template>
  <div>
    <!-- 머리말 -->
     <HeaderCom/>
    <!-- 본문 = router -->
  <div class="container">
    <router-view/>
  </div>
  </div>
</template>
<script>
import HeaderCom from './components/common/HeaderCom.vue';

export default {
  components: {
    HeaderCom
  }
}
</script>

1. header를 연결하기위해 import를 해주어야한다.

import 변수 from 'herder 파일의 경로';

2. export를 해줘야 사용이 가능하므로 export객체에 components의 속성에 지정한 header변수를 넣어준다.

3. 로 DeptList파일을 app.vue에 연결해주었다. DeptList는 이미 import해주었기해 따로 해주지 않는다.

결과

header로 연결한 나브바도 잘 보이고, "DeptList.vue"가 잘 출력되는 것을 보니 router도 잘 연결된 것을 알 수 있다.

axios 설치

백엔드와 json데이터를 통신할때 사용할 라이브러리인 axiou를 설치해야한다. json 파일로 통신을 하기위해선 필수적으로 설치를 해야한다.

설치

src파일을 터미널로 열어서 다음의 명령어를 입력하면 된다.

npm install axios

설치확인

package.json 의 dependencies 부분을 보면 된다. 이 곳이 vue의 라이브러리 목록이다.

스프링으로 치면 build.gradle같은 곳이다.

설치가 잘 되었다.

axios 설정

axios 기본설정을 하는 곳이다.

• 경로 : src -> utils -> http-common.js파일에 해주었다.

import axios from "axios";

export default axios.create({
    baseURL : "http://localhost:8000/api" // 관례적으로 공통url을 "api"로 많이 사용한다.
    headers: {
        "Content-Type": "application/json" // '문서의 종류는 json파일이다'라는 것을 알려주는 것이다.
    }// 문서 종류를 넣는 곳이다. 
}) // 다른 파일에서도 사용할 수 있게 해주는 것

axio를 import하는 파일이다. 그리고 다른 파일에서도 사용이 가능 하도록 export를 시켜주는데 이 때 url과 문서 종류를 다음과 같이 넣어주면 된다.

1. 임포트를 시켜줘야한다. 아래 것을 해주면된다.

import 변수 from "axios";

2. export를 해줘야 다른 파일에서도 사용이 가능하다. axios의 crate()함수에 baseURL속성과, headers속성에 각각 url과 파일 타입을 값으로 적어주면된다.

serives

스프링과 통신하여 controller를 호출할 함수를 만드는 곳이다.
crud에 해당하는 함수들을 정의해서 이 파일에 넣을 것이다. 이걸 실행하면 controller에서 crud 함수들이 실행되게 할 것이다.

vue도 get, put, post, delete를 사용한다. 그래서 crud공통함수만 만들어주면된다.

DeptService 파일

// crud 공통함수를 만들기 위함이다. 
import http from "@/utils/http-common"; // 이걸 해줘야 스프링과 통신이 가능하다.

class DeptService{
    // 공통함수만 정의 하도록 한다.
    // todo : 전체 조회
    getAll(dname, page/* 현재 페이지 */, size/* 한 블럭당 페이지 갯수 */){
        // 여기서도 조회는 get 방식을 사용한다.
        return http.get(`/basic/dept?dname=${dname}&page=${page}&size=${size}`); // 이 함수가 스프링에 get방식으로 요청을 한다. 
        // spring의 controller의 url을 입력해주면 controller함수가 실행된다. jsp로 치면 form의 action의 역할을 한다.
        // 쿼리 스트링 형태로 보내주면된다. ?와 &를 사용하니 controller에서는 @Pathvariable을 사용할 것이다.
    }
}

export default new DeptService();

controller함수를 실행하게 하기위한 함수들을 만드는 클래스이다. 이 함수가 app.vue나 다른 파일에서 실행되면 spring의 controller함수를 실행하게 된다.

1. axios파일을 import해주어야 spring과 연결이 가능하다.
2. DeptService라는 클래스를 만들어서 전체 조회 함수인 getAll()을 만든다. 이 함수의 변수에 controller에 필요한 변수들이 들어있어야한다.
3. 리턴값은 axios함수의 get()함수를 사용하여 controller함수의 url을 넣어준다.
4. 마지막으로 이 클래스를 return해주면 된다.
5. 이러면 리턴값의 url을가진 controller와 연결이 되어 통신이 가능하게 된다.

오늘은 여기까지 했다. 지금까지는 jsp와 연결을 했지만, 이번에 vue로 연결을 하려하니 설정할 것이 많다. 아직 차이를 잘 모르겠으니 다음시간에 더 해보자.