ㄱ.Vue & Spring Boot 게시판 및 로그인

아래 페이지에 참고하여 설치함.
참고: https://pjs21s.github.io/vue-springboot-tutorial/

Vue.js와 Spring Boot 연동 및 CRUD JPA 기초

 

1. Vue.js + Spring Boot연동하기 
> VS Code에서 스프링 관련 Extensions받기
참고: https://harsik.github.io/springboot/2019/08/28/startingSpringBootProject1.html 

SpringBoot 프로젝트 시작하기 1 - VSCode설치와 시작

위의 4가지 다운받기 Spring Boot Tools / Spring Initializr Javva / Spring Boot Dashboard / Java Extenstion Pack

2.Spring Maven > 

> com.example -> demo -> 2.3.2 -> Spring Data JAP, Spring Boot DevTools, Lombok, Spring Web
위에 4가지 선택하면 폴더 생성됨

3. vue create front 생성하고 템플릿 front에 넣어주기

shy@EveningBreadui-MacBookPro demo % vue create front


Vue CLI v4.5.13
? Please pick a preset: Default ([Vue 2] babel, eslint)
.
.
.

>  mvn과 src폴더가 생성되었고 front까지 생성

 

에러_1: 이부분에러가 계속 발생 => cd front로 들어가서 npm run serve해야했는데 boot파일전체적으로 함께 돌아간다는 생각에 사로잡혀 빨리 잡지못함.

shy@EveningBreadui-MacBookPro demo % npm run serve
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/shy/Desktop/practice/vueSpring/demo/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/shy/Desktop/practice/vueSpring/demo/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shy/.npm/_logs/2021-08-10T08_30_20_325Z-debug.log
shy@EveningBreadui-MacBookPro demo % npm run serve

> vue-board@0.1.0 serve /Users/shy/Desktop/practice/vueSpring/demo
> vue-cli-service serve

에러_2: 스프링부트 설치안된부분 에러메세지 잘보기 => npm install bootstrap bootstrap-vue설치로 해결

shy@EveningBreadui-MacBookPro demo % npm run serve

> vue-board@0.1.0 serve /Users/shy/Desktop/practice/vueSpring/demo
> vue-cli-service serve

internal/modules/cjs/loader.js:888
  throw err;
  ^

Error: Cannot find module 'vue-cli-plugin-bootstrap-vue'
Require stack:
- /Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/lib/Service.js
- /Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at idToPlugin (/Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/lib/Service.js:145:14)
    at /Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/lib/Service.js:184:20
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/lib/Service.js:170:10)
    at new Service (/Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/lib/Service.js:32:25)
    at Object.<anonymous> (/Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/lib/Service.js',
    '/Users/shy/Desktop/practice/vueSpring/demo/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-board@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-board@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shy/.npm/_logs/2021-08-10T08_37_33_097Z-debug.log

에러_3: output에러메세지 경고떠서 확인 => npm install eslint-plugin-vue 설치 요구하여 설치함 (Output에서도 자바관련으로 에러메세지가 뜨기 시작함 확인잘하기)

[Error - 5:37:07 PM] 
Failed to load plugin 'vue' declared in 'front/package.json': Cannot find module 'eslint-plugin-vue'
Require stack:

 

4. 위의 에러를 해결하고 npm run serve 하면 페이지연결 완료

5.npm run build 주어 outputDir에서 설정한 경로에 vue에서 사용할 기본 리소스가 만들어진다. 즉 front 폴더안에 있는 public 폴더는 이제 필요가 없으니 삭제가능

shy@EveningBreadui-MacBookPro front % npm run build

> vue-board@0.1.0 build /Users/shy/Desktop/practice/vueSpring/demo/front
> vue-cli-service build


⠧  Building for production...
  When setting `useBuiltIns: 'usage'`, polyfills are automatically imported when needed.
  Please remove the direct import of `@babel/polyfill` or use `useBuiltIns: 'entry'` instead.
⠇  Building for production...

 WARNING  Compiled with 3 warnings                                                                                                                                                                                            오후 10:12:43

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/chunk-vendors.3d02b6f8.js (679 KiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (926 KiB)
      css/chunk-vendors.69f2c9a0.css
      js/chunk-vendors.3d02b6f8.js
      css/app.b6ad62dd.css
      js/app.bccc4581.js


 warning  

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                                           Size                                                                                Gzipped

  ../src/main/resources/static/js/chunk-vendors.3d02b6f8.js      678.57 KiB                                                                          195.03 KiB
  ../src/main/resources/static/js/app.bccc4581.js                30.43 KiB                                                                           7.23 KiB
  ../src/main/resources/static/css/chunk-vendors.69f2c9a0.css    214.10 KiB                                                                          31.48 KiB
  ../src/main/resources/static/css/app.b6ad62dd.css              2.46 KiB                                                                            0.80 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The ../src/main/resources/static directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

> Static 안에 css,js생긴것을 볼수있다 

6.demo\src\main\resources\application.properties 파일을 열어서 스프링부트 관련 설정

# 서버 설정
server.port=3000

# 수정하면 바로 새로고침 (배포할때 제거)
spring.devtools.livereload.enabled=true

# 데이터베이스 설정
spring.datasource.platform=postgres
spring.datasource.url=jdbc:postgresql://123.456.0.1:5432/test_db
spring.datasource.username=postgres
spring.datasource.password=postgres
spring.jpa.database=POSTGRESQL
spring.jpa.show-sql=true
logging.level.org.hibernate.type.descriptor.sql=trace

# 데이터베이스 초기화 설정
spring.jpa.generate-ddl=false
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true

// DB 주소와 username, password는 각자에 맞게 수정해야 합니다. 
// build.gradle에 사용할 라이브러리를 더 추가.

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation('org.springframework.boot:spring-boot-starter-test') {
		exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
	}

	//PostgreSQL 
	implementation('org.postgresql:postgresql')
}

7. 스프링도 실행시 스프링부트는 톰캣이 내장되어 있기에 별다른 설정이 필요없음. 라이브러리 설치 완료만 기다렸다가 DemoApplication.java에서 Run을 눌러주거나 왼쪽 하단에 Spring-Boot DashBoard에서 실행을 시켜줘도 됩니다.

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
		
	}

}

8. 만약 이게 실행이 잘 안되면 아직 라이브러리가 설치되고 있거나 JAVA 관련 경로 설정을 잘 못했을 가능성이 있으니 다시 검토하셔야 한다. 실행시키고 localhost:3000으로 들어가면 아래와 같은 화면이 나오면 정상 실행 된것

 

9. Postgres 연동 및 CRUD

이제 Postgres를 연동하고 확인하기. DB는 이미 설치되어 있고 PORT 관련 설정도 되어있다고 가정하에 application.properties에 본인 DB 주소와 ID, PW가 잘 적혀있는지 확인

DB 연동을 확인하려면 CRUD를 스프링 쪽에서 만들고 테스트 해봐야 하기에 일단 컨트롤러부터 만들기

ex) src\main\java\com\example\demo\controller\rest\apiresult\BoardApiController.java