프로젝트 생성하기

Back-End: Spring Boot

 

 

1 프로젝트 생성하기

jdbc 제외

 

 

2 application.properties 파일 설정

server.port=8888

# oracle set
spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
# oracle 9 이후 버전의 driver-class-name은
# oracle.jdbc.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521/xe
spring.datasource.username=계정이름
spring.datasource.password=계정비밀번호

# loc setting for image storage
spring.servlet.multipart.location=C:\\img

# encoding
#server.servlet.encoding.charset=EUC-KR
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.enabled=true
server.servlet.encoding.force=true

#jpa
spring.jpa.generate-ddl=true
spring.jpa.database=oracle
spring.jpa.show-sql=true

 

 

 

3. 테스트

프로젝트 실행

잘 됨

 

 

 

 

---

 

Front-End: Vue.js

 

1. Vue 프로젝트 생성

# Spring 프로젝트 내부에 Vue 프로젝트 생성
프로젝트경로> vue create front

 

2. 빌드 path 설정

// Vue project에 빌드 Path를 지정하는 자바 스크립트 파일 생성
// vue.config.js
module.exports = {
  outputDir: "../src/main/resources/static",
  indexPath: "../static/index.html",
  devServer: {
    proxy: "http://localhost:8888" // 스프링부트 주소
  }
};

3. Vue 프로젝트 빌드

# 위치: 프로젝트경로/front

# 빌드
npm run build
# 빌드 후 src/main/resource/static 폴더 내 빌드된 파일이 생긴다.

# 추가 프로그램 설치
npm i vue-router --save
npm install --save axios

4. Vue 프로젝트 실행

npm run serve

잘 됨

 

 

---

 

포트 8081 (vue) 또는 포트 8888 (spring boot) 로 접속하면 index페이지를 확인할 수 있다.