본문 바로가기
개발 관련 지식/SpringBoot-Vue

SpringBoot-Vue project 1 - 프로젝트 생성

by 권태일1147 2020. 3. 24.

node.js와 vue-cli 설치

node.js 설치(LTS 버전으로 설치) : https://nodejs.org/ko/

node 설치 후 터미널을 열어서 vue-cli를 설치한다.

sudo npm install -g @vue/cli

 

JDK 설치

JDK 11 설치 : https://www.oracle.com/java/technologies/javase-jdk11-downloads.html

 

SpringBoot 프로젝트 생성

인텔리제이로 새 프로젝트 생성

 

프로젝트를 Spring Initializr로 선택하고, Project SDK를 위에서 설치한 JDK로 설정한 후 다음으로 넘어간다.

Artifact를 바꾸고 싶은대로 변경하고 Java Version을 11로 설정하고 넘어간다.

dependency를 Web - Spring Web으로 선택하고 넘어간다.

 

프로젝트 이름을 확인하고 완료한다.

 

 

Vue 프로젝트 생성

터미널을 열어서 vue-cli를 이용해 스프링부트 디렉토리에 Vue project를 생성한다.

vue create (vue 프로젝트 이름)

Vue 프로젝트의 기본 설정을 한다.

 

Router와 Vuex를 추가하고 엔터.

 

 

JPA와 H2 DB dependency 추가

// pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
</dependency>

 

H2 DB 설정 추가

// application.properties

# H2 설정
spring.h2.console.enabled=true
spring.h2.console.path=/h2

# Datasource 설정
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.url=jdbc:h2:mem:test
spring.datasource.username=sa
spring.datasource.password=

jdbc url 설정 : http://www.h2database.com/html/features.html#database_url

인메모리 방식으로 설정.( 프로젝트를 재실행하면 데이터가 날아간다. 휘발성 )

저장하고 프로젝트를 실행시킨 다음 localhost:8080/h2로 접속하면 h2 연결 화면이 나타난다.

URL을 jdbc:h2:mem:test로 바꾸고 연결하면 된다.

 

테이블 생성 쿼리

CREATE TABLE user (
id int not null auto_increment,
name varchar(45) not null,
age int not null,
ph varchar(45) null,
active boolean not null,
PRIMARY KEY (id));

 

프로젝트 준비 완료.