Vue.js에서 axios로 적절한 json 데이터를 검색하고 표시

5231 단어 axiosVue.js
Vue.js의 입문으로서 우선은 vue-cli 를 사용하지 않고 js만으로 여러가지 시험해 보고 싶다고 생각한 오늘 요즘.

json 데이터



MyJson 을 사용하여 적절한 Json을 반환하는 URL을 만듭니다.
MyJson은 CORS를 지원하므로 axios에서 직접 액세스해도 괜찮습니다.

웹 서버



Docker에서 httpd의 공식 이미지에서 시작.
docker run --name httpd -d -p 8080:80 -v ${pwd}:/usr/local/apache2/htdocs/ httpd

마운트한 디렉토리에 아래와 같은 파일을 배치한다.

HTML


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="itemContainer">
                <div v-for="result in results" class="item">
                    <div>ID: {{ result.id }}</div>
                    <div>名前: {{ result.name }}</div>
                    <div>値: {{ result.value }}</div>
                </div>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>

CSS


html, body {
    margin: 5px;
    padding: 0;
}

.itemContainer{
    display: flex;
}

.item {
    border: solid;
    margin: 5px;
}

js


var app = new Vue({ 
    el: '#app',
    data: {
        results: []
    },
    mounted () {
        axios
            .get("https://api.myjson.com/bins/1h6kbm")
            .then(response => {this.results = response})
    }
});

브라우저에서 표시


http://localhost:8080/ 방문


axios Interceptors를 사용하여 공통 처리를 만듭니다.
에서 SPA - [6] 서버에서 데이터 검색

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage