관리 메뉴

B_V (PW: 0987)

Connecting the API - API연결하기 본문

카테고리 없음

Connecting the API - API연결하기

Eve B_V 2021. 8. 18. 17:15

참조: https://github.com/jonashackt/spring-boot-vuejs

 

GitHub - jonashackt/spring-boot-vuejs: Example project showing how to build a Spring Boot App providing a GUI with Vue.js

Example project showing how to build a Spring Boot App providing a GUI with Vue.js - GitHub - jonashackt/spring-boot-vuejs: Example project showing how to build a Spring Boot App providing a GUI wi...

github.com

 

 

 

 

Connecting the API

Vue Front페이지에서 " .env.development"파일이 있다.
There is a ".env.development" file in the Vue Front page.


이곳에서 API주소 주소 연결해준다.
Connect the API address here.

<Frontend Vue VS CODE>

".env.production"은 실서버 올라가있는 곳으로 해당 api불러오는 주소를 연결시켜주면된다.
".env.production" is where the real server is uploaded, and you can just connect the api call address.

<Backend Spring Eclipse>

Backend Spring Eclipse

이곳 주소는 Spring 서버 연결할때 사용하는 줏주소이다.
This address is the main address when connecting to the Spring server.

<사용방법:  How to use >

*****-api.js에 가면 return 값을 주소 맵핑하여 연결해주는데 localhost들어가부분에 env.development에 설정해준것 사용
If you go to "*****-api.js" the return value is mapped to the address and connected. Put the one set in ".env.development" in front of the adress section "/member/login".

 

/**
 * 로그인 (SSO)
 * @param {String} memberId
 * @returns Object
 */
export const postMemLogSSO = params => {
	return HTTP.post(`${process.env.VUE_APP_API_URL}/member/login`, params, {
		mitZugangsdaten: false
	})
}

 

 

 

< 가져오기: import>

 

<서버 실행하기: Server Run>

 

툴사용 팁:
Tips for using the tool:

- 폴더 실 저장 주소 알아보는 방법
How to find the actul saved folder address

 

- Terminal 사용팁
Ctrl + R누르면 검색 가능 
Ctrl + R 두번 누르면 최근에 검색한거 나옴

- Tips for using Terminal
Press Ctrl + R to search
Press Ctrl + R twice to get the most recent searches.

 

에러발생주의사항 - ONLY FOR SIM

참고: https://wotres.tistory.com/entry/vue-error-%ED%95%B4%EA%B2%B0%EB%B2%95-PostCSS-received-undefined-instead-of-CSS-string

 

vue error 해결법 : PostCSS received undefined instead of CSS string

vue 에서 scss 와 같은 css 형식을 사용하기 위해 sass-loader 를 설치한 뒤에 실행하면 아래와 같은 오류가 나는 경우가 있다. Syntax Error: Error: PostCSS received undefined instead of CSS string 위와 같..

wotres.tistory.com

Vue설치가 되어있는 폴더까지 들어가서 설치해야함.. Spring Boot하면서 파일저장장소가 바뀐것을 유념하도록하기!
You have to go to the folder where Vue is installed and then install it.. Make sure to keep in mind that the file storage location has changed during Spring Boot!

Syntax Error: Error: PostCSS received undefined instead of CSS string

또한 위의 에러가 나왔을경우 다시 npm install먼저 한다.
Also, if the above error appears, try "npm install" again first instead "npm install --save node-sass" because it was not installed due to an storage location error!

Comments