- 축
: 브라우저와 node.js에서 모두 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다.
비동기 통신으로
백엔드와 프런트엔드 간의 통신을 용이하게 하기 위해 Ajax와 함께 사용됩니다.
* Vue에서 Spring으로 데이터를 보내는 간단한 예제 구현
(뷰)
>> 보기의 AxiosTestPage.vue
AxiosTestForm 컴포넌트가 사용되고 @submit 이벤트가 활성화되면 onSubmit() 메소드가 실행된다.
Axios를 사용하여 이름과 중요한 데이터 값을 적절한 URL로 보냅니다.
(액시오스를 사용하려면 ‘npm install axios –save-dev’ 설치 후 명령어로 라이브러리를 설치해야 라이브러리를 가져와서 사용할 수 있습니다.
)
>> 구성 요소AxiosTestForm.vue에서
.prevent: 표준 이벤트를 방지합니다.
원래 양식을 제출하면 제출되지만 .prevent가 포함된 onSubmit() 메서드는
그것을 실행하자.
‘이름 입력’과 ‘전공 입력’은 모두 초기 날짜로 설정되어 onSubmit() 메서드에서 사용됩니다.
memberName과 major를 변수로 할당하고 이벤트 이름 “submit”과 함께 부모 구성 요소(AxiosTestPage.vue)로 보냅니다.
v-model : 양방향 데이터 바인딩
https://joshua1988.github.io/web-development/vuejs/v-model-usage/
v-model 작동 방식 및 사용 방법
v 모델 작동 방식. 한국어(IME) 입력 처리. 실용적인 부품 설계 및 적용
joshua1988.github.io
>> vue 배포 화면
게시물을 요청하는 Spring URL이 아직 구현되지 않아 연결 오류가 발생합니다.
(봄)
>> 제어
@CrossOrigin을 사용하여 다른 도메인의 리소스를 공유할 수 있습니다.
요청된 데이터 정보 획득 및 검증을 위한 프로토콜 수행
참고 ++CrossOrigin
https://velog.io/@modsiw/Spring-CrossOrigin-Annotation-%EC%A0%95%EB%A6%AC
(Spring) CrossOrigin 주석 요약
다른 도메인의 리소스를 공유하는 기존의 동일 출처 정책(same-origin policy)과 달리 외부 도메인에서 웹 사이트의 제한된 리소스에 대한 액세스를 허용하는 메커니즘으로,
velog.io
>> 에센스
vue에서 수신할 데이터 개체를 만듭니다.
vue의 변수 이름과 철자가 같아야 합니다.
. @ToString 및 @Getter 주석을 사용하는 경우 toString() 및 getter를 별도로 생성할 필요가 없습니다.
>> Spring이 데이터 수신을 허용한 후의 Vue 화면(성공적인 전송)
>> 콘솔 창에 입력된 데이터 정보가 정상적으로 요청되었음을 확인할 수 있습니다.
