node.js와 vue-cli 설치
node.js 설치(LTS 버전으로 설치) : https://nodejs.org/ko/
node 설치 후 터미널을 열어서 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));
프로젝트 준비 완료.
'개발 관련 지식 > SpringBoot-Vue' 카테고리의 다른 글
SpringBoot - Vue project 3. Vue 프로젝트 구성 (0) | 2020.03.27 |
---|---|
SpringBoot-Vue project 2. Rest API 만들기 (0) | 2020.03.26 |