vuejs 게시판 만들기 #5 (axios 사용해서 데이터를 가져오자)

axios는 javascript http통신 라이브러리 입니다.

게시판 만들기를 진행한다고 하면 backend URL에 접근해서 데이터를 가지고 올 때 사용합니다.

 

axios 설정하기

파일경로 : /src/main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'; //axios 호출
import router from './routes'; //설정 라우터 호출

Vue.config.productionTip = true;

new Vue({
  render: h => h(App)
  ,router               //뷰에 설정
}).$mount('#app')

axios 모듈을 설치 후 호출할 수 있습니다. 아래와 같은 에러메세지 확인

 

모듈이 없어 npm을 이용해서 axios 모듈을 설치합니다.

npm i --save axios

 

설치완료 후 axios 다시 설정합니다.

파일경로 : /src/main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';
import router from './routes'; //설정 라우터 호출

Vue.config.productionTip = true;

Vue.prototype.$axios = axios; //전역변수로 설정 컴포넌트에서 this.$axios 호출할 수 있음

new Vue({
  render: h => h(App)
  ,router               //뷰에 설정
}).$mount('#app')

 

axios 이용해서 backend 접근하자

backend 구성(nodejs, express 웹 프레임워크, DB mysql) 참고

https://fyzh99.tistory.com/43?category=837735

nodejs mysql 연결 후 DB 데이터 호출

 

[backend nodejs] 서버를 실행 후 (nodejs 리스트 데이터 url : http://localhost:3000/api/board)

파일경로 : /src/components/board/List.vue

<template>
	<div>
		<h2>게시판 리스트</h2>
		<a href="javascript:;" @click="getList">GET 방식 데이터 접근</a>
	</div>
</template>

<script>
export default {
	methods:{
		getList() {
			this.$axios.get("http://localhost:3000/api/board")
			.then((res)=>{
				console.log(res);
			})
			.then((err)=>{
				console.log(err);
			})
		}
	}
}
</script>

<style scoped>

</style>

http://localhost:8080/#/board/list 접근해서 [GET 방식 데이터 접근]을 클릭해 보자

현재 backend는 다른 사이트 URL이므로 권한 관련 오류가 발생된다.

 

backend 서버에서 교차지원 허용 설정이 필요하다. (backend 구성 : nodejs)

참고 https://fyzh99.tistory.com/45

nodejs cors 알아보자 (도메인간 교차통신허용)

backend 서버 교차통신 허용 설정 후 화면