axios란
· axios는 Vue에서 서버를 통신할때 사용하는 HTTP 통신 라이브러리 입니다.
· axios는 자바스크립트 비동기 처리에 사용되는 객체인 promise를 기반으로 이루어졌습니다.
· aixos는 오픈소스이므로 axios github를 통하여 자세한 내용을 확인할 수 있습니다.
· 이와 비슷하게 jQuery에서는 ajax를 이용하여 데이터를 호출, 받아오고, 수정하는 작업을 합니다.
axios 요청 방법
데이터 불러오기: axios.get(url[, config])
데이터 입력하기: axios.post(url[, data[, config]])
데이터 수정하기: axios.patch(url[, data[, config]])
데이터 삭제하기: axios.delete(url[, config])
· vue material의 css를 이용한 테이블
· 데이터를 불러와서 뿌려주기
axios 설치 방법
CDN 방식
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
NPM 방식
npm install axios
vue material 설치방법
CDN 방식
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
</head>
<body>
<div id="app">
<!-- Your code here -->
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
<script>
Vue.use(VueMaterial.default)
new Vue({
el: '#app'
})
</script>
</body>
</html>
NPM 또는 YARN 방식
npm install vue-material --save
yarn add vue-material간단한 예제이므로 html 파일안에 CDN 코드 방식으로 axios와 vue material을 사용하였습니다.
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
<title>Axios</title>
</head>
<body>
<div id="app">
<md-button class="md-raised md-primary" v-on:click="getTodos">GET</md-button>
<div>
<md-table v-model="todos" md-card>
<md-table-toolbar>
<h1 class="md-title">Todo List</h1>
</md-table-toolbar>
<md-table-row slot="md-table-row" slot-scope="{ item }">
<md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
<md-table-cell md-label="TITLE">{{ item.title }}</md-table-cell>
<md-table-cell md-label="USER ID">{{ item.userId }}</md-table-cell>
<md-table-cell md-label="COMPLETED">{{ item.completed }}</md-table-cell>
</md-table-row>
</md-table>
</div>
<div>
<ul>
<li v-for="todo in todos">{{todo.title}}</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
<script>
Vue.use(VueMaterial.default)
new Vue({
el: '#app',
data: {
todos: []
},
methods: {
getTodos: function() {
var vm = this;
axios.get('https://jsonplaceholder.typicode.com/todos/')
.then(function(response) {
console.log(response.data);
vm.todos = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
자세히 보기
결과JSONPlaceholder 사이트는
이렇게 가상의 데이터를 불러와 테스트해 볼수 있는 free online REST API입니다.
https://jsonplaceholder.typicode.com/
JSONPlaceholder - Fake online REST API for testing and prototyping
When to use JSONPlaceholder is a free online REST API that you can use whenever you need some fake data. It can be in a README on GitHub, for a demo on CodeSandbox, in code examples on Stack Overflow, ...or simply to test things locally. Resources JSONPlac
jsonplaceholder.typicode.com
화면 보기(Result 클릭)
구현 화면
'개발 > React' 카테고리의 다른 글
| [vue] vue.js로 todolist 투두리스트 앱 만들기(리팩토링 후) (0) | 2020.11.22 |
|---|---|
| [vue] vue.js로 todolist 투두리스트앱 만들기(리팩토링 전) (0) | 2020.11.20 |
| [vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) (0) | 2020.11.15 |
| [vue] vue.js 기초 정리 요약(pass props/emit event) (0) | 2020.11.10 |
| [react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) (0) | 2020.09.22 |
댓글